漂亮列表源码 html css
时间: 2023-05-10 09:54:33 浏览: 109
漂亮的列表是网页设计过程中比较重要的一环。利用HTML和CSS语言,我们可以设计出简单而又美观的列表,使网页看起来更加美观,而且易于阅读。
HTML代码:
首先,我们需要确定列表的类型。有无序列表和有序列表两种类型。无序列表用“ul”标签表示,有序列表用“ol”标签表示。代码如下:
无序列表
```
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
```
有序列表
```
<ol>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ol>
```
CSS代码:
对于列表的样式,我们可以利用CSS语言进行设计。常用的样式有字体、颜色、边框等。以下是漂亮列表的样式代码。
```
ul li {
list-style-type: none; /*去掉列表前面的符号*/
font-size: 18px;
color: #333333;
background-color: #F0F0F0;
padding: 10px;
margin-bottom: 5px; /*每个列表项之间的间距*/
border-radius: 10px; /*圆角*/
}
ol li {
list-style-type: decimal; /*有序列表前面的数字*/
font-size: 18px;
color: #333333;
background-color: #F0F0F0;
padding: 10px;
margin-bottom: 5px; /*每个列表项之间的间距*/
border-radius: 10px; /*圆角*/
}
li:hover {
background-color: #CCCCCC; /*鼠标悬停时的背景颜色*/
}
```
综上所述,以上是漂亮列表的HTML和CSS代码。通过这些简单的代码,我们可以设计出美观、易于阅读的列表,使得网页更加舒适和实用。