Web实现：伪类实例小米商城商品展示

最新推荐文章于 2024-05-26 11:25:58 发布

jasmyn518

最新推荐文章于 2024-05-26 11:25:58 发布

阅读量420

点赞数

分类专栏： HTML CSS 笔记文章标签：前端 css3 css html

本文链接：https://blog.csdn.net/jasmyn518/article/details/122647105

版权

笔记同时被 3 个专栏收录

127 篇文章 4 订阅

订阅专栏

HTML

78 篇文章 2 订阅

订阅专栏

CSS

68 篇文章 0 订阅

订阅专栏

效果图：
代码中是写上了商品的图片部分的，由于在线的编程图片只能使用网络图片才能显示，直接用浏览器打开网页是可以显示图片的，下面附带了代码中使用的图片。
这是图片book.jpg：
book
这是图片phone.jpg：
phone

小米商城商品展示
HTML部分代码：

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

<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <section class="section-goods">
        <main class="main-good-list">
            <!--商品头部-->
            <header class="clearFix">
                <div class="title-left">
                    智能
                </div>
                <ul class="title-right">
                    <li class="selected">智能</li>
                    <li>安防</li>
                    <li>出行</li>
                </ul>
            </header>

            <!--商品列表-->
            <ul class="good-list clearFix">
                <li>
                    <h3>小米&lt;小爱老师&gt;</h3>
                    <p>口袋里的英语外教</p>
                    <h4>499元起</h4>
                </li>
                <li>
                    <h3>小米&lt;小爱老师&gt;</h3>
                    <p>口袋里的英语外教</p>
                    <h4>499元起</h4>
                </li>
                <li>
                    <h3>小米&lt;小爱老师&gt;</h3>
                    <p>口袋里的英语外教</p>
                    <h4>499元起</h4>
                </li>
                <li>
                    <h3>小米&lt;小爱老师&gt;</h3>
                    <p>口袋里的英语外教</p>
                    <h4>499元起</h4>
                </li>
                <li class="margin-off">
                    <h3>小米&lt;小爱老师&gt;</h3>
                    <p>口袋里的英语外教</p>
                    <h4>499元起</h4>
                </li>
                <li>
                    <h3>小米&lt;小爱老师&gt;</h3>
                    <p>口袋里的英语外教</p>
                    <h4>499元起</h4>
                </li>
                <li>
                    <h3>小米&lt;小爱老师&gt;</h3>
                    <p>口袋里的英语外教</p>
                    <h4>499元起</h4>
                </li>
                <li>
                    <h3>小米&lt;小爱老师&gt;</h3>
                    <p>口袋里的英语外教</p>
                    <h4>499元起</h4>
                </li>
                <li>
                    <h3>小米&lt;小爱老师&gt;</h3>
                    <p>口袋里的英语外教</p>
                    <h4>499元起</h4>
                </li>
                <li class="margin-off">
                    <h3>小米&lt;小爱老师&gt;</h3>
                    <p>口袋里的英语外教</p>
                    <h4>499元起</h4>
                </li>
            </ul>
        </main>
        <a class="book" href="#"></a>
    </section>
</body>

</html>

CSS部分代码：

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

ul,
li {
    list-style: none;
}

a {
    text-decoration: none;
}

.clearFix::after {
    content: '';
    display: block;
    clear: both;
}

.section-goods {
    width: 1439px;
    background: #F5F5F5;
}

.main-good-list {
    width: 1048px;
    margin: 0 auto;
}

/*商品头部*/
.title-left {
    float: left;
    color: #000000;
    font-size: 20px;
    line-height: 54px;
}

.title-right {
    float: right;
}

.title-right>li {
    position: relative;
    box-sizing: border-box;
    float: left;
    margin-left: 20px;
    line-height: 54px;
    color: #999999;
    font-size: 16px;
}

.title-right>li.selected {
    margin-left: 0px;
    color: #FD6821;
}

.title-right>li.selected::after {
    content: '';
    position: absolute;
    bottom: 11px;
    left: 1px;
    width: 30px;
    height: 2px;
    background: #FD6821;
}

/*商品列表*/
.good-list>li {
    float: left;
    width: 200px;
    height: 256px;
    margin-right: 12px;
    margin-bottom: 12px;
    background-color: #FFFFFF;
    text-align: center;
}

.good-list>li::before {
    content: '';
    display: block;
    width: 130px;
    height: 130px;
    margin: 22px auto 16px;
    background: url(./images/phone.jpg) no-repeat center;
    background-size: contain;
}

.good-list>li.margin-off {
    margin-right: 0px;
}





.good-list>li>h3 {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 17px;
    color: #000000;
}

.good-list>li>p {
    margin-top: 4px;
    margin-bottom: 8px;
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 17px;
    color: #A8A8A8;
}

.good-list>li>h4 {
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 17px;
    color: #FD6821;
}


/*电纸书*/
.book {
    display: block;
    width: 1048px;
    height: 103px;
    margin: 0 auto;
    margin-top: 20px;
    background: url(./images/book.jpg) no-repeat center;
    background-size: contain;
}

jasmyn518

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web实现：伪类实例小米商城商品展示

效果图：代码中是写上了商品的图片部分的，由于在线的编程图片只能使用网络图片才能显示，直接用浏览器打开网页是可以显示图片的，下面附带了代码中使用的图片。这是图片book.jpg：这是图片phone.jpg：HTML部分代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>练习</title> <lin
复制链接

扫一扫