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实现的，然后通过父标签相对定位和子标签绝对定位来定位