首页 > 代码库 > 常见CSS与HTML使用误区
常见CSS与HTML使用误区
误区一.多div症
<div class="nav"> <ul> <li><a href="http://www.mamicode.com/home/">Home</a></li> <li><a href="http://www.mamicode.com/about/">About</a></li> <li><a href="http://www.mamicode.com/concact/">Concact</a></li> </ul></div>
简化成如下
<ul class="nav"> <li><a href="http://www.mamicode.com/home/">Home</a></li> <li><a href="http://www.mamicode.com/about/">About</a></li> <li><a href="http://www.mamicode.com/concact/">Concact</a></li> </ul>
误区二.多类class症 注意点class可以应用于页面任意多个元素，非常适合标识内容类型或其他相似的条目
一段新闻（新闻标题、新闻详情内容）类news-head与news-text 多类症表现，不需要这么多的类区分元素样式
<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>
最好使用div（division）代表部分而不是没有语义（大多数人误解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;}用于标识页面上特定元素(比如站点导航、页眉、页脚)而且必须唯一; 也可以用来标识持久结构性元素（如主导航、内容区域）
常见CSS与HTML使用误区
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。