weixin_40725706

这个屌丝很懒，什么也没留下！

热门标签

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

作者：weixin_40725706 | 2024-04-02 19:43:01

踩

title小米案例练习

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;
 
}

5.box-shadow属性语法

box-shadow 属性接受值最多由五个不同的部分组成。
box-shadow: offset-x offset-y blur spread color position;
offset-x：X轴偏移量

offset-y：Y轴偏移量

blur：阴影模糊半径

spread：阴影扩展半径

color：阴影颜色

position：投影方式

6.opacity透明度和rgba()

opacity：透明值；透明值为0.0~1.0。值越小越透明

rgba(0,0,0,透明值)；透明值为0.0~1.0。值越小越透明

rgba()方法与opacity方法虽然都可以实现透明度效果，但rgba()只作用于元素的颜色或其背景色（设置了rgb(）透明度元素的子元素不会继承其透明效果）；而opacity具有继承性，既作用于元素本身，也会使元素内的所有子元素具有透明度。

7.:hover的用法

用法1：

a:hover{

background-color:yellow;

}

表示当鼠标悬浮在a这个样式上的时候，a的背景颜色设置为黄色

用法2：

.a:hover .b {

background-color:blue;

}

表示使用a控制a的子元素 b

.a:hover + .c {

color:red;

}

表示使用a控制a的兄弟元素 c(同级元素)

.a:hover ~ .d {

color:pink;

}

使用a控制a的就近元素d

8.选择器

(1)子代选择器：在选择器1中找到子代(仅限儿子)选择器2，给它设置样式。

结构：选择器1>选择器2{属性}

(2)后代选择器：在选择器1中找到后代(包括儿子，孙子，重孙子...)选择器2，给它设置样式。

结构：选择器1(空格)选择器2{属性}

(3)类选择器--多类名

<li class=" load pos-r"></li>

类名之间需要空格分开

这个标签会具有两个类名的样式

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/353517