css联系案例，div的嵌套

最新推荐文章于 2024-07-15 23:16:45 发布

凉风听雪

最新推荐文章于 2024-07-15 23:16:45 发布

阅读量503

点赞数 1

分类专栏：前端开发文章标签： css html 前端

本文链接：https://blog.csdn.net/p_s_p/article/details/126491457

版权

前端开发专栏收录该内容

29 篇文章 0 订阅

订阅专栏

案例1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 800px;
            height: 600px;
            /* background-color: white; */
            margin: 0 auto;
        }

        /* h1 {
            text-align: center;
        } */

        /* p{
            text-align: center;
        } */
        .center {
            text-align: center;
        }

        .one {
            color: #808080;
        }

        .two {
            color: #87ceeb;
        }
        a{
            text-decoration: none;
        }
        .indent{
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <div>
        <h1 class="center">《自然》评选改变科学的10个计算机代码项目</h1>
        <p class="center">
            <span class="one">2077年01月28日14:58 </span>
            <span class="two">新浪科技</span>
            <a href="">收藏文本</a>
        </p>
        <hr>
        <p class="indent">
            2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。
             科技萨克达拉斯解放路撒拉萨市几点啦精神分裂阿拉斯加发了
              开始减肥离开家是疯狂阿拉山口解放啦开始减肥零三阿拉山口
               杰弗里斯街坊邻居射流风机阿拉山口吉拉拉十几分。
        </p>
        <p class="indent">
            2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。
             科技萨克达拉斯解放路撒拉萨市几点啦精神分裂阿拉斯加发了
              开始减肥离开家是疯狂阿拉山口解放啦开始减肥零三阿拉山口
               杰弗里斯街坊邻居射流风机阿拉山口吉拉拉十几分。
        </p>
        <p class="indent">
            2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。
             科技萨克达拉斯解放路撒拉萨市几点啦精神分裂阿拉斯加发了
              开始减肥离开家是疯狂阿拉山口解放啦开始减肥零三阿拉山口
               杰弗里斯街坊邻居射流风机阿拉山口吉拉拉十几分。
        </p>
        <p class="indent">
            2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。
             科技萨克达拉斯解放路撒拉萨市几点啦精神分裂阿拉斯加发了
              开始减肥离开家是疯狂阿拉山口解放啦开始减肥零三阿拉山口
               杰弗里斯街坊邻居射流风机阿拉山口吉拉拉十几分。
        </p>

    </div>
</body>

</html>

案例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            /* width: 300px;
            height: 350px; */
            background-color: #f5f5f5;
            margin: 0 auto;
        }
        .two{
            width: 234px;
            height: 300px;
            background-color: #ffffff;
            margin:0 auto;
        }
        /* .three{
            height: 25px;
        } */
        body{
            text-align: center;
        }
        .p1{
            font-size: 14px;
            line-height: 25px;
        }
        .p2{
            font-size: 12px;
            line-height: 30px;
            color: #cccccc;
        }
        .p3{
            font-size: 14px;
            color: #ffa500;
        }
        img{
            width: 160px;
            height: 160px;
        }
    </style>
</head>
<body>
    <!-- <div class="one"> -->
        <div class="two">
            <img src="./车.png" alt="车">
            <div class="p1">九号平衡车</div>
            <div class="p2">成年人的玩具</div>
            <div class="p3">1999元</div>



        </div>
    <!-- </div> -->
</body>
</html>