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

最新推荐文章于 2023-07-18 22:43:22 发布

爱睡觉的小馨

最新推荐文章于 2023-07-18 22:43:22 发布

阅读量2.6k

点赞数 2

分类专栏： HTML与CSS5网页设计

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

版权

HTML与CSS5网页设计专栏收录该内容

21 篇文章 7 订阅

订阅专栏

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>

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

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

在这里插入图片描述

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>

爱睡觉的小馨

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML利用无序列表设置页面的布局

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> <styl
复制链接

扫一扫