CSS 圆形序号和简单案例

芋泥波波606

于 2024-07-17 15:16:42 发布

阅读量277

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/2403_85030550/article/details/140494608

版权

一、圆形序号

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>