web练习仿小米页面_仿小米服务页面-CSDN博客

本文链接：https://blog.csdn.net/LIUaiCHEN_/article/details/137181560

效果图：

HTML代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="../素材/font_4488562_j154ryih3xs/iconfont.css">
</head>

<body>
    <div class="header">
        <div class="content">
            <div class="header-left">
                <a rel="nofollow" href="//www.mi.com/" >小米官网</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//www.mi.com/shop" >小米商城</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//hyperos.mi.com/" target="_blank">小米澎湃OS</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//iot.mi.com" target="_blank">IoT</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//i.mi.com/" target="_blank">云服务</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//airstar.com/home" target="_blank">天星数科</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//youpin.mi.com/" target="_blank">有品</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//xiaoai.mi.com/" target="_blank">小爱开放平台</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//www.mi.com/aptitude/list/?id=88" target="_blank">资质证照</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//www.mi.com/aptitude/list/" target="_blank">协议规则</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="//www.mi.com/appdownload/" target="_blank">下载app</a>
                <span class="sep">|</span>
                <a rel="nofollow" href="#">Select Location</a>
            </div>
            <div class="header-right">
                <a href="#">登录</a>
                <span class="sep">|</span>
                <a href="#">注册</a>
                <span class="sep">|</span>
                <a href="#">消息通知</a>
                <span class="shopping"><a href="#"><span class="iconfont icon-gouwuche"></span>购物车</a></span>
            </div>

        </div>
    </div>
    <div class="top-nav">
        <div class="content">
            <div class="top-nav-left">

            </div>
            <div class="top-nav-mid">
                <ul>
                    <li><a href="#">xiaomi手机</a></li>
                    <li><a href="#">xiaom手机</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="#">xia手机</a></li>
                    <li><a href="#">xiaomi手机</a></li>
                    <li><a href="#">手机</a></li>

                </ul>
            </div>
            <div class="top-nav-right">
                <form action="#">
                    <input type="text">
                    <span class="iconfont icon-icon-test2"></span>
                </form>
            </div>
        </div>
    </div>
    <div class="xia">
        <div class="content">
            <div class="left">
                <ul>
                    <li><a rel="nofollow" href="#">手机</a></li>
                    <li><a rel="nofollow" href="#">电视</a></li>
                    <li><a rel="nofollow" href="#">家电</a></li>
                    <li><a rel="nofollow" href="#">笔记本平板</a></li>
                    <li><a rel="nofollow" href="#">出行穿戴</a></li>
                    <li><a rel="nofollow" href="#">耳机音响</a></li>
                    <li><a rel="nofollow" href="#">健康儿童</a></li>
                    <li><a rel="nofollow" href="#">生活箱包</a></li>
                    <li><a rel="nofollow" href="#">智能路由器</a></li>
                    <li><a rel="nofollow" href="#">电源配件</a></li>
                </ul>
            </div>
            <div class="right">
                <div class="zb"><span class="iconfont icon-zuo"></div>
                <div class="yb"><span class="iconfont icon-you"></div>
                <div class="xb">
                    <ul>
                        <li><a rel="nofollow" href="#">&ensp;</a></li>
                        <li><a rel="nofollow" href="#">&ensp;</a></li>
                        <li><a rel="nofollow" href="#">&ensp;</a></li>
                        <li><a rel="nofollow" href="#">&ensp;</a></li>
                        <li><a rel="nofollow" href="#">&ensp;</a></li>
                        <li><a rel="nofollow" href="#">&ensp;</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>  
    <div class="buttom">
        <div class="content">
            <div class="aaa">
                <ul>
                    <li><a rel="nofollow" href="#"><span class="iconfont icon-icon-test1"></span>保障范围</a></li>
                    <li><a rel="nofollow" href="#"><span class="iconfont icon-qiyetuangou-copy"></span>企业团购</a></li>
                    <li><a rel="nofollow" href="#"><span class="iconfont icon-Fnum"></span>F码通道</a></li>
                    <li><a rel="nofollow" href="#"><span class="iconfont icon-mifenka"></span>米粉卡</a></li>
                    <li><a rel="nofollow" href="#"><span class="iconfont icon-yijiuhuanxin"></span>以旧换新</a></li>
                    <li><a rel="nofollow" href="#"><span class="iconfont icon-huafeichongzhi"></span>话费充值</a></li>
                </ul>
            </div>
            <div class="zhaopian">
                <ul>
                    <li><a rel="nofollow" href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b67117bc92924fb2ff0e7ad2be86084.png?w=632&h=340" alt=""></a></li>
                    <li><a rel="nofollow" href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8dede2520f8dfff9c9b690af498cafe8.jpg?w=632&h=340" alt=""></a></li>
                    <li><a rel="nofollow" href="#"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1ac77590368ff636d0b4f6a988133f55.png?w=632&h=340" alt=""></a></li>
                </ul>
            </div>
        </div>
    </div>
    </div>
    <div class="you">
        <a rel="nofollow" href="#"><span class="iconfont icon-shoujiapp"></span></a>
        <a rel="nofollow" href="#"><span class="iconfont icon-gerenzhongxin
            "></span></a>
        <a rel="nofollow" href="#"><span class="iconfont icon-shouhoufuwu"></span></a>
        <a rel="nofollow" href="#"><span class="iconfont icon-rengongkefu
            "></span></a>
        <a rel="nofollow" href="#"><span class="iconfont icon-gouwuche"></span></a>
    </div>







</body>

</html>

css代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

.content {
  width: 1226px;
  margin: 0 auto;
}

/* header开始 */
.header {
  height: 40px;
  background-color: #333;
  color: #B0B0B0;
  font-size: 12px;
}

.header .content {
  display: flex;
  justify-content: space-between;
}

.header-left {
  width: 790px;
}

.header-right {
  width: 230px;
}

.header .content a {
  font-size: 12px;
  color: #B0B0B0;
  line-height: 40px;


}

.header .sep {
  margin: 0 3.6px;
}

.header .shopping {
  margin-left: 20px;
}

/* header结束 */


/* top-nav */
.top-nav {
  height: 100px;
  overflow: hidden;
}

.top-nav .content {
  display: flex;
  justify-content: space-between;
}

.top-nav-left {
  width: 56px;
  height: 56px;
  background: url("https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png") no-repeat;
  background-size: 56px;
  margin-top: 20px;

}

.top-nav-mid ul {
  display: flex;
  justify-content: space-between;
  width: 700px;
  height: 100px;
  line-height: 100px;

}

.top-nav-mid ul a {
  color: #333;
}

.top-nav-right {
  padding-top: 25px;
  width: 296px;
  height: 100px;
  line-height: 100px;
}

.top-nav-right form {
  position: relative;
  width: 296px;
  height: 50px;

}

.top-nav-right input {
  position: absolute;
  left: 0;
  top: 0;
  width: 245px;
  height: 50px;
  vertical-align: middle;
  outline: none;
}

.top-nav-right span {

  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  width: 52px;
  height: 50px;
  line-height: 50px;
  border: 1px solid black;
  text-align: center;
  font-size: 24px;
}
/* xia */
.xia{
  width: 1226px;
  height: 460px;
  background: url("../素材/3.jpg") no-repeat;
  background-size: 1226px 460px;
  margin: 0 auto;

}
.xia .content{
  position: relative;
}
.xia .content .left ul{
  width: 234px;
  height: 460px;
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  padding: 20px 0px;
  
}
.xia .content .left ul li{

  display: list-item;
  text-align: left;
}
.xia ul li a{
  width: 234px;
  height: 42px;
  display: block;
  height: 42px;
  line-height: 42px;
  position: relative;
  padding-left: 30px;
  float: left;
}
a{
  font-size: 12px;
  /* 去除默认样式加继承父元素 */
  text-decoration: none;
  color: inherit;
}
.xia .content .zb{
  left: 234px;
  top: 230px;
  position: absolute;
}
.xia .content .yb{
  right:0px;
  top: 230px;
  position: absolute;
}
.xia .content .xb{
  box-sizing:inherit;
  right:30px;
  bottom: 20px;
  position: absolute;
}
.xia .content .xb ul{
  display: flex;
  flex-direction: row;
  /* flex-direction: column-reverse; */
}
.xia .content .xb a{
  width: 10px;
  height: 10px;
}
.xia .content .xb ul li{
  list-style: disc;
}
.xia .content .xb ul li::marker {
  font-size: 15px;
}

/* xia */

/* bottom */
.buttom{
  margin-top: 15px;
}
.buttom .content .aaa{
  background-color: rgb(95, 87, 80);
  float: left;
  line-height: 21px;
  font-size: 12px;
}

.buttom .content .aaa ul{
  width: 234px;
  height: 170px;
  line-height: 18px;
  text-align: center;
}

.buttom .content .aaa ul li{
  display: list-item;
  float: left;
  width: 70px;
  height: 82px;
  padding: 0px 3px;
  position: relative;
  text-align: center;
}
.buttom .content .aaa li a{
  width: 70px;
  height: 64px;
  color: #ffff;
  display: block;
  font-size: 12px;
  line-height: 18px;
  padding-top: 18px;
  text-align: center;
}
.buttom .zhaopian{
  width: 978px;
  height: 170px;
  float: right;
}
.buttom .zhaopian ul{
  width: 978px;
  height: 170px;
  padding: 0;
  margin: 0;
}
.buttom .zhaopian ul li{
  float: left;
  margin-left: 15px;
}
.buttom .zhaopian ul li:nth-child(1) {
  margin-left: 0px;
}
.buttom .zhaopian ul li a{
  display: block;
  box-sizing: border-box;
}
.buttom .zhaopian ul li a img{
  height: 170px;
  width: 315px;
  text-align: left;
  position: relative;
}
/* bottom */

/* you */
.you{
  color: rgb(51, 51, 51);
  display: flex;
  position:fixed;
  right: 57px;
  bottom: 40px;
  z-index: 99;
  line-height: 21px;
  z-index: 99;
  flex-direction: column;
  flex-direction: row-reverse;
  flex-direction: column-reverse;
}
.you a{
  display: block;
  font-size: 14px;
  text-align: center;
  height: 42px;
  width: 27px;
  text-decoration-style: solid;
  position: relative;
}