css代码整理
width：（寬度）
height：（高度）
border：1px solid red；（邊框 ：邊框粗細 顯示 顏色）
border-radius：10deg；（邊框變圓角）
box-shadow：10px 10px 10px red；（div盒子陰影：右側(cè)陰影10px，下側(cè)陰影10px，淡化拉伸陰影10px，陰影顏色；為負值時位置相反）
background-color：（背景顏色）
background-image：url（）（背景圖片）
background-size：（背景尺寸）
background-repeat：no repeat（背景平鋪：不平鋪）
background-position: top / bottom / left/ right;（背景位置：上下左右）
color：（字體顏色）
font-size：（字體尺寸大小）
font-style：（字體格式）
font-weight：（字體寬度）
font-decoration：underline（字體標注：下劃線）
text-align：（字體水平位置）
display：table-cell；（字體垂
vertical-align：???? ；直位置）
<p style=“text-indent：40em；”>（字體首行縮進：40em???? 1em等于兩個字符寬度）
——————————————————————————————————————————————————————————————————————
*{???????? （頁面格式化）
margin：0 auto；?
padding： 0；
}
——————————————————————————————————————————————————————————————————————
.class{???????????????????????????????????????? （對上面的
?????????? clear:both;????????????????????????? 浮動格式
}???????????????????????????????????????????????????? 的影響進
<div class="clear"> </div>???????????? 行清除）
——————————————————————————————————————————————————————————————————————
div：hover{???????????????????????????????????????????????? （當鼠標放上時
????????????????? cursor：pointer；??????? ? ? ???????????? 變小手
?????????????????? background-img：url（）???????????? 更換背景圖片
}
——————————————————————————————————————————————————————————————————————
<ol>??????????????????????? （有 ???????????????????????????????? <ul>??????????????????? （無
??????? <li></li>?????????? ?? 序 ?????????????????????????????????????? <li></li> ? ? ? ? ?? 序
??????? <li></li>?????????? ?? 列 ????????????????????????????????? ? ?? <li></li>??????????? 列
</ol>????????????????????????? 表） ????????????????????????? ??? <ul>?????????????????????? 表）
——————————————————————————————————————————————————————————————————————
div{
????? animation：name ?? 5s?? infinite??? alternate；??? （ 動畫：名稱；運行一遍所需時間；循環(huán)播放；交互播放）
}
@keyframes name{
??????? 0%{??? }???? ? ?? （運行至0%時div的樣式）
????? ? 50%{??? }??? ? ? （運行至50%時div的樣式）
? ?? ?? 100%{??? }????? （運行至100%時div的樣式）
?
}
——————————————————————————————————————————————————————————————————————
?
總結(jié)
- 上一篇： CSS画各种二维图形
- 下一篇： H5_ 多媒体video，autio使用