Web前端教程-02.05.HTML列表、块和布局

最新推荐文章于 2024-09-11 20:12:18 发布

iot_shijiacheng

最新推荐文章于 2024-09-11 20:12:18 发布

阅读量383

点赞数

分类专栏： Web前端开发文章标签： html web前端

本文链接：https://blog.csdn.net/u012771445/article/details/51712184

版权

Web前端开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

02.HTML5

02.05.HTML列表、块和布局

HTML列表
HTML块
HTML布局

02.05.01.HTML列表

无序列表
- 使用标签：ul、li
- 属性：disc（实体圆）、circle（空心圆）、square
有序列表
- 使用标签：ol、li
- 属性：A、a、l、i、start
嵌套列表
- 使用标签：ul、ol、li
自定义列表
- 使用标签：dl、dt、dd

02.05.02.HTML块

HTML块元素
- 块元素在显示时，通常会以新行开始
- 如：h1、p、ul
HTML内联元素
- 内联元素通常不会以新行开始
- 如：b、a、img
HTML div元素
- div元素也被成为块元素，其主要是组合HTML元素的容器
HTML span元素
- span元素是内联元素，可作为文本的容器

02.05.03.HTML布局

使用div元素布局

布局如下：

<div id="container">
    <div id="header">头部</div>
    <div id="content_menu">内容菜单</div>
    <div id="content_main">内容主体</div>
    <div id="footer">底部</div>
</div>

css样式如下：

body{
    margin: 0px;
}
#container{
    width: 100%;
    height: 680px;
    background-color: darkslategray;
}
#header{
    width: 100%;
    height: 10%;
    background-color: brown;
}
#content_menu{
    width: 30%;
    height: 80%;
    float: left;
    background-color: aqua;
}
#content_main{
    width: 70%;
    height: 80%;
    background-color: chartreuse;
    float: right;
}
#footer{
    width: 100%;
    height: 10%;
    background-color: darkorchid;
    clear: both;
}

实现的效果如下所示：

使用table元素布局

主要代码：

<body marginheight="0px" marginwidth="0px">
    <table width="100%" height="680px" style="background-color: gray">
        <tr>
            <td colspan="2" width="100%" height="10%" style="background-color: aqua">这是头部</td>
        </tr>
        <tr>
            <td width="30%" height="80%" style="background-color: blue">左菜单</td>
            <td width="70%" height="80%" style="background-color: blueviolet">左菜单</td>
        </tr>
        <tr>
            <td colspan="2" width="100%" height="10%" style="background-color: aqua">这是底部</td>
        </tr>
    </table>
</body>

实现的效果如下所示：