小结一下前端html+css的经验 (三)
2012-03-19 12:40
513 查看
1. img标签必须要写alt属性,当图片丢失或加载失败不会显示难看的叉叉,对SEO也比较友好。也可以在onerror事件里面指定默认图片地址或隐藏onerror="this.src='默认图片的url地址;this.onerror=null'"
2. 不管什么引用,尽量写绝对路径,类似“../”的相对路径,虽然可以拿出来单独预览,但是对于项目来说,很容易移动文件位置或者他人修改发生问题。例:<link rel="stylesheet" type="text/css" href="/css/colorbox.css"/> background: url(/image/Search.jpg)
3. 尽量不要div嵌套,要知道处理兼容是浪费性能的事情,可以用<p>标签,也挺实用,不是一定要用到“块“级元素的,试试:span、a、lable等小标签,多余的标签就去掉吧,越简洁的代码越高雅。
4. 关于文件引用,每个公司有不同的规定,我的风格是:所有的母板页和非嵌套母板页的.aspx 必须引入 reset.css、 layout.css、Jquery等文件,千万不要在母板页和子页面都引用同一个文件,看起来很不专业。
5. 尽量要抛弃老的、不推荐的标签了哦,除了ul li ol,可以多试试 dd dt dl这些标签,至于font center strong 这些标签,我早就不用了,table布局也少用到,除了后台显示数据。现在W3C只是不推荐这些标签,说不定以后就弃用了哦。
6. IE分不清继承关系和父子关系的差别,全部都是继承关系,请不要重复定义同样的样式属性,css权重分清楚,详见:/article/3462027.html
7. 与内容无关的图片请使用background。时刻记住表现与内容分离,内容注重SEO优化,表现注意用户体验。
8. 绝对定位时使用margin值定位可以达到相对于本身所在位置的定位,这与top,left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。
9. 几种文字的排版:文字倒排(逆时针转90度)"font-family:@宋体; 文字正写竖排,中文竖排,从右往左读"layout-flow: vertical-ideographic;height:399;float:right; 详见:http://www.mini88s.com/news_list.asp?id=968
10. <input style="ime-mode:disabled"> 关闭输入法
11. .在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动:{background-image:url(logo.gif); background-repeat:no-repeat;background-position:center;background-attachment: fixed}
最近公司前端开发除了我都走了,深感压力呀,加班之余,也没什么时间管理博客了,这是前几天总结的,本来想再写多一点,估计最近要忙死了,以后有时间再续吧。。。。
2. 不管什么引用,尽量写绝对路径,类似“../”的相对路径,虽然可以拿出来单独预览,但是对于项目来说,很容易移动文件位置或者他人修改发生问题。例:<link rel="stylesheet" type="text/css" href="/css/colorbox.css"/> background: url(/image/Search.jpg)
3. 尽量不要div嵌套,要知道处理兼容是浪费性能的事情,可以用<p>标签,也挺实用,不是一定要用到“块“级元素的,试试:span、a、lable等小标签,多余的标签就去掉吧,越简洁的代码越高雅。
4. 关于文件引用,每个公司有不同的规定,我的风格是:所有的母板页和非嵌套母板页的.aspx 必须引入 reset.css、 layout.css、Jquery等文件,千万不要在母板页和子页面都引用同一个文件,看起来很不专业。
5. 尽量要抛弃老的、不推荐的标签了哦,除了ul li ol,可以多试试 dd dt dl这些标签,至于font center strong 这些标签,我早就不用了,table布局也少用到,除了后台显示数据。现在W3C只是不推荐这些标签,说不定以后就弃用了哦。
6. IE分不清继承关系和父子关系的差别,全部都是继承关系,请不要重复定义同样的样式属性,css权重分清楚,详见:/article/3462027.html
7. 与内容无关的图片请使用background。时刻记住表现与内容分离,内容注重SEO优化,表现注意用户体验。
8. 绝对定位时使用margin值定位可以达到相对于本身所在位置的定位,这与top,left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。
9. 几种文字的排版:文字倒排(逆时针转90度)"font-family:@宋体; 文字正写竖排,中文竖排,从右往左读"layout-flow: vertical-ideographic;height:399;float:right; 详见:http://www.mini88s.com/news_list.asp?id=968
10. <input style="ime-mode:disabled"> 关闭输入法
11. .在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动:{background-image:url(logo.gif); background-repeat:no-repeat;background-position:center;background-attachment: fixed}
最近公司前端开发除了我都走了,深感压力呀,加班之余,也没什么时间管理博客了,这是前几天总结的,本来想再写多一点,估计最近要忙死了,以后有时间再续吧。。。。
相关文章推荐
- 小结一下前端html+css的经验(一)
- 小结一下前端html+css的经验(二)css选择符分类介绍
- 小结一下前端html+css的经验 (四)
- 总结一下前端面试题之Html和CSS
- 总结一下前端面试题之Html和CSS
- 总结一下前端面试题之Html和CSS
- Web前端技巧_HTML+CSS+JavaScript (个人经验)
- 总结一下前端面试题之Html和CSS
- 前端(第一节课 HTML、CSS 、JAVAscript的概念)
- 前端开发命名规范(html+css+js)
- web前端Html和css基本知识点的梳理
- web前端新手向HTML+CSS+JavaScript实现列表的增删查改【施工中】
- 前端HTML、CSS学习完整笔记(下篇)
- 有哪些关于前端开发技术(HTML、CSS 和 JavaScript 等)的值得推荐的书籍?
- 前端html、CSS快速编写代码插件-Emmet使用方法技巧详解
- 常见前端面试题之HTML/CSS部分
- 后端程序员的前端修养:需要知道的HTML+CSS+Javascript
- 前端面试题之Html和CSS
- web前端之Html和Css应用中的细节问题
- 【前端开发】负值之美:负值在页面布局中的应用(CSS HTML)