重构HTML改善Web应用设计(3)

版权所有,禁止匿名转载;禁止商业使用。

5,正确标记列表

正确标记列表能够提升可访问性,通常我们子啊列表中实现跳转和导航。

大部分浏览器给列表以及列表中的项目都制定特定的外观,通常表现为缩进和项目符号,可能不是你所需要的外观,因此很容易在搭建html的时候忽略它们的存在,放弃使用正确列表标记,而使用语义较差的标签,实现同样的效果。根据需求,你能够通过CSS可以容易地修复这些特定的外观。下面整理了开发中常用的CSS样式修改规则:

/*删除项目符号*/ 
ul{  
   list-style-type:none;         
}  
 
/*载入外部图片自定义项目符号*/ 
ul li {  
     list-style-image : url(images/str.gif);  
}  
 
/*去掉缩进的规则*/ 
ul{  
   margin-left : 0px;  
    padding-left :0px;  
}  
 
/*把项目排成一行*/ 
ul,li{  
   display: inline;  
    margin:0px;  
  padding: 0px;  
}  
 
/*在列表项之间插入逗号*/ 
ul li:after{  
  content : ",";  
}  
 
/*制定项目的宽度,超出时显示省略号*/ 
div.titleholder {  
    font-size: 8pt;  
    width: 100px;  
   text-overflow: ellipsis;  
   overflow: hidden;  
   white-space: nowrap;  
}

然而,lu应用与列表上,blockquote应用在应用上。blockquote与ul相比,整理文本缩进更强大,更准确。

6,为图片添加width和height属性

width和height属性能让浏览器更快地样式化页面并展现给用户。但注意,这样做,对页面的显示速度有提升,但对下载速度并没有帮助。

出于一般项目开发触觉,改变图片的尺寸意味着要修改HTML,否则图片会奇怪地变大变小。如果需要经常改变图片,比如设计页面是,最好是在最后的阶段插入确定的宽度和高度。


0 0