自學(xué)請(qǐng)參考CSS 浮動(dòng)

設(shè)計(jì)原則

1.企業(yè)開發(fā)中什么時(shí)候使用標(biāo)準(zhǔn)流什么時(shí)候使用浮動(dòng)流?
垂直方向使用標(biāo)準(zhǔn)流, 水平方向使用浮動(dòng)流（float）

2.拿到一" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 2018-7-27 css14-網(wǎng)頁(yè)布局（標(biāo)準(zhǔn)，浮動(dòng)）例子

2018-7-27 css14-網(wǎng)頁(yè)布局（標(biāo)準(zhǔn)，浮動(dòng)）例子

時(shí)間：2023-09-27 23:54:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-27 23:54:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

2018-7-27 css14-網(wǎng)頁(yè)布局（標(biāo)準(zhǔn)，浮動(dòng)）例子：轉(zhuǎn)自HTML+CSS - 文集 - 簡(jiǎn)書

自學(xué)請(qǐng)參考CSS 浮動(dòng)

設(shè)計(jì)原則

1.企業(yè)開發(fā)中什么時(shí)候使用標(biāo)準(zhǔn)流什么時(shí)候使用浮動(dòng)流?
垂直方向使用標(biāo)準(zhǔn)流, 水平方向使用浮動(dòng)流（float）

2.拿到一個(gè)很復(fù)雜的界面如何入手?

代碼

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>浮動(dòng)練習(xí)</title> <style> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0;padding:0 } .header{ width: 980px; height: 100px; /*background-color: red;*/ margin:0 auto; } .header .logo{ width: 250px; height: 100px; background-color: pink; float: left; } .header .language{ width: 150px; height: 50px; background-color: skyblue; float: right; } .header .nav{ width: 650px; height: 50px; background-color: purple; float: right; } .content{ width: 980px; height: 400px; /*background-color: green;*/ margin:0 auto; margin-top: 10px; } .content .aside{ width: 320px; height: 400px; background-color: yellow; float: left; } .content .article{ width: 650px; height: 400px; /*background-color: pink;*/ float: right; } .content .article .articleTop{ width: 650px; height: 350px; /*background-color: blue;*/ } .content .article .articleTop .articleTopLeft{ width: 400px; height: 350px; /*background-color: red;*/ float: left; } .content .article .articleTop .articleTopLeft .new1{ width: 400px; height: 200px; background-color: deepskyblue; } .content .article .articleTop .articleTopLeft .new2{ width: 400px; height: 140px; background-color: tomato; margin-top: 10px; } .content .article .articleTop .articleTopRight{ width: 240px; height: 350px; background-color: green; float: right; } .content .article .articleBottom{ width: 650px; height: 40px; background-color: darkgoldenrod; margin-top: 10px; } .footer{ width: 980px; height: 40px; background-color: tomato; margin:0 auto; margin-top:10px; } </style></head><body><div class="header"> <div class="logo"></div> <div class="language"></div> <div class="nav"></div></div><div class="content"> <div class="aside"></div> <div class="article"> <div class="articleTop"> <div class="articleTopLeft"> <div class="new1"></div> <div class="new2"></div> </div> <div class="articleTopRight"></div> </div> <div class="articleBottom"></div> </div></div><div class="footer"></div></body></html>關(guān)注點(diǎn)：

header中紫色的nav盒子，脫標(biāo)后，按2018-7-26 css13-網(wǎng)頁(yè)布局和浮動(dòng)流中<浮動(dòng)元素排序規(guī)則規(guī)則1>應(yīng)該靠右緊貼language同一行顯示。但是此時(shí)它會(huì)擋住header中粉色的logo盒子，參照<浮動(dòng)元素排序規(guī)則規(guī)則3>，父元素的寬度不能顯示所有浮動(dòng)元素，那么最后一個(gè)元素nav會(huì)靠右往前貼靠。所以最終nav顯示在laguage下方，同時(shí)右邊對(duì)齊。



關(guān)鍵詞：布局,標(biāo)準(zhǔn),浮動(dòng),例子

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉