< > 3-4 给div命名，使逻辑更加清晰

在上一小节中，我们把一些标签放进<div>里，划分出一个独立的逻辑部分。为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称，这个就像我们每个人都有一个身份证号，这个身份证号是唯一标识我们的身份的，也是必须唯一的。

如下两图进行比较，如果设计师把两个图给你，哪个图你看上去能更快的理解呢？是不是右边的那幅图呢。

语法：

<div  id="版块名称">…</div>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>div标签</title>
</head>
<body>
<div id="hotList">
   <h2>热门课程排行榜</h2>
    <ol>
       <li>前端开发面试心法 </li>
      <li>零基础学习html</li>
       <li>javascript全攻略</li>
    </ol>
</div>
<div id="learningInstructed">
    <h2>web前端开发导学课程</h2>
    <ul>
       <li>网页专业名词大扫盲 </li>
       <li>网站职位定位指南</li>
       <li>为您解密Yahoo网站制作流程</li>
    </ul>
</div>
</body>
</html>

结果：

热门课程排行榜

  1. 前端开发面试心法
  2. 零基础学习html
  3. javascript全攻略

web前端开发导学课程

  • 网页专业名词大扫盲
  • 网站职位定位指南
  • 为您解密Yahoo网站制作流程
posted @ 2017-09-28 17:17  罪恩徒斯  阅读(89)  评论(0)    收藏  举报