列表+样式初始化+元素类型转换

2019-05-23 09:55:26来源:博客园 阅读 ()

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

一、ul无序列表

1、无序列表定义 
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。 
无序列表始于 <ul>标签。每个列表项始于 <li>

ul标签结构:
<ul>
<li>清心</li>
<li>海牙</li>
<li>玄武</li>
</ul>

2、无序列表项目符号 (基本不用,企业开发用图片代替)<ul type="disc"></ul> 
type=”disc” 实心圆 
type=”circle” 空心圆 
type=”square” 方块符 
3、无序列表的嵌套 (li 放内容,标签 ,图片,链接)

<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>

 

二、ol有序列表

1、列表定义 
有序列表也是一列项目,列表项目使用数字进行标记。有序列表始于 <ol>标签。每个列表项始于 <li> 标签。

ol标签结构
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

2、有序列表项目符号 (基本不用,企业开发用图片代替) <ol type="A"></ol> 
type=”A” A B C…序列号 
type=”a” a b c …序列号 
type=”I” I II III…序列号

3、有序列表的嵌套

<ol>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
</ol>

三、dl定义列表

1、定义列表 
自定义列表不仅仅是一列项目,而是项目及其注释的组合。 
自定义列表以<dl> 标签开始。每个自定义列表项以<dt> 开始。每个自定义列表项的定义以<dd>开始。

<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

四、样式初始化

首先我们来认识下,什么是样式初始化。样式始初始化是指,我们的元素被默认的初始化了某些样式属性值,我们来看下有哪些标签加了那些默认的属性值。

<style type="text/css">
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
ol,ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
img{border:none;}
</style>

但凡是浏览器默认的样式,都不要使用。 
在写案例前,会在样式的前面先把默认样式清除,以免造成不必要的兼容问题

提示:默认样式没用,为什么浏览器还要给他加默认样式呢?? 是因为表现他本身的结构特性


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

标签:

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

上一篇:10分钟了解什么是BFC

下一篇:基于EasyUI的TopJUI前端框架之如何动态改变下拉列表框ComboBox输