最近,对一个新项目的所有页面进行了最后的调整和优化,中间发现了许多问题,在此总结一二,供大家参考指正:
1、HTML标签和属性和属性的语义化。语义化一个是对搜索引擎友好,容易被抓取,这个大家都比较了解;还有一个是标签的语义化对项目建设中人员之间的合作也有很大的帮助,比方说<h1>—<h5> 这是作为标题使用的,在一个项目中,如果有一个统一的规范,哪些地方用h1,哪些地方用h2,h1的css样式是怎样的,这样在在以后页面整合和代码优化的时候,既能让整合人员或者新员工很快的熟悉代码,也能增加css样式的重复使用率,减少代码量。
标签的具体语义,请参考w3cschool里面的xhtml1.0手册:http://www.w3cschool.cn/index-54.html
2、CSS的定义与重复使用。Css命名规范在网上有很多标准,比方头部head、导航nav、底部 footer等,日常使用中基本上也都在这样使用,所以标准没有一个特别统一的,基本上都是以英文的方式main-content或mainContent。在定义样式时,最好使用单独定义样式,
比如,
<div class=”content”>
<div class=”main-content”></div>
<div class=”side-content”></div>
</div>
单独定义样式:.content{width:960px;}
.main-content{width:650px;float:left;}
.side-content{width:300px;float:right;}
而有人习惯使用:.content .main-content{width:650px;float:left;}
.content .side-content{width:300px;float:right;}
单独定义样式的方法可以提高css样式的重复使用率、减少代码量。上面这个例子可能显示不出来单独定义的好处,但是当你嵌套好多标签后,效果就显而易见了。
3、背景图片与页内图片 。背景图片在这是通过css样式定义background的图片,页内图片是使用html中img标签。什么时候使用背景图片,什么使用页内图片?
我的总结是,需要包含有用信息的,与后台数据有关的图片(如产品图片、用户头像、用户等级等)都以页内图片img显示;
不需要包含有用信息的,与后台数据无关的(如背景、图标、按钮等)则需要通过css样式定义background实现,最好使用Css Sprites整合。
原因呢,语义化的充分体现。
4、圆角按钮使用技巧。使用圆角按钮是,如果设置鼠标划过效果的话,背景需要变化,当圆角按钮字数不固定时,应该这样操作:
结构:
<a><span>短按钮</span></a>
<a><span>长按钮长按钮</span></a>
css:
a{float:left;background:url(bg.gif) no-repeat left top;height:28px;overflow:hidden;}
a span{float:left;margin-left:5px; background:url(bg.gif) no-repeat right top;line-height:28px;padding-right:5px;text-align:center;overflow:hidden; cursor:pointer;}
a:hover{background-position:0px -28px;}
a:hover span{background-position:right -28px;color:#df6e37;}
图片bg.gif:(如图片图片bg.gif)
显示效果:(如图片显示效果.gif)
转载自:http://ued.iciba.com/?p=1019
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0061/3792/d839961a-eb4e-3954-b995-0754afff05ac-thumb.gif)
- 大小: 2 KB
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0061/3794/b41d5ad0-4fe3-3fd7-ba37-e70302418d63-thumb.gif)
- 大小: 1.7 KB
分享到:
相关推荐
ssh整合时遇到的问题,里面详细的描述整合时所产生的问题,经过精细挑选,将一些经典实例整合在一起.
信息技术课程整合若干问题.doc
IT厂商渠道整合若干问题的探讨.doc
在birt和ext整合中遇到的问题及解决方案 与大家分享 1.如何将birt放到web项目中 2.Birt中如何使用mdx语言 3.Mdx语言的参数传递 4.Extjs pannel中显示birt报表 5.Birt report viewer 汉化 6.去掉标题栏和...
信息技术与经济管理学科教学整合若干问题研究.docx
通过多年整合flex与spring使用,总结的经常遇到的问题,希望对大家有帮助!
此文档是我再做项目时关于Ueditor整合SpringBoot的一些问题的总结
springboot整合activiti5.22实现页面流程设计项目,可直接启动,自动建表,调用接口http://localhost:8080/models/newModel,创建流程模型后,可直接访问http://localhost:8080/static/modeler.html?modelId=75001...
整合ssm框架时所遇到的问题 note.md
SpringBoot+Mybatis+前端页面 CRUD 整合案例 ,Controller+ Service Mapper +Pojo 四层结构 +前端页面。 逻辑代码全部调通, 非常适合初学者或者快速开发CRUD的兄弟。
整合ssh框架一些常见的错误解决方法,初学者基本都会遇到。
问题与追问 整合与变式 探究性学习--促进学生深度学习的若干路径.pdf
SSM整合所需页面素材,配合博文SSM整合使用
使用Spring整合Struts编写多页面用户注册模块 使用Spring整合Struts编写多页面用户注册模块
煤炭资源整合中的产权问题是影响整合工作推进的突出的法律问题。本文结合被整合煤矿的产权状况,分析了其产权不清的原因,并提出了明晰产权的路径,为兼并重组企业有效整合,防范法律风险提供了解决思路。
spring+springmvc+mybatis 框架整合带登录页面
一道关于项目整合的面试题
整合了struts2 jquery的formValidator表单验证的页面代码, 包含验证用户是否存在,提交表单等
Ehcache 整合Spring 使用页面、对象缓存
关于css图片整合的小工具,解压后直接就可以使用,将所需整合的图片剪裁完成后直接拖入小工具的整合界面,可以自由选择位置进行放置,然后点击生成按钮就可以得到整合后的图,其中会生成一个html文件,打开后就可以...