CSS美工体会

简介: CSS美工体会

1.每一块都应该有标签包裹,这样更好的提供上下文的定位,比如说:头部就必须有头部的父标签和对应的子标签,父标签提供相对定位,子标签绝对定位,用属性leftrighttop进行绝对定位

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.diplayblock inline inline-block:收缩包紧列表项

8.设置下拉菜单的时候可以用visibilityhidden;或者displaynone

Nav.menu li ul{
Visibility:hidden;
}
.no-csstransitions nav.menu li:hover > ul{
Display:block;
}

9.当设置了分栏的左右浮动时,可以用overflowhidden来包围浮动的子元素

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

相关文章
|
6月前
|
编解码 人工智能 前端开发
「CSS 只要三节课」之熟练
「CSS 只要三节课」之熟练
39 0
|
前端开发
Css进阶>>Css3让你玩的开心哦。(一)
Css进阶>>Css3让你玩的开心哦。(一)
78 0
|
前端开发
Css进阶>>Css3让你玩的开心哦。(二)
Css进阶>>Css3让你玩的开心哦。(二)
82 0
|
前端开发
测开学习篇-css
测开学习篇-css
|
Web App开发 前端开发 Java
学习css,这一篇足矣(一)
学习css,这一篇足矣
129 0
学习css,这一篇足矣(一)
|
前端开发 索引 容器
学习css,这一篇足矣(二)
学习css,这一篇足矣
111 0
学习css,这一篇足矣(二)
|
编解码 前端开发 JavaScript
学习css,这一篇足矣(三)
学习css,这一篇足矣
139 0
学习css,这一篇足矣(三)
|
移动开发 前端开发 HTML5
一行 CSS 代码的魅力
一行 CSS 代码的魅力
315 0
一行 CSS 代码的魅力
|
前端开发 JavaScript 开发者
【青训营】- css还只停留在写布局?10分钟带你探索css中更为奇妙的奥秘!(二)
那么在下面的这篇文章中,将带领大家来探索 css 中更为奇妙的奥秘~
【青训营】- css还只停留在写布局?10分钟带你探索css中更为奇妙的奥秘!(二)
|
前端开发 JavaScript 程序员
【青训营】- css还只停留在写布局?10分钟带你探索css中更为奇妙的奥秘!(一)
那么在下面的这篇文章中,将带领大家来探索 css 中更为奇妙的奥秘~
【青训营】- css还只停留在写布局?10分钟带你探索css中更为奇妙的奥秘!(一)