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

相关文章
|
2月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
35 4
|
8月前
|
前端开发
【CSS进阶】巧用伪元素before和after制作绚丽效果(下)
【CSS进阶】巧用伪元素before和after制作绚丽效果(下)
80 0
|
8月前
|
前端开发
【CSS进阶】巧用伪元素before和after制作绚丽效果(上)
【CSS进阶】巧用伪元素before和after制作绚丽效果
75 0
|
8月前
|
前端开发
【CSS进阶】巧用伪元素before和after制作绚丽效果(中)
【CSS进阶】巧用伪元素before和after制作绚丽效果
57 0
|
前端开发
测开学习篇-css
测开学习篇-css
|
前端开发 JavaScript 容器
【CSS畅想】萤星漫舞,我用CSS绘制了一个属于夏日的回忆
用技术实现梦想,用梦想打开创意之门。萤星漫舞,我用CSS绘制了一个属于夏日的回忆
238 1
|
前端开发 程序员
CSS边玩边学,这五个游戏让你对CSS的掌握更进一步!
大帅最近都在研究如何让Web前端学习更加有趣,对新人更加友好,而游戏化(Gamification)是我未来也想要深入的一个重要方向。为此我做了一些调研,发现有不少优秀的玩中学的游戏化内容做得很赞,每一个我都打通关了,此文给大家做一个分享。
382 0
CSS边玩边学,这五个游戏让你对CSS的掌握更进一步!
|
前端开发 JavaScript 程序员
【青训营】- css还只停留在写布局?10分钟带你探索css中更为奇妙的奥秘!(一)
那么在下面的这篇文章中,将带领大家来探索 css 中更为奇妙的奥秘~
【青训营】- css还只停留在写布局?10分钟带你探索css中更为奇妙的奥秘!(一)
|
前端开发 JavaScript 开发者
【青训营】- css还只停留在写布局?10分钟带你探索css中更为奇妙的奥秘!(二)
那么在下面的这篇文章中,将带领大家来探索 css 中更为奇妙的奥秘~
【青训营】- css还只停留在写布局?10分钟带你探索css中更为奇妙的奥秘!(二)
|
前端开发
【CSS进阶】巧用伪元素before和after制作绚丽效果
所谓‘伪元素’,就是本身不存在的页面元素,HTML代码里并没有这样的元素,但在页面显示时,你却能看到这些本来不存在的元素发挥着作用。本文主要探究伪元素beforce和after的常用使用场景。
478 0