【html+css】小米商城学习笔记（22/10/3-22/10/4）

爱吃馄饨的云吞

已于 2022-11-09 16:23:48 修改

阅读量467

点赞数 1

文章标签： css html 学习

于 2022-10-04 08:39:47 首次发布

本文链接：https://blog.csdn.net/weixin_56105633/article/details/127158908

版权

文章目录

小米商城学习笔记（22/10/3-22/10/4）

小米商城学习笔记（22/10/3-22/10/4）

1.学习网页

网页视频学习地址:

https://www.bilibili.com/video/BV1Mu411k78C?p=21&vd_source=e3117f7b1f427d925021788f8bf0b81b

火狐搜索 mi.com(小米官网)
火狐浏览页面下载网页全部图片:Ctrl+i>媒体>全选>另存为
iconfonthttps://www.iconfont.cn/网站把图标放在购物车>打开自己的购物车>选择下载链接>压缩包压缩，把六个文件放到自己写小米商城代码的文件中，命名文件夹名字为css
添加reset.css样式

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,pre,form,fieldset,legend,
input,textarea,button,p,blockquote,th,td{
    margin: 0;
    padding: 0;
}
body{
    text-align: center;font-family: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;;
}
ul,ol,li{
    list-style: none;
}
a{
    text-decoration: none;color:#333;
}
input,button,img{
    margin: 0;
    padding: 0;
    border: none;
    vertical-align: middle;
}

创建自己写css的样式:mi.css

2.css基础知识

3. .A, .B        A和B都加样式()
4. .A .B         选择**所有后代**元素，和>区别一下
5. .A>.B         表示选择A元素的**所有子B元素,只选择一代**,和空格区别一下
6. .A+.B         表示HTML中**紧随**A的B元素(A与B是**同级**元素)，**兄弟**
7. .A~.B         为所有相同的**父**元素中**位于 A 元素之后的所有 B 元素**设置样式

8. 普通div、p不用加. 
9.  class才加. 
10. id加#

快速写样式

11. ul>li*10>a[href=#]{手机 电话卡}
12. ul>li*10>a[href=#]{手机 电话卡}>i.iconfont{&#xe658;}

13. box-sizing: border-box;
/* 当要写padding、margin使盒子宽高改变的时候加这句话 */

14.  white-space:nowrap;规定段落中的文本不进行换行
15.  text-overflow: ellipsis;用省略号来代替溢出的部分
16.  <div class="slide-list slide-list1"> 重新加一个名字 空格隔开
17.  ::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。
18.  content:""
19.  del:定义文档中已被删除的文本。
20.  ins:下划线
21.  zoom: 1、zoom: 100% 和 zoom: normal 都是等价的，它表示将元素缩放至原来 1 倍的大小
22.  normal：
        使用对象的实际尺寸。
        <number>：
        用浮点数来定义缩放比例。不允许负值
        <percentage>：
        用百分比来定义缩放比例。不允许负值

子元素使用绝对定位，父元素要相对定位

.父亲{
    position: relative;
}

.儿子{
    position: absolute;
    top: 0;
    /*  与父亲同高*/
    left: 0;
    /* 与父亲左对齐 */
}
}

3.代码相关

1.画三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 0px;
            height: 0px;
            /* border-top: 10px solid red; */
            border-bottom: 100px solid green;
            /* border-left: 10px solid blue; */
            border-left: 100px solid transparent;
            /* border-right: 10px solid orange; */
            border-right: 100px solid transparent;
           }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.鼠标悬停有二维码

html:

 <ul class="header-left">
    <li>
                    <a href="#">下载APP</a><span>|</span>
                    <div class="download">
                        <a href="#">
                            <img src="images/78c30d4f259ed43ab20e810a522a6249.png" alt="">
                            <p>小米商城APP</p>
                        </a>
                    </div>
                    <!-- 三角形 -->
                    <div class="triangle"> </div>
    </li>
</ul>

css

.download{
    z-index: 900;
    /* 因为后面的search-list会影响到它，把它覆盖，所以写z-index: 900; */
    width: 124px;
    /* height: 148px; */
    height: 0;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 1px 5px #ccc;
    /* 因为它撑开了，所以还是相对定位,他爹（.header li)要position：relative*/
    position: absolute;
    /* 垂直在父元素下面40px */
    top: 40px;
    /* 水平与父元素水平居中
    left: 50%;
    margin-left: -62px; */
    left: 50%;
    margin-left: -62px;
    /* margin-left download(二维码)宽的一半 */
    transition: all .3s;
    /* hover */
}
.download img{
    width: 90px;
    margin: 18px 0 12px;
}
.download p{
    color:#333;
    font-style: 14px;
    line-height: 14px;
    /* line-height: 1; */
    /* 就是和字体大小*1，和上面的
    line-height: 14px;
    效果一样 */
}
/* 悬停到li的子代download这里 */
.header-left>li:hover>.download{
    height:148px;
    
}
.triangle{
    width: 0;
    height: 0;
    border-bottom: 8px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    /* 需要移动三角形，用绝对定位,父元素(.header li)已经定位(position:relative了 */
    position: absolute;
    /* 垂直方向 */
    bottom: 0;
    /* 因为爸爸是header li，所以三角形的父元素的底部是那条线 */

    /* 或者写这一句 
    top: 32px;
    用head的高度（40px）减去三角形的高度（8px）
     */
    left: 50%;
    margin-left: -8px;
    /* 三角形宽(16px)的一半 */

    /* 他没有过渡，所以直接 */
    display: none;
}
/* 因为三角形式li的子代，所以 */
.header-left>li:hover>.triangle{
display: block;
}

3.图标微移

transform: translateX(3px);

.logo img{
    height: 56px;
    /* 高度等比例缩放 */
    text-align-last: left;
    /* 图标水平居左 */
}
/* 轻微移一下 */
.logo img:hover{
    transform: translateX(3px);
}

4.去input的样式

.search>input{
    float: left;
    /* 两个都浮动 */
    width: 245px;
    height: 50px;
    border: 1px solid #e0e0e0;
    padding: 0 10px;
    box-sizing: border-box;
    border-right: none;
    /* 去掉input的右边框 */
    outline: none;
    /* 去掉input的黑框 */
    transition: all .2s;
    /* 过渡 */

}

5.鼠标悬停hover和鼠标点击focus

.search>a:hover{
    background-color: #ff6700;
    border-color: #ff6700;
    color:#fff;
}
/* 鼠标悬停在input上，它和（用了个，）它的下一个节点a（用了个+）背景颜色变成 */
.search>input:hover,.search>input:hover+a{
    border-color: #b0b0b0;

}
/* focus获取焦点,点击才会获取焦点 */
.search>input:focus,.search>input:focus+a{
    border-color: #ff6700;

}

6.悬停显示下拉窗口

/* 下拉列表 */
.nav-bar-list{
    z-index: 800;
    width: 100%;
    height: 229px;
    background-color: #fff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 3px 4px rgba(0, 0, 0,.18);
    position: absolute;
    /* 爸爸（.nav）定位 */
    left: 0;
    top: 100px;
    display: none; 
}
.nav-bar li:hover>.nav-bar-list{
    display: block;
}

7.写竖线(分割线)

border-right: 1px solid #e0e0e0;

.img-box{
    width: 100%;
    height: 110px;
    border-right: 1px solid #e0e0e0;
    /* 写一条浅色的 竖线（分割线) */
    box-sizing: border-box;
    /* 因为border-right所以加box-sizing: border-box; */
    margin-bottom: 30px;
}

8.图片保持大小

1

background-image: url("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/21815363444cb6828ae7d3c3a7a46613.jpg?w=2452&h=920");
    /* 设置背景图片格式 */
background-size: 100%;

2

/* 把图片的宽度设置和父元素的宽度一致，这样子图片就可以不放大、缩小 */

9.实现图片的切换（类似轮播图，但是效果不是很好)

1鼠标移动到图片的时候，停止图片的切换

.banner-box:hover{
    animation-play-state: paused;
    /* 鼠标移动到图片的时候，停止图片的切换 */
}

2具体

.banner-box{
    width: 1226px;
    height: 460px;
    background-color: pink;
    background-image: url("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/21815363444cb6828ae7d3c3a7a46613.jpg?w=2452&h=920");
    /* 设置背景图片格式 */
    background-size: 100%;
    animation: banner 6s linear infinite;
    /* 一共6s，2是切换一次，线性切换，无限循环 */
}
/* 。。。我觉得这个效果很奇怪，还是用别的写吧
 */
.banner-box:hover{
    animation-play-state: paused;
    /* 鼠标移动到图片的时候，停止图片的切换 */
}
@keyframes banner {
    0%{
    background-image: url("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/21815363444cb6828ae7d3c3a7a46613.jpg?w=2452&h=920");
        
    }
    50%{
    background-image: url("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/50063de30b7f02f678e9da976ecb70ac.jpg?thumb=1&w=1533&h=575&f=webp&q=90");
        
    }
    100%{
    background-image: url("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa2105c47d38432ad9c93fdceed6e3a8.jpg?thumb=1&w=1533&h=575&f=webp&q=90");
        
    }
    
}

爱吃馄饨的云吞

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【html+css】小米商城学习笔记（22/10/3-22/10/4）

小米商城学习笔记（22/10/3-22/10/4）1.学习网页2.css基础知识3.代码相关1.画三角形2.鼠标悬停有二维码3.图标微移4.去input的样式5.鼠标悬停hover和鼠标点击focus6.悬停显示下拉窗口7.写竖线(分割线)8.图片保持大小9.实现图片的切换（类似轮播图，但是效果不是很好)p=7&spm_id_from=pageDriver&vd_source=e3117f7b1f427d925021788f8bf0b81b
复制链接

扫一扫