练习十六-网页界面布局案例

最新推荐文章于 2024-03-13 14:04:42 发布

敦煌璧画

最新推荐文章于 2024-03-13 14:04:42 发布

阅读量327

点赞数

文章标签：前端 html5 css

本文链接：https://blog.csdn.net/m0_58200396/article/details/124166043

版权

                                网页界面布局案例                                 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <title></title>
        <style>
            *,a{
                margin: 0;
                padding: 0;
            }
            .box1{
                width:240px;
                height:340px;
                border: 1px solid rgb(190, 190, 190);
                padding: 10px;
            }
            img{
                width:240px;
                height:188px
            }
            .h3{
                font-size: 14px;
                margin-top: 10px;
                color: rgb(94, 93, 93);
            }
            .p2,.p3{
                font-size: 12px;
                margin-top: 10px;
                color: rgb(143, 141, 141);
            }
            b{
                color: rgb(248, 1, 96);
            }
            .p4{
                font-size: 12px;
                margin-top: 10px;
                color: rgb(143, 141, 141);
            }
            li{
                color: crimson;
                font-size: 12px;
                display: inline-block;
            }
            span{
                font-size: 12px;
                margin-top: 10px;
                color: rgb(143, 141, 141);
            }
            .box2{
                width:240px;
                height:340px;
                border: 1px solid rgb(190, 190, 190);
                padding: 10px;
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <img src="./img/1.jpg" alt="">
            <h3 class="h3">动画便利店X果壳网《西门子洗碗机》</h3>
            <p class="p2"><b>原创作品</b> - 影视 - Motion Graphic</p>
            <p class="p3">3小时前上传</p>
            <p class="p4"><li>1284</li> &nbsp<span>人气/</span><li>11</li> &nbsp <span>评论/</span><li>47</li> &nbsp <span>推荐</span></p>
        </div>
        <div class="box2">
            <img src="./img/new01.jpg" alt="">
            <h3 class="h3">动画便利店X果壳网《西门子洗碗机》</h3>
            <p class="p2"><b>原创作品</b> - 影视 - Motion Graphic</p>
            <p class="p3">3小时前上传</p>
            <p class="p4"><li>1284</li> &nbsp<span>人气/</span><li>11</li> &nbsp <span>评论/</span><li>47</li> &nbsp <span>推荐</span></p>
        </div>
       

    </body>
</html>

敦煌璧画

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
练习十六-网页界面布局案例

网页界面布局案例 <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="keywords" content=""> <meta name="description"...
复制链接

扫一扫