前端学习日志之复刻花礼网礼品专栏

汤原儿

已于 2022-07-27 08:56:27 修改

阅读量252

点赞数 2

文章标签：前端学习 css html css3

于 2022-07-26 20:49:32 首次发布

本文链接：https://blog.csdn.net/m0_59537414/article/details/126002733

版权

花礼网礼品专栏

知识点

竖直与水平居中的实现：

竖直居中有两种情况：

将line-height的值设置的与height的值一样即可。
vertical-align: middle注意写在父容器中，即定位在父容器中，且竖直居中。

水平居中有两种情况：

text-align: center 文本居中
给代码的最外层套一个div，给他设置一个合适的宽度并写上margin: 0 auto; 这样你写的内容就会在页面居中也经得放大缩小啦。
（下面复刻代码中有水平/竖直居中案例）

页面布局

分为三大部分：

题头部分
banner 横幅部分
content 内容部分

下面不多说了，都在代码里兄弟们

html 代码

<div class="background">
        <div class="side">
            <!-- 题头部分 -->
            <div class="title">
                <a href="">
                    <h3>礼品</h3>
                </a>
                <span>给她·最美好的礼物</span>
                <a href="" class="more">更多礼品></a>
            </div>
            <!-- 横幅部分 -->
            <div class="banner">
                <ul>
                    <li><a href="">水晶内雕/3D激光内雕水晶</a></li>
                    <li><a href="">进口/泰国保鲜花</a></li>
                    <li><a href="">金箔玫瑰/金箔画</a></li>
                    <li><a href="">精品音乐盒/八音盒</a></li>
                    <li><a href="">生日礼品</a></li>
                    <li><a href="">约会/求爱礼品</a></li>
                    <li><a href="">结婚礼品</a></li>
                    <li><a href="">感谢/祝福礼品</a></li>
                    <li><a href="">拜访/探望礼品</a></li>
                    <li><a href="">结婚纪念日礼品</a></li>
                </ul>
                <!-- 品牌部分 -->
                <div class="brands">
                    <div class="brand">
                        <a href="">
                            <img src="img/swarovski.png" alt="图片加载失败">
                            <p>施华洛世奇</p>
                        </a>
                    </div>
                    <div class="brand">
                        <a href="">
                            <img src="img/glam ever.png" alt="图片加载失败">
                            <p>Glam&nbsp;Ever潮拍饰品</p>
                        </a>
                    </div>
                    <div class="brand">
                        <a href="">
                            <img src="img/dior.png" alt="图片加载失败">
                            <p>迪奥Dior</p>
                        </a>
                    </div>
                    <div class="brand">
                        <a href="">
                            <img src="img/猫王.png" alt="图片加载失败">
                            <p>猫王收音机</p>
                        </a>
                    </div>
                    <div class="brand">
                        <a href="">
                            <img src="img/hello kitty.png" alt="图片加载失败">
                            <p>Hello&nbsp;Kitty</p>
                        </a>
                    </div>
                </div>
            </div>
            <!-- 内容部分 -->
            <div class="content">
                <div class="item">
                    <a href="">
                        <img src="img/a1.jpg" alt="图片加载失败">
                        <p class="item-name">礼品 · 花好月圆永生花台...</p>
                        <p class="item-sub">节日定制款</p>
                        <p class="num">¥ 298</p>
                        <span>已售 1271 件</span>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <img src="img/a2.jpg" alt="图片加载失败">
                        <p class="item-name">礼品 · 麋鹿水晶音乐盒/旋...</p>
                        <p class="item-sub">灯光蓝牙音响</p>
                        <p class="num">¥ 296</p>
                        <span>已售 946 件</span>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <img src="img/a3.jpg" alt="图片加载失败">
                        <p class="item-name">礼品 · 爱的礼物-迪奥全新...</p>
                        <p class="item-sub">全新高定礼盒</p>
                        <p class="num">¥ 699</p>
                        <span>已售 169 件</span>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <img src="img/a4.jpg" alt="图片加载失败">
                        <p class="item-name">礼品 · 磁悬浮3D打印月球...</p>
                        <p class="item-sub">热销创意悬浮灯</p>
                        <p class="num">¥ 398</p>
                        <span>已售 136 件</span>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <img src="img/a5.jpg" alt="图片加载失败">
                        <p class="item-name">礼品 · 巧克巧蔻定制16粒...</p>
                        <p class="item-sup"></p>
                        <p class="num">¥ 288</p>
                        <span>已售 5759 件</span>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <img src="img/a6.jpg" alt="图片加载失败">
                        <p class="item-name">礼品 · 迪奥小姐花漾淡香...</p>
                        <p class="item-sub">迪奥新款礼盒</p>
                        <p class="num">¥ 1699</p>
                        <span>已售 167 件</span>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <img src="img/a7.jpg" alt="图片加载失败">
                        <p class="item-name">礼品 · woody书灯木质led...</p>
                        <p class="item-sub">送长辈精选礼物</p>
                        <p class="num">¥ 198</p>
                        <span>已售 692 件</span>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <img src="img/a8.jpg" alt="图片加载失败">
                        <p class="item-name">礼品 · 磁悬浮永生花灯/蓝...</p>
                        <p class="item-sub">热销创意新品</p>
                        <p class="num">¥ 399</p>
                        <span>已售 990 件</span>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <img src="img/a9.jpg" alt="图片加载失败">
                        <p class="item-name">礼品 · 桑蚕丝法式复古丝...</p>
                        <p class="item-sub">热销款暖心礼物</p>
                        <p class="num">¥ 169</p>
                        <span>已售 74 件</span>
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        <img src="img/a10.jpg" alt="图片加载失败">
                        <p class="item-name">礼品 · 灵犀感应音箱/深空...</p>
                        <p class="item-sub">新品上线</p>
                        <p class="num">¥ 168</p>
                        <span>已售 1 件</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

css代码

<style>
        /* 整体布局 */
        * {
            margin: 0;
            padding: 0;
        }

        .background {
            /* background-color: black; */
            height: 1200px;
            background-color: #F7F9FA;
        }

        .side {
            width: 1215px;
            margin: 0 auto;
            /* 内容水平居中的写法 */
        }

        /* 题头部分 */
        .title {
            width: 100%;
            height: 30px;
            padding-bottom: 5px;
            padding-top: 20px;
        }

        .title a {
            display: inline-block;
            color: black;
            font-size: 24px;
            font-weight: 700;
            line-height: 30px;
            /* 此时的line-height的值与.title的hight值相等，实现了文字竖直居中 */
            padding-left: 2px;
        }

        .title span {
            font-size: 20px;
            font-weight: 400;
            color: rgb(35, 38, 40);
            line-height: 24px;
            display: inline-block;
            border-left: 1px rgb(35, 38, 40) solid;
            padding-left: 15px;
            margin-left: 16px;
        }

        .title .more {
            color: rgb(113, 121, 127);
            font-size: 14px;
            line-height: 30px;
            float: right;
            font-weight: 400;
        }

        /* 横幅部分 */
        .banner {
            width: 96%;
            height: 158px;
            background-color: white;
            margin-top: 10px;
            padding: 10px 20px 5px;
            border-radius: 13px;
            margin-left: 5px;
        }

        .banner li {
            display: inline-block;
            padding: 0px 10px;
            font-size: 13px;
            line-height: 18px;
        }

        .banner li a,
        .brand p {
            color: rgb(113, 121, 127);
        }

        .brands {
            width: 100%;
            height: 90px;
            padding-top: 22px;
            margin-left: 26px;
        }

        .brand {
            width: 116px;
            height: 84px;
            display: inline-block;
            text-align: center;
            /* 文本水平居中 */
        }

        .brand img {
            width: 100%;
            height: 64px;
        }

        .brand p {
            font-size: 12px;
            line-height: 16px;
        }

        /* 内容部分 */
        .content {
            width: 100%;
            height: 734px;
            font-size: 0;
            margin-top: 16px;
        }

        .item {
            width: 211px;
            height: 343px;
            background-color: white;
            display: inline-block;
            text-align: center;
            padding: 8px 8px 0px;
            margin: 16px 8px 0px;
            border-radius: 8px;
        }

        .item img {
            width: 100%;
            height: 230px;
            border-radius: 5px;
        }

        .item-name {
            font-size: 16px;
            color: rgb(35, 38, 40);
            line-height: 20px;
            padding-top: 10px;
            padding-bottom: 5px;
        }

        .item-sub {
            font-size: 14px;
            color: rgb(255, 115, 76);
            border: 1px solid rgb(255, 115, 76);
            background-color: #FFF0EC;
            border-radius: 10px;
            margin: 0 auto;
            display: inline-block;
            padding: 0px 10px;
        }

        .item-sup {
            height: 20px;
        }

        .num {
            font-size: 16px;
            font-weight: 700;
            color: black;
            padding-top: 5px;
        }

        .item span {
            font-size: 12px;
            margin-top: 6px;
            line-height: 16px;
            color: rgb(113, 121, 127);
            display: inline-block;
        }

        /* 超级链接样式部分 */
        a {
            text-decoration: none;
        }

        a:hover h3,
        a:hover p,
        li a:hover,
        a:hover span {
            color: rgb(255, 115, 76);
        }
    </style>