小米官网首屏代码（纯CSS编写）

**

1、html部分：

**

小米商城 
<!--    bar的内部容器-->
<div class="top-bar w">

    <!--        左侧导航的div-->
    <div class="link-bar">
        <a href="javascript:;">小米商城</a>
        <span class="line">|</span>
        <a href="javascript:;">MIUI</a>

        <span class="line">|</span>
        <a href="javascript:;">loT</a>

        <span class="line">|</span>
        <a href="javascript:;">云服务</a>

        <span class="line">|</span>
        <a href="javascript:;">金融</a>

        <span class="line">|</span>
        <a href="javascript:;">有品</a>

        <span class="line">|</span>
        <a href="javascript:;">小爱开放平台</a>

        <span class="line">|</span>
        <a href="javascript:;">企业团购</a>

        <span class="line">|</span>
        <a href="javascript:;">资质证照</a>

        <span class="line">|</span>
        <a href="javascript:;">协议规则</a>

        <span class="line">|</span>
        <a class="download-app" href="javascript:;">
            下载app
            <div class="code">
                <!--                    创建一个小三角-->
                <i class="arrow"></i>
                <img src="img/code.png" width="84">
                <span>小米商城App</span>
            </div>
        </a>

        <span class="line">|</span>
        <a href="javascript:;">Select Region</a>
    </div>

    <!--        购物车-->
    <div class="cart-bar">
        <a href="javascript:;">
            <span class="fas fa-shopping-cart"></span>
            购物车（0）
        </a>

        <div class="cart-info">
            <span>购物车中还没有商品，赶紧选购吧！</span>
        </div>
    </div>
    <!--        登录导航-->
    <div class="info-bar">

        <a href="javascript:;">登录</a>

        <span class="line">|</span>
        <a href="javascript:;">注册</a>

        <span class="line">|</span>
        <a href="javascript:;">消息通知</a>
    </div>

</div>

<div class="header w">

    <h1 class="logo" title="小米官网">
        <a href="#">
            小米官网
        </a>
    </h1>

    <div class="header-nav">

        <ul class="nav clearfix">
            <li>
                <a style="visibility: hidden" href="javascript:;">全部商品分类</a>

                <ul class="left-nav">
                    <li><a href="javascript:;">手机 电话卡</a></li>
                    <li><a href="javascript:;">电视 盒子</a></li>
                    <li><a href="javascript:;">笔记本 平板</a></li>
                    <li><a href="javascript:;">家电 插线板</a></li>
                    <li><a href="javascript:;">出行 穿戴</a></li>
                    <li><a href="javascript:;">智能 路由器</a></li>
                    <li><a href="javascript:;">电源 配件</a></li>
                    <li><a href="javascript:;">健康 儿童</a></li>
                    <li><a href="javascript:;">耳机 音箱</a></li>
                    <li><a href="javascript:;">生活 箱包</a></li>

                </ul>
            </li>
            <li class="action-hide"><a href="javascript:;">小米手机</a></li>
            <li class="action-hide"><a href="javascript:;">Redmi 红米</a></li>
            <li class="action-hide"<a href="javascript:;">电视</a></li>
            <li class="action-hide"><a href="javascript:;">笔记本</a></li>
            <li class="action-hide"> <a href="javascript:;">家电</a></li>
            <li class="action-hide"><a href="javascript:;">路由器</a></li>
            <li class="action-hide"><a href="javascript:;">智能硬件</a></li>
            <li ><a href="javascript:;">服务</a></li>
            <li><a href="javascript:;">社区</a></li>
            <div class="hide-list"></div>
        </ul>

    </div>
    <div class="search">
        <form action="">
            <input type="text">

            <a class="left">小米9</a>
            <a class="right">小米9SE</a>

            <button type="submit">
                <i class="fas fa-search"></i>
            </button>
            <div class="searchdown">
                <ul>
                    <li><a href="">小米9</a></li>
                    <li><a href="">Redmi K20 pro</a></li>
                    <li><a href="">Redmi K20</a></li>
                    <li><a href="">Redmi Note 7 pro</a></li>
                    <li><a href="">Redmi Note 7 </a></li>
                    <li><a href="">小米电视4c </a></li>
                    <li><a href="">电视32英寸 </a></li>
                    <li><a href="">小爱音箱 </a></li>
                    <li><a href="">净水器 </a></li>
                </ul>
            </div>
        </form>

    </div>
</div>
<div class="banner  w">
    <ul class="img-list">
        <li><a href=""><img src="img/banner/1.jpg" alt=""></a></li>
        <li> <a href=""><img src="img/banner/2.jpg" alt=""></a></li>
        <li> <a href=""><img src="img/banner/3.jpg" alt=""></a></li>
        <li> <a href=""><img src="img/banner/4.jpg" alt=""></a></li>
        <li> <a href=""><img src="img/banner/5.jpg" alt=""></a></li>
    </ul>
    <div class="point">
        <a class="active" href=""></a>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
        <a href=""></a>
    </div>
    <div class="slide">
        <a  class="prev" href=""></a>
        <a  class="next" href=""></a>
    </div>
</div>
      <div class="fixed-bar">
<ul>
    <li><a href="javascript:;"><i class="fas fa-mobile-alt"></i></a></li>
    <li><a href="javascript:;"><i class="fas fa-user"></i></a></li>
    <li><a href="javascript:;"><i class="fas fa-tools"></i></a></li>
    <li><a href="javascript:;"><i class="fas fa-server"></i></a></li>
    <li><a href="javascript:;"><i class="fas fa-shopping-cart"></i></a></li>

</ul>
      </div>

<div class="server w clearfix">
  <div class="shortcut">
      <ul class="icon-list">
          <li>
              <a href="javascript:;">
                  <i class="fas fa-clock"></i>
                  小米秒杀
              </a>
          </li>
          <li>
              <a href="javascript:;">
                  <i class="fas fa-gift"></i>
                  企业团购
              </a>
          </li>
          <li>
              <a href="javascript:;">
                  <i class="fas fa-facebook-square"></i>
                  F码通道
              </a>
          </li>
          <li>
              <a href="javascript:;">
                  <i class="fas fa-sd-card"></i>
                  米粉卡
              </a>
          </li>
          <li>
              <a href="javascript:;">
                  <i class="fab fa-newspaper"></i>
                 以旧换新
              </a>
          </li>
          <li>
              <a href="javascript:;">
                  <i class="fas fa-chart-bar"></i>
                 话费充值
              </a>
          </li>
      </ul>
  </div>

  <div class="ad1">
      <a class="" href=""><img src="img/11.jpg" alt=""></a>
  </div>
  <div class="ad">
      <a href=""><img src="img/12.jpg" alt=""></a>
  </div>
  <div class="ad">
      <a href=""><img src="img/13.jpg" alt=""></a>
  </div>

2、CSS部分：

/首页的样式表/
/设置导航条的容器/
.bar-wrapper{
/宽度就是屏幕的宽度/
/width: 100%;/
/高度/
height: 40px;
/* 设置背景颜色*/
background-color: #333;
}

/设置顶部导航条/
.bar-wrapper .top-bar{
height: 100%;
line-height: 40px;

}

/设置左侧导航条/
.link-bar{
/向左浮动/
float: left;

}

/设置右侧工具/
.info-bar , .cart-bar{
float: right;

}

/下载app的链接/
.link-bar .download-app{
position: relative;
}

/鼠标移入显示二维码/
.link-bar .download-app:hover .code{
display: block;
}

/设置左侧的二维码/
.link-bar .code{
display: none;
width: 124px;
height: 150px;
text-align: center;
background-color: #fff;
position: absolute;
left: -40px;
box-shadow: 0 0 4px rgba(0,0,0,.3);
line-height: 1;
z-index: 999;

}

/设置二维码上方的小三角/
.link-bar .arrow{
/* 开启绝对定位*/
position: absolute;
width: 0;
height: 0;
/* 设置边框*/
border: 10px solid #fff;
/* 去除上边框*/
border-top: none;
/* 设置边框的颜色*/
border-color: transparent transparent #fff;
/* 设置位置*/
top:-10px;
/* 居中*/
left: 0;
right: 0;
margin: 0 auto;
}

/二维码图片/
.code img{
margin: 20px;
}

.link-bar .code span{
font-size: 14px;
color: #333;
}

/设置超链接的样式/
.bar-wrapper a{
/转换为行内块/
/display: inline-block;/
float: left;
/设置高度/
height: 40px;
/设置字体大小/
font-size: 12px;
color: #b0b0b0;
/去除下划线/
text-decoration: none;
vertical-align: top;
}

/鼠标移入的样式/
.bar-wrapper a:hover{
color: #fff;
}

/小竖线/
.bar-wrapper .line{
float: left;
font-size: 12px;
color: #424242;
margin: 0 6px;
}

/设置购物车的条/
.cart-bar{
/开启相对定位/
position: relative;
}

/设置购物车鼠标移入效果/
.cart-bar:hover a{
background-color: #fff;
color: #ff6700;
}

/设置购物车的样式/
.cart-bar a{
float: none;
display: block;
width: 120px;
text-align: center;
background-color: #424242;
margin-left: 15px;
position: relative;
z-index: 1000;
}

/设置购物车的下拉框/
.cart-bar .cart-info{
position: absolute;
width: 316px;
height: 0;
overflow: hidden;
text-align: center;
line-height: 100px;
box-shadow: 0 0 5px rgba(0,0,0,.3);
background-color: #fff;
right: 0;
z-index: 999;
transition: all 0.3s;
}

/鼠标移入，显示购物车详情/
.cart-bar:hover .cart-info{
height: 100px;
}

/头部的wrapper/
.header-wrapper{
position: relative;

}

/设置头部的样式/
.header{
height: 100px;
/position: relative;/
}

/设置logo的样式/
.header .logo{
float: left;
margin-top: 22px;
}

/*
设置logo中链接的样式
*/
.logo a{
display: block;
width: 55px;
height: 55px;
text-indent: -9999px;
background: #ff6700 url("…/img/mi-logo.png") center;
}

/设置头部导航/
.header-nav{
width: 778px;
height: 100px;
line-height: 100px;
float: left;
/margin-left: 65px;/
}

/设置头部导航中的li/
.header-nav > .nav > li{
float: left;
font-size: 16px;
padding-right: 20px;

}

/设置链接的样式/
.header-nav li a{
color: #333333;

text-decoration: none;

}

/超链接移入的样式/
.header-nav li a:hover{
color: #ff6700;
}

/左侧导航条/
.left-nav{
/开启绝对定位/
position: absolute;
height: 440px;
width: 234px;
padding-top: 20px;
background-color: rgba(0,0,0,.6);
top: 100px;
/left: 0;/
margin-left: -55px;
z-index: 999;
}

/设置链接样式/
.left-nav li{
height: 42px;
line-height: 42px;
}

/设置超链接的样式/
.left-nav li a{
display: block;
height: 42px;
color: white;
font-size: 14px;
padding-left: 30px;
}

.left-nav li a::after{
content: ‘\f105’;
font-size: 20px;
font-family: ‘Font Awesome 5 Free’;
font-weight: 900;
float: right;
margin-right: 30px;
}
.left-nav li a:hover{
background-color: #ff6700;
color: #fff;
}
.header-nav .hide-list{
position: absolute;
top: 100px;
height: 0;
overflow: hidden;
left: 0;
/height: 230px;/
width: 100%;
background-color: #ffffff;
z-index: 333333;

}
.header-nav .action-hide:hover ~ .hide-list,
.header-nav .action-hide:hover
{ border-top: 1px solid #b0b0b0;
height: 230px;
}
.header .search{
float: right;
margin-top: 25px;
position: relative;

}
.header .search input[type=“text”]{
float: left;
width: 231px;
height: 48px;
border: 1px solid #e0e0e0;
font-size: 14px;
padding: 0 0px 0 10px;
outline: none;
}
/表单的消失/
.search input[type=“text”]:focus ,
.search input[type=“text”]:focus~button{
border-color: #ff6700;
}
.search input[type=“text”]:focus~.searchdown{
display: block;
border-color: #ff6700;
}
.search >form>a{
display: block;
}
.search input[type=“text”]:focus~a{
display: none;
}
.search .searchdown{
position: absolute;
top:50px;
width: 241px;
height:200px;
border: 1px solid #b0b0b0;
display: none;
z-index: 1111;
}
.search .searchdown li a{
display: block;
text-decoration: none;
font-size: 13px;
padding-top: 3px;
padding-left: 10px;
}
.search .searchdown li a:hover{
color: #ff6700;
background-color: #e0e0e0;
}
/表单消失jieshu/
.header .search button{
float: left;
width: 50px;
height: 50px;
font-size: 20px;
color: #616161;
background-color: #ffffff;
border: 1px solid #e0e0e0;
border-left: none;
padding: 0;
outline: none;
}
.header .search button:hover{
color: #ffffff;
background-color: #ff6700;
}
/点击时表单边框都改变/
.header .search input[type=“text”]:focus,
.header .search input[type=“text”]:focus+button{
border-color:#ff6700;
}
.header .search .left{
position: absolute;
font-size: 12px;
top: 20px;
background-color: #b0b0b0;
left: 210px;
text-align: center;
}
.header .search .right{
position: absolute;
font-size: 12px;
margin:auto;
left: 150px;
top: 20px;
text-align: center;
background-color: #b0b0b0;
}
.header .search .right:hover,.header .search .left:hover{
background-color: #ff6700;
}

.banner{
height: 460px;
width: 1226px;
margin: 0 auto;
position: relative;
}
.banner .img-list li{

position: absolute;

}
.banner img{
width: 100%;
}
.banner .point{
position: absolute;
right: 26px;
bottom: 34px;
}
.banner .point a{
display: block;
float: left;
width: 6px;
height: 6px;
border: 2px solid rgba(255,255,255,.3);
background-color: rgba(0,0,0,.4);
border-radius: 50px;
margin-left: 10px;
}
/.banner .point .active 该点常亮/
.banner .point a:hover,
.banner .point .active{
border-color: rgba(0,0,0,.4);
background-color: rgba(255,255,255,.3);
}
.banner .slide a{
position: absolute;
width: 41px;
height: 69px;
background-image: url("…/img/icon-slides.png");
z-index: 99999;
/* 垂直居中*/
top: 0;
bottom: 0;
margin: auto 0;
}
.slide .prev{
position: absolute;
left: 234px;
background-position: -84px 0;
}
.slide .next{
position: absolute;
right: 0;
background-position: -125px 0;
}
.slide .prev:hover{
background-position: 0 0;
}
.slide .next:hover{
background-position: -42px 0;
}

.fixed-bar{
position: fixed;
width: 25px;
height: 199px;
border: 1px solid #f5f5f5;
top: 300px;
z-index: 888885555;
/* left + margin-left + width + margin_right + right=父元素的宽度
所以： left（auto） + 中线右边的长度(margin-right为负，往右拉他) =父元素的宽度
left 为auto ； right :50%;使设置的元素在屏幕中线位置；
*/
right :50%;
margin-right: -640px;

}
.fixed-bar li{
height: 39px;
width: 25px;
border-bottom: 1px solid #f5f5f5;
}
.fixed-bar li a{
display: block;
font-size: 18px;
text-align: center;
line-height: 39px;
color: #b0b0b0;
}
.fixed-bar li a:hover{
color: #ff6700;
background-color: #b0b0b0;
}
.server{
margin-top: 14px;
}
.server .shortcut{
float: left;
width: 234px;
height: 170px;
background-color: #5f5750;
}
.shortcut .icon-list li{
position: relative;
float: left;
}
.shortcut .icon-list li a{
display: block;
width: 78px;
height: 60px;
color: #dbd6c5;
text-decoration: none;
text-align: center;
margin-top: 25px;

}
.shortcut .icon-list li i{
display: block;
font-size: 18px;
}
.shortcut .icon-list li a:hover{
color: #ffffff;
}
.icon-list li:nth-child(1):before,
.icon-list li:nth-child(2):before,
.icon-list li:nth-child(3):before{
content: ‘’;
height: 1px;
width: 66px;
background-color: #665e57;
/background-color: red;/
position: absolute;
left: 6px;
bottom: 0;
}
.icon-list li:nth-child(1):after,
.icon-list li:nth-child(2):after,
.icon-list li:nth-child(4):after,
.icon-list li:nth-child(5):after{
content: ‘’;
height: 70px;
width: 1px;
background-color: #665e57;
/background-color: red;/
position: absolute;
right: 0;
top:7.5px;

}

.server .ad{
float: left;
width:316px ;
height: 170px;
margin-left: 15px;
}
.server .ad1{
float: left;
width:316px ;
height: 170px;
margin-left: 14px;
}
.server .ad img,.server .ad1 img{
width: 100%;
height: 100%;
}

3、小米官网图片，由于只做了首屏，只做了首屏的尺寸：

在这里插入图片描述

Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生