HTML列表、块和布局

最新推荐文章于 2023-04-07 17:39:32 发布

离不开丶离开

最新推荐文章于 2023-04-07 17:39:32 发布

阅读量527

点赞数 2

文章标签： HTML

本文链接：https://blog.csdn.net/qq_42585774/article/details/82983284

版权

列表

HTML列表

<ol> 有序列表

<ul> 无序列表

<li> 列表项

<dl> 列表

<dt> 列表项

<dd> 描述

无序列表
1. 使用标签：<ul>、<li>
2. 属性：disc、circle、square
有序列表
1. 使用标签：<ol>、<li>
2. 属性:A、a、l、i、start
嵌套列表
1. 使用标签：<ul>、<ol>、<li>
自定义列表
1. 使用标签：<dl>、<dt>、<dd>

块（注释:<!-- -- >）

HTML块元素
1. 块元素在显示时，通常会以新行开始

如：<h1>、<p>、<ul>

HTML内联元素
内联元素通常不会以新行开始

如：<b>、<a>、<img>

3.HTML<div>元素

<div>元素也被称为块元素，其主要是组合HTML元素的容器

4.HTML<span>元素

<span>元素是内联元素，可作为文本的容器

布局

<div>布局

<!DOCTYPE  html>
<html>
    <.head lang =”en”>
    <meta charset=”UTF-8”>
    <title>div布局<title>
    <style type=”text/css”>
    body{	<!--去除白边-->
            margin:0px
        }
    #container{
            width：100%;
            height：950px;
         }
    #heading{
            width:100%;
            height:10%;
            }
    #content_menu{
            width:30%;
            height:80%;
            float:left;
            }
    #content_body{
            width:70%;
            height:80%;
            float:left;
            }
    #footing{
            width:100%;
            height:10%;
            clear:both;
            }
    </style>
    </head>
    <body>
        <div id=”container”>
        <div id=”heading”>头部</div>
        <div id=”content”>内容菜单</div>
        <div id=”content_menu”>内容主体</div>
        <div id=”footing”>底部</div>
        </div>
    </body>
</html>

2.<table>布局

<!DOCTYPE html>
<html>
<head lang=”en”>
    <meta charset=”UTF-8”>
    <title>table布局</title>
</head>
<body marginheight=”0px” marginweight=”0px”>
    <table width=”100%” height=”950px” style=”background-color:darkgray”>
    <tr>
        <td colspan=”3” width=”100% height=10%” style=”background-color:aqu”>这是头部                
        </td>
    </tr>
    <tr>
        <td width=”20%” height=”80% style=”background-color:blue””>
            <ul>
                <li>ios</li>
                <li>android</li>
                <li>html5</li>
            </ul>
        </td>
        <td width=”60%” height=”80% style=”background-color:blueviolet””>内容主体	</td>
        <td width=”20%” height=”80% style=”background-color:deeppink””>右菜单</td>
    </tr>
    <tr>
        <td width=”100%” height=”10% colspan=”3” style=”background-color:deeppink””>底部菜单</td>
    </table>
</body>
</html>

离不开丶离开

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML列表、块和布局

列表 HTML列表&lt;ol&gt; 有序列表&lt;ul&gt; 无序列表&lt;li&gt; 列表项&lt;dl&gt; 列表&lt;dt&gt; 列表项&lt;dd&gt; 描述无序列表使用标签：&lt;ul&gt;、&lt;li&gt; 属性：disc、circle、square 有序列表使用标签：&lt;ol
复制链接

扫一扫