2018.07.11學(xué)習(xí)總結(jié)
1.盒子模型margin,padding的傳參
1.1margin的傳參
margin:0; //四個方向都改變
margin:0 10px; //上下為0px;左右為10px
margin:0 10px 20px; //上 0; 左右10px;下20px;
margin:0px 10px 20px 30px;//上右下左
//
margin傳參.PNG
1.2padding的傳參
padding傳參.PNG
同理，padding也是這樣的順序
2.HTML標(biāo)簽的分類及特點
2.1塊標(biāo)簽 div,h1~h6,p,ul,li,dl,dt,dd
1.獨占一行
2.能夠設(shè)置寬高
2.2內(nèi)聯(lián)標(biāo)簽 a,span,em,strong
1.并排顯示
2.不能設(shè)置寬高
3.不能設(shè)置margin-top,margin-bottom
2.3內(nèi)聯(lián)塊 button,img,input
1.并排顯示
2.可以設(shè)置寬高
塊級標(biāo)簽 內(nèi)聯(lián)標(biāo)簽 內(nèi)聯(lián)塊.PNG
3.原理:
塊標(biāo)簽：獨占一行,能夠設(shè)置寬高
div,h1~h6,p,ul,li,dl,dt,dd
display:block;
內(nèi)聯(lián)標(biāo)簽:并排顯示,不能設(shè)置寬高,margin-top,margin-bottom
a,span,em,strong
display:inline
內(nèi)聯(lián)塊:并排顯示,可以設(shè)置寬高
button,img,input
display:inline-block
4.如何讓內(nèi)聯(lián)元素和內(nèi)聯(lián)塊元素水平居中
4.1第一種實現(xiàn)居中
display:block;
margin-left:auto;
margin-top:auto;
第一種實現(xiàn)居中.PNG
4.2第二種實現(xiàn)居中
給父級加text-align:center
第二種方式 居中.PNG
5.css選擇器（除元素選擇器 #id選擇器 .class選擇器 分組選擇器外）
5.1.后代選擇器
div>span{} //選取div所有子元素為span的標(biāo)簽
后代選擇器.PNG
5.2.兄弟選擇器
div+p{}選取緊鄰div之后的第一個兄弟元素
div~p{}選取緊鄰div之后的所有兄弟元素
兄弟選擇器.PNG
5.3.偽類選擇器
div:hover{}
input:focus{}
5.4.偽元素
":before" 偽元素可以在元素的內(nèi)容前面插入新內(nèi)容
p:before{
content:''
}
":after" 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容。
p:after{
content:''
}
偽元素選擇器.PNG
5.5.屬性選擇
div[class='test']{}
6.選擇器的優(yōu)先級別排序
元素選擇器<class選擇器<ID選擇器<!important
選擇器的優(yōu)先級.PNG
7.選擇器的權(quán)重
選擇器的權(quán)重.PNG
8.作業(yè)
<style>
*{margin:0;padding: 0}
.top{
text-align: center;
}
.nav{
background:#A2DBF9;
height:50px;
}
.nav-wrap{
margin-left: auto;
margin-right: auto;
height:50px;
width:1200px;
}
.nav-wrap a{
text-decoration: none;
color:white;
text-align: center;
display: block;
width: 100px;
line-height: 50px;
background-color:#01AEF0;
}
a:hover{
color:#425066;
}
.container{
width:1200px;
margin-left: auto;
margin-right: auto;
}
.container p{
margin-top: 20px;
margin-bottom:20px;
color:#333;
text-indent: 20px; /*首行縮進(jìn)*/
}
.footer{
background-color:#01AEF0;
text-align: center;
line-height:30px;
}
</style>
</head>
<body>
<div class="top">
<img src="images2/logo2.png">;
</div>
<div class="nav">
<div class="nav-wrap">
<a href="#" >關(guān)于遠(yuǎn)大</a>
</div>
</div>
<div class="container">
<img src="images2/about.jpg">
<p>可「跳過」選擇頁面直接進(jìn)入主頁的按鈕設(shè)置避免了功能的強制性，為用戶提供了更多選擇的自由。</p>
<p> 可「跳過」選擇頁面直接進(jìn)入主頁的按鈕設(shè)置避免了功能的強制性，為用戶提供了更多選擇的自由。</p>
<p>可「跳過」選擇頁面直接進(jìn)入主頁的按鈕設(shè)置避免了功能的強制性，為用戶提供了更多選擇的自由。</p>
</div>
<div class="footer">
<p><span>版權(quán)所有@xxxxxx</span><span>技術(shù)支持:xxxxxx</span></p>
<p>copyright@xxx</p>
</div>
</body>
</html>
今天上課時聽的很好，可是做作業(yè)時不知如何將所學(xué)知識應(yīng)用到具體的網(wǎng)頁上，以后應(yīng)該要加強理解，多思考，多實踐。2018 07 11 19:15
