HTML CSS
1.HTML寫結(jié)構(gòu)
HTML : 標(biāo)簽分類:
基本標(biāo)簽 網(wǎng)頁結(jié)構(gòu) <!DOCTYPE html> head title meta link body
文本標(biāo)簽 a p h1~h6 label span strong b i em del
格式標(biāo)簽 br hr
容器標(biāo)簽 div
列表標(biāo)簽 ol ul li
圖片標(biāo)簽 img
表單元素 input
塊元素: h1~h6 div p ul ol li 可以設(shè)置寬高 不與其他元素共行 獨(dú)占一行顯示
行內(nèi)元素: a span b strong em i 寬高由內(nèi)容多少?zèng)Q定,不能手動(dòng)設(shè)置,可以共行顯示
行內(nèi)塊元素: img input 可以設(shè)置寬高 可以共行
2.CSS 設(shè)置樣式 外觀
CSS
引入方式:
行內(nèi) style屬性 <p style=""></p>
文檔內(nèi)嵌 在頭部通過<style></style>
選擇器 (匹配標(biāo)簽應(yīng)用樣式)
標(biāo)簽選擇器 img{} 類選擇器 .leiming{}
后代選擇器 div img{}
交集選擇器 div.box{} 通配符選擇器 *{}
偽類選擇器(針對超鏈接不同狀態(tài)設(shè)置樣式) :link :visited :hover :active
CSS 屬性:
-----樣式外觀
文本屬性:
color:red;(文本顏色) font-size:16px;(字體大小)
text-align:center;(水平方向?qū)R方式)
line-height:30px;(一般用來設(shè)置垂直居中,行高=容器高度)
背景屬性: background-color:red;(背景顏色)
background-image:url(../image/1.jpg);
background-size:cover;(背景圖片大小尺寸)
background-repeat:no-repeat;(背景圖片是否重復(fù)進(jìn)行平鋪)
background-attachment:fixed;(固定背景圖片不跟隨網(wǎng)頁滾動(dòng))
基本設(shè)置: width:200px; height:200px;(設(shè)置寬高)
margin:0px;(元素與元素之間的間距--外邊距)
padding:0px;(元素內(nèi)容與邊框之間的距離--內(nèi)邊距)
其他設(shè)置: border :none;(取消邊框) outline:none;(取消輪廓線)
------元素布局
布局設(shè)置: float:left;(浮動(dòng))
position:relative(absolute); top:100px; left:100px;
兼容問題:
1.行內(nèi)塊元素 水平方向的間隙 : 設(shè)置父元素 font-size:0;
2.行內(nèi)塊元素 垂直方向上對不齊: vertical-align:bottom;
網(wǎng)頁布局模式
Div + CSS
