WEB前端听课笔记——HTML之布局标签

来源：互联网发布：淘宝双11红包微信群编辑：程序博客网时间：2024/05/21 19:31

1、<div></div>

块级元素，无意义，用于页面整体分块。

2、列表

（1）有序列表

几种排序方式

例

<ol><li>我是第1项</li><li>我是第2项</li><li>我是第3项</li><li>我是第4项</li><li>我是第5项</li></ol>

<ol type="i"><li>我是第1项</li><li>我是第2项</li><li>我是第3项</li><li>我是第4项</li><li>我是第5项</li></ol>

<ol type="I"><li>我是第1项</li><li>我是第2项</li><li>我是第3项</li><li>我是第4项</li><li>我是第5项</li>        <li>我是第6项</li>       <li>我是第7项</li></ol>

<ol type="A"><li>我是第1项</li><li>我是第2项</li><li>我是第3项</li><li>我是第4项</li><li>我是第5项</li></ol>

<ol type="a"><li>我是第1项</li><li>我是第2项</li><li>我是第3项</li><li>我是第4项</li><li>我是第5项</li></ol>

运行结果

（2）无序列表

例

<ul><li>我是第1名</li><li>我是第2名</li><li>我是第3名</li><li>我是第4名</li></ul>

运行结果

（3）自定义列表

例

<dl><dt>购物</dt> <!--标题--><dd>衣服</dd><!--选项--><dd>鞋子</dd><dd>裤子</dd><dd>内衣</dd></dl>

运行结果

3、无序列表应用实例

常用来做导航

例

<!DOCTYPE html><html lang="en"><head>    <meta http-equiv="content-type" content="text/html;charset=utf-8">    <title></title>    <link rel="stylesheet" href="5-public.css">    <style>        ul.one{            height: 45px;            margin: 0;  /*去外边距*/        }        ul.one li{            display: inline-block;/*第一种转为块级内联元素*/            /*float: left;*//*第二种用浮动*/            height: 45px;            width: 80px;            text-align: center;            line-height: 45px;            font:400 15px/44px "microsoft yahei"        }    </style></head><body><ul class="one">    <li>服装城</li>    <li>美妆馆</li>    <li>京东超市</li>    <li>生鲜</li>    <li>全球购</li>    <li>闪购</li>    <li>团购</li>    <li>拍卖</li>    <li>金融</li></ul></body></html>

运行结果

阅读全文

1 0