常见CSS与HTML使用误区详解
发布时间:2017-01-08 14:28:50 作者:Avenstar 我要评论
本文主要介绍了页面布局中常见CSS与HTML使用误区以及解决方法。具有一定的参考价值,下面跟着小编一起来看下吧
误区一.多div症
<div class="nav"> <ul> <li><a href="/home/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/concact/">Concact</a></li> </ul> </div>
上述使用使用多余的div标签现状,就称为“多div症”,理应简化成下
<ul class="nav"> <li><a href="/home/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/concact/">Concact</a></li> </ul>
误区二.多类class症 注意点class可以应用于页面任意多个元素,非常适合标识内容类型或其他相似的条目
一段新闻(新闻标题、新闻详情内容)
<h1 class="news-head">Elastic Layout Example—View Source for the HTML and CSS</h1> <p class="news-head">Lorem ipsum dolor sit amet. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
上述类名使用news-head与news-text 就称为"多类症"表现,不需要这么多的类区分元素样式
最好使用div(division)代表部分而不是没有语义(大多数人误解div无语义!!!),实际上div可以将文档划分为几个有意义的区域.
类名news从而识别整个新闻条目。然后可以使用层叠(cascade)样式识别新闻标题、文本,理应修改如下
<div class="news"> <h1>Elastic Layout Example—View Source for the HTML and CSS</h1> <p>Lorem ipsum dolor sit amet. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>
span 对行内元素进行分组或标识
<h2> Andy wins an Oscar for his cameo in Iron Man</h2> <p>Public and on <span class="date">Februray 22nd, 2009</span> By <span class="author">Harry Knowles</span> </p>
误区三.id使用误区 用于标识页面上特定元素(比如站点导航、页眉、页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航、内容区域)
/*大量的使用id,很难找到唯一名称混乱*/ #andy, #rich, #jeremy, #james-box, #sophie { font-size: 1em; font-weight: bold; border: 1px solid #ccc; } /*只需一个普通类替代它*/ .staff { font-size: 1em; font-weight: bold; border: 1px solid #ccc; }
用于标识页面上特定元素(比如站点导航、页眉、页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航、内容区域)
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
相关文章
- 下面小编就为大家带来一篇关于老式浏览器兼容HTML5和CSS3的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-06-01
- CSS 控制Html页面高度导致抖动,这类由高度导致页面抖动的问题,其实究其根本原因是滚动条是否显示导致的2014-08-11
- 由高度导致页面抖动的问题,其实究其根本原因是滚动条是否显示导致的,具体解决方法如下,有类似情况的朋友可以参考下,希望对大家有所帮助2013-08-23
ie6下关于html编码问题导致js出错css不被应用的解决方法
页面定义是编码utf-8时如果在js文件中放置中文之类的多字节文字且保存编码使用系统默认,如gbk非utf-8时,就会在ie中出现莫名其妙的错误提示2013-07-21- 本篇文章小编为大家介绍HTML标签语义化(含H5) ,有需要的朋友可以参考一下2013-04-08
- 打印属性 打印 HTML 文档总是会出现问题。在 CSS2 中,我们可以借助打印属性让打印 web 内容更容易一些。 属性 描述 值 orphans 设置元素放在页面底部时所允许的最少文2009-07-13
- XHTML是目前国际上倡导的网站标准设计语言,Webjx.com也侧重于这方面,进行了比较全面的介绍。因为XHTML网站设计语言具有的基本特点,这种XHTML CSS模式的网站设计具有一定2009-04-02
- 本文介绍了在网页制作学习中应该注意的使用的一些HTML标签的问题。 HTML已经尝试去除表现和朝向内容发展,导致这样一个基本原理:从表现(CSS)中分离出内2009-04-02
- HTML已经尝试去除表现和朝向内容发展,导致这样一个基本原理:从表现(CSS)中分离出内容意义(HTML),这将会给网页减肥,因为一个表现指令集合(以外部CSS文档的形式)可2008-10-17
- xhtml css页面制作过程中问题的解决方案,说是解决方案应该有点过了,充其量只不过是给刚刚开始学标准页面制作的朋友们的一些小建议,如果讲得不对的地方请多多包涵,当然2008-10-17
最新评论