zoukankan      html  css  js  c++  java
  • CSS竖向步骤条

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>CSS竖向步骤条</title>
        <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            width: 360px;
            margin: 0 auto;
        }
        
        li {
            position: relative;
            padding: 0 30px;
            list-style: none;
            border-left: 2px solid #ccc;
        }
        
        li:before {
            content: "√";
            display: block;
            position: absolute;
            margin-left: -6px;
            top: 0;
            left: -5px;
            width: 22px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            background: red;
            color: #fff;
            font-size: 14px;
            border-radius: 50%;
        }
        </style>
    </head>
    
    <body>
        <ul>
            <li>
                <p>我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条</p>
            </li>
            <li>
                <p>我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条</p>
            </li>
            <li>
                <p>我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条</p>
            </li>
            <li>
                <p>我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条</p>
            </li>
            <li>
                <p>我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条</p>
            </li>
            <li>
                <p>我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条我是竖向导航条</p>
            </li>
        </ul>
    </body>
    
    </html>
  • 相关阅读:
    结对练习(能力有限,待解决......)
    骰子修改
    骰子传奇
    现在的辛苦一点,会是将来的更好一点!
    入坑?那就从坑里爬出来
    性能测试工具locust简单应用
    阿里云环境部署
    Charles的安装与抓取手机包设置
    windows常用命令-netstat
    采坑小记——adb链接夜神模拟器
  • 原文地址:https://www.cnblogs.com/Doduo/p/8286477.html
Copyright © 2011-2022 走看看