我还想diy点样式- 使用<div>标签自定义块，初识HTML(5)+CSS(3)-升级版教程-慕课网

2-5 我还想diy点样式- 使用<div>标签自定义块

本节编程练习不计算学习进度，请电脑登录imooc.com操作

我还想diy点样式- 使用<div>标签自定义块

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

语法：

<div>…</div>

确定逻辑部分：

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

任务

我来试试：用div标签为网页划分独立的版块

在右部编辑器中使用div标签划分出独立的逻辑部分。（答案有很多种噢，看看谁的最简炼）

注意：这一小节没有正确性验证。

index.html

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>div标签</title>
</head>
 
<body>
    <h2>热门课程排行榜</h2>
    <ol>
        <li>前端开发面试心法 </li>
        <li>零基础学习html</li>
        <li>javascript全攻略</li>
    </ol>
    <h2>最新课程排行</h2>
    <ol>
        <li>版本管理工具介绍—Git篇 </li>
        <li>Canvas绘图详解</li>
        <li>QQ5.0侧滑菜单</li>
    </ol>
</body>
 
</html>

我还想diy点样式- 使用&lt;div&gt;标签自定义块

任务

我还想diy点样式- 使用<div>标签自定义块