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