HTML5界面框架 HTML标签

HTML利用无序列表设置页面的布局

2020-10-22 14:51发布

站内文章 / HTML5
896 0 0

First：

试着利用无序列表设置下图的页面布局：
在这里插入图片描述

<!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>

                ul{
                    width: 220px;
                    height: 300px;
                    margin: 0px auto;
                    border:3px solid rgb(112, 6, 112);
                }

                .a{
                    padding-left: 30px;
                    list-style-image: url(images/clock.png);
                    color: rgb(112, 6, 112);
                }

                .b{
                   width: 140px;
                   height: 40px;
                   padding-left: 30px;
                    list-style-image:url(images/icon.png);
                    color:whitesmoke;
                    background-color: rgb(112, 6, 112);
                    border: 3px solid white;
                    line-height: 10px;
                }

                .c{
                    padding-left: 30px;
                    list-style-image: url(images/back.png);
                }

        </style></head><body>
    
            <ul>
               <div class="a"> <li >7月30日0:00开团</li></div>
               <div class="b"> <li >新品团</li> </div>
               <div class="b"> <li >尝鲜团</li> </div>
               <div class="b"> <li >秒杀团</li> </div>
               <div class="b"> <li >清仓团</li> </div>
               <div class="c"> <li >返回顶部</li></div>
            </ul> </body></html>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657

补充一点：
对于上面无序列表的做法，是很方便的，如果你不想用无序列表的话，下面还提供一种方法：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第四周作业</title>
    <style>
        div {
            width: 220px;
            height: 300px;
            border: 2px solid rgb(112, 6, 112);
            padding: 2px;
        }

        .zi {
            color: rgb(112, 6, 112);
        }

        .bai {
            color: rgb(252, 250, 250);
        }

        .z {
            width: 120px;
            height: 35px;
            bottom: 5px;
            margin: 7px;
            background-color: rgb(112, 6, 112);

        }
    </style></head><body>
    <div>
        <ul>

            <img src="images/clock.png">
            <span class="zi">
                7月30日0:00开团            </span>
            <div class="z">
                <img src="images/icon.png">
                <span class="bai">
                    新品团                </span>
            </div>
            <div class="z">
                <img src="images/icon.png">
                <span class="bai">
                    尝鲜团                </span>
            </div>
            <div class="z">
                <img src="images/icon.png">
                <span class="bai">
                    秒杀团                </span>
            </div>
            <div class="z">
                <img src="images/icon.png">
                <span class="bai">
                    清仓团                </span>
            </div>
            <img src="images/back.png">
            <span class="zi">
                返回顶部            </span>

        </ul>

    </div></body></html>1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677

在这里插入图片描述

second：

设置如下图的页面布局：
在这里插入图片描述

<!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;
                }

                ol{
                    width: 300px;
                    height: 270px;
                    margin: 20px auto;
                    border: #f1f1f1 1px solid;
                }

                li{
                    width: 290px;
                    height: 30px;
                    color: #519b9f;
                    padding: 10px 10px;
                    list-style-position: inside;
                    background: url(images/icon.png) no-repeat 170px 14px;
                }

                .one{
                    background: url(images/clock.png) no-repeat 170px 14px;
                }

        </style></head><body>

           <ol>
               <li>小苹果</li>
               <li class="one">因为爱情</li>
               <li>错错错</li>
               <li class="one">会不会</li>
               <li>丫头</li>
           </ol></body></html>



作者：海底程序员

链接：https://blog.csdn.net/qq_45696288/article/details/108698969

来源：CSDN
著作权归作者所有，转载请联系作者获得授权，切勿私自转载。