#WEB安全基础 : HTML/CSS | 0x4.1嵌套列表

2019-01-21 02:38:21来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

如果你认为列表只有ul和ol那你就错了

我要为你展示新的列表


这次只有一个index.html文件

这是它的效果

以下是它的代码

 1 <html>
 2 <head>
 3 <title>TEST</title>
 4 </head>
 5 <body>
 6 <!--嵌套列表-->
 7 <p>
 8 嵌套列表
 9 </p>
10 <ol>
11 <!--在<ol>以内并且在<ul>以外的<li>属于有序列表-->
12 <li>Charge Segway</li>
13 <li>Pack for trip</li>
14 <!--在<ul>以内的是无序列表-->
15 <ul>
16 <li>cell phone</li>
17 <li>ipod</li>
18 </ul>
19 </ol>
20 <br>
21 <br>
22 <p>
23 定义列表
24 </p>
25 <dl>    <!--定义列表-->
26 <dt>Burma Shave Signs</dt>    <!--无缩进-->
27 <dd>Road signs common in the U.S. in the 1920s and 1930s advertising shaving produces.</dd>
28 <dt>Route 66</dt>
29 <dd>Most famous road in the U.S.highway system.</dd>    <!--有缩进-->
30 </dl>
31 </body>
32 </html>

无序列表里能插入有序列表,有序列表里能插入无序列表

定义列表被dl元素括起来

现在,你可以使用有缩进的整洁的列表了


//本系列教程基于《Head First HTML与CSS(第二版)》,此书国内各大购物网站皆可购买


转载请注明出处  by:M_ZPHr

最后修改日期:2019-01-17

 

原文链接:https://www.cnblogs.com/MZPHr/p/10280335.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:#WEB安全基础 : HTML/CSS | 0x4HTML模块化

下一篇:【代码笔记】Web-CSS-CSS样式列表(url)