北大青鸟有好货

最新推荐文章于 2024-08-31 22:15:20 发布

文桑u

最新推荐文章于 2024-08-31 22:15:20 发布

阅读量154

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/xiaowenwenbianch/article/details/120585366

版权

这是一个关于使用CSS进行网页布局的示例，创建了一个名为'有好货'的页面。页面包括一个背景为灰色的大盒子，内部有一个顶部区域，显示文字'与品质生活不期而遇'和'换一批'的按钮。主体部分展示了一系列商品，每个商品包含图片、标题、介绍和评价人数，鼠标悬停图片时会出现阴影效果。

摘要由CSDN通过智能技术生成

有好货代码分享

css代码：

<style>
        /*清除所以的内外边距*/
        * {
            margin: 0;
            padding: 0;
        }
        /*设置body的背景颜色*/
        body {
            background-color: #808080;
        }
        /*设置最大的盒子 ，居中，宽高，背景颜色*/
        .box {
            margin: auto;
            height: 450px;
            width: 450px;
            background-color: #ffffff;
        }
        /*设置头部样式，宽高，居中，背景图片定位，背景大小，字体，颜色*/
        .top {
            width: 430px;
            height: 48px;
            margin: auto;
            background: url("../素材/有好货/title.png") no-repeat 0px 14px ;
            background-size: 60px;
            font-size: 12px;
            color: #747271;
        }
        /*头下的第一个p 设置左浮动，外左边距，行高*/
        .top p:nth-of-type(1){
            float: left;
            margin-left: 62px;
            line-height: 48px;
        }
        /*头下的第二个p 设置右浮动，外左边距，行高*/
        .top p:nth-of-type(2){
            float: right;
            line-height: 48px;
        }
        /*设置第二个大盒子，主体部分，给宽高，居中*/
        .towbox {
            width: 430px;
            height: 380px;
            margin: auto;
        }
        /*选择无序列表的图片给宽高*/
        ul li img {
            height: 120px;
            width: 120px;
        }
        /*第二个盒子的无序列表li 去圆点，左浮动，外左，外上边距*/
        .towbox ul li {
            list-style: none;
            float: left;
            margin-left: 10px;
            margin-top: 15px;
        }
        /*选择所以第二个大盒子下的第一个p元素，设置字体大小*/
        .towbox ul li p:nth-of-type(1) {
            font-size: 13px;
        }
        /*选择所以第二个大盒子下的第一个p元素，鼠标移动到文字变red颜色*/
        .towbox ul li p:nth-of-type(1):hover{
            color: red;
        }
        /*选择所以第二个大盒子下的第二个p元素，设置字体，以及字体颜色*/
        .towbox ul li p:nth-of-type(2){
            font-size: 11px;
            color: grey;
        }
        /*选择所以第二个大盒子下的第三个p元素，设置字体，以及字体颜色*/
        .towbox ul li p:nth-of-type(3){
            font-size: 10px;
            color: blue;
        }
        /*设置鼠标移动到图片时，出现的阴影*/
        .towbox img:hover {
           box-shadow: 0 0 10px #000000;
        }

    </style>

主体部分：

<body>
        <div class="box">
            <header class="top">
                <p>与品质生活不期而遇</p>
                <p>换一批</p>
            </header>
            <div class="towbox">
                <ul>
                    <li>
                        <img src="../素材/有好货/1.png" alt="1"/>
                        <p>DYD 孕妇针织连衣</p>
                        <p>采用高领的设计</p>
                        <p>123 人说好</p>
                    </li>
                    <li>
                        <img src="../素材/有好货/2.png" alt="2"/>
                        <p>安踏KT3代FINALS</p>
                        <p>A-LiveKnit凌线科技</p>
                        <p>25 人说好</p>
                    </li>
                    <li>
                        <img src="../素材/有好货/3.png" alt="3"/>
                        <p>Summerfay 婴儿蓝</p>
                        <p>婴儿蓝定染毛领</p>
                        <p>33 人说好</p>
                    </li>
                    <li>
                        <img src="../素材/有好货/4.png" alt="4"/>
                        <p>JLS颗粒绒皮毛一体</p>
                        <p>皮质拼接设计，丰富衣身</p>
                        <p>34 人说好</p>
                    </li>
                    <li>
                        <img src="../素材/有好货/5.png" alt="5"/>
                        <p>迪士尼苹果MAX玻</p>
                        <p>迪士尼经典主题设计</p>
                        <p>122 人说好</p>
                    </li>
                    <li>
                        <img src="../素材/有好货/6.png" alt="6"/>
                        <p>3M反光多口袋半拉</p>
                        <p>姜黄色系的选择</p>
                        <p>67 人说好</p>
                    </li>
                </ul>
            </div>
        </div>
</body>

页面完成效果：
在这里插入图片描述

文桑u

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
北大青鸟有好货

有好货代码分享有好货代码分享css代码：<style> /*清除所以的内外边距*/ * { margin: 0; padding: 0; } /*设置body的背景颜色*/ body { background-color: #808080; } /*设置最大的盒子，居中，宽高，背景颜色*/
复制链接

扫一扫