css
来源:互联网 发布:上海大承网络 空中网 编辑:程序博客网 时间:2024/06/05 15:03
1.设置文字垂直居中:设line-height与height相同。2.显示table边框,设table的td为:border:1px solid 颜色。
3.设置table的边框间的距离为0,设table的样式为:border-collapse:collapse。
4.设置网页版权信息:用符号© 要用字体:font-family:arial;
5.用中文字体时,用12像素和14像素的文字,原因是这两个字体大小既保证了可读性看上去还很美观,但是如果作为标题来说,14像素大小的文字有时也显得过于小了,这时候22或者24像素的大小也许更为适合。再比如黑体相较于宋体很少用在正文中,原因也是一般正文14像素大小的黑体可读性不如宋体好,但是如果放在设计某些宣传口号中,黑体也许更为合适。
6.对于英文来说,网页设计中常会涉及到非衬线字体中的Arial,Tahoma,Verdana以及衬线字体中的Georgia字体,这些都是会经常用到的字体。
7.banner文字排列混搭的设计:http://www.chinaui.com/Knowledge/20120920/14021209170006.shtml
①大小和颜色的混搭
②排列组合的混搭
③不同字体之间的混搭
④中英文字体的混搭
文字的倾斜与斜切
让文字形成相对独立的区域
文字变形的魅力
文字的3D应用
生活中的字体元素
犹抱琵琶半遮面
8. 页面模块的常用命名:
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center
登录条:loginbar
标志:logo
广告:banner
页面主体:main
热点:hot
新闻:news
下载:download
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
友情链接:friendlink
页脚:footer
版权:copyright
滚动:scroll
小技巧:tips
9.标题+标题的一个列表:“dl+dt+dd”组合
10.img标签边框的重置:img{border:none;}
11. 当第三层的img转化为块状元素,根据W3C规范,内联元素是不能包含块状元素的,我们还必须把第二层的链接a,也要转化为块状元素,用“display:block; ”。
12.为了保证在网速比较慢的情况下,logo图片还未加载完成之时,先显示有颜色背景,增强用户体验!
13.IE6的双倍边距Bug:display:inline;
14.预览页面后,发现字体变了,但是大小却没有变化,原因是由于浏览器存在默认样式表产生的,所以我们就需要对h1进行重置,如下: h1{font-size:100%;}
15.目的是将做好的小红点图片dot.gif设置为dd的背景且不平铺,距离dd左侧的距离为7px,上面的距离为10px;( background:url(../images/dot.gif) no-repeat 7px 10px;)
16.若想把一个定位属性为absolute的元素定位于其父级元素内,必须满足两个条件:
a.设定TRBL,TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)
b.父级设定Position属性
17.属性为relative的元素可以用来布局页面,属性为absolute的元素用来定位某元素在父级中的位置,既然属性为absolute的元素用来定位某元素在父级中位置,就少不了TRBL(TOP、RIGHT、BOTTOM、LEFT)
18.CSS Hack是解决页面不能很好兼容多种浏览器的技巧方法,是一种方法:
两个最常用的CSS Hack:
a.!important
作用:用来解决一些在IE6上显示的效果与IE7/IE8/IE9/FireFox上的效果不一样的情况。比如有下面的一段代码:
e.g.
#content{
height:960px !important;
height:900px;
}
b.*(星号)
作用:用来解决一些在IE6/IE7上显示的效果与IE8/IE9/FireFox上的效果不一样的情况。比如有下面的一段代码:
e.g.
#content{
height:960px;
*height:900px;
}
19.单图片按钮实例(CSS Sprites、CSS精灵)(http://www.w3cfuns.com/article-264-1-1.html,即一图片有多个按钮图怎么用,链接已无效)
20.对于"text-indent:2em;"属性,只能加在块状元素上面,内联元素是不起作用的。
21.加上之后,会瞬间让你网站的所有链接变得生动起来,只有IE9以上版本,和非IE浏览器才有效果。
a,a * {cursor: pointer;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;}
22.ul { list-style:none; font-size:0; } font-size:0; 是为了去掉 <li>之间由于换行而产生的3px的间距。当然了,解决这个问题方法不只一个,比如:也可以用margin-right:-3px;
23.由于ie6、7不支持display:inline-block, 所以我们用*display:inline; zoom:1;解决这个问题。
24.如果li高度不同或者文字字数不同,用float:left;布局就全乱了,可以利用display:inline-block;完美的解决这个问题。
25.响应式设计的媒体查询(media queries),它可以帮助你根据浏览器尺寸对网页中的元素信息相应的布局调整,当然你还可以借助css3的一些新的特性,添加一些过渡效果。无论你是用框架还是自己写的媒体查询方式,你就会感受到它自身灵活的地方,以及给你的网站带来更加完美的用户体验。
e.g.
@media screen and (max-width: 660px) {
.layout {
width:570px;
}
.box {
width:170px;
}
.box:last-child {
opacity:0;
}
}
26. 在IE6中没有min-width的概念,其默认width就是min-width,所以有时字体过多它会选择撑开容器。
IE6无法定义1px左右高度的容器,是因为默认的行高造成的,解决的方法也有很多, 例如: overflow:hidden zoom:0.08 line-height:1px
使用margin : 0 auto;方法使容器居中依然在IE6中行不通,我们要对其父容器使用
27.
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/W3CfunsLogo.png");
28.浏览器中展示网页文字内容时,文字字体都会按照设计师在css中定义的字体族的顺序来进行显示。什么是字体族?字体族就是你在css代码中看到“font-family”的代码内的一类字体名称,例如下面这行代码:
font-family:"Comic Sans MS","幼圆","黑体",sans-serif;
按照W3C标准,浏览器在解析一行代码时首先会在系统中查找Comic Sans MS字体,如果系统内存在这个字体那么浏览器就会使用Comic Sans MS字体,如果没有的话就接着查找幼圆字体,以此类推直到浏览器可以表达系统存在的字体为止。
29.注意了,“sans-serif”不是某个字体的名称,而是一种在前面叙述的字体都无效时而最终选用的字体,称为浏览器通用字体,它取决于你所用的浏览器默认的通用字体是什么,可能是“Arial”,也有可能是“Helvetica”。
30.网页常用字体通常分为5类:serif(衬线)、sans-serif(无衬线)、monospace(等宽)、fantasy(梦幻)、cuisive(草体),这些通用的名称允许用户代理从相应集合中选择一款字体。
serif 字体在字符笔画末端有叫做衬线的小细节,这些细节在大写字母中特别明显。
sans-serif 字体在字符笔画末端没有任何细节,与serif字体相比,他们的外形更简单。
monospace 字体,每个字母的宽度相等,通常用于计算机相关书籍中排版代码块。
fantasy 和 cuisive 字体在浏览器中不常用,在各个浏览器中有明显的差异。
31.网页常用字体
Sans-serif:
Helvetica: 被评为设计师最爱的字体,Realist风格,简洁现代的线条,非常受到追捧。在Mac下面被认为是最佳的网页字体,在Windows下由于Hinting的原因显示很糟糕。
Arial: Helvetica的「克隆」,和Helvetica非常像,细节上比如R和G有小小差别。如果字号太小,文字太多,看起来会有些累眼。Win和Mac显示都正常
Lucida Family: Lucida Grande是Mac OS UI的标准字体,属于humanist风格,稍微活泼一点。Mac下的显示要比Win下好。
Verdana: 专门为了屏显而设计的字体,humanist风格,在小字号下仍可以清楚显示,但是字体细节缺失严重,最好别做标题。
Tahoma: 也是humanist风格,字体和Verdana有点像,但是略窄一些,counter略小,曾经是Windows的标准字体,Mac 10.5之后默认也有安装。
Trebuchet MS: 为微软设计的一个humanist风格字体,个人觉得个性太过突出,用得不好会不搭。
Serif:
Georgia: 基本上适合正文屏显的衬线字体,非Georgia莫属了。笔画粗重,衬线明线,轮廓较大,小字体显示也很清晰,同时细节还算OK。
Times: Times是为了报纸而设计的,特点是可以在有限的空间塞进去更多的文字,笔画较弱,小字号正文屏显看起来累眼。曾经Engadget改版的时候用了Times作为正文,被骂得很惨之后换成了Georgia。
中文:
宋体:Win最常见的字体,小字体点阵,大字体TrueType,但是大字体并不好看,所以最好别做标题。
微软雅黑:Vista之后新引入的字体,打开Cleartype之后显示效果不错,不开Cleartype发虚。
华文细黑:Mac下的默认中文。
32.一般英文安全字体:Times New Roamn、Arial、Comis Sans MS等
中文当然是楷体、仿宋、宋体、黑特等这些国标字了。
0 0
- CSS
- css
- css
- css
- css
- CSS
- CSS
- css
- css
- CSS
- css
- css
- CSS
- css
- CSS
- css
- CSS
- css
- hibernate查询问题
- 高斯(核)函数简介
- Python--面向对象程序设计
- XPath 详解,总结
- 11.2.0.1在RHEL6.5
- css
- Hdu 1087 Super Jumping! Jumping! Jumping!【最大上升子序列和】
- Android系统截屏的实现分析
- Java学习推荐书目
- 文章标题
- iOS 开发中在导航栏添加多个按钮并改变它的位置
- MFC学习-第2,3课 MFC框架的运行机制
- 【Spring3】(1)初识Spring
- 生成二维码代码