HTML5+CSS3的学习(六)
2018版李立超html+css基础 103集教程，哔哩哔哩链接：https://www.bilibili.com/video/BV1sW411T78k?spm_id_from=333.999.0.0
2019版李立超前端html5+css3 148集教程，哔哩哔哩链接：https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from=333.999.0.0
十二、案例实战
01_图片的列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片列表</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
/* 设置body的背景颜色 */
body{
background-color: antiquewhite
}
/* 设置外部ul的样式 */
.img-list{
/* 设置ul的宽度 */
width: 190px;
/* 设置ul的高度 */
height: 470px;
/* 裁剪溢出的内容 */
overflow: hidden;
/* 使ul在页面中居中（实际示例中不需要这么写） */
margin: 50px auto;
background-color: #F4F4F4;
}
/* 设置li的位置 */
.img-list li:not(:last-child){
margin-bottom: 9px;
}
/* 设置图片的大小 */
.img-list img{
width: 100%;
}
</style>
</head>
<body>
<!-- <div>
<a href="javascript:;"><img src="" alt=""></a>
<a href="javascript:;"><img src="" alt=""></a>
<a href="javascript:;"><img src="" alt=""></a>
</div> -->
<ul class="img-list">
<li>
<a href="javascript:;">
<img src="./img/01/1.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="./img/01/2.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="./img/01/3.jpg" alt="">
</a>
</li>
</ul>
</body>
</html>
02_京东左侧导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>京东的左侧导航</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
/* 设置body */
body{
/* 设置一个网页的背景，以使我们方便查看 */
background-color: #bfa;
}
/* 设置菜单外部容器 */
.left-nav{
/* 设置宽度 */
width: 190px;
/* 设置高度 */
height: 450px;
/* 设置padding */
padding: 10px 0;
/* 设置一个背景颜色 */
background-color: #fff;
margin: 50px auto;
}
/* 设置菜单内部的item */
.left-nav .item{
height: 25px;
/* 要让一个文字在父元素中垂直居中，只需将父元素的line-height设置为一个和父元素height一样的值 */
line-height: 25px;
/* 设置item的右内边距，将文字向内移动 */
padding-left: 18px;
/* 设置字体大小 */
font-size: 12px;
}
/* 设置/的距离 */
.item .line{
padding: 0 2px;
}
/* 为item设置一个鼠标移入的状态 */
.item:hover{
background-color: #d9d9d9;
}
/* 设置超链接的样式 */
.item a{
/* 设置字体大小 */
font-size: 14px;
/* 设置字体的颜色 */
color: #333;
/* 去除下划线 */
text-decoration: none;
}
/* 设置超链接的hover的样式 */
.item a:hover{
color: #c81623;
}
</style>
</head>
<body>
<!-- 创建一个外部的容器 nav(div) div(div) ul(li) -->
<nav class="left-nav">
<div class="item">
<a href="#">家用电器</a>
</div>
<div class="item">
<a href="#">手机</a><span class='line'>/</span><a href="#">运营商</a>
<span class='line'>/</span><a href="#">数码</a>
</div>
<div class="item">
<a href="#">电脑</a><span class='line'>/</span><a href="#">办公</a>
</div>
<div class="item">
<a href="#">家居</a><span class='line'>/</span><a href="#">家具</a>
<span class='line'>/</span><a href="#">家装</a><span class='line'>/</span><a href="#">厨具</a>
</div>
<div class="item">
<a href="#">男装</a><span class='line'>/</span><a href="#">女装</a>
<span class='line'>/</span><a href="#">童装</a><span class='line'>/</span><a href="#">内衣</a>
</div>
<div class="item">
<a href="#">美妆</a><span class='line'>/</span><a href="#">个护清洁</a>
<span class='line'>/</span><a href="#">宠物</a>
</div>
<div class="item">
<a href="#">女鞋</a><span class='line'>/</span><a href="#">箱包</a>
<span class='line'>/</span><a href="#">钟表</a><span class='line'>/</span><a href="#">珠宝</a>
</div>
<div class="item">
<a href="#">男鞋</a><span class='line'>/</span><a href="#">运动</a>
<span class='line'>/</span><a href="#">户外</a>
</div>
<div class="item">
<a href="#">房产</a><span class='line'>/</span><a href="#">汽车</a>
<span class='line'>/</span><a href="#">汽车用品</a>
</div>
<div class="item">
<a href="#">母婴</a><span class='line'>/</span><a href="#">玩具乐器</a>
</div>
<div class="item">
<a href="#">食品</a><span class='line'>/</span><a href="#">酒类</a>
<span class='line'>/</span><a href="#">生鲜</a><span class='line'>/</span><a href="#">特产</a>
</div>
<div class="item">
<a href="#">艺术</a><span class='line'>/</span><a href="#">礼品鲜花</a>
<span class='line'>/</span><a href="#">农资绿植</a>
</div>
<div class="item">
<a href="#">医药保健</a><span class='line'>/</span><a href="#">计生情趣</a>
</div>
<div class="item">
<a href="#">图书</a><span class='line'>/</span><a href="#">文娱</a>
<span class='line'>/</span><a href="#">电子书</a>
</div>
<div class="item">
<a href="#">机票</a><span class='line'>/</span><a href="#">酒店</a>
<span class='line'>/</span><a href="#">旅游</a><span class='line'>/</span><a href="#">生活</a>
</div>
<div class="item">
<a href="#">理财</a><span class='line'>/</span><a href="#">众筹</a>
<span class='line'>/</span><a href="#">白条</a><span class='line'>/</span><a href="#">保险</a>
</div>
<div class="item">
<a href="#">安装</a><span class='line'>/</span><a href="#">维修</a>
<span class='line'>/</span><a href="#">清洗</a><span class='line'>/</span><a href="#">二手</a>
</div>
<div class="item">
<a href="#">工业品</a>
</div>
</nav>
</body>
</html>
03_网易新闻的右侧的列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>网易的新闻列表</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
/* body{
background-color: #bfa;
} */
a{
/* 去除下划线 */
text-decoration: none;
}
/* 设置容器的样式 */
.news-wrapper{
/* 设置宽度 */
width: 300px;
/* 设置高度 */
height: 357px;
/*设置居中 */
margin: 50px auto;
/* 设置背景颜色，显示轮廓 */
background-color: #fff;
/* 设置上边框 */
border-top: 1px solid #ddd;
}
/* 设置news-title */
.news-title{
/* 为了边框和文字宽度一致，需要将h2转换为行内块元素 */
display: inline-block;
/* 设置高度 */
height: 30px;
/* 设置上边框 */
border-top: 1px red solid;
/* 通过margin-top将h2上移，盖住上边框 */
margin-top: -1px;
padding-top: 10px;
}
/* 设置title中超链接的样式 */
.news-title a{
/* 设置颜色 */
color: #40406B;
/* 设置文字的加粗效果 */
font-weight: bold;
}
/* 设置图片容器的高度 */
.news-img{
height: 150px;
}
/* 设置图片的文字效果 */
.news-img .img-title{
/* 向上移动文字 */
margin-top: -30px;
/* 设置字体颜色 */
color: #fff;
/* 设置加粗 */
font-weight: bold;
/* 设置padding */
padding-left: 30px;
}
/* 设置新闻列表 */
.news-list{
/* 设置上外边距 */
margin-top: 20px;
/* 设置左侧的padding */
/* padding-left: 14px; */
/* 设置项目符号 */
/* list-style: square; */
}
/* 设置li */
.news-list li{
/*设置下外边距 */
margin-bottom: 17px;
}
/* 通过before伪元素，来为每一个li添加项目符号 */
.news-list li::before{
content: '■';
color: rgb(218, 218, 218);
font-size: 12px;
margin-right: 4px;
}
/* 设置li中文字 */
.news-list li a{
/* 设置字体大小 */
font-size: 14px;
/* 设置字体颜色 */
color: #666;
}
/* 设置超链接的鼠标移入的样式 */
.news-list li a:hover{
color: red;
}
</style>
</head>
<body>
<!-- 创建新闻列表的外侧的容器 -->
<div class="news-wrapper">
<!-- 创建一个标题标签 -->
<h2 class="news-title">
<a href="#">体育</a>
</h2>
<!-- 创建一个图片的容器 -->
<div class="news-img">
<a href="#">
<img src="./img/03/1.jpeg" alt="费德勒">
<!-- 创建图片标题 -->
<h3 class="img-title">
费德勒首负迪米 扶额头不满发挥
</h3>
</a>
</div>
<!-- 新闻列表 -->
<ul class="news-list">
<li>
<a href="#">乔治:我爱LA 喜欢和LBJ一起打球</a>
</li>
<li>
<a href="#">格林:3年前降薪就在等KD 特制T恤嘲讽LBJ</a>
</li>
<li>
<a href="#">塔克4000双鞋让保罗羡慕嫉妒 乔丹被震惊</a>
</li>
<li>
<a href="#">CBA下季新赛制:常规赛4组循环 增至46轮</a>
</li>
</ul>
</div>
</body>
</html>
04_w3导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>导航条</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
/* 设置nav的大小 */
.nav{
/* 设置宽度和高度 */
width: 1210px;
height: 48px;
/* 设置背景颜色 */
background-color: #E8E7E3;
margin:100px auto;
}
/* 设置nav中li */
.nav li{
/* 设置li向左浮动，已使菜单横向排列 */
float: left;
/* 设置li的高度 */
/* height: 48px; */
/* 将文字在父元素中垂直居中 */
line-height: 48px;
}
/* 设置a的样式 */
.nav a{
/* 将a转换为块元素 */
display: block;
/* 去除下划线 */
text-decoration: none;
/* 设置字体颜色 */
color: #777777;
/* 修改字体大小 */
font-size: 18px;
padding: 0 39px;
}
.nav li:last-child a{
padding: 0 42px 0 41px;
}
/* 设置鼠标移入的效果 */
.nav a:hover{
background-color: #3F3F3F;
color: #E8E7E3;
}
</style>
</head>
<body>
<!-- 创建导航条的结构 -->
<ul class="nav">
<li>
<a href="#">HTML/CSS</a>
</li>
<li>
<a href="#">Browser Side</a>
</li>
<li>
<a href="#">Server Side</a>
</li>
<li>
<a href="#">Programming</a>
</li>
<li>
<a href="#">XML</a>
</li>
<li>
<a href="#">Web Building</a>
</li>
<li>
<a href="#">Reference</a>
</li>
</ul>
</body>
</html>
05_京东的轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css">
<style>
/* 设置图片的容器 */
.img-list{
width: 590px;
height: 470px;
margin: 100px auto;
/*
为ul开启相对定位，目的是使ul中的pointer可以相对于ul定位而不是相对于初始包含块（html）去定位
*/
position: relative;
}
/* 设置li */
.img-list li{
position: absolute;
}
/* 通过修改元素的层级来显示指定的图片 */
.img-list li:nth-child(4){
z-index: 1;
}
/* 设置导航点的样式 */
.pointer{
position: absolute;
z-index: 9999;
bottom: 20px;
left: 40px;
}
.pointer a{
/* 设置元素向左浮动 */
float: left;
width: 10px;
height: 10px;
margin: 0px 2px;
border-radius: 50%;
background-color: rgba(255, 255, 255, .3);
/* 将背景颜色值设置到内容区，边框和内边距不在有背景颜色
因为背景颜色默认会沿伸到边框
*/
background-clip: content-box;
/*边框虽然设置为transparent（透明）了，但是边框下边的背景会从边框透出，使其变大，
所以可以设置background-clip: content-box;对边框进行裁剪解决 */
border: 2px solid transparent;
}
.pointer a.active,
.pointer a:hover{
background-color: #fff;
border: 2px solid rgba(255, 255, 255, .3);
}
</style>
</head>
<body>
<ul class="img-list">
<li><a href="javascript:;"><img src="./img/05/1.jpg"></a></li>
<li><a href="javascript:;"><img src="./img/05/2.jpg"></a></li>
<li><a href="javascript:;"><img src="./img/05/3.jpg"></a></li>
<li><a href="javascript:;"><img src="./img/05/4.jpg"></a></li>
<li><a href="javascript:;"><img src="./img/05/5.jpg"></a></li>
<li><a href="javascript:;"><img src="./img/05/6.jpg"></a></li>
<li><a href="javascript:;"><img src="./img/05/7.jpg"></a></li>
<li><a href="javascript:;"><img src="./img/05/8.jpg"></a></li>
<div class="pointer">
<a class="active" href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</ul>
</body>
</html>
06_京东顶部导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>京东顶部导航条</title>
<!-- 引入重置样式表 -->
<link rel="stylesheet" href="./css/reset.css">
<!-- 引用图标字体 -->
<link rel="stylesheet" href="./fa/css/all.css">
<style>
.clearfix::before,
.clearfix::after{
content: '';
display: table;
clear: both;
}
body{
/* 设置字体 */
font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
}
/* 设置外部容器的样式 */
.top-bar-wrapper{
/* 设置宽度 */
width: 100%;
/* 设置背景颜色 */
background-color: #E3E4E5;
height: 30px;
/* 设置行高，没有设置高度 使文字垂直居中 */
line-height: 30px;
/* 设置下边框 */
border-bottom: 1px #ddd solid
}
/* 设置内部容器的样式 */
.top-bar{
/* 固定宽度 */
width: 1190px;
/* 设置水平居中 */
margin: 0 auto;
position: relative;
}
/* 设置字体样式 */
.top-bar a ,
.top-bar span,
.top-bar i{
color: #999;
text-decoration: none;
}
.top-bar a:hover,
.top-bar a.highlight{
color: #f10215;
}
/* 设置location */
.location{
float: left;
}
/* 设置location下的小图标 */
.location .fas{
color: #f10215;
}
/* 设置城市列表的效果 */
.location .city-list{
display: none;
width: 320px;
height: 436px;
background-color: white;
border: 1px solid rgb(204, 204, 204);
/* 设置绝对定位，使其不占据页面的位置 */
position: absolute;
top:31px;
z-index: 999;
box-shadow: 0 2px 2px rgba(0, 0, 0, .2)
}
/* 当鼠标移入到location时，让city-list显示 */
.location:hover .city-list{
display: block;
}
.current-city{
padding: 0 10px;
border: 1px solid transparent;
border-bottom: none;
position: relative;
z-index: 9999;
}
/* 设置current-city的移入的效果 */
.location:hover .current-city{
background-color: white;
border: 1px solid rgb(204, 204, 204);
border-bottom: none;
padding-bottom: 1px;
}
/* 设置shortcut */
.shortcut{
float: right;
}
/* 设置分割线 */
.shortcut .line{
width: 1px;
height: 10px;
background-color: rgb(204, 202, 202);
margin: 12px 12px 0;
}
/* 设置li */
.shortcut li{
float: left;
}
</style>
</head>
<body>
<!-- 创建外围的容器 -->
<div class="top-bar-wrapper">
<!-- 创建内部容器 -->
<div class="top-bar clearfix">
<!-- 左侧的菜单 -->
<div class="location">
<div class="current-city">
<i class="fas fa-map-marker-alt"></i>
<a href="javascript:;">北京</a>
</div>
<!-- 放置城市列表的div -->
<div class="city-list">
</div>
</div>
<!-- 右侧的菜单 -->
<ul class="shortcut clearfix">
<li>
<a href="javascript:;">你好，请登录</a>
<a class="highlight" href="javascript:;">免费注册</a>
</li>
<!-- 分割线 -->
<li class="line"></li>
<li><a href="javascript:;">我的订单</a></li>
<li class="line"></li>
<li>
<a href="javascript:;">我的京东</a>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li><a href="javascript:;">京东会员</a></li>
<li class="line"></li>
<li>
<a class="highlight" href="javascript:;">企业采购</a>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li>
<span>客户服务</span>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li>
<span>网站导航</span>
<i class="fas fa-angle-down"></i>
</li>
<li class="line"></li>
<li>
<span>手机京东</span>
</li>
</ul>
</div>
</div>
</body>
</html>
07_背景重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1{
width: 990px;
height: 32px;
margin: 0 auto;
/* background-image: url('./img/07/bg.png');
background-repeat: repeat-x; */
background: url('./img/07/bg.png') repeat-x;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
08_按钮练习（雪碧图CSS-Sprite）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a:link{
display: block;
width: 93px;
height: 29px;
background-image: url('./img/08/link.png')
}
a:hover{
background-image: url('./img/08/hover.png')
}
a:active{
background-image: url('./img/08/active.png')
}
/*
图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载，
浏览器加载外部资源时是按需加载的，用则加载，不用则不加载
像我们上边的练习link会首先加载，而hover和active会在指定状态触发时才会加载
*/
</style>
</head>
<body>
<a href="javascript:;"></a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
a:link{
display: block;
width: 93px;
height: 29px;
background-image: url('./img/09/btn.png')
}
a:hover{
background-position: -93px 0;
}
a:active{
background-position: -186px 0;
}
/*
解决图片闪烁的问题：
可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示的图片
这样图片会同时加载到网页中 就可以有效的避免出现闪烁的问题
这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图我们称为雪碧图
雪碧图的使用步骤：
1.先确定要使用的图标
2.测量图标的大小
3.根据测量结果创建一个元素
4.将雪碧图设置为元素的背景图片
5.设置一个偏移量以显示正确的图片
雪碧图的特点：
一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户的体验
*/
.box1{
width: 128px;
height: 46px;
background-image: url('./img/09/amazon-sprite_.png');
background-position:0 0;
}
.box2{
width: 42px;
height: 30px;
background-image: url('./img/09/amazon-sprite_.png');
background-position: -58px -338px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<a href="javascript:;"></a>
</body>
</html>
10_电影卡片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./fa/css/all.css">
<style>
/* 设置外层容器 */
.outer{
width: 240px;
margin: 100px auto;
/* 设置阴影 */
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
/* .img-wrapper{
border: 1px red solid;
} */
/* 设置图片 */
.img-wrapper img{
width: 100%;
vertical-align: bottom;
}
.info{
padding: 0 18px;
color: #acaaaa;
font-size: 14px;
}
/* 设置标题 */
.info .title{
color: #717171;
font-size: 18px;
margin: 13px 0 15px 0;
}
.info .category i{
margin-left: 4px;
margin-right: 7px;
}
/* 设置简介的样式 */
.info .intro{
margin: 18px 4px;
line-height: 20px;
}
/* 设置下边的内容 */
.star-wrapper{
height: 46px;
line-height: 46px;
border-top: 1px solid #e9e9e9;
color: #ddd;
padding: 0 16px;
}
/* 设置星星的样式 */
.star-wrapper .star{
float: left;
}
.star-wrapper .light{
color: #b9cb41;
}
.star-wrapper .weibo{
float: right;
}
</style>
</head>
<body>
<!-- 创建一个外层容器 -->
<div class="outer">
<!-- 创建图片容器 -->
<div class="img-wrapper">
<!-- 设置图片 -->
<img src="./img/10/1.jpg" alt="">
</div>
<!-- 创建内容区容器 -->
<div class="info">
<h2 class="title">
动画电影
</h2>
<h3 class="category">
<i class="fas fa-map-marker-alt"></i>动画
</h3>
<p class="intro">
这是一部迪士尼的动画电影，非常非常的好看
</p>
</div>
<!-- 创建评分的容器 -->
<div class="star-wrapper">
<!-- 创建星星 -->
<ul class="star">
<li class="fas fa-star light"></li>
<li class="fas fa-star light"></li>
<li class="fas fa-star"></li>
<li class="fas fa-star"></li>
</ul>
<!-- 创建 -->
<ul class="weibo">
<li class="fab fa-weibo"></li>
</ul>
</div>
</div>
</body>
</html>
11_米兔的动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1{
height: 271px;
width: 132px;
margin: 0 auto;
background-image: url(./img/11/bigtap-mitu-queue-big.png);
background-position: 0 0;
transition:0.3s steps(3);
}
/*注意是4个图片合在一起，每一部分为132px（雪碧图）*/
.box1:hover{
background-position: -396px 0;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1{
height: 271px;
width: 132px;
margin: 0 auto;
background-image: url(./img/11/bigtap-mitu-queue-big.png);
background-position: 0 0;
transition:0.3s steps(3);
}
.box1:hover{
background-position: -396px 0;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
12.奔跑的少年
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1{
width: 256px;
height: 256px;
margin: 0 auto;
background-image: url('./img/12/bg2.png');
/* 图片长度为1536px，分6张图，infinite为无限次循环 */
animation: run 1s steps(6) infinite;
}
/* 创建关键帧 */
@keyframes run {
from{
background-position: 0 0;
}
to{
background-position: -1536px 0;
}
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
13.钟表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 设置表的样式 */
.clock {
width: 500px;
height: 500px;
margin: 0 auto;
margin-top: 100px;
border-radius: 50%;
/* border: 10px solid black; */
position: relative;
background-image: url(./img/13/bg3.jpg);
background-size: cover;
}
/*让里面的子元素全部垂直居中*/
.clock>div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
/* 设置时针 */
.hour-wrapper {
height: 70%;
width: 70%;
animation: run 7200s linear infinite;
}
.hour {
height: 50%;
width: 6px;
background-color: #000;
margin: 0 auto;
}
/* 设置分针 */
.min-wrapper {
height: 80%;
width: 80%;
animation: run 600s steps(60) infinite;
}
.min {
height: 50%;
width: 4px;
background-color: #000;
margin: 0 auto
}
/* 设置秒针 */
.sec-wrapper {
height: 90%;
width: 90%;
animation: run 10s steps(60) infinite;
}
.sec {
height: 50%;
width: 2px;
background-color: #f00;
margin: 0 auto
}
/*
旋转的关键帧
*/
@keyframes run {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<!-- 创建表的容器 -->
<div class="clock">
<!-- 创建时针 -->
<div class="hour-wrapper">
<div class="hour"></div>
</div>
<!-- 创建分针 -->
<div class="min-wrapper">
<div class="min"></div>
</div>
<!-- 创建秒针 -->
<div class="sec-wrapper">
<div class="sec"></div>
</div>
</div>
</body>
</html>
14.复仇者联盟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html {
perspective: 800px
}
.cube {
width: 200px;
height: 200px;
/* background-color: #bfa; */
margin: 100px auto;
/* 设置3d变形效果 */
transform-style: preserve-3d;
/* transform: rotateX(45deg) rotateZ(45deg); */
/* infinite 无限次转 linear 匀速转 */
animation: rotate 20s infinite linear;
/* transform:rotateY(45deg) scaleZ(2); */
}
.cube>div {
width: 200px;
height: 200px;
/* 为元素设置透明效果 */
opacity: 0.7;
position: absolute;
}
img {
vertical-align: top;
}
/* 左边的图片 */
.box1 {
transform: rotateY(90deg) translateZ(100px);
}
/* 右边的图片 */
.box2 {
transform: rotateY(-90deg) translateZ(100px);
}
/* 顶部的图片 */
.box3 {
transform: rotateX(90deg) translateZ(100px);
}
/* 底部的图片 */
.box4 {
transform: rotateX(-90deg) translateZ(100px);
}
/* 前面的图片 */
.box5 {
transform:rotateY(180deg) translateZ(100px);
}
/* 后面的图片 */
.box6 {
transform: rotateY(0deg) translateZ(100px);
}
@keyframes rotate {
form{
transform:rotateX(0) rotateZ(0)
}
to{
transform:rotateX(1turn) rotateZ(1turn)
}
}
</style>
</head>
<body>
<!-- 创建一个外部的容器 -->
<div class="cube">
<!-- 引入图片 -->
<div class="box1">
<img src="./img/14/1.jpg">
</div>
<div class="box2">
<img src="./img/14/2.jpg">
</div>
<div class="box3">
<img src="./img/14/3.jpg">
</div>
<div class="box4">
<img src="./img/14/4.jpg">
</div>
<div class="box5">
<img src="./img/14/5.jpg">
</div>
<div class="box6">
<img src="./img/14/6.jpg">
</div>
</div>
</body>
</html>
15.再做导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.nav{
width: 1210px;
height: 48px;
line-height: 48px;
margin: 50px auto;
background-color: #E8E7E3;
/* 设置为弹性容器 */
display: flex;
}
.nav li{
/* 设置增长系数 */
flex-grow: 1;
}
.nav a{
display: block;
color: #808080;
text-decoration: none;
font-size: 16px;
text-align: center;
}
.nav a:hover{
background-color: #636363;
color: #fff;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">Browser Side</a></li>
<li><a href="#">Server Side</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">Web Building</a></li>
<li><a href="#">Reference</a></li>
</ul>
</body>
</html>
16.淘宝导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 设置外层的容器 */
.nav{
width: 100%;
}
/* 设置每一行的容器 */
.nav-inner{
/* 设置为弹性容器 */
display: flex;
/* 设置主轴上空白的分布，两边窄，中间宽 */
justify-content: space-around;
}
.item{
width: 18%;
/* background-color: #bfa; */
/* flex: auto; 设置为图片随着拉伸自动生长 */
text-align: center;
}
.item img{
/* 设置图片的宽度和父元素宽度一样 */
width: 100%;
}
.item a{
color: #333;
text-decoration: none;
font-size: 16px;
}
</style>
</head>
<body>
<!-- 创建一个外层的容器 -->
<nav class="nav">
<div class="nav-inner">
<div class="item">
<a href="#">
<img src="img/16/1.png">
<span>天猫</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/2.png">
<span>聚划算</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/3.png">
<span>天猫国际</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/4.png">
<span>外卖</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/5.png">
<span>天猫超市</span>
</a>
</div>
</div>
<div class="nav-inner">
<div class="item">
<a href="#">
<img src="img/16/6.png">
<span>充值中心</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/7.png">
<span>飞猪旅行</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/8.png">
<span>领金币</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/9.png">
<span>拍卖</span>
</a>
</div>
<div class="item">
<a href="#">
<img src="img/16/10.png">
<span>分类</span>
</a>
</div>
</div>
</nav>
</body>
</html>
17.移动端页面
*{
margin: 0;
padding: 0;
}
@total-width:750;
.w{
width: 693/40rem;
margin: 0 auto;
}
//设置根元素
html{
// 设置rem的比值
font-size: 100vw/@total-width * 40;
background-color: #eff0f4;
}
a{
text-decoration: none;
}
//设置头部header
.top-bar:extend(.w){
//设置弹性容器
display: flex;
// 设置高度
height: 175/40rem;
line-height: 175/40rem;
// 设置对齐方式，两边没有空格，元素之间有
justify-content: space-between;
// 设置辅轴的对齐方式 垂直居中
align-items: center;
a{
color: #24253d;
font-size: 50/40rem;
i{
color: #999;
font-size: 40/40rem;
}
}
}
// 设置banner
.banner:extend(.w){
img{
width: 100%;
}
}
// 设置中间菜单
.menu:extend(.w){
// 确定元素的高度
height: 329/40rem;
// 设置弹性元素
display: flex;
// 设置换行 row按行排列，wrap可以换行
flex-flow: row wrap;
// 设置对齐方式 两边没空，元素之间有
justify-content: space-between;
//设置辅轴方向的对齐方式 y轴
align-content: space-evenly;
//设置框的大小
a{
width: 327/40rem;
height: 104/40rem;
line-height: 104/40rem;
color: white;
border-radius: 10/40rem;
i{
margin: 0 20/40rem 0 38/40rem;
}
}
.course{
background-color:#f97053;
}
.star{
background-color:#cd6efe;
}
.sub{
background-color:#fe4479;
}
.download{
background-color:#1bc4fb;
}
}
// 设置课程列表
.course-list:extend(.w){
height: 394/40rem;
display: flex;
//纵向排列
flex-flow: column;
//在他们之间设置距离，两边不留空
justify-content: space-between;
//align-items:center; 居中对齐
margin-bottom: 46/40rem;
.title{
display: flex;
// 主轴的空间 在他们之间设置距离，两边不留空
justify-content: space-between;
// 辅轴的对齐方式 居中对齐
align-items: center;
h2{
font-size: 33/40rem;
color: #24253d;
border-left: 2px solid #3a84ff;
padding-left: 4px;
}
a{
font-size: 28/40rem;
color: #656565
}
}
}
// 设置课程列表的项
.item-list{
width: 720/40rem;
display: flex;
//让一行显示不完的可以滚动
overflow: auto;
}
.item{
//设置弹性盒不让缩和大
flex: none;
//不让设置的padding把容器撑大
box-sizing: border-box;
width: 320/40rem;
height: 324/40rem;
padding: 0 22/40rem;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
border-radius: 5px;
display: flex;
//设置主轴为纵向排列
flex-flow: column;
//空白空间平均分配，上下都有距离
justify-content: space-evenly;
margin-right: 24/40rem;
// 设置图片的宽度
img{
width: 100%;
//图片下方多了个边，去掉
vertical-align: top;
}
//课程标题
.course-title{
font-size: 32/40rem;
color: #24253d;
}
// 设置用户信息的容器
.user-info{
display: flex;
//垂直方向居中
align-items: center;
}
//头像
.avatar{
width: 42/40rem;
height: 42/40rem;
}
//用户的昵称
.nickname{
margin-left: 6px;
font-size: 24/40rem;
color: #969393;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>爱学习</title>
<link rel="stylesheet" href="./fa/css/all.min.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- 创建头部的容器 -->
<header class="top-bar">
<div class="menu-btn">
<a href="#">
<i class="fas fa-stream"></i>
</a>
</div>
<h1 class="logo">
<a href="#">
爱学习
</a>
</h1>
<div class="search-btn">
<a href="#">
<i class="fas fa-search"></i>
</a>
</div>
</header>
<!-- banner -->
<div class="banner">
<a href="#">
<img src="./img/17/banner.png" alt="">
</a>
</div>
<nav class="menu">
<a class="course" href="#">
<i class="fas fa-book"></i>
我的课程
</a>
<a class="star" href="#">
<i class="fas fa-cut"></i>
明星讲师
</a>
<a class="sub" href="#">
<i class="fas fa-envelope"></i>
我的订阅</a>
<a class="download" href="#">
<i class="fas fa-globe"></i>
我的下载</a>
</nav>
<!-- 课程列表 -->
<div class="course-list">
<!-- 列表的标题 -->
<div class="title">
<h2>最新课程</h2>
<a class="more" href="#">更多+</a>
</div>
<!-- 列表容器 -->
<div class="item-list">
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
</div>
</div>
<div class="course-list">
<!-- 列表的标题 -->
<div class="title">
<h2>最新课程</h2>
<a class="more" href="#">更多+</a>
</div>
<!-- 列表容器 -->
<div class="item-list">
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
</div>
</div>
<div class="course-list">
<!-- 列表的标题 -->
<div class="title">
<h2>最新课程</h2>
<a class="more" href="#">更多+</a>
</div>
<!-- 列表容器 -->
<div class="item-list">
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
<div class="item">
<!-- 封面 -->
<div class="cover">
<img src="img/17/cover.png" alt="">
</div>
<!-- 小标题 -->
<h3 class="course-title">
摄影课程
</h3>
<!-- 用户信息 -->
<div class="user-info">
<div class="avatar">
<img src="img/17/avatar.png" alt="">
</div>
<div class="nickname">
令狐冲
</div>
</div>
</div>
</div>
</div>
</body>
</html>
18.美图（响应式网页）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./fa/css/all.min.css">
<link rel="stylesheet" href="./meitu/style.css">
</head>
<body>
<!--
响应式设计的网页：
① 移动端优先
② 渐进增强
-->
<!-- 外部容器 -->
<div class="top-bar-wrapper">
<div class="top-bar">
<!-- 左侧菜单 -->
<div class="left-menu">
<!-- 创建菜单图标 -->
<ul class="menu-icon">
<li></li>
<li></li>
<li></li>
</ul>
<!-- 创建菜单 -->
<ul class="nav">
<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="#"><i class="fas fa-search"></i></a>
<span>搜索 Meitu.com</span>
</li>
</ul>
</div>
<!-- logo -->
<h1 class="logo">
<a href="/">美图手机</a>
</h1>
<!-- 用户信息 -->
<div class="user-info">
<a href="#">
<i class="fas fa-user"></i>
</a>
</div>
</div>
</div>
</body>
</html>
19.小米官网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小米商城 - Redmi Note 8、小米CC9、小米MIX 3，小米电视官方网站</title>
<!-- 引入重置样式表 -->
<link rel="stylesheet" href="./css/reset.css">
<!-- 引入公共的样式表 -->
<link rel="stylesheet" href="./css/base.css">
<!-- 引入图标字体库 -->
<link rel="stylesheet" href="./fa/css/all.css">
<!-- 引入当前页面的样式表 -->
<link rel="stylesheet" href="./css/index.css">
<!--
设置网站的图标（在标题栏和收藏栏）
- 网站图片一般都存储在网站的根目录下，名字一般都叫做 favicon.ico
-->
<link rel="icon" href="./favicon.ico">
</head>
<body>
<!-- 顶部导航条 -->
<!-- 顶部导航条外部容器 -->
<div class="topbar-wrapper">
<!-- 创建内部容器 -->
<div class="topbar w clearfix">
<!-- 左侧的导航 -->
<ul class="service">
<li><a href="javascript:;">小米商城</a></li>
<li class="line">|</li>
<li><a href="javascript:;">MIUI</a></li>
<li class="line">|</li>
<li><a href="javascript:;">loT</a></li>
<li class="line">|</li>
<li><a href="javascript:;">云服务</a></li>
<li class="line">|</li>
<li><a href="javascript:;">金融</a></li>
<li class="line">|</li>
<li><a href="javascript:;">有品</a></li>
<li class="line">|</li>
<li><a href="javascript:;">小爱开放平台</a></li>
<li class="line">|</li>
<li><a href="javascript:;">企业团购</a></li>
<li class="line">|</li>
<li><a href="javascript:;">资质证照</a></li>
<li class="line">|</li>
<li><a href="javascript:;">协议规则</a></li>
<li class="line">|</li>
<li class="app-wrapper">
<a class="app" href="javascript:;">
下载app
<!-- 添加一个弹出层 -->
<div class="qrcode">
<img src="./img/download.png">
<span>小米商城app</span>
</div>
</a>
</li>
<li class="line">|</li>
<li><a href="javascript:;">Select Location</a></li>
</ul>
<!-- 购物车 -->
<ul class="shop-cart">
<li><a href="javascript:;">
<i class="fas fa-shopping-cart"></i>
购物车（0）
</a></li>
</ul>
<!-- 用户登录注册 -->
<ul class="user-info">
<li><a href="javascript:;">登录</a></li>
<li class="line">|</li>
<li><a href="javascript:;">注册</a></li>
<li class="line">|</li>
<li><a href="javascript:;">消息通知</a></li>
</ul>
</div>
</div>
<!-- 创建一个头部的外部容器 -->
<div class="header-wrapper">
<div class="header w clearfix">
<!-- 创建一个logo -->
<h1 class="logo" title="小米">
小米官网
<a class="home" href="/"></a>
<a class="mi" href="/"></a>
</h1>
<!-- 创建一个中间导航条的容器 -->
<div class="nav-wrapper">
<!-- 创建导航条 -->
<ul class="nav clearfix">
<li class="all-goods-wrapper">
<a class="all-goods" href="#">全部商品分类</a>
<!-- 创建一个左侧导航菜单 -->
<ul class="left-menu">
<li>
<a href="#">
手机 电话卡
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">
电视 盒子
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">
笔记本 平板
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">
家电 插线板
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">
出行 穿戴
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">
智能 路由器
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">
电源 配件
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">
健康 儿童
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">
耳机 音箱
<i class="fas fa-angle-right"></i>
</a>
</li>
<li>
<a href="#">
生活 箱包
<i class="fas fa-angle-right"></i>
</a>
</li>
</ul>
</li>
<li class="show-goods"><a href="#">小米手机</a></li>
<li class="show-goods"><a href="#">Redmi 红米</a></li>
<li class="show-goods"><a href="#">电视</a></li>
<li class="show-goods"><a href="#">笔记本</a></li>
<li class="show-goods"><a href="#">家电</a></li>
<li class="show-goods"><a href="#">路由器</a></li>
<li class="show-goods"><a href="#">智能硬件</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">社区</a></li>
<!-- 创建一个弹出层 -->
<div class="goods-info">
</div>
</ul>
</div>
<!-- 创建搜索框的容器 -->
<div class="search-wrapper">
<form class="search" action="#">
<input class="search-inp" type="text">
<button class="search-btn">
<i class="fas fa-search"></i>
</button>
</form>
</div>
</div>
</div>
<!-- 创建banner的容器 -->
<div class="banner-wrapper">
<div class="banner w">
<ul class="img-list">
<li>
<a href="#">
<img src="./img/banner1.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/banner2.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/banner3.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/banner4.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./img/banner5.jpg" alt="">
</a>
</li>
</ul>
<div class="pointer">
<a class="active" href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
<div class="prev-next">
<a class="prev" href="javascript:;"></a>
<a class="next" href="javascript:;"></a>
</div>
</div>
</div>
<!-- 固定定位的工具条 -->
<div class="back-top"></div>
<!-- 创建广告容器 -->
<div class="ad w">
<ul class="shortcut">
<li>
<a href="#">
<i class="fas fa-clock"></i>
小米秒杀
</a>
</li>
<li>
<a href="#">
<i class="fas fa-building"></i>
企业团购
</a>
</li>
<li>
<a href="#">
<i class="fas fa-frog"></i>
F码通道
</a>
</li>
<li>
<a href="#">
<i class="fas fa-robot"></i>
米粉卡
</a>
</li>
<li>
<a href="#">
<i class="fas fa-keyboard"></i>
以旧换新
</a>
</li>
<li>
<a href="#">
<i class="fas fa-sim-card"></i>
话费充值
</a>
</li>
</ul>
<ul class="imgs">
<li>
<a href="#"><img src="./img/1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./img/2.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="./img/3.jpg" alt=""></a>
</li>
</ul>
</div>
</body>
</html>
源码获取
至此，我们的HTML5+CSS3的学习(六)就讲解完成了。源码素材可以通过关注我的微信公众号 我爱学习呀嘻嘻 ，回复关键字HTML5+CSS3源码素材进行获取哦。
HTML5+CSS3的学习(一)：HTML、CSS、CSS选择器
HTML5+CSS3的学习(五)：表单、动画、less、flex
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
