在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。

语法：

<div>…</div>

确定逻辑部分：

什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用<div>标签作为容器。

示例:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>div标签</title>

</head>

<body>

    <div>

        <h2>热门课程排行榜</h2>

        <ol>

            <li>前端开发面试心法 </li>

            <li>零基础学习html</li>

            <li>javascript全攻略</li>

        </ol>

    </div>

    <div>

        <h2>最新课程排行</h2>

        <ol>

            <li>版本管理工具介绍—Git篇 </li>

            <li>Canvas绘图详解</li>

            <li>QQ5.0侧滑菜单</li>

        </ol>

    </div>

</body>

</html>

认识div(division)在排版中的作用的更多相关文章

  1. 认识div在排版中的作用

    在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器. 语法: <div>-</div&g ...

  2. ES5与ES6常用语法教程之 ④展开运算符...在数组和对象中的作用

    展开操作符(spread) 展开运算符(spread operator)允许一个表达式在某处展开.展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以 ...

  3. js中!!的作用

    js中!!的作用是: !!一般用来将后面的表达式转换为布尔型的数据(boolean) ===表示类型什么的全部相等(自己写一个if测试一下就好了)!==表示要全部不想等包括类型(一样写一个if)||或 ...

  4. emms指令在MMX指令中的作用

    emms指令在MMX指令中的作用 转自:http://blog.csdn.net/psusong/archive/2009/01/08/3737047.aspx MMX和SSE都是INTEL开发的基于 ...

  5. div a 和 div > a 的区别———后者指作用到div下一级的 a 标签 ，仅一级

    div a 和 div > a 的区别---后者指作用到div下一级的 a 标签 ,仅一级 如: <div> <a href="#">可以作用到< ...

  6. 什么是Zookeeper，Zookeeper的作用是什么，在Hadoop及hbase中具体作用是什么

    什么是Zookeeper,Zookeeper的作用是什么,它与NameNode及HMaster如何协作?在没有接触Zookeeper的同学,或许会有这些疑问.这里给大家总结一下. 一.什么是Zooke ...

  7. 段落排版--中文字间距、字母间距(letter-spacing, word-spacing)

    中文字间隔.字母间隔设置: 如果想在网页排版中设置文字间隔或者字母间隔就可以使用    letter-spacing 来实现,如下面代码: h1{ letter-spacing:50px; } ... ...

  8. SET STATISTICS IO和SET STATISTICS TIME 在SQL Server查询性能优化中的作用

    近段时间以来,一直在探究SQL Server查询性能的问题,当然也漫无目的的查找了很多资料,也从网上的大神们的文章中学到了很多,在这里,向各位大神致敬.正是受大神们无私奉献精神的影响,所以小弟也作为回 ...

  9. WCF技术剖析之十五：数据契约代理（DataContractSurrogate）在序列化中的作用

    原文:WCF技术剖析之十五:数据契约代理(DataContractSurrogate)在序列化中的作用 [爱心链接:拯救一个25岁身患急性白血病的女孩[内有苏州电视台经济频道<天天山海经> ...

随机推荐

  1. JavaScript Book Plan

    1. HTML5 2. Library & Framwork About Performance Tool and Process https://developers.google.com/ ...

  2. jQuery折叠风琴

    这个效果用jQuery做是很方便的,根本不需要搞得很复杂. 网上有些效果DEMO不仅用了jQuery还引用一两个封装文件,真是匪夷所思. 最初想到了toggle: jQuery(document).r ...

  3. 如何用正则匹配后缀名不为.jpg, .css, .js, .html, .htm, .png的文件

    有网友碰到过这样的问题:如何用正则匹配后缀名不为.jpg, .css, .js, .html, .htm, .png的文件,问题详细内容为: 如何用正则匹配后缀名不为.jpg, .css, .js, ...

  4. Struts2 cookie的存取

    /** * Cookieの追加 * @return * @throws Exception */ private void addCookie(String name,String value){ C ...

  5. 字符串（后缀数组||SAM）：NOI2015 品酒大会

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAByIAAALuCAIAAABtq0bwAAAgAElEQVR4nOy9f2wb150vev4boESeln ...

  6. 那些年我用awk时踩过的坑——awk使用注意事项

    由于项目经历原因,经常使用awk处理一些文本数据.甚至,我特意下载了一个windows上的awk:gawk.exe,这样在windows上也能享受awk处理数据的方便性,. 俗话说,"常在河 ...

  7. Spring 基础知识

    Spring架构简单描述 原文:https://www.shiyanlou.com/courses/document/212 Spring 概述 1. Spring 是什么 Spring是一个开源的轻 ...

  8. PHP学习之［第08讲］数据库MySQL基础之增删改查

    一.工具: 1.phpMyAdmin (http://www.phpmyadmin.net/) 2.Navicat (http://www.navicat.com/) 3.MySQL GUI Tool ...

  9. JAVA中的继承和覆盖

    java里面的继承是子类继承父类的一些方法和属性(除private属性和方法之外):对于父类的私有属性和方法子类是没有继承的.可是要想子类也能訪问到父类的私有属性,必须给私有属性以外界訪问的方法接口. ...

  10. linux c 系统报错

    本文中的错误是指在代码编译完全正确程序可运行的情况下,因为没有成功调用程序中的某些系统调用函数而产生的错误.往往这些系统调用函数通过返回值(比如1,0,-1)来说明其是否调用成功,而程序员需要知道详细 ...