仿写小米首页底部

最新推荐文章于 2023-10-23 10:21:32 发布

格格不入ち

最新推荐文章于 2023-10-23 10:21:32 发布

阅读量673

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/qq_45234177/article/details/119797472

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

说明：

1.由于本人只学习了部分html和css，所以本文没有涉及到js部分。
2.本文并没有实现小米官网首页的全部功能，还存在很多问题。如果以后技能提升，会继续更新实现未完成的功能。
3.这个练习会为分几篇文章介绍从最初分析到最后实现的代码，如果发现问题或者有更好的方法请联系本人探讨更正。
4.总体框架分析见博客《仿写小米官网简单的HTML+CSS练习》

目标：仿写小米官网的底部：
在这里插入图片描述
初步HTML元素分析：

      观察可知，整体部分为一个整个的块，使用一个div元素。
     里面的内容分为四块，结构相似，可以使用列表。第一个项里面可以分为两个列表，分别设置。后面三个表项设置好宽高，存入图片即可。
      整体框架如下：

<div class="bottom">
            <ul>
                <li class="first">
                    <ul>
                        <li class="line"><div ></div></li>
                        <li>
                            <a href="#">
                                <img src="./img/bottom-img/1-11.png">
                                <span>小米秒杀</span>
                            </a>
                        </li>
                        <li class="line"><div ></div></li>
                        <li>
                            <a href="#">
                                <img src="./img/bottom-img/1-12.png">
                                <span>企业团购</span>
                            </a>
                        </li>
                        <li class="line"><div ></div></li>
                        <li>
                            <a href="#">
                                <img src="./img/bottom-img/1-13.png">
                                <span>F码通道</span>
                            </a>
                        </li>
                    </ul>
                    <ul>
                        <li class="line"><div ></div></li>
                        <li>
                            <a href="#">
                                <img src="./img/bottom-img/1-21.png">
                                <span>米粉卡</span>
                            </a>
                        </li>
                        <li class="line"><div ></div></li>
                        <li>
                            <a href="#">
                                <img src="./img/bottom-img/1-22.png">
                                <span>以旧换新</span>
                            </a>
                        </li>
                        <li class="line"><div ></div></li>
                        <li>
                            <a href="#">
                                <img src="./img/bottom-img/1-23.png">
                                <span>话费充值</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="bottom-img"><a href="#"><img src="./img/bottom-img/2.jpg"></a></li>
                <li class="bottom-img"><a href="#"><img src="./img/bottom-img/3.jpg"></a></li>
                <li class="bottom-img"><a href="#"><img src="./img/bottom-img/4.jpg"></a></li>
            </ul>
        </div>

CSS样式：
代码实现：

<!DOCTYPE html>
<html lang="zh">
<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>小米商城 - 小米11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./iconfont/fontawesome-free-5.15.3-web/css/all.css">
    <style>
        body{
        	/* 设置整个字体样式 */
            font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
        }
       /* 底部 */
        .bottom{
            width: 1227px;
            height: 170px;
            margin-top: 14px;
            margin: 14px auto 0;
        }
        .bottom ul li{
            float: left;
            width: 316px;
            height: 100%;
        }
        /* 底部第一部分 */
        .bottom ul .first{
            width: 234px;
            height: 170px;
            background-color: #5F5750;
        }
        .first ul{
            padding-top: 1px;
        }
        .first ul li{
            float: left;
            width: 70px;
            height: 82px;
            line-height: 82px;
            padding: 0 3px; 
        }
        .first ul .line{
            width: 1px;
            height: 70px;
            padding: 2px 0;   
        }
        .first ul .line div{
            width: 1px;
            height: 70px;
            margin-top: 5px;
            background-color: #665E57;
        }
        .first ul li a{
            color: #C3C0BD;
            text-decoration: none;
        }
        
        .first ul li img{
            width: 24px;
            height: 24px;
            margin: 0 23px 4px;
        }
        .first ul li span{
            display: block;
            font-size: 12px;
            line-height: 12px;
            text-align: center;
            margin-top: -30px;
        }
        .first ul li:hover span{
            color: white;
        }
        .bottom ul .bottom-img{
            margin-left: 15px;
        }
        .bottom ul .bottom-img img{
            width: 316px;
            height: 100%;
        }