web前端入门学习 css(5)(浮动)(ps切图)(css属性书写顺序)(学成在线网站案例)
生活随笔
收集整理的這篇文章主要介紹了
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)?)
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è)面
常見(jiàn)網(wǎng)頁(yè)布局形式
浮動(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
父級(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偽元素法代碼片段
<style>.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {/* IE6、7 專(zhuān)有 */*zoom: 1;} </style>雙偽元素清除浮動(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)代碼片段
<style>.clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;} </style>父級(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)備工作
頁(yè)面布局整體思路(確認(rèn)版心寬度)
頭部制作(實(shí)際開(kāi)發(fā)中導(dǎo)航欄多個(gè)鏈接一般使用li+a的方法)
搜索模塊(略)
手動(dòng)去除button邊框(border:0)
banner橫幅制作
其他略略略,直接看效果圖
index.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)題。
- 上一篇: css设置元素的宽高为整数,为什么有的浏
- 下一篇: margin和padding分别适合什么