小米案例01（html+css）自用

最新推荐文章于 2023-06-04 16:54:30 发布

半个一

最新推荐文章于 2023-06-04 16:54:30 发布

阅读量300

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_69261874/article/details/127864741

版权

index代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/bar.css">
    <link rel="stylesheet" href="font/iconfont.css">

</head>
<body>

<div id="shop-bar">
    <div class="container">
        <div class="left">
            <ul>
                <li><a href="#">小米官网</a></li>
                <li><a href="#">小米商城</a></li>
                <li><a href="#">MIUI</a></li>
                <li><a href="#">IoT</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="#">企业团购</a></li>
                <li><a href="#">资质证照</a></li>
                <li><a href="#">协议规则</a></li>
                <li class=" load pos-r">
                    <a href="#">下载app</a>
                    <div class="download">
                        <img src="https://i1.mifile.cn/f/i/17/appdownload/download.png?1" alt="">
                        <p>小米商城APP</p>
                    </div>
                </li>
                <li>
                    <a href="#">Select Location</a>
                </li>
            </ul>
        </div>
        <div class="right">
            <ul>
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">消息通知</a></li>
                <li class="shopping-cart pos-r">
                    <a href="#">
                        <span class="iconfont icon-31gouwuche"></span>
                        购物车(0)</a>
                    <div class="shop-detail" >购物车中还没有商品，赶紧选购吧！</div>

                </li>
            </ul>
        </div>

    </div>
</div>

</body>
</html>

页面

知识点梳理

1.line-height:设置两行文字之间的距离。

如果height:40px;那么line-height:40px;可以使文字居中对齐

2.flex布局：使该选择器下的子代盒子水平排列。

3.justify-content：使该选择器下的子代盒子两端对齐。

#shop-bar .container{   
     /*设置flex布局，使left和right项目水平排列*/
    display: flex;
    /*为left和right项目左右两端对齐*/
    justify-content: space-between;
}

4.鼠标悬停时弹出小盒子的做法：给父元素高度为0，再设置overflow：hidden；使子代元素消失隐藏。再鼠标悬停时给高度。

注意选择器写法#shop-bar .container .left ul li.load:hover .download{

.download{
    position: absolute;
    top:40px;
    left:-28px;
    width: 126px;
    /*height: 150px;*/
    background-color: white;
    text-align: center;
    box-shadow:0 0 3px #cccccc;
    /*令二维码消失 */
    height: 0;
    overflow: hidden;
}

.download img{
    width: 90px;
    height: 90px;
    margin: 20px auto 0;

}

.download p{
    font-size: 15px;
    margin: -15px auto 0;
}

#shop-bar .container .left ul li.load:hover .download{
    height: 150px;

}