CSS美工体会
1.每一塊都應該有標簽包裹，這樣更好的提供上下文的定位，比如說：頭部就必須有頭部的父標簽和對應的子標簽，父標簽提供相對定位，子標簽絕對定位,用屬性left，right和top進行絕對定位
header{
Position:relative;
}
Header title{
Position:absolute;
}
?
2.父元素一般確定好基本的屬性，高度，定位，超父類應該把基本的字體的屬性設置好，以提供上下文。
?
3.樣式：border-radius , box-shadow: 4px//水平偏移量 4px //垂直偏移量 5px //模糊量 8px //擴展量 #aaa //顏色;
Text-shadow:4px 4px 5px #555;
?
4.一般的文字的標簽的屬性：
Font-family font-weight font-size letter-spacing color line-height
Text-align font-style text-decoration
5.float標簽用于分欄的布局中，有時候可以用于子元素的左右的定位中，導航的菜單中常常用，例如li標簽，但是必須設置寬度
Input{
Float：right；
Width：70px；
}
?
6.動畫：-webkit-transition:2s width;設置轉化 -webkit-font-smoothing：設置平滑的字體
?
7.diplay：block ， inline ， inline-block：收縮包緊列表項
?
8.設置下拉菜單的時候可以用visibility：hidden；或者display：none；
Nav.menu li ul{
Visibility:hidden;
}
.no-csstransitions nav.menu li:hover > ul{
Display:block;
}
?
9.當設置了分欄的左右浮動時，可以用overflow：hidden來包圍浮動的子元素
Section#feature_area{
Overflow:hidden;
}
Section#feature_area article{
Float:left;width:66%
}
?
Section#feature_area aside{
Float:right;width:34%
}
?
10.登錄表單的定位：
.signin section{
Overflow:hidden;
}
.signin section label{
Float:left;
Width:5em
}
.signin section input{
Float:right;
Width:10.5em;
}
?
11.定制項目符號：
#feature_area nav li:before{
Content:””;
Position:absolute;
Height:10px;//設置符號的大小
Width:10px;
}
?
12.彈出層：
Transform:rotate(degree)//旋轉的特效
Transform-origin:left bottom//旋轉的中心點
?
#book_area article aside{
Display:none;//隱藏彈出層
Position:absolute;
Z-index:2;設置彈出層的z軸的優先級
}
?
#book_area article:hover aside{
Display:block;//懸停在封面時顯示彈出層
}
?
13.導航條的設置一般都是設置float:left; overflow:hidden;//強制的包圍子元素；可以在導航條的左邊設置豎線.list li + li a {border-left:1px solid #aaa}
?
14.多級的菜單是通過在li標簽的后面添加ul-li實現的，然后通過父標簽相對定位和子標簽絕對定位來定位
總結
- 上一篇： CSS经验分享
- 下一篇： html css右下角三角形,纯CSS绘