在上一小节中，我们把一些标签放进<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. codeforces C. k-Tree

    思路:dp[i][j]表示和为i,最大值为j的方案数. #include <cstdio> #include <cstring> #include <algorithm& ...

  2. c#,if 分支语句,条件运算符

    //输入整数a和b, //若a²+b²大于100,则输出a²+b²百位以上数字, //否则输出两数之和 /*Console.Write("请输入整数a:"); int a = in ...

  3. 【HDOJ】3088 WORM

    状态压缩+BFS. /* 3088 */ #include <iostream> #include <cstdio> #include <cstring> #inc ...

  4. java学习之数组（二）

    在上一节中我们讲到了数组的概念,定义,以及在内存当中的表现形式.那么这里我们来说一下,数组的另一种定义方式. 在上一篇当中我们规定是这个样子定义数组的, class ArrDemo { public ...

  5. 【REST API】

    微信公众平台开发者文档 RESTful API 设计最佳实践 登录判断写去接口里 PUT 新建一个资源POST 更新一个资源GET 查看一个资源DELETE 删除一个资源

  6. -_-#【jQuery插件】Colorpicker 颜色选择器

    Spectrum - The No Hassle jQuery Colorpicker (jQuery 插件) Color Picker jQuery plugins (jQuery 插件) colo ...

  7. MFC重绘函数：InvalidateRect(), Invalidate()和UpdateWindow()

    1. 重绘消息 当需要更新或者重绘窗口时,一般系统会发出两个消息WM_PAINT(通知客户区有变化)和WM_NCPAINT(通知非客户区有变化) WM_NCPAINT系统会自己搞定 WM_PAINT消 ...

  8. HDU4003 Find Metal Mineral

    看别人思路的 树形分组背包. 题意:给出结点数n,起点s,机器人数k,然后n-1行给出相互连接的两个点,还有这条路线的价值,要求最小花费 思路:这是我从别人博客里找到的解释,因为很详细就引用了 dp[ ...

  9. 暴力求解——UVA 572(简单的dfs)

    Description The GeoSurvComp geologic survey company is responsible for detecting underground oil dep ...

  10. 芭比娃娃 Barbara

    芭比娃娃(芭比)是20世纪最广为人知及最畅销的玩偶,由Ruth Handler发明,于1959年3月9日举办的美国国际玩具展览会(American International Toy Fair)上首次 ...