CSS浮動(dòng)的用法介紹

發(fā)布時(shí)間：2021-08-06 10:49:27 來源：億速云閱讀：87 作者：chen 欄目：開發(fā)技術(shù)

本篇內(nèi)容主要講解“CSS浮動(dòng)的用法介紹”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS浮動(dòng)的用法介紹”吧!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局效果</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="div1">
        <ul>
            <li><img src="1.jpg"></li>
            <li><img src="2.jpg"></li>
            <li><img src="3.jpg"></li>
        </ul>
        <ul>
            <li><img src="4.jpg"></li>
            <li><img src="5.jpg"></li>
            <li><img src="6.jpg"></li>
        </ul>
        <ul>
            <li><img src="7.jpg"></li>
            <li><img src="8.jpg"></li>
            <li><img src="9.jpg"></li>
        </ul>
    </div>
</body>
</html>

*{
    margin: 0px;
    padding: 0px;
}

li{
    list-style: none;
}

#div1{
    width: 950px;
    height: auto;
    margin: 20px auto;
}

ul{
    width: 250px;
    float: left;
}

到此，相信大家對(duì)“CSS浮動(dòng)的用法介紹”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問一下細(xì)節(jié)

CSS浮動(dòng)的用法介紹

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽