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

相关文章
|
23天前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
25 4
|
前端开发
Css进阶>>Css3让你玩的开心哦。(二)
Css进阶>>Css3让你玩的开心哦。(二)
86 0
|
前端开发
Css进阶>>Css3让你玩的开心哦。(一)
Css进阶>>Css3让你玩的开心哦。(一)
79 0
|
前端开发
测开学习篇-css
测开学习篇-css
|
Web App开发 前端开发 Java
学习css,这一篇足矣(一)
学习css,这一篇足矣
133 0
学习css,这一篇足矣(一)
|
前端开发 索引 容器
学习css,这一篇足矣(二)
学习css,这一篇足矣
113 0
学习css,这一篇足矣(二)
|
编解码 前端开发 JavaScript
学习css,这一篇足矣(三)
学习css,这一篇足矣
143 0
学习css,这一篇足矣(三)
|
前端开发 数据可视化
|
前端开发 JavaScript 内存技术