html标签和css的应用实验报告

墨殇陌离吖

已于 2022-04-04 10:52:27 修改

阅读量1.1k

点赞数 2

分类专栏： css实验文章标签： css html

于 2022-03-25 17:06:39 首次发布

本文链接：https://blog.csdn.net/mm_ll_ss/article/details/123739725

版权

css实验专栏收录该内容

1 篇文章 0 订阅

订阅专栏

应用html标签和css完成如下所示页面效果，图片见附件。

说明：

内容相对于浏览器居中,宽860px
鼠标移动至列表项上，显示背景色#F8F8F8
分割线2px solid #ccc，每项高130px
第一行文字：20px 黑体
标签：字颜色#cccc00 16px
标签项：背景颜色#eee 字体颜色#999 文字大小14px
第三行文字：边框1px solid #eee; 圆角半径25px

其他样式可根据界面效果进行设置

运行截图

代码

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        /* 整体样式设置 */
        .box {
            width: 860px;
            height: 98px;
            margin: 0 auto;
            border-top: 2px solid #ccc;
            padding-top: 15px;
            padding-bottom: 15px;
        }
        /* 鼠标移动背景色变化*/
        .box:hover {
            background: #F8F8F8;
        }
        /* 第一行文字设置 */
        .first {
            font-size: 20px;
            font-family: 黑体;
            padding-bottom: 16px;

        }
        /* ‘标签’样式设置 */
        .second {
            color: #cccc00;
            font-size: 16px;
            background: none;
        }
        /* ‘唇膏’等标签样式 */
        .box1 {
            background: #eee;
            color: #999;
            font-size: 14px;
        }
        /* ‘来源’样式设置 */
        .third {
            width: auto;
            text-align: center;
            border: 1px solid #eee;
            border-radius: 25px;
            float: left; 
            margin-top: 12px;
            margin-right: 10px;
            color: #999999;
            font-size: 14px;
        }

        p {
            display: inline-block;
            margin-top: 13px;
            color: #999999;
            font-size: 14px;
        }

        img {
            width: 140px;
            height: 100px;
            float: left;
            padding-right: 24px;
        }

        li {
            list-style-type: none;
            display: inline-block;
            background: #eee;
            color: #999;
            font-size: 14px;
            margin: 0px 2px;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="images/4.jpg" alt="">
        <div class="first">不只有看肤色挑唇色 选对口红衣服更美</div>
        <div>
            <ul>
                <li class="second">标签</li>
                <li>唇膏</li>
                <li>衣服</li>
                <li>粉色</li>
                <li>化妆</li>
                <li>美容美体</li>
            </ul>
        </div>
        <div class="third">悦己self</div>
        <p>2016-10-18</p>
    </div>
    <div class="box">
        <img src="images/5.jpg" alt="">
        <div class="first">学画红唇妆 让你的女王范分分钟秒杀路人</div>
        <div>
            <ul>
                <li class="second">标签</li>
                <li>唇膏</li>
                <li>衣服</li>
                <li>粉色</li>
                <li>化妆</li>
                <li>美容美体</li>
            </ul>
        </div>
        <div class="third">毛戈平形象艺术学校</div>
        <p>2016-10-18</p>
    </div>
    <div class="box">
        <img src="images/6.jpg" alt="">
        <div class="first">无数次给国外博主跪了 把自己的脸画成漫画人物好逼真</div>
        <div>
            <ul>
                <li class="second">标签</li>
                <li>美容美体</li>
            </ul>
        </div>
        <div class="third">八公举</div>
        <p>2016-10-18</p>
    </div>
</body>

</html>

初学web，若有不足，还望斧正。