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>
  • 相关阅读:
    (转) Linux中profile、bashrc、bash_profile之间的区别和联系
    Ubuntu 安装MyEclipse10
    VMware_ubuntu设置共享文件夹
    (转载)Android出现“Read-only file system”解决办法
    Android 执行 adb shell 命令
    android传感器使用
    Android源码下载和编译过程
    jquery实现的ajax
    转载SQL_trace 和10046使用
    查看Oracle相关日志 ADRCI
  • 原文地址:https://www.cnblogs.com/Doduo/p/8286477.html
Copyright © 2011-2022 走看看