HTML5+CSS3
第四周周报
汇报人：阿伟
一、本周学习内容：
1、二维码的下拉
2、添加过渡效果
3、头部logo
4、头部导航条
5、头部导航下拉层
6、右侧的搜索框
7、左侧的导航条
8、完成banner
9、右侧工具条
10、中间的广告框
11、项目补充
12、过渡
13、米兔练习
14、动画
15、奔跑的少年
二、本周知识点总结：
1、小米布局练习.html:
小米布局练习.Css
/*顶部导航条的容器*/
.topbar-wrapper{
width:100%;
height:40px;
line-height:40px;
background-color: #333;
}
/*设置超链接的颜色*/
.topbar a{
font-size: 12px;
color:#b0b0b0;
display:block;
}
.topbar a:hover{
color:white;
}
.topbar .line{
font-size: 12px;
color:#424242;
margin:0 8px;
}
/*设置左导航栏*/
.service,.topbar li{
float:left;
}
/*设置右导航栏*/
.shop-cart,.user-info{
float:right;
}
/*设置a的伪元素*/
.app{
position:relative;
}
/*设置app的小三角*/
li:hover > .app::after{
content:'';
/*设置绝对定位*/
position:absolute;
width:0;
height:0;
/*设置四个方向的边框*/
border:10px solid transparent;
/*去除上边框*/
border-top:none;
/*单独设置下边框的颜色*/
border-bottom-color:#fff;
bottom:0;
left:0;
right:0;
margin:auto;
}
.app:hover .qrcode,
.app:hover::after{
display:block;
height: 148px;
}
/*设置app的下拉*/
.app .qrcode{
/* display:none;*/
position:absolute;
left: -36px;
width: 124px;
/*height: 148px;*/
height: 0;
overflow: hidden;
background-color: rgb(248, 248, 247);
line-height: 1;
text-align:center;
box-shadow:0 0 10px rgba(0, 0,0, .3);
/*设置过渡效果*/
transition: height 1s;
z-index:9999;
}
/*设置图片样式*/
.app .qrcode img{
width: 90px;
height: 90px;
margin:17px 17px;
}
/*设置app字体*/
.app .qrcode span{
color:#000;
font-size:14px;
}
/*设置购物车的样式*/
.shop-cart a{
width:120px;
background-color: #424242;
text-align: center;
}
.shop-cart:hover a{
background-color:#fff;
color:orange;
}
.shop-cart i{
margin-right: 2px;
}
.header-wrapper{
background-color:;
position:relative;
}
/*设置中间的header*/
.header{
height:100px;
background-color:;
margin-top:22px;
}
.header .logo{
float:left;
margin: top 22px;
}
/*设置logo的超链接*/
.header .logo a {
display: block;
width:68px;
height:64px;
background-color: rgb(226, 223, 224);
background-image: url("/100集/小米logo.png");
background-position:content;
}
/*设置中间的导航条*/
.header .nav-wrapper{
float:left;
margin-left:7px;
}
/*给nav设置宽度*/
.header .nav {
/* width: 850px;*/
background-color:;
height: 100px;
line-height: 100px;
padding-left: 58px;
}
/*设置导航条中的li*/
.nav>li{
float:left;
}
.all-goods-wrapper{
position:relative;
background-color: ;
}
/*设置左侧导航条的样式*/
.left-menu{
width: 234px;
height: 421px;
padding: 20px 0;
background-color: rgb(0, 0, 0,0.6);
position: absolute;
z-index:999;
left: -132px;
line-height:1;
}
ul.left-menu li a {
display: block;
height: 42px;
line-height: 42px;
color:white;
margin-right: 0;
padding:0 30px;
font-size:14px;
}
/*给字体设置hover*/
ul.left-menu li a:hover{
color:white;
background-color: orange;
}
.left-menu a i {
float:right;
line-height:42px;
}
.nav-wrapper li a{
display:block;
font-size:16px;
margin-right: 20px;
}
.nav-wrapper li a:hover{
color:#ff6700;
}
/*隐藏所有商品*/
.all-goods{
visibility:hidden;
}
.nav .goods-info{
/* height: 228px;*/
height:0;
width:100%;
background-color:#fff;
/*border-top:1px solid rgb(224, 224, 224);
box-shadow:0 5px 3px rgb(0, 0,0,0.2);*/
position: absolute;
top:100px;
left:0;
transition:height 0.3s;
z-index:9999;
}
.nav li:not(:first-of-type):hover ~ .goods-info,
.goods-info:hover{
height:228px;
border-top:1px solid rgb(224, 224, 224);
box-shadow:0 5px 3px rgb(0, 0, 0,0.2);
}
.search-wrapper {
width: 296px;
height:50px;
float:right;
background-color:;
margin-top:25px;
}
.search-wrapper .search-inp{
float:left;
width:244px;
border:none;
padding:0;
height: 50px;
font-size:16px;
}
.search-wrapper .search-btn{
float:left;
height: 50px;
width: 52px;
padding:0;
border:none;
background-color: cornsilk;
color:#616161;
}
/*.goods-hezi{
width: 20px;
height:20px;
background-color:blue;
}
.goods-hezi:hover{
}*/
.banner{
position:relative;
height: 460px;
}
.banner .img-list li {
position: absolute;
}
.banner img{
width:100%;
vertical-align:top;
}
.pointer{
position:absolute;
bottom:22px;
right: 35px;
}
.pointer a {
float:left;
width:6px;
height:6px;
border:2px rgba(255, 255,255, .3) solid;
border-radius: 50%;
background-color:rgba(0, 0,0, .4);
margin-left:6px;
}
.pointer a:hover,
.pointer a.active{
border-color:rgba(0, 0,0, .4);
background-color: rgba(255, 255,255, .3);
}
.prev-next a {
width: 41px;
height:69px;
background-image:url(/100集/图片/icon-slides.png);
position: absolute;
top:0;
bottom:0;
margin:auto 0;
}
.prev-next .prev{
left: 234px;
background-position: -84px 0;
}
.prev-next .prev:hover{
background-position:0 0;
}
.prev-next .next{
right: 0;
background-position: -125px 0;
}
.prev-next .next:hover{
background-position:-42px 0;
}
/*设置回到顶部的元素*/
.back-top{
width:26px;
height:206px;
background-color:#bfa;
/*开启固定定位*/
position:fixed;
bottom: 100px;
right:50%;/*将right宽度设置为窗口的50%*/
margin-right:-639px;
/*布局的等式
left+margin-left+width+margin-right+视口的宽度+
auto+0+26+0+60=视口宽度
auto+0+26+639px+50%=视口宽度
*/
}
.ad{
background-color:;
height:170px;
margin-top: 14px;
}
.ad .shortcut,
.ad .imgs,
.ad li{
float:left;
}
/*设置左侧快捷方式*/
.ad .shortcut{
width:234px;
height: 170px;
background-color: #5f5750;
margin-right:14px;
}
.ad .shortcut li {
position:relative;
}
/*设置上边框*/
.ad .shortcut li::before{
content:'';
position:absolute;
width:64px;
height:1px;
background-color: #665e57;
left:0;
top:0;
margin:0;
}
/*设置左边框*/
.ad .shortcut li::after{
content:'';
position:absolute;
height:70px;
width:1px;
background-color:#665e57;
top:0;
bottom:0;
margin:auto 0;
left:0;
}
/*设置快捷方式中的超链接*/
.ad .shortcut a {
color:#cfccca;
display:block;
height:84px;
width:76px;
text-align:center;
font-size: 12px;
overflow:hidden;
}
.ad .shortcut a:hover{
color:#fff;
}
.ad .shortcut i {
display:block;
margin-top:20px;
margin-bottom:6px;
font-size: 20px;
}
/*设置左侧的图片*/
.ad .imgs li{
width: 316px;
margin-right: 15px;
}
.ad .imgs li:last-child{
margin:0;
}
.ad .imgs img{
width:100%;
vertical-align:top;
}
过渡：
过渡（transition）
通过过渡可以指定一个属性发生变化时的切换方式：
通过过渡可以创建一些非常好的效果，提升用户体验：
四个属性：
Transition-property:指定要执行过渡的属性：
Transition-duration:指定过渡效果的持续时间：
多个属性可使用，（逗号）隔开。
如果所有属性都需要过渡，则使用all关键字，大部分属性都支持过渡效果；过渡时必须是从一个有效数值向外一个有效数值进行过渡，时间单位：s和ms,1s=1000ms,可以分别指定宽和高。
Transition-timing-function:过渡的时序函数，指定过渡的执行方式：
可选值：ease：默认值，倍速开始，先加速，在减速。
linear：均速运动：
ease-in:加速运动
Ease-out:减速运动
ease-in-out:先加速，后减速
Cubic-bezier( )来指定时许函数
网址：https://cubic-bezier.com
Steps()分布执行过渡效果：
可以设置一个第二个值：
End 在时间结束时执行过渡（默认值）
Start 在时间开始时执行过渡
Transition-delay:过渡效果的延迟，等待一段时间过后再执行过渡。
Transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间。
动画：
动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化是才会触发，动画可以自动触发动态效果。
设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤：
@keyframes identifier{
From 表示动画开始的位置，{margin-left:0;
}
To 动画的结束位置{ margin-left:200px;}
}
动画的结束位置：，也可以使用100%。
Animation-name:text;要对当前元素生效的关键帧的名字
例如：Animation-name:text;
Animation-duration;动画执行的时间；
例如:animation-duration:4s;
动画的延迟：
Animation-delay:2s;
Animation-iteration-count;动画执行的次数；
例如：animation-iteration-count:20;
可选值：infinite 无限执行；
Animation-direction：
例如：normal；由from向to 指定动画运行的方向：
Reverse从to向from运行，每次都是这样
Alternate从from向to运行，重复执行动画时反向执行，
Alternate-reverse从to向from运行，重复执行，
Animation-direction：alternate-reverse；
Animation-play-state:设置动画的执行状态；
可选值：
Running 默认值;动画执行
Paused 动画暂停
Animation-fill-mode：动画的填充模式；
Animation-fill-mode:none;
可选值：
None默认值动画执行完毕元素回到原来位置；
Forwards:动画执行完毕元素会停止在动画结束的位置
Backwards动画延迟等待时，元素就会处于开始位置，
Both结合了forwards和backwards.
三、下周学习计划：
1、关键帧
2、变形平移
3、z轴平移
4、旋转
5、鸭子表
6、复仇者联盟
7、缩放
8、less简介
9、less中的变量
10、父元素和扩展
11、混合函数
12、less的补充
Web前端工作室
2021年11月26号