HTML5|吭哧吭哧制作小米首页一小部分内容

最新推荐文章于 2023-05-28 15:52:52 发布

牙签儿的计算机空间

最新推荐文章于 2023-05-28 15:52:52 发布

阅读量747

点赞数 4

本文链接：https://blog.csdn.net/weixin_44479003/article/details/89108544

版权

制作小米首页部分（基础中的基础）

最近学校里来了一个培训机构做宣传，我就跟着偷摸地学了一丢丢东西，主要是讲如何用HTML5制作网页。
首先，可以了解一下HTML5与HTML4的区别：

字太多了，还是自己去菜鸟教程上看吧：
link链接
里面内容超全，可供初学者自学

好了，废话不多说…
打开小米官网首页，下面就是我主要模仿的一小部分：
主要模仿的部分
因为我是一只菜鸟，所以靠我独立完成，我就得哭死，于是我借助了一下外力，也就是github，以及CSDN，还有菜鸟教程，主要查询一下那些个标签都是咋个用法。
下面是我的代码

用Visual Studio Code制作的（做了两个下午......）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米商城 - 小米9、小米MIX 3、红米Note 7，小米电视官方网站</title>
    <style>
        * {
            margin: 0 0 10px;
            padding: 0;
        }


        body {
            background-color: #f5f5f5;
        }


        .box {
            width: 1234px;
            height: 628px;
            float: left;
            padding: 50px;

        }

        .titlekuang {
            position: relative;
            height: 58px;
            -webkit-font-smoothing: antialiased;
            display: block;
        }

        .title {
            color: #333;
            margin: 0;
            font-size: 22px;
            font-weight: 200;
            line-height: 58px;
            display: block;
        }

        .box1 {
            width: 234px;
            height: 614px;
            background-color: black;
            float: left;
        }


        .box2 {
            width: 992px;
            height: 614px;
            float: left;
        }


        .box3 .box4 {
            list-style: none;
            width: 234px;
            height: 300px;
            background-color: white;
            float: left;
            box-sizing: border-box;
            text-align: center;
            margin: 0 0 14px 14px;

        }


        .box1:hover {
            box-shadow: 0 0 20px 0 rgb(230, 226, 226);
            transform: translateY(-2px);
        }

        .box4:hover {
            box-shadow: 0 0 20px 0 rgb(230, 226, 226);
            transform: translateY(-2px);
        }

        .box4 .text1 {
            display: inline-block;
            width: 214px;
            height: 18px;
            font-size: 14px;
            text-align: center;
            font-family: 微软雅黑;
        }

        .box4 .text2 {
            display: inline-block;
            width: 214px;
            height: 18px;
            margin: 0 10px 10px 10px;
            font-size: 12px;
            color: #b0b0b0;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-family: 微软雅黑;
        }

        .box4 .text3 {
            color: #ff6700;
            text-align: center;
            margin: 0 10px 14px 10px;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="titlekuang">
            <h2 class="title">手机</h2>
        </div>

        <div class="box1">
            <a href="https://www.mi.com/line-friends/" target="_blank"><img src="http://i1.mifile.cn/a4/xmad_15546307107807_NAsvn.jpg"
                    width="234px" height="614" alt=""></a>
        </div>
        <div class="box2">

            <ul class="box3">

                <li class="box4">
                    <a href="https://www.mi.com/mi9/" target="_blank"><img src="http://i1.mifile.cn/a1/pms_1550642182.7527088!220x220.jpg" width="160px" height="160px"
                        alt=""></a>
                    <p class="text1">小米9 6GB+128GB</p>
                    <p class="text2">骁龙855，索尼4800万超广角微距三摄</p>
                    <p class="text3">2999元</p>
                </li>
                <li class="box4">
                    <a href="https://www.mi.com/mi9se/" target="_blank"><img src="http://i1.mifile.cn/a1/pms_1550646283.24414368!220x220.jpg" width="160px" height="160px"
                        alt=""></a>
                    <p class="text1">小米9 SE 6GB+64GB</p>
                    <p class="text2">索尼4800万超广角三摄，骁龙712</p>
                    <p class="text3">1999元</p>
                </li>
                <li class="box4">
                    <a href="https://www.mi.com/redminote7/" target="_blank"><img src="http://i1.mifile.cn/a1/pms_1547020852.30751177!220x220.jpg" width="160px" height="160px"
                        alt=""></a>
                    <p class="text1">Redmi Note 7 3GB+32G</p>
                    <p class="text2">4800万拍照千元机，18个月超长质保</p>
                    <p class="text3">999元</p>
                </li>
                <li class="box4">
                    <a href="https://www.mi.com/miplay/" target="_blank"><img src="http://i1.mifile.cn/a1/pms_1545457719.47232999!220x220.png" width="160px" height="160px"
                        alt=""></a>
                    <p class="text1">小米Play 4GB+64GB</p>
                    <p class="text2">5.84"小水滴全面屏，后置1200万 AI 双摄</p>
                    <p class="text3">1099元</p>
                </li>
                <li class="box4">
                    <a href="https://www.mi.com/mi8youth/" target="_blank"><img src="http://i1.mifile.cn/a1/pms_1537324004.08544830!220x220.jpg" width="160px" height="160px"
                        alt=""></a>
                    <p class="text1">小米8青春版6GB+64GB</p>
                    <p class="text2">潮流镜面渐变色，2400万自拍旗舰</p>
                    <p class="text3">1499元</p>
                </li>
                <li class="box4">
                    <a href="https://www.mi.com/mi8i/" target="_blank"><img src="http://i1.mifile.cn/a1/pms_1527685277.65255600!220x220.jpg" width="160px" height="160px"
                        alt=""></a>
                    <p class="text1">小米8 SE 6GB+64GB</p>
                    <p class="text2">三星 AMOLED 全面屏，骁龙710</p>
                    <p class="text3">1399元</p>
                </li>
                <li class="box4">
                    <a href="https://item.mi.com/product/10000091.html" target="_blank"><img src="http://i1.mifile.cn/a1/pms_1524621350.77238418!220x220.jpg" width="160px" height="160px"
                        alt=""></a>
                    <p class="text1">小米6X 6GB+128GB</p>
                    <p class="text2">轻薄美观的拍照手机</p>
                    <p class="text3">1549元</p>
                </li>
                <li class="box4">
                    <a href="https://www.mi.com/redmi6a/" target="_blank"><img src="http://i1.mifile.cn/a1/pms_1528719461.20891365!220x220.jpg" width="160px" height="160px"
                        alt=""></a>
                    <p class="text1">小米6X 6GB+128GB</p>
                    <p class="text2">12nm高性能处理器，1300万高清相机</p>
                    <p class="text3">549元</p>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

主要想法就是，先整一个大盒子（包括你所有的内容），然后再整最左边的那个图，开个小一点的盒子，弄右边的时候，先整体开一个后边的盒子，然后再逐个击破，一般搞定一个小盒子，其余的也就好弄了。字体什么的，居中什么的那个链接里头有，我也就不再赘述了。

这是我模仿的：
在这里插入图片描述
这里面比较值得一提的是，点击每个图片的时候会有一个浅色阴影，而且每张图片都是可以直接跳转到产品网页的，我觉得还挺有收获的。

牙签儿的计算机空间

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML5|吭哧吭哧制作小米首页一小部分内容

制作小米首页部分（基础中的基础）最近学校里来了一个培训机构做宣传，我就跟着偷摸地学了一丢丢东西，主要是讲如何用HTML5制作网页。首先，可以了解一下HTML5与HTML4的区别：字太多了，还是自己去菜鸟教程上看吧：link链接里面内容超全，可供初学者自学好了，废话不多说…打开小米官网首页，下面就是我主要模仿的一小部分：因为我是一只菜鸟，所以靠我独立完成，我就得哭死，于是我借助...
复制链接

扫一扫