當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2025/3/20 HTML 45 豆豆

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

文章目錄

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

傳統網頁布局的三種方式

標準流（普通流、文檔流）

浮動（為什么需要浮動？）

<!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>什么是浮動</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

浮動特性

浮動元素會脫離標準流，可以與普通流的元素相重疊

<!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>浮動特性1</title><style>/* 設置了浮動（float）的元素會：1. 脫離標準普通流的控制（浮）移動到指定位置（動）。2.浮動的盒子不在保留原先的位置 */.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">浮動的盒子</div><div class="box2">標準流的盒子</div> </body></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>浮動元素特性-浮動元素一行顯示</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>

浮動元素具有行內塊特點

<!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>浮動的元素具有行內塊元素特點</title><style>/* 任何元素都可以浮動。不管原先是什么模式的元素，添加浮動之后具有行內塊元素相似的特性。 */span,div {float: left;width: 200px;height: 100px;background-color: pink;}/* 如果行內元素有了浮動,則不需要轉換塊級\行內塊元素就可以直接給高度和寬度 */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>

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

浮動元素與標準流父級搭配使用

浮動案例：小米網頁頭展示布局

<!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>

浮動案例：小米視頻播放展示欄布局

<!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;}/* 這里必須寫 .box .last 要注意權重的問題 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

案例：小米綜合展示頁面

<!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>浮動布局練習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>

常見網頁布局形式

<!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>常見網頁布局</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>

浮動注意點（浮動的盒子只會影響后面的標準流不會影響前面的）

<!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>浮動注意點</title><style>/* 如果一個子元素浮動了,盡量其他盒子也浮動,這樣保證這些子元素一行顯示 */.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>

清除浮動（為什么要清除浮動？）（讓父級盒子能夠自適應浮動的子對象）

<!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>為什么需要清除浮動</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>

如何清除浮動？

額外標簽法（隔墻法）（不常用）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>清除浮動之額外標簽法</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>

父級添加屬性overflow:hidden清除浮動（有缺點，不好用）

<!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>為什么需要清除浮動</title><style>.box {/* 清除浮動 */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偽元素法（額外標簽法升級版，就是代碼較多，但易調用）

<!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>偽元素清除浮動</title><style>.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {/* IE6、7 專有 */*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偽元素法代碼片段

雙偽元素清除浮動法（前后都關門）（常用）

<!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>偽元素清除浮動</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>

雙偽元素清除浮動代碼片段

父級直接調用clearfix即可

清除浮動總結

ps切圖

切圖是指將設計稿切成便于制作成頁面的圖片。切圖用于完成html+css布局的靜態頁面，有利于交互，形成良好的視覺感。通俗來講，把一張設計圖利用到切片工具把自己所需的切成一張張小圖，然后前端開發用DIV+CSS完成靜態頁面書寫，完成CSS布局。

常見圖片格式

圖層切圖

切片切圖

ps插件切圖（cutterman）

css屬性書寫順序

學成在線網站案例

準備工作

<!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; }

頁面布局整體思路（確認版心寬度）

頭部制作（實際開發中導航欄多個鏈接一般使用li+a的方法）

搜索模塊（略）

手動去除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>學車在線首頁</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="#">首頁</a></li><li><a href="#">課程</a></li><li><a href="#">職業規劃</a></li></ul></div><div class="search"><input type="text" value="輸入關鍵詞"><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="#">前端開發 <span> > </span></a></li><li><a href="#">前端開發 <span> > </span> </a></li><li><a href="#">前端開發 <span> > </span> </a></li><li><a href="#">前端開發 <span> > </span> </a></li><li><a href="#">前端開發 <span> > </span> </a></li><li><a href="#">前端開發 <span> > </span> </a></li><li><a href="#">前端開發 <span> > </span> </a></li><li><a href="#">前端開發 <span> > </span> </a></li><li><a href="#">前端開發 <span> > </span> </a></li></ul></div><div class="course"><h2>我的課程表</h2><div class="bd"><ul><li><h4>繼續學習程序語言設計</h4><p>正在學習-使用對象</p></li><li><h4>繼續學習程序語言設計</h4><p>正在學習-使用對象</p></li><li><h4>繼續學習程序語言設計</h4><p>正在學習-使用對象</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 博客系統實戰項目演練</h4><div class="info"><span>高級</span> ? 1125人在學習</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系統實戰項目演練</h4><div class="info"><span>高級</span> ? 1125人在學習</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系統實戰項目演練</h4><div class="info"><span>高級</span> ? 1125人在學習</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系統實戰項目演練</h4><div class="info"><span>高級</span> ? 1125人在學習</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系統實戰項目演練</h4><div class="info"><span>高級</span> ? 1125人在學習</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系統實戰項目演練</h4><div class="info"><span>高級</span> ? 1125人在學習</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系統實戰項目演練</h4><div class="info"><span>高級</span> ? 1125人在學習</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系統實戰項目演練</h4><div class="info"><span>高級</span> ? 1125人在學習</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系統實戰項目演練</h4><div class="info"><span>高級</span> ? 1125人在學習</div></li><li><img src="images/pic.png" alt=""><h4>Think PHP 5.0 博客系統實戰項目演練</h4><div class="info"><span>高級</span> ? 1125人在學習</div></li></ul></div></div><div class="footer"><div class="w"><div class="copyright"><img src="images/logo.png" alt=""><p>學成在線致力于普及中國最好的教育它與中國一流大學和機構合作提供在線課程。<br>? 2017年XTCG Inc.保留所有權利。-滬ICP備15025210號</p><a href="#" class="app">下載APP</a></div><div class="links"><dl><dt>關于學成網</dt><dd><a href="#">關于</a></dd><dd><a href="#">管理團隊</a></dd><dd><a href="#">工作機會</a></dd><dd><a href="#">客戶服務</a></dd><dd><a href="#">幫助</a></dd></dl><dl><dt>關于學成網</dt><dd><a href="#">關于</a></dd><dd><a href="#">管理團隊</a></dd><dd><a href="#">工作機會</a></dd><dd><a href="#">客戶服務</a></dd><dd><a href="#">幫助</a></dd></dl><dl><dt>關于學成網</dt><dd><a href="#">關于</a></dd><dd><a href="#">管理團隊</a></dd><dd><a href="#">工作機會</a></dd><dd><a href="#">客戶服務</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; *//* 注意此地方會層疊 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默認有個邊框需要我們手動去掉 */border: 0;background: url(images/btn.png); } .user {float: right;line-height: 42px;margin-right: 30px;font-size: 14px;color: #666; } /* banner區域 */ .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;/* 浮動的盒子不會有外邊距合并的問題 */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);/* 行高會繼承，會繼承給3個孩子 */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 修改的足夠寬一行能裝開5個盒子就不會換行了 */ .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位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： css设置元素的宽高为整数，为什么有的浏
下一篇： web前端入门学习 css（7）css高