文档章节

小结一下前端html+css的经验(一)

Rella蕾拉
 Rella蕾拉
发布于 2012/03/15 08:49
字数 1288
阅读 1308
收藏 65

1、不要使用过小的图片做背景平铺,这就是为何很多人都不用 1px 的原因,这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源。

2、无边框,推荐的写法是 border:none; *border:0px; 因为border:0px; 只是定义边框宽度为零,但边框样式、颜色还是会被浏览器解析,占用资源,为了IE浏览器兼容,我通常那么写。。

3、慎用 * 通配符,所谓通配符,就是将 CSS 中的所有标签均初始化,不管用的不用的,过时的先进的,一视同仁,这样,大大的占用资源。要有选择的初始化标签如reset.css中的ul{margin0px;padding:0px},不要用*号,而是写上通常要reset的标签。

4、样式放头上,脚本放脚下。不内嵌,只外链,这是基本的。

5、最好用fireworks处理图片,好像PSfireworks区别不是很大,但是图片多起来就见分晓,参考http://www.th7.cn/Article/pm/fw/201101/20110113222200.html

6、坚决不用 CSS 表达式,css就是css,扯上javascriptexpression进来,不但性能影响了,独立性也不行。

7、使用 引用样式表,而不是通过 @import 导入,引入样式表是加载完css才渲染页面,用户体验比较好,不会出现界面初始化紊乱的现象。

8、知道什么时候用什么图片格式,如:png是压缩比较少的图片格式,很清晰,但IE6不支持PNG-24,却完全支持PNG-8,(如果是不透明的PNG-24,IE6也是完美支持),gif用于要求不高的小图标,兼容性很好,jpg是压缩很多的图片,也是使用最多的……

9、千万不要在 HTML 中缩放图片,放大不好看,缩小占资源。

10、正文字体最好用偶数,12px14px16px,效果非常好。特例,15px

11blockulol 等上下留出至少一倍行距,左侧至少两倍行距,右侧随意。如果给序列表添加float属性,记得一定要清楚浮动。可以是clear:both;也可以是<br clear=”all”/>注意浮动的兼容性。

12、中文标点用全角。英文夹杂在中文中,左右空格,半角。

13、记得定义全局的globle.cssreset.cssgloble定义基本风格,如基本底色、用的比较多的颜色、用的比较多的样式、宽度等。Reset重置基本标签的一些属性。

13、注意超链接点击过后hover样式就不出现的问题,被点击访问过的超链接样式不再具有hoveractive样式了,解决方法是改变CSS属性的排列顺序: L-V-H-A  链接正确顺序 a: link; visited; hover; active;

14IE6浮动标签的margin双倍边距bug问题:加上display:inline解决

15、固定高度自适应,标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-heightIE6 可以这样定义: div { height:auto!important; height:200px; min-height:200px; }

16、定义1px左右高度的容器,IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px

17、怎么样才能让层显示在FLASH之上呢?解决的办法是给FLASH设置透明:

<a href="http://www.chinaz.com/">:</a> <pre lang="html" line="1">

       <param name="wmode" value="transparent" />

      

18、怎样使一个div层居中于浏览器中?

div{position:absolute;top:50%; left:50%; margin:-100px 0 0 -100px;width:200px; height:200px; border:1px solid red;}

19、处理文字经常用的:文字自动换行:word-wrap:break-word;       文字强制同一行:white-space: nowrap;     超出行用“text-overflow: ellipsis; 超出范围隐藏:overflow: hidden;

20、经常用的命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 命名全部使用小写字母,如果需要多个单词,单词间使用“-”分隔,比如user-list

21display:none;隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间.visibility:hidden此属性为隐藏的对象保留其占据的物理空间。

22overflow:hidden;一个比较合理的方法, display:block;/*统一转化为块级元素*/,高度自适应:clear:both;  IE6的双倍边距BUG display:inline

23IE6下图片下方有空隙产生: 设置img display:block 或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom

IE6下这两个层中间怎么有间隙: .right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;

24、水平居中和垂直居中 : //注:html代码前面一定要加上下列w3c声明,否则无法居中:

水平居中:div { width:400px; height:400px; margin:0 auto; }

垂直居中: 设置一个和层高度相同的行间距,div { width:400px; height:400px; line-height:400px;}

© 著作权归作者所有

Rella蕾拉
粉丝 269
博文 28
码字总数 14248
作品 0
长沙
程序员
私信 提问
加载中

评论(12)

打酱油君
打酱油君
很有意思
Jiazz
Jiazz

引用来自“涟漪叶”的评论

引用来自“ljz”的评论

4、样式放头上,脚本放脚下。不内嵌,只外链,这是基本的。


现在访问的这个网站 脚本有内嵌~~外链的脚本也都是放头上~~~ = =!

我一般是这样做的:跟前端效果的简单JS我一般放到头部,也许你该说要注意文档流的读写方式,JS放在文档末尾不影响dom加载速度。个人认为没有太大的影响,而且写在前面head中整洁规范,符合大多数人的习惯,容易寻找,但是类似于:<script src="http://s85.cnzz.com/stat.php?id=3323925&web_id=3323925&show=pic" language="JavaScript"></script> 这种统计型的,或者本地没有访问服务器JS文件,我会放到尾部,因为是带数据形式的。你认为呢?

代码全部丢到JS文件~外链的脚本都是放头上~ jquery 的 初始化~~~呵呵 习惯这么做
Rella蕾拉
Rella蕾拉 博主

引用来自“ljz”的评论

4、样式放头上,脚本放脚下。不内嵌,只外链,这是基本的。


现在访问的这个网站 脚本有内嵌~~外链的脚本也都是放头上~~~ = =!

我一般是这样做的:跟前端效果的简单JS我一般放到头部,也许你该说要注意文档流的读写方式,JS放在文档末尾不影响dom加载速度。个人认为没有太大的影响,而且写在前面head中整洁规范,符合大多数人的习惯,容易寻找,但是类似于:<script src="http://s85.cnzz.com/stat.php?id=3323925&web_id=3323925&show=pic" language="JavaScript"></script> 这种统计型的,或者本地没有访问服务器JS文件,我会放到尾部,因为是带数据形式的。你认为呢?
Jiazz
Jiazz
4、样式放头上,脚本放脚下。不内嵌,只外链,这是基本的。


现在访问的这个网站 脚本有内嵌~~外链的脚本也都是放头上~~~ = =!
小吱
小吱
marker....
西门飞
西门飞
总结的不错 都是些经常能用到的 收藏了
小杨阿哥哥
小杨阿哥哥
写的挺好的,支持!~
无名人士
无名人士
很好,我不是学前端的,但是对这些还是有兴趣,期待还能看到后面的续篇
王道中强流
王道中强流
写得好哇
Rella蕾拉
Rella蕾拉 博主

引用来自“阿酷”的评论

原创吗?让 @红薯 推荐一下~

以前看过别人给我的类似的帖子,我修改下,加上自己的见解,还没完,有空再写,等待后续哈,嘿嘿。
求职:在武汉找一份WEB前端开发的工作!

我有七年多的Web开发经验,用asp+access,asp+sql server开发过上百个企业网站。用PHP+MYSQL开发过咸宁供电公司社会保险综合管理系统,用JSP+ORALCE开发过开武汉供电公司业扩报装查询系统。并...

武汉爱码农
2012/05/25
1K
17
小结一下前端html+css的经验 (四)

1.Line-height 是不错的属性,可以在竖直对齐有很大作用,但是它并不是对所有标签有效,如:img select,此时你可以想到一个属性:vertical-align:middle; 然后 margin-top:-px 2.letter-sp...

Rella蕾拉
2012/06/08
314
0
小结一下前端html+css的经验 (三)

img标签必须要写alt属性,当图片丢失或加载失败不会显示难看的叉叉,对SEO也比较友好。也可以在onerror事件里面指定默认图片地址或隐藏onerror="this.src='默认图片的url地址;this.onerror=n...

Rella蕾拉
2012/03/19
1K
7
业余时间充足,求前端兼职,不求报酬~~

本人在深圳专职前端开发,一年半经验,业余时间充足,求前端兼职,不求报酬,只要项目给力~~ 个人简介: 1. 熟练使用Photoshop,Fireworks等设计软件,常用编程工具为Dreamweaver,Sublime T...

安子落
2012/06/24
2.2K
14
line-height属性遇到的问题

最近在学习html+css基础,这两天在编写页面的时候,发现有时候使用line-height属性,会变成行间距变的很大的情况,在这里写下总结,由于电脑系统过于low,有些图片就稍后在附加,进入正题: ...

BULLEPAO
2017/06/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

使用CSS自定义属性构建骨架屏

写在前面 几天前看到薄荷前端团队分享的《前端骨架屏方案小结》,突然回想起一年前看到的max bock写的《Building Skeleton Screens with CSS Custom Properties》,翻译整理写下出此文,分享...

前端老手
昨天
2
0
Docker常用命令小记

除了基本的<font color="blue">docker pull</font>、<font color="blue">docker image</font>、<font color="blue">docker ps</font>,还有一些命令及参数也很重要,在此记录下来避免遗忘。 ......

程序员欣宸
昨天
4
0
MAT使用-jvm内存溢出问题分析定位

1.MAT简介: MAT 全称 Eclipse Memory Analysis Tools 是一个分析 Java堆数据的专业工具,可以计算出内存中对象的实例数量、占用空间大小、引用关系等,看看是谁阻止了垃圾收集器的回收工作,...

xiaomin0322
昨天
4
0
内网和外网之间的通信(端口映射原理)

首先解释一下“内网”与“外网”的概念: 内网:即所说的局域网,比如学校的局域网,局域网内每台计算机的IP地址在本局域网内具有互异性,是不可重复的。但两个局域网内的内网IP可以有相同的...

Jack088
昨天
5
0
3.深入jvm内核-原理、诊断与优化-4. GC算法和种类

一、GC算法和种类 GC的概念 GC算法 引用计数法 标记清除 标记压缩 复制算法 可触及性 Stop-The-World GC的对象是堆空间和永久区 引用计数法 老牌垃圾回收算法 通过引用计算来回收垃圾 使用者...

hexiaoming123
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部