淘宝宝贝页面制作

Y-琼眸

已于 2022-08-04 19:04:49 修改

阅读量415

点赞数 9

文章标签：前端

于 2022-08-04 18:58:32 首次发布

本文链接：https://blog.csdn.net/rbh200812/article/details/126164936

版权

今天七夕节，想必都给自己对象买了礼物吧，可怜的我没有对象，我只爱代码！！你们给对象准备的礼物是不是很多在淘宝上买的，那么今天我们来搞点实际的东西。

学了这么久H5和C3，不做点实际的东西，啧，说不过去哈。那么今天我们来做一个简单的宝贝页面制作。下面这个就是我做的，可以简单看一下

这个页面的制作需要用到以下的知识点：网页框架构造、常用h5标签、字体样式、文本样式、盒子模型等等，盒子模型尤为重要。这些我前面的文章都有介绍，大家可以瞅瞅。

还是要说一下，咱们程序员一定要多敲代码，大家可以把这个东西当成一个小练习做做，毕竟熟能生巧嘛，说不定以后还能买到自己做的东西。

好了话不多说直接上代码

<!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>床</title>
    <style>
        a {
            text-decoration: none;
            color: black;
        }

        .box {
            width: 600px;
            height: 300px;
            border: 2px solid transparent;
            border-radius: 30px;
            background-color: rgba(128, 128, 128, 0.15);
        }

        .box1 {
            padding: 20px 20px;
            margin-bottom: -290px;
        }

        .box2 {
            margin-left: 300px;
        }

        span {
            font: 600 25px cursive;
            line-height: 28px;

        }

        .box2>img {
            vertical-align: middle;
        }

        .box3 {
            font-size: 14px;
            color: red;
            width: 75px;
            border: orange 1px solid;
            border-radius: 5px;
            text-align: center;
        }

        .box4 {
            margin-left: 300px;
            margin-top: 100px;
        }

        .box4>span {
            font-size: 30px;
            color: red;

        }

        .box:hover {
            box-shadow: 0 0 15px;
            border: 2px solid #F5B899;
        }
    </style>
</head>

<body>
    <a href="#">
        <div class="box">
            <div class="box1">
                <img src="./床.webp" alt="" width="260px">
            </div>
            <div class="box2">
                <img src="./七夕节.png" alt="" width="80px">
                <span>航哥牌床上十件套，超级实惠，不买你妈买菜超级加倍！！</span>
                <div class="box3">
                    不送运费险
                </div>
            </div>
            <div class="box4">
                <span>秒杀价￥99999</span>
                <del>99999999</del>
            </div>
        </div>
    </a>

</body>

</html>

上面就是这个页面的全部代码了，大家可以看看，能跟我讨论一下就更好了。

补充两个知识点，上一篇没有讲

        .box2 {
            width: 100px;
            height: 100px;
            background-color: aqua;
            border-bottom-right-radius: 100%;
            /*圆角*/
        }

1.border-bottom-right-radius: ; 这个是设置盒子模型的圆角。

2.margin 外边距 指当前盒子和其他盒子之间的距离

外边距大小可正可负

margin-top 上边距盒子正值向下负值向上

right 右边距默认时没有效果的

bottom 下边距盒子自己不动挤下面盒子正值下面盒子向下负值向上

left 左边距盒子正值向右负值向左

简写 margin：;

也可以跟四个值三个值两个值一个值