CSS第7章上机练习2(制作热门活动页面)

思卿不见

已于 2022-05-25 16:11:01 修改

阅读量1.1w

点赞数 17

文章标签： css

于 2019-05-31 15:04:27 首次发布

本文链接：https://blog.csdn.net/weixin_44100210/article/details/90716478

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作热门活动页面</title>
    <style>
        .title {
            width: 700px;
            height: 800px;
        }

        p {
            display: inline-block;
        }

        .one p:nth-child(2) {
            float: right;
        }

        li {
            list-style: none;
        }

        #two ul {
            float: left;
            padding-left: 22px;   //如果注释掉这行代码,那么第四张图片会实现左浮动,但无法和第三张图片并列.
        }       //原因是因为所包含的内边框,外边框以及文本内容的宽度已经超出了整个页面所设置的700px.所以第四张图片只能排到下面.
        .one p{
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="title">
    <div class="one">
        <p>热门活动</p>
        <p>更多</p>
    </div>
    <div id="two">
        <ul>
            <li><img src="../image/img1.png" alt=""></li>
            <li>推荐活动 | 原创音乐现金榜T榜</li>
        </ul>
        <ul>
            <li><img src="../image/img2.png" alt=""></li>
            <li>推荐节目|《TAImusic》爆笑来袭</li>
        </ul>
        <ul>
            <li><img src="../image/img3.png" alt=""></li>
            <li>推荐歌单 | 继续宠爱张国荣</li>
        </ul>
        <ul>
            <li><img src="../image/img4.png" alt=""></li>
            <li>推荐活动| 330金属音乐巡演 成都小酒馆音乐空间</li>
        </ul>
    </div>
</div>
</body>
</html>

在这里插入图片描述
ps:题目中要求,“在浏览器中居中显示”,只需要在整个页面的div元素中设置margin为0以及auto就可以了,切记,居中显示的前提必须得有设置宽度,否则,就算你设置了宽度,页面也不会再浏览器中居中显示.