一、圆形序号
1、 如图 ;颜色可以改变
2、使用方法
我使用的是<span>标签 加 圆角边框的办法 ,圆角边框的值: border-radius: 50%;
详细代码
<style>
span{
height: 30px ; //高
width: 30px; //宽
background-color: black; //背景颜色
display: inline-block; //显示方式:行内块标签
border-radius: 50%; //圆角边框的弧度
line-height: 30px; //数字的行高
text-align: center; //调整位置,使数字居中
margin-right:15px; //调整外边距,使位置更美观
}
</style>
<body>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</body>
二、应用案例
1、案例效果展示
2、案例源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#body { //设置外部边框的大小和颜色
border: 5px solid #DBD5CF;
width: 400px;
color: rgb(252, 245, 245);
margin: 30px;
}
h2 { //设置标题
border: 0px solid black;
height: 40px;
background-color: #E9185A;
line-height: 50px;
font-size: 17px;
padding-left: 10px;
}
li { //设置内容框
border-bottom: dashed rgb(182, 181, 181);
line-height: 40px;
}
a span{ //设置圆形序号
height: 30px ;
width: 30px;
color: aliceblue;
background-color: black;
display: inline-block;
border-radius: 50%;
line-height: 30px;
text-align: center;
margin-right:15px;
}
a:hover span{ //设置鼠标放上时改变颜色
background-color: red;
}
a{ //对超链接的字体样式进行修改
text-decoration: none;
color: rgb(79, 78, 78);
}
a:hover{ //设置鼠标放上时字体改变颜色
color: red;
}
</style>
</head>
<body>
<div id="body">
<h2>大家都喜欢买的美容品</h2>
<ul>
<li><a href="#"><span>1</span>雅诗兰黛即使修护眼部精华霜15ml</a></li>
<li><a href="#"><span>2</span>伊丽莎白雅顿显效复合活肤爽75ml</a></li>
<li><a href="#"><span>3</span>OLAY玉兰油多效修护霜50g</a></li>
<li><a href="#"><span>4</span>巨型一号丝瓜水320ml</a></li>
<li><a href="#"><span>5</span>倩碧保湿洁肤水2号200ml</a></li>
</ul>
</div>
</body>
</html>