«

UL、LI标签的应用

MitSeek 发布于 阅读：37 HTML 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            ul{
                list-style-type:none ;
            }
            .head{
                background: #0000ff;
                font-size: 25px;
                font-weight: bold;
                color: white;
                line-height: 40px;
            }
            li{
                position: relative;
                border: 1px dotted midnightblue; /* solid 实线,东 dotted虚线 */
                padding-left: 50px;
                width: 600px;
                height: 40px;
                line-height: 40px;
            }
            span{
                display: inline-block;
                /* position: relative;
                left: 0 px; */
                position: absolute;
                left: 0;
                top: 0;
                vertical-align: middle;
                width: 40px;
                height: 40px;
                color: white;
                background: #ff3bdd;
                border-radius: 5px;
                text-align: center;
                line-height: 40px;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="head">鱼类排行</li>
            <li><span>鲤鱼</span>生长在优雅的花园里，每日共人们欣赏。</li>
            <li><span>草鱼</span>生长在田间的稻田里，陪伴这稻苗长大，很适合做种稻人的朋友。</li>
            <li><span>鲫鱼</span>这个小生命在大江大河里游趟，见过了大风大浪，在顽强的长大。</li>
        </ul>
    </body>
</html>

HTML