當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）

發(fā)布時(shí)間：2025/3/20 HTML 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

- 傳統(tǒng)網(wǎng)頁(yè)布局的三種方式
- - 標(biāo)準(zhǔn)流（普通流、文檔流）
  - 浮動(dòng)（為什么需要浮動(dòng)？）
- 浮動(dòng)特性
- - 浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)流，可以與普通流的元素相重疊
  - 如果多個(gè)盒子都設(shè)置了浮動(dòng)，則它們會(huì)按照屬性值一行內(nèi)顯示并且頂端對(duì)齊排列
  - 浮動(dòng)元素具有行內(nèi)塊特點(diǎn)
  - 俄羅斯方塊一樣（從右貼著向左靠，）
- 浮動(dòng)元素與標(biāo)準(zhǔn)流父級(jí)搭配使用
- 浮動(dòng)案例：小米網(wǎng)頁(yè)頭展示布局
- 浮動(dòng)案例：小米視頻播放展示欄布局
- 案例：小米綜合展示頁(yè)面
- 常見(jiàn)網(wǎng)頁(yè)布局形式
- 浮動(dòng)注意點(diǎn)（浮動(dòng)的盒子只會(huì)影響后面的標(biāo)準(zhǔn)流不會(huì)影響前面的）
- 清除浮動(dòng)（為什么要清除浮動(dòng)？）（讓父級(jí)盒子能夠自適應(yīng)浮動(dòng)的子對(duì)象）
- 如何清除浮動(dòng)？
- - 額外標(biāo)簽法（隔墻法）（不常用）clear:both
  - 父級(jí)添加屬性overflow:hidden清除浮動(dòng)（有缺點(diǎn)，不好用）
  - after偽元素法（額外標(biāo)簽法升級(jí)版，就是代碼較多，但易調(diào)用）
  - - clearfix:after偽元素法代碼片段
  - 雙偽元素清除浮動(dòng)法（前后都關(guān)門(mén)）（常用）
  - - 雙偽元素清除浮動(dòng)代碼片段
- 清除浮動(dòng)總結(jié)
- ps切圖
- - 常見(jiàn)圖片格式
  - 圖層切圖
  - 切片切圖
  - ps插件切圖（cutterman）
- css屬性書(shū)寫(xiě)順序
- 學(xué)成在線網(wǎng)站案例
- - 準(zhǔn)備工作
  - 頁(yè)面布局整體思路（確認(rèn)版心寬度）
  - 頭部制作（實(shí)際開(kāi)發(fā)中導(dǎo)航欄多個(gè)鏈接一般使用li+a的方法）
  - - 搜索模塊（略）
    - - 手動(dòng)去除button邊框（border:0）
  - banner橫幅制作
  - 其他略略略，直接看效果圖

傳統(tǒng)網(wǎng)頁(yè)布局的三種方式

標(biāo)準(zhǔn)流（普通流、文檔流）

浮動(dòng)（為什么需要浮動(dòng)？）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>什么是浮動(dòng)</title><style>.left,.right {float: left;width: 200px;height: 200px;background-color: pink;}.right {float: right;}</style> </head><body><div class="left">左青龍</div><div class="right">右白虎</div> </body></html>

https://www.bilibili.com/video/BV1pE411q7FU?p=172&spm_id_from=pageDriver

浮動(dòng)特性

浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)流，可以與普通流的元素相重疊

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>浮動(dòng)特性1</title><style>/* 設(shè)置了浮動(dòng)（float）的元素會(huì)：1. 脫離標(biāo)準(zhǔn)普通流的控制（浮）移動(dòng)到指定位置（動(dòng)）。2.浮動(dòng)的盒子不在保留原先的位置 */.box1 {float: left;width: 200px;height: 200px;background-color: pink;}.box2 {width: 300px;height: 300px;background-color: rgb(0, 153, 255);}</style> </head><body><div class="box1">浮動(dòng)的盒子</div><div class="box2">標(biāo)準(zhǔn)流的盒子</div> </body></html>

如果多個(gè)盒子都設(shè)置了浮動(dòng)，則它們會(huì)按照屬性值一行內(nèi)顯示并且頂端對(duì)齊排列

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>浮動(dòng)元素特性-浮動(dòng)元素一行顯示</title><style>div {float: left;width: 200px;height: 200px;background-color: pink;}.two {background-color: purple;height: 249px;}.four {background-color: skyblue;}</style> </head><body><div>1</div><div class="two">2</div><div>3</div><div class="four">4</div> </body></html>

浮動(dòng)元素具有行內(nèi)塊特點(diǎn)

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>浮動(dòng)的元素具有行內(nèi)塊元素特點(diǎn)</title><style>/* 任何元素都可以浮動(dòng)。不管原先是什么模式的元素，添加浮動(dòng)之后具有行內(nèi)塊元素相似的特性。 */span,div {float: left;width: 200px;height: 100px;background-color: pink;}/* 如果行內(nèi)元素有了浮動(dòng),則不需要轉(zhuǎn)換塊級(jí)\行內(nèi)塊元素就可以直接給高度和寬度 */p {float: left;height: 200px;background-color: purple;}</style> </head><body><span>1</span><span>2</span><div>div</div><p>ppppppp</p><p>ppppppp</p> </body></html>

俄羅斯方塊一樣（從右貼著向左靠，）

浮動(dòng)元素與標(biāo)準(zhǔn)流父級(jí)搭配使用

浮動(dòng)案例：小米網(wǎng)頁(yè)頭展示布局

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}.box {margin: 0 auto;width: 1100px;height: 415px;background-color: thistle;}.left {width: 230px;height: 415px;background-color: yellow;float: left;}.right {width: 870px;height: 415px;background-color: teal;float: right;/* 都可以，反正寬度剛好撐滿 *//* float:left; */}</style> </head><body><div class="box"><div class="left"></div><div class="right"></div></div> </body></html>

浮動(dòng)案例：小米視頻播放展示欄布局

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}.box {width: 1226px;height: 299px;background-color: violet;/* 居中顯示 */margin: 0 auto;}.box li {list-style: none;float: left;width: 296px;height: 180px;background-color: teal;margin-right: 14px;}/* 這里必須寫(xiě) .box .last 要注意權(quán)重的問(wèn)題 20 */.box .last {margin-right: 0;}</style> </head><body><ul class="box"><li>1</li><li>2</li><li>3</li><li class="last">4</li></ul> </body></html>

https://www.bilibili.com/video/BV1pE411q7FU?p=179&spm_id_from=pageDriver

案例：小米綜合展示頁(yè)面

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>浮動(dòng)布局練習(xí)3</title><style>.box {width: 1226px;height: 615px;background-color: pink;margin: 0 auto;}.left {float: left;width: 234px;height: 615px;background-color: purple;}.right {float: left;width: 992px;height: 615px;background-color: skyblue;}.right>div {float: left;width: 234px;height: 300px;background-color: pink;margin-left: 14px;margin-bottom: 14px;}</style> </head><body><div class="box"><div class="left">左青龍</div><div class="right"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div></div> </body></html>

常見(jiàn)網(wǎng)頁(yè)布局形式

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>常見(jiàn)網(wǎng)頁(yè)布局</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.top {height: 50px;background-color: gray;}.banner {width: 980px;height: 150px;background-color: gray;margin: 10px auto;}.box {width: 980px;margin: 0 auto;height: 300px;background-color: pink;}.box li {float: left;width: 237px;height: 300px;background-color: gray;margin-right: 10px;}.box .last {margin-right: 0;}/* 只要是通欄的盒子(和瀏覽器一樣寬) 不需要指定寬度 */.footer {height: 200px;background-color: gray;margin-top: 10px;}</style> </head><body><div class="top">top</div><div class="banner">banner</div><div class="box"><ul><li>1</li><li>2</li><li>3</li><li class="last">4</li></ul></div><div class="footer">footer</div> </body></html>

浮動(dòng)注意點(diǎn)（浮動(dòng)的盒子只會(huì)影響后面的標(biāo)準(zhǔn)流不會(huì)影響前面的）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>浮動(dòng)注意點(diǎn)</title><style>/* 如果一個(gè)子元素浮動(dòng)了,盡量其他盒子也浮動(dòng),這樣保證這些子元素一行顯示 */.box {width: 900px;height: 300px;background-color: pink;margin: 0 auto;}.damao {float: left;width: 200px;height: 200px;background-color: purple;}.ermao {float: left;width: 200px;height: 150px;background-color: red;}.sanmao {float: left;width: 300px;height: 240px;background-color: blue;}</style> </head><body><div class="box"><div class="damao">大毛</div><div class="ermao">二毛</div><div class="sanmao">三毛</div></div> </body></html>

清除浮動(dòng)（為什么要清除浮動(dòng)？）（讓父級(jí)盒子能夠自適應(yīng)浮動(dòng)的子對(duì)象）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>為什么需要清除浮動(dòng)</title><style>.box {width: 800px;border: 1px solid blue;margin: 0 auto;}.damao {float: left;width: 300px;height: 200px;background-color: purple;}.ermao {float: left;width: 200px;height: 200px;background-color: pink;}.footer {height: 200px;background-color: black;}</style> </head><body><div class="box"><div class="damao">大毛</div><div class="ermao">二毛</div></div><div class="footer"></div></body></html>

如何清除浮動(dòng)？

額外標(biāo)簽法（隔墻法）（不常用）clear:both

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>清除浮動(dòng)之額外標(biāo)簽法</title><style>.box {width: 800px;border: 1px solid blue;margin: 0 auto;}.damao {float: left;width: 300px;height: 200px;background-color: purple;}.ermao {float: left;width: 200px;height: 200px;background-color: pink;}.footer {height: 200px;background-color: black;}.clear {clear: both;}</style> </head><body><div class="box"><div class="damao">大毛</div><div class="ermao">二毛</div><div class="ermao">二毛</div><div class="ermao">二毛</div><div class="ermao">二毛</div><div class="clear"></div></div><div class="footer"></div></body></html>

父級(jí)添加屬性overflow:hidden清除浮動(dòng)（有缺點(diǎn)，不好用）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>為什么需要清除浮動(dòng)</title><style>.box {/* 清除浮動(dòng) */overflow: hidden;width: 800px;border: 1px solid blue;margin: 0 auto;}.damao {float: left;width: 300px;height: 200px;background-color: purple;}.ermao {float: left;width: 200px;height: 200px;background-color: pink;}.footer {height: 200px;background-color: black;}</style> </head><body><div class="box"><div class="damao">大毛</div><div class="ermao">二毛</div></div><div class="footer"></div></body></html>

after偽元素法（額外標(biāo)簽法升級(jí)版，就是代碼較多，但易調(diào)用）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>偽元素清除浮動(dòng)</title><style>.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {/* IE6、7 專(zhuān)有 */*zoom: 1;}.box {width: 800px;border: 1px solid blue;margin: 0 auto;}.damao {float: left;width: 300px;height: 200px;background-color: purple;}.ermao {float: left;width: 200px;height: 200px;background-color: pink;}.footer {height: 200px;background-color: black;}</style> </head><body><div class="box clearfix"><div class="damao">大毛</div><div class="ermao">二毛</div></div><div class="footer"></div></body></html>

clearfix:after偽元素法代碼片段

雙偽元素清除浮動(dòng)法（前后都關(guān)門(mén)）（常用）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>偽元素清除浮動(dòng)</title><style>.clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}.box {width: 800px;border: 1px solid blue;margin: 0 auto;}.damao {float: left;width: 300px;height: 200px;background-color: purple;}.ermao {float: left;width: 200px;height: 200px;background-color: pink;}.footer {height: 200px;background-color: black;}</style> </head><body><div class="box clearfix"><div class="damao">大毛</div><div class="ermao">二毛</div></div><div class="footer"></div></body></html>

雙偽元素清除浮動(dòng)代碼片段

父級(jí)直接調(diào)用clearfix即可

清除浮動(dòng)總結(jié)

ps切圖

切圖是指將設(shè)計(jì)稿切成便于制作成頁(yè)面的圖片。切圖用于完成html+css布局的靜態(tài)頁(yè)面，有利于交互，形成良好的視覺(jué)感。通俗來(lái)講，把一張?jiān)O(shè)計(jì)圖利用到切片工具把自己所需的切成一張張小圖，然后前端開(kāi)發(fā)用DIV+CSS完成靜態(tài)頁(yè)面書(shū)寫(xiě)，完成CSS布局。

常見(jiàn)圖片格式

圖層切圖

切片切圖

ps插件切圖（cutterman）

css屬性書(shū)寫(xiě)順序

學(xué)成在線網(wǎng)站案例

準(zhǔn)備工作

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css"> </head><body>123 </body></html> *{padding: 0;margin: 0; }

頁(yè)面布局整體思路（確認(rèn)版心寬度）

頭部制作（實(shí)際開(kāi)發(fā)中導(dǎo)航欄多個(gè)鏈接一般使用li+a的方法）

搜索模塊（略）

手動(dòng)去除button邊框（border:0）

banner橫幅制作

其他略略略，直接看效果圖

index.html

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>學(xué)車(chē)在線首頁(yè)</title><link rel="stylesheet" href="style.css"> </head><body><div class="header w"><div class="logo"><img src="images/logo.png" alt=""></div><div class="nav"><ul><li><a href="#">首頁(yè)</a></li><li><a href="#">課程</a></li><li><a href="#">職業(yè)規(guī)劃</a></li></ul></div><div class="search"><input type="text" value="輸入關(guān)鍵詞"><button></button></div><div class="user"><img src="images/user.png" alt="">qq-lilei</div></div><div class="banner"><div class="w"><div class="subnav"><ul><li><a href="#">前端開(kāi)發(fā) <span> > </span></a></li><li><a href="#">前端開(kāi)發(fā) <span> > </span> </a></li><li><a href="#">前端開(kāi)發(fā) <span> > </span> </a></li><li><a href="#">前端開(kāi)發(fā) <span> > </span> </a></li><li><a href="#">前端開(kāi)發(fā) <span> > </span> </a></li><li><a href="#">前端開(kāi)發(fā) <span> > </span> </a></li><li><a href="#">前端開(kāi)發(fā) <span> > </span> </a></li><li><a href="#">前端開(kāi)發(fā) <span> > </span> </a></li><li><a href="#">前端開(kāi)發(fā) <span> > </span> </a></li></ul></div><div class="course"><h2>我的課程表</h2><div class="bd"><ul><li><h4>繼續(xù)學(xué)習(xí) 程序語(yǔ)言設(shè)計(jì)</h4><p>正在學(xué)習(xí)-使用對(duì)象</p></li><li><h4>繼續(xù)學(xué)習(xí) 程序語(yǔ)言設(shè)計(jì)</h4><p>正在學(xué)習(xí)-使用對(duì)象</p></li><li><h4>繼續(xù)學(xué)習(xí) 程序語(yǔ)言設(shè)計(jì)</h4><p>正在學(xué)習(xí)-使用對(duì)象</p></li></ul><a href="#" class="more">全部課程</a></div></div></div></div><div class="goods w"><h3>精品推薦</h3><ul><li><a href="#">jQuery</a></li><li><a href="#">jQuery</a></li><li><a href="#">jQuery</a></li><li><a href="#">jQuery</a></li><li><a href="#">jQuery</a></li></ul><a href="#" class="mod">修改興趣</a></div><div class="box w"><div class="box-hd"><h3>精品推薦</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系統(tǒng)實(shí)戰(zhàn)項(xiàng)目演練</h4><div class="info"><span>高級(jí)</span> ? 1125人在學(xué)習(xí)</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系統(tǒng)實(shí)戰(zhàn)項(xiàng)目演練</h4><div class="info"><span>高級(jí)</span> ? 1125人在學(xué)習(xí)</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系統(tǒng)實(shí)戰(zhàn)項(xiàng)目演練</h4><div class="info"><span>高級(jí)</span> ? 1125人在學(xué)習(xí)</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系統(tǒng)實(shí)戰(zhàn)項(xiàng)目演練</h4><div class="info"><span>高級(jí)</span> ? 1125人在學(xué)習(xí)</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系統(tǒng)實(shí)戰(zhàn)項(xiàng)目演練</h4><div class="info"><span>高級(jí)</span> ? 1125人在學(xué)習(xí)</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系統(tǒng)實(shí)戰(zhàn)項(xiàng)目演練</h4><div class="info"><span>高級(jí)</span> ? 1125人在學(xué)習(xí)</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系統(tǒng)實(shí)戰(zhàn)項(xiàng)目演練</h4><div class="info"><span>高級(jí)</span> ? 1125人在學(xué)習(xí)</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系統(tǒng)實(shí)戰(zhàn)項(xiàng)目演練</h4><div class="info"><span>高級(jí)</span> ? 1125人在學(xué)習(xí)</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系統(tǒng)實(shí)戰(zhàn)項(xiàng)目演練</h4><div class="info"><span>高級(jí)</span> ? 1125人在學(xué)習(xí)</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系統(tǒng)實(shí)戰(zhàn)項(xiàng)目演練</h4><div class="info"><span>高級(jí)</span> ? 1125人在學(xué)習(xí)</div></li></ul></div></div><div class="footer"><div class="w"><div class="copyright"><img src="images/logo.png" alt=""><p>學(xué)成在線致力于普及中國(guó)最好的教育它與中國(guó)一流大學(xué)和機(jī)構(gòu)合作提供在線課程。<br>? 2017年XTCG Inc.保留所有權(quán)利。-滬ICP備15025210號(hào)</p><a href="#" class="app">下載APP</a></div><div class="links"><dl><dt>關(guān)于學(xué)成網(wǎng)</dt><dd><a href="#">關(guān)于</a></dd><dd><a href="#">管理團(tuán)隊(duì)</a></dd><dd><a href="#">工作機(jī)會(huì)</a></dd><dd><a href="#">客戶服務(wù)</a></dd><dd><a href="#">幫助</a></dd></dl><dl><dt>關(guān)于學(xué)成網(wǎng)</dt><dd><a href="#">關(guān)于</a></dd><dd><a href="#">管理團(tuán)隊(duì)</a></dd><dd><a href="#">工作機(jī)會(huì)</a></dd><dd><a href="#">客戶服務(wù)</a></dd><dd><a href="#">幫助</a></dd></dl><dl><dt>關(guān)于學(xué)成網(wǎng)</dt><dd><a href="#">關(guān)于</a></dd><dd><a href="#">管理團(tuán)隊(duì)</a></dd><dd><a href="#">工作機(jī)會(huì)</a></dd><dd><a href="#">客戶服務(wù)</a></dd><dd><a href="#">幫助</a></dd></dl></div></div></div> </body></html>

style.css

* {margin: 0;padding: 0; } .w {width: 1200px;margin: auto; } body {background-color: #f3f5f7; } li {list-style: none; } a {text-decoration: none; } .clearfix:before,.clearfix:after {content:"";display:table; }.clearfix:after {clear:both;}.clearfix {*zoom:1;} .header {height: 42px;/* background-color: pink; *//* 注意此地方會(huì)層疊 w 里面的margin */margin: 30px auto; } .logo {float: left;width: 198px;height: 42px; } .nav {float: left;margin-left: 60px; } .nav ul li {float: left;margin: 0 15px; } .nav ul li a {display: block;height: 42px;padding: 0 10px;line-height: 42px;font-size: 18px;color: #050505; } .nav ul li a:hover {border-bottom: 2px solid #00a4ff;color: #00a4ff; } /* search搜索模塊 */ .search {float: left;width: 412px;height: 42px;margin-left: 70px; } .search input {float: left;width: 345px;height: 40px;border: 1px solid #00a4ff;border-right: 0;color: #bfbfbf;font-size: 14px;padding-left: 15px; } .search button {float: left;width: 50px;height: 42px;/* 按鈕button默認(rèn)有個(gè)邊框需要我們手動(dòng)去掉 */border: 0;background: url(images/btn.png); } .user {float: right;line-height: 42px;margin-right: 30px;font-size: 14px;color: #666; } /* banner區(qū)域 */ .banner {height: 421px;background-color: #1c036c; } .banner .w {height: 421px;background: url(images/banner2.png) no-repeat top center; } .subnav {float: left;width: 190px;height: 421px;background: rgba(0,0,0, 0.3); } .subnav ul li {height: 45px;line-height: 45px;padding: 0 20px; } .subnav ul li a {font-size: 14px;color: #fff; } .subnav ul li a span {float: right; } .subnav ul li a:hover {color: #00a4ff; } .course {float: right;width: 230px;height: 300px;background-color: #fff;/* 浮動(dòng)的盒子不會(huì)有外邊距合并的問(wèn)題 */margin-top: 50px; } .course h2 {height: 48px;background-color: #9bceea;text-align: center;line-height: 48px;font-size: 18px;color: #fff; } .bd {padding: 0 20px; } .bd ul li {padding: 14px 0;border-bottom: 1px solid #ccc; } .bd ul li h4 {font-size: 16px;color: #4e4e4e; } .bd ul li p {font-size: 12px;color: #a5a5a5; } .bd .more {display: block;height: 38px;border: 1px solid #00a4ff;margin-top: 5px;text-align: center;line-height: 38px;color: #00a4ff;font-size: 16px;font-weight: 700; } /* 精品推薦模塊 */ .goods {height: 60px;background-color: #fff;margin-top: 10px;box-shadow: 0 2px 3px 3px rgba(0,0,0, 0.1);/* 行高會(huì)繼承，會(huì)繼承給3個(gè)孩子 */line-height: 60px; } .goods h3 {float: left;margin-left: 30px;font-size: 16px;color: #00a4ff; } .goods ul {float: left;margin-left: 30px; } .goods ul li {float: left; } .goods ul li a {padding: 0 30px;font-size: 16px;color: #050505;border-left: 1px solid #ccc; } .mod {float: right;margin-right: 30px;font-size: 14px;color: #00a4ff; } .box {margin-top: 30px; } .box-hd {height: 45px; } .box-hd h3 {float: left;font-size: 20px;color: #494949; } .box-hd a {float: right;font-size: 12px;color: #a5a5a5;margin-top: 10px;margin-right: 30px; } /* 把li 的父親ul 修改的足夠?qū)捯恍心苎b開(kāi)5個(gè)盒子就不會(huì)換行了 */ .box-bd ul {width: 1225px; } .box-bd ul li {float: left;width: 228px;height: 270px;background-color: #fff;margin-right: 15px;margin-bottom: 15px;} .box-bd ul li img {width: 100%; } .box-bd ul li h4 {margin: 20px 20px 20px 25px;font-size: 14px;color: #050505;font-weight: 400; } .box-bd .info {margin: 0 20px 0 25px;font-size: 12px;color: #999; } .box-bd .info span {color: #ff7c2d; } /* footer 模塊 */ .footer {height: 415px;background-color: #fff; } .footer .w {padding-top: 35px; } .copyright {float: left; } .copyright p {font-size: 12px;color: #666;margin: 20px 0 15px 0; } .copyright .app {display: block;width: 118px;height: 33px;border: 1px solid #00a4ff;text-align: center;line-height: 33px;color: #00a4ff;font-size: 16px; } .links {float: right; } .links dl {float: left;margin-left: 100px; } .links dl dt {font-size: 16px;color: #333;margin-bottom: 5px; } .links dl dd a {color: #333;font-size: 12px; }

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： css设置元素的宽高为整数，为什么有的浏
下一篇： margin和padding分别适合什么