列表、块、布局

57 阅读 0 评论 38 点赞

我是靠谱客的博主粗心朋友，最近开发中收集的这篇文章主要介绍列表、块、布局，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

列表

无序中，前面会有小点，以下定义小点是一个什么样的点

disc 实体圆

circle 空心圆

square 实体方块

有序中,默认前面会有数字123，以下定义可以盖面前面的数字，ABC或abc或罗马数字或小写罗马数字，start定义数字不从1开始，可以从别的数字开始，比如567，只有start写<ol start="10"> </ol>, 其他的都写 <ol type="A"> </ol>

A a l i start

自定义示例

<dl>
  <dt>hello worle</dt>
  <dd>每一门新的语言都会打印一个hello world</dd>
  <dt>hello worle</dt>
  <dd>每一门新的语言都会打印一个hello world</dd>
  <dt>hello worle</dt>
  <dd>每一门新的语言都会打印一个hello world</dd>
</dl>

块

布局

vid布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div布局</title>
    <style type="text/css">
      body{
        margin: 0px;  /*全屏显示，四周不留白边*/
      }
      div#container{      /*最外层的ID效果，宽、高、背景颜色*/
        width: 100%;
        height: 950px;
        background-color: darkgray;
      }
      div#heading{
        width: 100%;
        height: 10%;
        background-color: aliceblue;
      }
      div#content_menu{
        width: 30%;
        height: 80%;
        background-color: beige;
        float: left;  /*浮动，让内容菜单从左到右布局*/
      }
      div#content_body{
        width: 70%;
        height: 80%;
        background-color: #b3d4fc;
        float: left;
      }
      div#footing{
        width: 100%;
        height: 10%;
        background: #555555;
        clear: both;  /*清除上面的从左到右布局，否则这一块也会跟着上面从左到右布局，不会出现在底部*/
      }
    </style>
</head>
<body>

  <div id="container">
    <div id="heading">头部</div>
    <div id="content_menu">内容菜单</div>
    <div id="content_body">内容主体</div>
    <div id="footing">底部</div>
  </div>

</body>
</html>

table布局

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>table布局</title>

</head>
<body marginheight="0px"marginwidth="0px">
  <table width="100%"height="950px"style="background-color: darkseagreen">
    <tr >
      <td colspan="3"width="100%"height="10%"style="background-color: #cccccc">头部</td>   <!--colspan="2"表示合并两个单元格,把中间部分分成三份-->
    </tr>
    <tr>
      <td width="20%" height="80%" style="background-color: bule">左菜单</td>
      <td width="60%" height="80%" style="background-color: powderblue">中间主体</td>
      <td width="20%" height="80%" style="background-color: lightblue">右菜单</td>
    </tr>
    <tr>
      <td width="100%" height="10%" colspan="3" style="background-color: gold">底部</td>
    </tr>
  </table>


</body>
</html>