• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >div/css > 常见CSS与HTML使用误区详解

常见CSS与HTML使用误区详解

作者:Avenstar 字体:[增加 减小] 来源:互联网 时间:2017-06-02

本文主要包含淘宝开店的四大误区,智能制造的误区,鼻唇沟填充误区,美白误区,鉴别和田玉的误区等相关知识,Avenstar 希望在学习及工作中可以帮助到您

误区一.多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标签现状,就称为“多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>
</div>

误区二.多类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>
</div>

上述类名使用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>   
</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>
</div>

误区三.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;
}
</div>

用于标识页面上特定元素(比如站点导航、页眉、页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航、内容区域)

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

</div>

您可能想查找下面的文章:

  • 常见CSS与HTML使用误区详解

相关文章

  • 2017-06-02将一个DIV旋转的某一角度即90度/180度/270度及放大等问题
  • 2017-06-02CSS小技巧 导航中鼠标经过变换文字的实现代码
  • 2017-06-02图片轮换的两边按钮的加载与控制如何通过像素定位
  • 2017-06-02让图片 div居中实现代码
  • 2017-09-02从搭建一个React项目,同时使用git把项目放到GitHub上
  • 2017-06-02单/多行文本添加省略号方法详解
  • 2017-06-02学习DIV+CSS网页布局之混合布局
  • 2017-08-26手机移动端WEB资源总结
  • 2017-06-02CSS中让DIV居中的代码
  • 2017-06-02div整体居中其内容不居中的示例代码

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 经验之谈 CSS网页布局避免滥用DIV元素
    • div style属性中设置其border无效是什么情况如何解决
    • 完全纯css实现div自适应居中兼容IE7 Chrome FireFox
    • div图片垂直居中 如何使div中图片垂直居中
    • div#sidebar{}与#sidebar div{}的区别介绍
    • 旋转任意角度 如何让div旋转一定的角度
    • 让Div实现水平或垂直居中的相关方法
    • Firebug 调试器Web开发者应掌握12个初级使用技巧
    • CSS使用BFC规则布局引发外层div包裹内层div的处理方法
    • easyui合并列,每列大小会相等,如何处理?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有