在上一小节中，我们把一些标签放进<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="learningInstruted">

    <h2>web前端开发导学课程</h2>

    <ul>

       <li>网页专业名词大扫盲 </li>

       <li>网站职位定位指南</li>

       <li>为您解密Yahoo网站制作流程</li>

    </ul>

</div>

</body>

</html>

给div命名，使逻辑更加清晰的更多相关文章

  1. CSS学习笔记（7）--html页面的CSS、DIV命名规则

    html页面的CSS.DIV命名规则 CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整 ...

  2. html中css、div命名规范

    html中css.div命名规范 1.类class的命名规范示例 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column ...

  3. js弹窗 js弹出DIV,并使整个页面背景变暗

    1.首先写一个遮罩层div,然后再写一个弹窗的div <!-- 遮罩层 --> <div id="cover" style="background: # ...

  4. DIV命名规范

    DIV命名规范 企业DIV使用频率高的命名方法 网页内容类 --- 注释的写法: /* Footer */ 内容区/* End Footer */ 摘要: summary 箭头: arrow 商标:  ...

  5. div 命名规范！ （野路子出来的好好看看）

    DIV命名规范   DIV命名规范 企业DIV使用频率高的命名方法 网页内容类 --- 注释的写法: /* Footer */ 内容区/* End Footer */ 摘要: summary 箭头:  ...

  6. html页面的CSS、DIV命名规则

    CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...

  7. div+css使多行文字垂直居中?

    1.单行文字: 设置height = line-height; 多行文字: 设置 padding, 自己要计算一下? vertical-align: 可以设置垂直居中, 但是只是针对本身就具有 ali ...

  8. css笔记1： html页面的CSS、DIV命名规则

    原地址:http://www.cnblogs.com/rising-fay/archive/2013/02/25/2932592.html CSS命名规则 头:header 内容:content/co ...

  9. 用extern关键字使程序更加清晰

    一.基础研究 之前基于tcc.tlink实现一个新的编译连接工具cc.exe,用到的文件有cs.lib.c0s.obj.main.obj,其中main.obj是我们自己加入的文件,它可以实现开始显示彩 ...

随机推荐

  1. C参数计算

    C‘计算参数时,从右向左压栈的 int a[]={1,3,4}; int * ptr=a; pirntf("%d,%d\n",*ptr,*(++ptr)); 输出都是3:

  2. AlgorithmsI PA2: Randomized Queues and Deques Deque

    本次作业考察利用array 或者linked list 实现规定时间复杂度的queue 和stack, 不能使用java 自带的stack 和queue. 目的是让我们掌握自己设计的函数的复杂度. D ...

  3. Count Primes ——LeetCode

    Description: Count the number of prime numbers less than a non-negative number, n. 题目大意:给一个int,返回小于它 ...

  4. HDOJ(HDU) 2109 Fighting for HDU(简单排序比较)

    Problem Description 在上一回,我们让你猜测海东集团用地的形状,你猜对了吗?不管结果如何,都没关系,下面我继续向大家讲解海东集团的发展情况: 在最初的两年里,HDU发展非常迅速,综合 ...

  5. cf702C Cellular Network

    C. Cellular Network time limit per test 3 seconds memory limit per test 256 megabytes input standard ...

  6. [Locked] Longest Substring with At Most Two Distinct Characters

    Longest Substring with At Most Two Distinct Characters Given a string, find the length of the longes ...

  7. java迭代器demo

    package cn.aust.zyw.demo; import java.util.Iterator; /** * Created by zyw on 2016/2/16. * Iterator模式 ...

  8. ssh日志记录

    上天查看了服务器安全日志,防火墙屏蔽了处理了一些暴力破解ssh密码的ip(其中一个ip地址为北京一家有名的CDN服务提供商),然后删除了所有的/var/log/secure* 日志文件.今天再来查看日 ...

  9. Java Annotation 必须掌握的特性

    什么是Annotation? Annotation翻译为中文即为注解,意思就是提供除了程序本身逻辑外的额外的数据信息.Annotation对于标注的代码没有直接的影响,它不可以直接与标注的代码产生交互 ...

  10. redis学习心得之三-【java操作redis】

    今天主要是讲讲java对redis的操作,来段代码掩饰下基本操作即可明白. java调用你需要下载jedis.jar包 下载网址:https://github.com/xetorthio/jedis/ ...