PHP全栈开发（四）: HTML 学习（2. div 布局）

最新推荐文章于 2025-09-07 00:18:35 发布

weixin_34247155

最新推荐文章于 2025-09-07 00:18:35 发布

阅读量51

点赞数

CC 4.0 BY-SA版权

文章标签： php

原文链接：http://www.cnblogs.com/sparrow32/p/9426782.html

本文详细介绍了HTML中无序列表、有序列表及自定义列表的使用方法，并通过实例展示了如何利用CSS对列表进行样式控制。此外，还深入探讨了区块元素div在网页布局中的应用，包括如何设置div的宽高、背景色以及浮动等属性。

无序列表，有序列表，自定义列表

无序列表是ul表示，每个元素用li表示

有序列表是ol表示，每个元素用li表示

    <ul>
      <li>首页</li><li>通知</li><li>订单</li>
    </ul>

列表默认是纵向排列的，如果需要控制列表的样式，可以使用CSS来进行样式控制

区块元素<div>

使用区块标签来进行布局。古老的对网页进行布局的方法是使用表格，现在我们一般不采用表格来进行布局，而使用区块元素div

<body>

<div id="container" style="width:1200px; height:800px; background-color:gray;">

<div id="header" style="background-color:red;">
管理系统
</div>

<div id="menu-top" style="background-color:green;">
菜单
</div>

<div id="menu-left" style="background-color:yellow; width:100px; height:200px; float:left; ">
菜单
</div>

<div id="content" style="background-color:blue;     width:1000px; height:200px; float:left; ">
内容在这里</div>

</div>

</body>