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让你玩的开心哦。(二)
82 0
|
前端开发
Css进阶>>Css3让你玩的开心哦。(一)
Css进阶>>Css3让你玩的开心哦。(一)
78 0
|
前端开发
测开学习篇-css
测开学习篇-css
|
前端开发 开发者 iOS开发
|
编解码 前端开发 JavaScript
学习css,这一篇足矣(三)
学习css,这一篇足矣
139 0
学习css,这一篇足矣(三)
|
前端开发 索引 容器
学习css,这一篇足矣(二)
学习css,这一篇足矣
111 0
学习css,这一篇足矣(二)
|
Web App开发 前端开发 Java
学习css,这一篇足矣(一)
学习css,这一篇足矣
127 0
学习css,这一篇足矣(一)
|
移动开发 前端开发 HTML5
一行 CSS 代码的魅力
一行 CSS 代码的魅力
314 0
一行 CSS 代码的魅力
|
前端开发 JavaScript
关于 CSS 的零碎知识点
写在前面: 这篇文章是本人学习过程中遇到css的零碎知识点2(就是以前自己不知道的),我都记下来了,需要的朋友可以过来参考下,喜欢的可以点个赞,希望对大家有所帮助。本文的受众是前端小白,大手子可以跳过。 1.scss编译css文件使用中文注释出现乱码: 在文件开头部分加上:@charset "UTF-8"; 注意:这里必须要加在文件开头部分,加在文件中部和结尾部分是无效的。 2.HTML input标签的 maxlength 属性 定义和用法: maxlength 属性规定输入字段的最大长度,以字符个数计。 maxlength 属性与 input type="text" 或 input t
180 0
关于 CSS 的零碎知识点