web前端(2)：了解CSS和常见的属性(常用选择器+盒子模型+浮动和定位)
生活随笔
收集整理的這篇文章主要介紹了
web前端(2)：了解CSS和常见的属性(常用选择器+盒子模型+浮动和定位)
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文章目錄
- 一、什么是CSS
- 二、CSS的三種樣式及其優(yōu)先級(jí)
- 三、CSS基本選擇器及其優(yōu)先級(jí)
- 四、其他常見(jiàn)的選擇器
- 五、選擇器優(yōu)先進(jìn)階
- 六、css的常見(jiàn)屬性(顏色、背景、字體、邊框）
- 七、內(nèi)間距和外間距
- 八、盒子模型
- 九、文本屬性
- 十、布局屬性
- 1.display
- 2.visibility和display區(qū)別
- 十一、overflow
- 十二、相對(duì)定位、絕對(duì)定位、固定定位及其層級(jí)關(guān)系
- 1.相對(duì)定位
- 2.絕對(duì)定位
- 3.固定定位
- 4.層級(jí)關(guān)系
- 十三、簡(jiǎn)單的百度界面
- 十四、小米商城
一、什么是CSS
- CSS(Cascading Style Sheets)指層疊樣式表;
- CSS是用來(lái)布局和美化網(wǎng)頁(yè)的;
- CSS定義如何顯示HTML元素;
二、CSS的三種樣式及其優(yōu)先級(jí)
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>css的三種寫法樣式</title><!-- -----------內(nèi)嵌式---------------- --><style type="text/css">div{width: 100px;height: 100px;background-color: red;}</style><!-- -----------外鏈?zhǔn)?--------------- --><link rel="stylesheet" type="text/css" href="./css/1.css"> </head> <body><!-- -----------行內(nèi)式---------------- --><div style="width: 100px;height: 100px;background-color: green"></div> </body> </html>1.css
div{width: 500px;height: 300px;background: yellow; }注意優(yōu)先級(jí)：對(duì)于三種樣式的css，我們采用就近原則，相同屬性使用離標(biāo)簽最近的css，不同屬性的也使用最近的css
三、CSS基本選擇器及其優(yōu)先級(jí)
①css三種基本選擇器：標(biāo)簽選擇器、ID選擇器、類選擇器
| 標(biāo)簽選擇器 | 標(biāo)簽名 | 通過(guò)標(biāo)簽名來(lái)查找元素，影響范圍最大，很少單獨(dú)使用 |
| ID選擇器 | # ID | 通過(guò)元素標(biāo)簽的id屬性值來(lái)獲取元素,id屬性值不能重復(fù)，一個(gè)id值在一個(gè)html文件只出現(xiàn)一次，因此影響范圍較小 |
| 類選擇器 | .類名 | 一個(gè)標(biāo)簽的class值屬性可以有多個(gè)值，一個(gè)class屬性的值可以被多個(gè)標(biāo)簽使用，影響范圍在標(biāo)簽選擇器和id選擇器之間 |
②三種選擇器的優(yōu)先級(jí)
- 標(biāo)簽選擇器<類選擇器<id選擇器
- 誰(shuí)的影響范圍大誰(shuí)的優(yōu)先級(jí)小
- 相同屬性按照優(yōu)先級(jí)使用，不同屬性也按照優(yōu)先級(jí)
四、其他常見(jiàn)的選擇器
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>關(guān)系選擇器</title><style type="text/css">/*------后代選擇器 設(shè)置.wrap內(nèi)的所有p標(biāo)簽的樣式*/.wrap p{color: red;}/*----子選擇器 設(shè)置.wrap的子元素的p的標(biāo)簽-----*/.wrap>p{color: blue;}/*--------并集選擇器-----*/.wrap>span,span{color:pink;}/*------------偽元素選擇器 hover-------*/.box{width: 100px;height: 100px;background-color: red}.box:hover{width: 300px;height: 300px;background-color: green}/*-------------偽元素選擇器----------*//*在box內(nèi)部的前邊插入一個(gè)字符*/.box:before{content: '你';}/*在box內(nèi)部的后邊插入一個(gè)字符*/.box:after{content: '呀';}</style> </head> <body><!-- 1.后代選擇器：選擇符 空格選擇指定標(biāo)簽內(nèi)的所以后代，忽略層級(jí)關(guān)系2.子選擇器：選擇符>只選擇標(biāo)簽內(nèi)的兒子后代3.并集選擇器：選擇符,一次性給多個(gè)元素設(shè)置相同的樣式4.偽類選擇器.類名：hover 屬性可以冬天改變5.偽元素選擇器.類名：before{content：改變}.類名：after{content：改變}--><div class="wrap"><div class="inner"><p>我是inner里的p</p></div><p>我是wrap里的p</p><span>我是wrap內(nèi)部的span</span></div><p>我是最外層的p</p><span>我是最外邊的span</span><div class="box">鼠標(biāo)上來(lái)試試</div> </body> </html>
偽類選擇器鼠標(biāo)移上后：
五、選擇器優(yōu)先進(jìn)階
實(shí)際上，每個(gè)選擇器對(duì)應(yīng)的權(quán)值都不相同：
- 行間式 ：權(quán)值1000
- id選擇器 ：權(quán)值100
- 類選擇器 ：權(quán)值10
- 標(biāo)簽選擇器：權(quán)值1
對(duì)于多個(gè)選擇器并存，我們將每個(gè)樣式對(duì)應(yīng)的權(quán)值相加，誰(shuí)的權(quán)值大，使用誰(shuí)的效果
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>選擇器優(yōu)先級(jí)進(jìn)階</title><style type="text/css">#idd p{/*權(quán)值100+1*/color: red}.cla p{/*權(quán)值10+1*/color: green}</style> </head> <body><div id='idd' class="cla"><p>哈啊哈</p></div> </body> </html>六、css的常見(jiàn)屬性(顏色、背景、字體、邊框）
1.顏色屬性
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>CSS的常用屬性</title><style type="text/css">.box{width: 300px;height: 300px;/*十六進(jìn)制顏色*//*background-color:#ff0000;紅色*//*簡(jiǎn)寫*//*background-color: #00f;*/ /*十進(jìn)制顏色*//*background-color: rgb(255,0,0);*//*帶透明度的顏色*/background-color: rgba(100,100,100,0.1);}</style> </head> <body><!-- 1.css的顏色表示方式：①英語(yǔ)單詞②十六進(jìn)制的顏色(兩個(gè)為一組：紅綠藍(lán)，每組相同的可以簡(jiǎn)寫)③十進(jìn)制的顏色（由三個(gè)進(jìn)制數(shù)字來(lái)表示最終顯示顏色）rgb(紅，綠，藍(lán))其中每個(gè)的取值范圍為0-255或者0%-100%④帶透明度的顏色rgba(紅色，綠色，藍(lán)色，透明度)其他不變，另外一個(gè)為0-1之間--><div class="box"></div> </body> </html>2.背景屬性
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>背景屬性</title><style type="text/css">/*----------背景圖片------------*/.box{width: 400px;height: 400px;border: 1px solid red;background-image: url(./img/徐坤籃球圖.jpg);/*圖片不會(huì)重復(fù)*/background-repeat: no-repeat;/*圖片坐標(biāo)*/background-position: 5px 5px;/*百分百在框里*/background-size: 100% 100% }/*簡(jiǎn)寫*/.box1{width: 400px;height: 400px;border: 1px solid red;/*最后是向右，向下偏移的量,注意是圖片移動(dòng)，不是框移動(dòng)*/background: url(./img/徐坤籃球圖.jpg) no-repeat 10px 10px; }/*注意：簡(jiǎn)寫不可和分開(kāi)寫混用，但是background-size是單獨(dú)設(shè)置*//* 練習(xí) */.item{width: 50px;height: 50px;border: 1px solid red;background: url(./img/0.jpg) no-repeat -4px -104px;}.item:hover{background: url(./img/0.jpg) no-repeat -345px -270px;}</style> </head> <body><div class="box"></div><div class="box1"></div><div class="item"></div> </body> </html>3.字體屬性
<!DOCTYPE html><html><head><meta charset="utf-8"><title>字體屬性</title><style type="text/css">/*默認(rèn)字體大小 16px*/.box{/*大小*/font-size: 50px;/*加粗*/font-weight: bold;/*字體①所使用的電腦如果沒(méi)此字體，則使用默認(rèn)字體②如果第一個(gè)沒(méi)有，則使用第二個(gè)字體③如果字體由多個(gè)單詞組成，需要加引號(hào)*/font-family: 楷體,宋體;/*顏色*/color: blue;/*字體樣式 italic傾斜，normal不傾斜*/font-style: italic;}</style></head><body><div class="box">蔡徐坤，打籃球真棒！</div></body></html>4.邊框?qū)傩?/strong>
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>邊框?qū)傩?span id="ozvdkddzhkzd" class="token tag"></title><style type="text/css">.item{width: 200px;height: 200px;/*簡(jiǎn)寫，設(shè)置四個(gè)邊框粗細(xì)，樣式，顏色*//*border: 1px solid red;*//*單獨(dú)設(shè)置*//*solid 實(shí)線 dotted 點(diǎn)狀線 dashed虛線*/border-top: 1px solid red;border-bottom: 2px dotted black;border-left: 3px groove green;border-right: 4px dashed yellow;}</style> </head> <body><div class="item"></div> </body> </html>七、內(nèi)間距和外間距
1.內(nèi)間距
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>內(nèi)間距</title><style type="text/css">/*設(shè)置元素*/.box{width: 200px;height: 200px;background: #e91e7a;/*非簡(jiǎn)寫*//*padding-top: 10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;*//*簡(jiǎn)寫,四個(gè)值-遵循上右下左*//*padding:20px 10px 30px 40px;*//*簡(jiǎn)寫，三個(gè)值-遵循上，(左右），下*//*padding: 20px 30px 40px*//*簡(jiǎn)寫，兩個(gè)值-遵循（上下），（左右）*/padding:20px 30px;/*簡(jiǎn)寫，一個(gè)值-四個(gè)值一樣*//*padding: 30px;*/}</style> </head> <body><!-- 注意，寫了內(nèi)邊距屬性，屬性值得大小會(huì)改變 --><div class="box">1</div> </body> </html>2.外間距
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>外間距</title><style type="text/css">.box{width:200px;height: 300px;background: red;}/*.item{width:200px;height: 300px;background: blue;border: 1px solid red;margin-top: 10px;margin-bottom: 10px;margin-right: 20px;margin-left: 30px;*//*水平自適應(yīng)居中*//*margin: 20px auto;*//*margin為負(fù)值，可以應(yīng)用于邊框的合并*/.item1,.item2{width: 200px;height: 200px;border: 10px solid red;}.item2{margin-top: -10px;}}</style> </head> <body><!-- border是外邊框距離外部元素距離簡(jiǎn)寫和內(nèi)間距寫法一樣--><!-- <div class="box">1</div><div class="item">2</div> --><div class="item1"></div><div class="item2"></div> </body> </html>八、盒子模型
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>盒子模型</title><style type="text/css">*{margin:0px;padding: 0px;}.box1{width: 100px;height: 100px;background: yellow;}/*但是會(huì)改變?cè)瓉?lái)定義的大小*/.box2{width: 100px;height: 100px;background: yellow;border: 20px solid green;/*自動(dòng)按原來(lái)的大小計(jì)算*/box-sizing: border-box;}/*但是會(huì)改變?cè)瓉?lái)定義的大小*/.box3{width: 100px;height: 100px;background: yellow;border: 20px solid green;padding: 20px;/*自動(dòng)按原來(lái)的大小計(jì)算*/box-sizing: border-box;}</style> </head> <body><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div> </body> </html>九、文本屬性
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>文本屬性</title><style type="text/css">.item{width: 200px;height: 200px;border: 1px solid red;/*設(shè)置首行縮進(jìn)*/text-indent: 32px;/*文本水平對(duì)齊方式，一般用于單行文本*/text-align: center;/*添加下劃線*/text-decoration: underline;/*添加上劃線*/text-decoration: overline;/*添加刪除線*/text-decoration: line-through;/*去除文本的劃線*/text-decoration: none;/*設(shè)置行高，設(shè)置于行與行之間的間距*/line-height: 30px;}/*練習(xí)題*/.item2{width: 400px;height: 54px;border-top:1px solid red; border-bottom: 3px solid #666;font-size: 20px;font-weight: bold;font-family: 雅黑;line-height: 50px;text-indent: 30px;box-sizing: border-box;}</style> </head> <body><div class="item">床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉(xiāng)。</div><br><br><div class="item2">新聞列表</div> </body> </html>十、布局屬性
1.display
<!DOCTYPE html> <html> <head><title>布局屬性</title> </head> <body><!-- ------------布局屬性-------------display：(規(guī)定元素以哪種元素類型展示)none---------隱藏block--------塊元素：會(huì)自動(dòng)換下一行inline-------行元素：不會(huì)自動(dòng)換行，無(wú)高寬屬性inline-block-行內(nèi)塊：不會(huì)自動(dòng)換行，還具有高寬屬性一般情況下不會(huì)將塊元素轉(zhuǎn)換為行內(nèi)元素--><style type="text/css">*{margin:0;padding:0;list-style:none;}/* ul{width:400px;border:1px solid red;}*/ul li{margin-top: 10px;width:100px;height:50px;border:1px solid pink;text-align:center;line-height: 50px;display:inline-block;box-sizing: border-box;background:#c4c4c4;}.item{/*margin-left:-6px;*/}ul li:hover{background-color:pink;}.inner{height:300px;background-color:green; display:none;}a{text-decoration: none;}/*注意： inner 必須是li直接子元素 */ul li:hover .inner{display:block;}</style> </body><!-- 練習(xí)商城導(dǎo)航欄 --><ul><li><a href="">國(guó)產(chǎn)</a><div class="inner"></div></li><li class="item"><a href="">歐美</a><div class="inner"></div></li><li class="item"><a href="">日韓</a><div class="inner"></div></li><li class="item"><a href="">動(dòng)漫</a><div class="inner"></div></li></ul> </html>2.visibility和display區(qū)別
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;}.item1{background: yellow;/*隱藏后不再占據(jù)位置*//*display: none;*//*隱藏后還會(huì)占據(jù)位置*/visibility: hidden;}.item2{background: red}</style> </head> <body><div class="item1">1</div><div class="item2">2</div> </body> </html>十一、overflow
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>overflow</title><style type="text/css">/*overflow:超出部分visable：不隱藏auto：多出的部分自動(dòng)加滾動(dòng)條hidden：超出部分隱藏scroll：加個(gè)滾動(dòng)條，無(wú)論元素有沒(méi)有*/div{height: 200px;width: 200px;overflow: auto;}</style> </head> <body><div><img src="../day02_css/課堂回顧練習(xí)/摩洛哥.png"></div> </body> </html>十二、相對(duì)定位、絕對(duì)定位、固定定位及其層級(jí)關(guān)系
1.相對(duì)定位
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>相對(duì)定位</title><style type="text/css">*{margin: 0;padding: 0;}.wrap{width: 600px;height: 600px;border: 3px solid green;}.item1{width: 200px;height: 200px;background: #f33;/*相對(duì)定位*/position: relative;top: 200px;left: 400px;}.item2{width: 200px;height: 200px;background: #00f;}</style> </head> <body><!-- 相對(duì)定位不會(huì)脫離的文檔流參考點(diǎn)是原來(lái)位置的（0,0）點(diǎn)相對(duì)于原來(lái)的元素進(jìn)行便宜--><div class="wrap"><div class="item1"></div><div class="item2"></div></div> </body> </html>2.絕對(duì)定位
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>絕對(duì)定位</title><style type="text/css">*{margin:0;padding:0;}.wrap{width: 400px;height: 400px;border: 1px solid red;margin-left: 100px;/*position: relative;*/}.item1,.item2{width: 100px;height: 100px;}.item1{background: yellow;/*絕對(duì)定位*/position: absolute;top: 200px;left: 200px;}.item2{background: blue;}</style> </head> <body><!-- --------絕對(duì)定位--------1.會(huì)脫離文檔流2.默認(rèn)以body的(0,0)進(jìn)行參考偏移3.如果父元素有定位屬性，那么絕對(duì)定位會(huì)以父元素的(0,0)進(jìn)行偏移4.如果父元素?zé)o定位屬性，那么就依次找祖先元素，直到某個(gè)最小有定位元素就按此元素的(0,0),否則會(huì)找到body的(0,0)--><div class="wrap"><div class="item1">1</div><div class="item2">2</div></div> </body> </html>3.固定定位
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>固定定位</title><style>body{height: 2000px;}.item1{width: 100px;height: 50px;text-align: center;line-height: 50px;background-color: green;/*固定定位/綁定定位*/position: fixed;left: : 20px;top: 200px;}</style> </head> <body><!-- 固定定位會(huì)以瀏覽器內(nèi)部的左上角為基點(diǎn)，無(wú)論瀏覽器變大縮小--><div class="item1">回到頂部</div> </body> </html>4.層級(jí)關(guān)系
多種定位，越往后層級(jí)越高
如果想改變，在該層級(jí)元素加z-index：1
誰(shuí)想在誰(shuí)上邊，誰(shuí)的z-index:2值越大即可
十三、簡(jiǎn)單的百度界面
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title><style type="text/css">.box{width: 600px;height: 50px;/*padding: 1px;*/border: 1px solid blue;display: inline-block;}a{color: green;}.but,.opt,.tex{height: 50px;box-sizing: border-box;border: 0px;}.but{height: 50px;width: 100px;margin-left: -5px;color: white;}.opt{width: 60px;}.tex{height: 48px;margin-left: -5px;width: 440px;font-size: 18px;}.pic{width: 148px;height: 48px;display: inline-block;}.div0{width: 1350px;height: 800px; background: rgba(100,100,100,0.1);margin-top: -8px;}.div1{background: white;margin-left: 300px;margin-right: 250px;width: 800px;height: 50px;border: 1px solid rgba(100,150,100,0.2);}</style> </head> <body><div style="margin-left: 70px;margin-top: 20px"><input type="image" style="margin-left: 200px" name="photo" src="baidu.png" class="pic"><div class="box" > <select class="opt" name="info"><option>網(wǎng)頁(yè)</option><option>音樂(lè)</option><option>視頻</option><option>圖片</option><option>小說(shuō)</option><option>貼吧</option></select><input type="text" class="tex" name="sel" placeholder="請(qǐng)輸入搜索信息"><button class="but"style="background: blue">百度一下</button></div><div style="margin-left: 350px;"><a href="">老干媽失火</a><a href="">人民幣破7</a><a href="">母豬護(hù)理</a><a href="">喬蘿莉全網(wǎng)被禁</a><a href="">七彩祥云</a><a href="">人類為文字獻(xiàn)血</a><a href="">2020末日</a></div></div><hr><div class="div0"><div class="div1" style="margin-bottom: 13px;"><p> hao123新聞 人民網(wǎng) 搜狐網(wǎng) 新浪網(wǎng) 網(wǎng)易 中國(guó)日?qǐng)?bào) 人民日?qǐng)?bào) 影視快報(bào) 人人網(wǎng) 百度網(wǎng)</p></div><div class="div1" style="height:190px;margin-bottom: 13px;"><p> 國(guó)產(chǎn)經(jīng)典 新浪微博 歐美快播 騰訊游戲 鳳凰資訊 產(chǎn)后護(hù)理 人民日?qǐng)?bào) 澳門賭場(chǎng) 人人</p><p> 草船借箭 三顧茅廬 三氣周瑜 人人自危 轅門射戟 三英呂布 一個(gè)頂兩 北伐十年 黃蓋挨打</p><hr style="color: rgba(100,150,100,0.2)"><p> 百度貼吧 新浪微博 搜狐熱點(diǎn) 騰訊游戲 鳳凰資訊 產(chǎn)后護(hù)理 人民日?qǐng)?bào) 澳門賭場(chǎng) 人人</p><p> 草船借箭 三顧茅廬 三氣周瑜 人人自危 轅門射戟 三英呂布 一個(gè)頂兩 北伐十年 黃蓋挨打</p></div><div class="div1" style="height:390px;"><p> <a href="">視頻</a> 新浪微博 搜狐熱點(diǎn) 騰訊·游戲 鳳凰資訊 產(chǎn)后護(hù)理 人民日?qǐng)?bào) 澳門賭場(chǎng) 人人</p><p> <a href="">新聞</a> 三顧茅廬 三氣周瑜 人人自危 轅門射戟 三英呂布 一個(gè)頂兩 北伐十年 黃蓋挨打</p><p> <a href="">小說(shuō)</a> 新浪微博 搜狐熱點(diǎn) 騰訊游戲 鳳凰資訊 產(chǎn)后·護(hù)理 人民日?qǐng)?bào) 澳門賭場(chǎng) 人人</p><p>  <a href="">音樂(lè)</a> 三顧茅廬 三氣周瑜 人人自危 轅門射戟 三英呂布 一個(gè)頂兩 北伐十年 黃蓋挨打</p><p> <a href="">旅游</a> 新浪·微博 搜狐熱點(diǎn) 騰訊游戲 鳳凰資訊 產(chǎn)后護(hù)理 人民日?qǐng)?bào) 澳門·賭場(chǎng) 人人</p><p> <a href="">購(gòu)物</a> 三顧茅廬 三氣周瑜 人人自危 轅門射戟 三英呂布 一個(gè)頂兩 北伐十年 黃蓋挨打</p><p> <a href="">體育</a> 新浪·微博 搜狐熱點(diǎn) 騰訊游戲 鳳凰資訊 產(chǎn)后護(hù)理 人民日?qǐng)?bào) 澳門賭場(chǎng) 人人</p><p> <a href="">醫(yī)藥</a> 三顧茅廬 三氣周瑜 人人自危 轅門射戟 三英呂布 一個(gè)頂兩 北伐十年 黃蓋挨打</p></div></div> </body> </html>十四、小米商城
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>小米商城</title><style type="text/css">*{margin:0;padding: 0;list-style: none;}/*側(cè)邊導(dǎo)航欄*/.box2{margin-top: 10px;margin-left: 30px;width: 200px;background: rgba(0,0,0,0.3);position: relative;}.ul2 .li2{width: 200px;height: 30px;color: white;font-weight: 600px;padding-top: 20px;padding-bottom: 20px;}.ul2 .li2:hover{background: #ff5722;}.inner2{width: 990px;height: 350px;background: rgba(100,200,200,1);font-size: 60px;text-align: center;position: absolute;top:0;left: 200px;display: none;}.ul2 .li2:hover .inner2{display:block;position: absolute;z-index: 1;}.im{position: absolute;top: 0px;left: 200px;}/*上部導(dǎo)航欄*/.box1{width: 800px;margin-top: 120px;margin-left: 100px;margin-bottom: 10px;}.ul1 .li1{width:100px;height:55px;border:1px solid pink;text-align:center;line-height: 50px;display:inline-block;box-sizing: border-box;background:#c4c4c4;}.li1{margin-left:-6px;}.ul1 .li1:hover{background-color:pink;}.inner1{width: 99px;height:300px;background-color:green; display:none;position: absolute;z-index: 1;}/*注意： inner 必須是li直接子元素 */.ul1 .li1:hover .inner1{display:block;float: left;}.imge{float: left;}.ul1{float: right;}.item1{width: 203px;height: 53px;}</style> </head> <body><div class="box1"><img src="小米.png" class="imga"><ul class="ul1"><li class="li1">小米手機(jī)<div class="inner1">小米5<br>小米6<br>小米7</div></li><li class="li1">紅米手機(jī)<div class="inner1">小米5<br>小米6<br>小米7</div></li><li class="li1">電視<div class="inner1">小米5<br>小米6<br>小米7</div></li><li class="li1">筆記本<div class="inner1">小米5<br>小米6<br>小米7</div></li><li class="li1">家電<div class="inner1">小米5<br>小米6<br>小米7</div></li><li class="li1">路由器<div class="inner1">小米5<br>小米6<br>小米7</div></li></ul></div><hr style="color: black;font-weight: bold;"><div class="box2"><ul class="ul2"><li class="li2"> 手機(jī) 電話卡 ><div class="inner2">這是手機(jī)和電話卡</div></li><li class="li2"> 電視 大盒子 ><div class="inner2">這是電視和大盒子</div></li><li class="li2">  平板 筆記本 ><div class="inner2">這是平板和筆記本</div></li><li class="li2">  出行 穿和戴 ><div class="inner2">這里是出行和穿戴</div></li><li class="li2">  智能 路由器 ><div class="inner2">這里是智能和路由器</div></li> </ul><img src="電視.png" class="im"></div> </body> </html>總結(jié)
以上是生活随笔為你收集整理的web前端(2)：了解CSS和常见的属性(常用选择器+盒子模型+浮动和定位)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： windows应急响应入侵排查思路
- 下一篇： 2017年html5行业报告,云适配发布