css仿小米官网-网页头部的制作

2022-05-22 18:00:44 阅读：140 来源： 互联网

标签：solid 网页 width color height header 官网 css left

下面是小米官网网页

现在我们开始制作最顶部黑色部分，设置头部背景颜色；小米网页的元素都是居于网页居中的，设置居中

.header {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    background-color: #333;
}
.wrap {
    width: 1226px;
    margin: 0 auto;
}

头部部分元素分左侧和右侧两部分，我们用ul套a来实现，使左侧ul左浮动右侧ul右浮动

            <ul class="header-left">
                <li><a href="#">小米商城</a><span>|</span></li>
                <li><a href="#">MIUI</a><span>|</span></li>
                <li><a href="#">loT</a><span>|</span></li>
                <li><a href="#">云服务</a><span>|</span></li>
                <li><a href="#">天星数科</a><span>|</span></li>
                <li><a href="#">有品</a><span>|</span></li>
                <li><a href="#">小爱开放平台</a><span>|</span></li>
                <li><a href="#">企业团购</a><span>|</span></li>
                <li><a href="#">资质证照</a><span>|</span></li>
                <li><a href="#">协议规则</a><span>|</span></li>
                <li>
                    <a href="#">下载app</a><span>|</span>
                    <div>
                        <a href="#">小米商城App</a>
                    </div>
                    <div class="triangle">

                    </div>
                </li>
                <li><a href="#">智能生活</a><span>|</span></li>
                <li><a href="#">Select Location</a></li>
            </ul>
            <ul class="header-right">
                <li><a href="#">登录</a><span>|</span></li>
                <li><a href="#">注册</a><span>|</span></li>
                <li><a href="#">消息通知</a></li>
                <li class="cart">
                    <a href="#">
                        <i class="iconfont">&#xe747;</i>购物车(0)
                    </a>
                    <div class="cart-list">
                        购物车中还没有商品，赶紧选购吧！
                    </div>
                </li>
            </ul>

网页每个元素右边都有一个浅浅的竖杠，这里我们用|表示，给span设置css样式，把元素之间的间隙加大，实现与原网页一样的效果

.header-left {
    float: left;
}
.header-right {
    float: right;
}
.header li {
    position: relative;
    float: left;
}
.header a {
    color: #b0b0b0;
    font-size: 12px;
}
.header a:hover {
    color:#FFF;
}
.header span {
    margin:0 6px;
    color:#424242;
}

下面我们设置购物车部分

.cart {
    position: relative;
    width: 120px;
    height: 40px;
    margin-left: 25px;
    background-color: #424242;
    cursor: pointer;
}
.cart i {
    margin-right: 4px;
}
.cart:hover {
    background-color: #fff;
}
/*鼠标悬停在li上 里面的a字体颜色变为橘色*/
.cart:hover>a{
    color:#ff6700;
}

原网页中鼠标经过“下载app”和“购物车”会出现下拉列表，这里的思路是

1.绝对定位到正常的位置

2.隐藏

3.鼠标悬停显示

购物车

.cart-list {
    z-index: 850;
    position: absolute;
    top: 40px;
    right: 0;
    width: 316px;
    /* 元素高度设置为0 */
    height: 0;
    /* 元素中的内容溢出 */
    /* 溢出部分隐藏 */
    overflow: hidden;
    line-height: 100px;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    transition: all .3s;
}

下载app

.download {
    z-index: 800;
    position: absolute;
    top: 40px;
    /* 水平居中 */
    left: 50%;
    margin-left: -62px;
    width: 124px;
    height: 0;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 1px 5px #aaa;
    transition: height .3s;
}
.download img {
    width: 90px;
    margin: 18px 0 12px;
}
.download>a {
    display: block;
}
.download p {
     color: #333;
     font-size: 14px;
     line-height: 14px;
     position: relative;
     top:-15px;
}
.header-left>li:hover>.download {
    height: 148px;
}

最后设置hover

.cart:hover>.cart-list {
    height: 100px;

}

在“下载app”的下面有一个白色的三角

这里我们来绘制三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #san{
            width: 0;
            height: 0;
            border-top: 10px solid red;
            border-bottom: 10px solid blue;
            border-left: 10px solid green;
            border-right: 10px solid yellow;
        }
    </style>
</head>
<body>
<div id="san">

</div>
</body>
</html>

把宽高都设置为0，然后设置边框会的到上面的的正方形，我们这里要一个白色向上的三角形，所以把上、左、右边框设置为透明，下边框设置为白色就能得到一个白色向上的三角形

.triangle {
    display: none;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -7px;
    width: 0;
    height: 0;
    border-bottom: 7px solid white;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}
.header-left>li:hover>.triangle {
    display: block;
}

这样我们的头部部分就做好了

标签：solid,网页,width,color,height,header,官网,css,left
来源： https://www.cnblogs.com/0416HF/p/16298513.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css仿小米官网-网页头部的制作