30个html+CSS和html5动画经典案例
4.淘宝商品展示
代码部分:
<!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>产品展示</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.product {
width: 268px;
border-radius: 3px;
border: 5px solid #ddd;
margin: 50px auto 0px;
text-align: center;
}
.product p.describle{
color: #845f3f;
font-size: 16px;
}
.text{
height: 100px;
border-radius: 5px;
background-color: #f8f8f8;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<div class="product">
<div class="pic">
<img src="12.png" alt="图片"width="150px"height="200px "style="margin-top: 5px; margin-bottom: 20px;"
/>
<p class="describle" style="margin-bottom:25px;">快速煮水,安心使用</p>
</div>
<div class="text">
<!-- 通过设置buttons属性中的font-size为0px可设置按钮亦或是图片不留间隙 -->
<div class="buttons" style="padding-top: 10px;">
<!-- cursor:pointer;是css属性设置鼠标翻上去变成手 -->
<a href="https://www.baidu.com/"><button type="button" style="cursor:pointer; background-color:#D64187; color: white; border-radius: 3px; border: transparent; width: 50px;">直播中</button></a>
<a href="https://www.baidu.com/"><button type="button" style="cursor:pointer; color: red;background-color: white; border: #845f3f solid 1px; border-radius: 3px;">特惠</button></a>
<a href="https://www.baidu.com/"><button type="button" style="cursor:pointer; color: aquamarine; border: aquamarine solid 1px; border-radius: 3px; background-color:white;">30天保健价</button></a>
<a href="https://www.baidu.com/"><button type="button" style="cursor:pointer; color: aquamarine; border: aquamarine solid 1px; border-radius: 3px; background-color: white;">售后免邮</button></a>
</div>
<h3>云米电水壶</h3>
<p style="color: red;">¥59</p>
</div>
</div>
</body>
</html>
需要注意的地方:
1.设置块间距如图片 按钮等
<!-- 通过设置buttons属性中的font-size为0px可设置按钮亦或是图片不留间隙 -->
2.边框三要素颜色、线条类型、线条像素值缺一不可.否则边框无法显示。
color: white; border-radius: 3px;
运行效果如图所示:
试用场景:淘宝商品展示。橱窗展示。
5.html+css实战小案例,CSS小米商城首页侧边导航栏效果
代码部分:
<!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>侧边栏</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.all {
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, #fdb787, #c6ffdd);
}
.menu {
width: 300px;
background-color: rgba(255, 255, 255, 0.5);
margin: 50px auto 0px; /*上 左右 下*/
}
.menu ul{
padding: 20px 0px;
}
.menu ul li{
height: 42px;
/* 垂直居中 */
line-height: 42px;
}
.menu ul li a{
/* 设置块元素,目的是为了让a标签占据整行 */
display: block;
/* 文字首行缩进2个字 加字 */
text-indent: 2em;
background-image: url('5箭头.png');
background-repeat: no-repeat;
background-position: 255px;
}
.menu ul li a:hover{
/* 设置块元素,目的是为了让a标签占据整行 */
background-color: #ff6700;
display: block;
/* 文字首行缩进2个字 加字 */
text-indent: 2em;
background-image: url('5箭头.png');
background-repeat: no-repeat;
background-position: 255px;
}
</style>
</head>
<body>
<!-- 包裹整体所有代码包裹在这里面. -->
<div class="all">
<div class="menu">
<ul>
<li><a href="https://www.baidu.com/" target="blank">手机</a></li>
<li><a href="https://www.baidu.com/" target="blank">电视</a></li>
<li><a href="https://www.baidu.com/" target="blank">笔记本 平板</a></li>
<li><a href="https://www.baidu.com/" target="blank">家电</a></li>
<li><a href="https://www.baidu.com/" target="blank">出行 穿戴</a></li>
<li><a href="https://www.baidu.com/" target="blank">智能路由器</a></li>
<li><a href="https://www.baidu.com/" target="blank">电源 配件</a></li>
<li><a href="https://www.baidu.com/" target="blank">健康 儿童</a></li>
<li><a href="https://www.baidu.com/" target="blank">耳机 音响</a></li>
<li><a href="https://www.baidu.com/" target="blank">生活 箱包</a></li>
</ul>
</div>
</div>
</body>
</html>
需要注意的地方:
.menu ul li a{
/* 设置块元素,目的是为了让a标签占据整行 */
display: block;
/* 文字首行缩进2个字 加字 */
text-indent: 2em;
background-image: url('5箭头.png');
background-repeat: no-repeat;
background-position: 255px;
}
运行效果
应用场景;左侧菜单,二级菜单导航栏下拉列表
6.第五节:html+css实战小案例,不定向水平居中解决方案开发精美分页效果
代码部分
<!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>分页效果</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
.foot{
margin-top: 20px;
width: 100%;
height: 200px;
background-color: aquamarine;
text-align: center;
font-size: 0px;
padding: 100px 0px;
}
.foot a{
border: 1px solid #ddd;
background-color: #fff;
display: inline-block;
padding: 0px 10px;
height: 30px;
text-decoration: none;
line-height: 30px;
color: #333;
font-size: 14px;
margin: 0px 2px;
}
</style>
</head>
<body>
<div class="all">
<div class="foot">
<a href=""><</a><a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">...</a>
<a href="">100</a>
<a href="">></a>
</div>
<div class="foot"></div>
<div class="foot"></div>
</div>
</body>
</html>
运行效果:
需要注意的地方:
在编译过程中浏览器会默认把回车空格进行编译
解决办法:
应用场景:进行分页设置
7.CSS打造精美选项卡菜单效果
代码部分:
<!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>css打造精美选项卡</title>
<style type="text/css">
body{
margin: 0px;
}
.tab{
width: 800px;
background-color: #f7f7f7;
border-radius: 50px;
margin: 50px auto 0px;
font-size: 0px;
padding: 5px 0px;
}
.tab span{
border-radius: 25px;
height: 40px;
display: inline-block;
padding: 0px 40px;
line-height: 40px;
font-size: 16px;
}
.tab span i{
width: 26px;
height: 25px;
display: inline-block;
background-image: url('7css精美选项卡icon.png');
/* 只针对行内块级元素有效 */
vertical-align: middle;
margin-right: 5px;
}
.icon2{
background-position: -26px 0px;
}
.icon3{
background-position: -52px 0px;
}
.icon4{
background-position: -78px 0px;
}
.icon5{
background-position: -104px 0px;
}
.icon7{
background-position: -26px 25px;
}
.icon2{
background-position: -26px 0px;
}
.icon3{
background-position: -52px 0px;
}
.icon4{
background-position: -78px 0px;
}
.icon5{
background-position: -104px 0px;
}
</style>
</head>
<body>
<div class="tab">
<span class="current" ><i class="icon1"></i>备孕期间</span>
<span class="current"><i class="icon2"></i>怀孕</span>
<span class="current"><i class="icon3"></i>0-1岁</span>
<span class="current"><i class="icon4"></i>1-2岁</span>
<span class="current"><i class="icon5"></i>2-3岁</span>
</div>
<div class="tab">
<span class="current" style="background-color: pink;"><i class="icon7"></i>备孕期间</span>
<span class="current"><i class="icon8"></i>怀孕</span>
<span class="current" ><i class="icon9"></i>0-1岁</span>
<span class="current"><i class="icon10"></i>1-2岁</span>
<span class="current"><i class="icon11"></i>2-3岁</span>
</div>
</body>
</html>
运行结果
需要注意的地方:
涉及到了
CSS精灵图技术就是把每一个需要用到的图放到一个里面
尽量使用类选择器
8.前端必会的三种CSS网页布局技术
代码部分
<!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>布局格式</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.all{
position: relative;
width: 100%;
height: 100%;
background-color: antiquewhite;
}
.container{
width: 1000px;
height: 1500px;
border: 2px solid black;
margin: 0px auto 0px;
}
.column2{
border: 2px solid black;
}
.column2-1{
width: 700px;
height: 300px;
background-color: red;
float: left;
}
.column2-2{
width: 280px;
height: 300px;
background-color: yellow;
float: right;
}
.clear{
clear: both;
/* 清楚左右浮动 */
}
.column3{
margin-top: 20px;
margin-bottom: 20px;
border: 2px solid blue;
}
.column3-1{
width: 200px;
height: 300px;
background-color: aqua;
float: left;
}
.column3-2{
width: 400px;
height: 300px;
background-color: coral;
float: left;
margin: 0px 10px;
}
.column3-3{
width: 360px;
height: 300px;
background-color: blueviolet;
float: right;
}
.clear{
clear: both;
/* 清楚左右浮动 */
}
.column-n ul{
list-style: none;
}
.column-n ul li{
background-color: aquamarine;
width: 190px;
height: 200px;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<div class="all">
<div class="container" >
<div class="column2">
<div class="column2-1"></div>
<div class="column2-2"></div>
<div class="clear"></div>
</div>
<!-- 三列 -->
<div class="column3 clearfix">
<div class="column3-1"></div>
<div class="column3-2"></div>
<div class="column3-3"></div>
<div class="clear"></div>
</div>
<div class="column-n">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
</html>
这个布局格式需要基本掌握
9. 酷狗音乐热榜效果
代码部分:
<!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>酷狗热搜</title>
<style type="text/css">
body,h3,h4,p{
margin: 0px;
padding: 0px;
}
a{
text-decoration: none;
}
.music-hot{
width: 350px;
height: 500px;
margin: 50px auto 0px;
}
.music-hot h3{
font-weight: 100;
height: 40px;
line-height: 40px;
}
.music-hot h3 span{
font-size: 28px;
}
.music-hot h3 span i{
color: #00a7f6;
font-style: normal
}
.music-hot h3 a{
font-size: 16px;
color: #9c9e9c;
float: right;
}
.music-hot .item{
height: 98px;
background-color: #f6f6f6;
margin-top: 20px;
}
.music-hot .item .item-img{
width: 98px;
height: 98px;
background-color: #00a7f6;
float: left;
}
.music-hot .item .item-text{
width: 232px;
height: 98px;
float: right;
background: url(../img/9-1.png) no-repeat right center;
}
img{
width: 98px;
height: 98px;
}
.music-hot .item .item-text h4{
font-size: 16px;
padding: 8px 0px;
}
.music-hot .item .item-text p{
font-size: 14px;
color: #555;
line-height: 25px;
}
.music-hot .item .item-text p a{
color: #555;
}
.music-hot .item .item-text p a:hover{
color: #ff627f;
}
.music-hot .item .item-text p a:hover span{
color: #ff627f;
}
.music-hot .item .item-text p span{
color: #9999;
}
</style>
</head>
<body>
<div class="music-hot">
<h3><a href="">更多</a><span><i>热门</i>榜单</span></h3>
<div class="item">
<div class="item-img">
<img src="..\img\9-2.jpg" alt="飙升榜">
</div>
<div class="item-text">
<h4>酷狗音乐飙升榜</h4>
<p><a href="">1.很受伤(Live)- <span>郁可唯</span></a></p>
<p><a href="">2.Lemon(柠檬)- <span>米津玄师</a></span></p>
</div>
</div>
<div class="item">
<div class="item-img">
<img src="..\img\9-3.jpg" alt="">
</div>
<div class="item-text">
<h4>酷狗音乐飙升榜</h4>
<p><a href="">1.很受伤(Live)- <span>郁可唯</span></a></p>
<p><a href="">2.Lemon(柠檬)- <span>米津玄师</a></span></p>
</div>
</div>
<div class="item">
<div class="item-img">
<img src="..\img\9-4.jpg" alt="">
</div>
<div class="item-text">
<h4>酷狗音乐飙升榜</h4>
<p><a href="">1.很受伤(Live)- <span>郁可唯</span></a></p>
<p><a href="">2.Lemon(柠檬)- <span>米津玄师</a></span></p>
</div>
</div>
</div>
</body>
</html>
运行效果:
注意的地方:绝对路径的设置
关于url()和 src路径
这两处需要注意一下。
应用场景 :热门导航 热门列表项
10.CSS开发小米商城产品栏目展示效果
代码部分:
<!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>小米商城</title>
<style type="text/css">
ul{
margin: 0px;
padding: 0px;
list-style: none;
}
body{
margin: 0px;
padding: 0px;
background-color: #ddd;
}
h4,h3,p{
padding: 0px;
margin: 0px;
}
a{
text-decoration: none;
color: #000;
}
.product{
width: 1226px;
/* height: 700px; */
margin: 50px auto 0px;
}
.product .product-hot{
width: 234px;
/* height: 614px; */
background-color: aquamarine;
float: left;
}
.product .product-hot img{
display: block;
}
.product .product-list{
width: 992px;
/* height: 614px; */
float: right;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
.product-list ul li{
width: 234px;
height: 300px;
float: left;
margin-left:14px ;
margin-bottom:14px ;
background-color: #fff;
}
.product-list ul li a{
display: block;
height: inherit;
text-align: center;
padding-top: 30px;
/* 怪异盒子模型 宽高+上内外边距 */
box-sizing: border-box;
}
.product-list ul li:nth-last-child(1){
height: 143px;
}
.product-list ul li:nth-last-child(2){
height: 143px;
}
.product-list ul li a img{
width: 160px;
}
.product-list ul li a h3{
font-size: 14px;
font-weight: 400;
padding: 0px 5px 0px;
/* 文字不要换行 y1行显示*/
white-space: nowrap;
/* 超出的部分隐藏 */
text-overflow: ellipsis;
overflow:hidden;
}
.product-list ul li a .desc{
font-size: 14px;
color: #999;
}
.product-list ul li a p.price{
padding-top: 15px;
}
.product-list ul li a p.price span{
font-size: 14px;
color: orange;
margin-right: 10px;
}
.product-list ul li a p.price del{
font-size: 14px;
color: #999;
}
.product-list ul li .txt{
width: 100px;
/* background-color: blue; */
float: left;
margin-left: 20px;
}
.product-list ul li .img{
width: 80px;
height: 80px;
float: right;
margin-right: 20px;
}
.product-list ul li .txt h4{
font-size:14px ;
font-weight: 400;
text-align: left;
}
.product-list ul li .txt p{
margin-top: 15px;
font-size:14px;
text-align: left;
color: orange;
}
.product-list ul li .more{
margin-top: 20px;
}
.product-list ul li .txt h4.ti{
padding-top: 20px;
font-size: 20px;
}
.product-list ul li .txt p.hot{
color: #999;
}
</style>
</head>
<body>
<div class="product clearfix">
<div class="product-hot">
<!-- img标签是一个行内块级元素,默认有空隙 -->
<!-- 导致插入的图片产生空隙,需要转换为行块级元素 -->
<a href=""><img src="../img/mi00.webp" style="width: 234px;" alt=""></a>
</div>
<div class="product-list">
<ul class=" clearfix">
<li><a href="#"><img src="../img/mi01.webp" alt="">
<h3>Xiaomi Watch S1</h3>
<p class="desc">腕事俱备</p>
<p class="price"><span>1099元起</span> <del>2099元起</del></p>
</a>
</li>
<li><a href="#"><img src="../img/mi02.webp" alt="">
<h3>Xiaomi Watch S1</h3>
<p class="desc">腕事俱备</p>
<p class="price"><span>1099元起</span> <del>2099元起</del></p>
</a>
</li>
<li><a href="#"><img src="../img/mi03.webp" alt="">
<h3>Xiaomi Watch S1</h3>
<p class="desc">腕事俱备</p>
<p class="price"><span>1099元起</span> <del>2099元起</del></p>
</a>
</li>
<li><a href="#"><img src="../img/mi04.webp" alt="">
<h3>Xiaomi Watch S1</h3>
<p class="desc">腕事俱备</p>
<p class="price"><span>1099元起</span> <del>2099元起</del></p>
</a>
</li>
<li><a href="#"><img src="../img/mi05.webp" alt="">
<h3>Xiaomi Watch S1</h3>
<p class="desc">腕事俱备</p>
<p class="price"><span>1099元起</span> <del>2099元起</del></p>
</a>
</li>
<li><a href="#"><img src="../img/mi06.webp" alt="">
<h3>Xiaomi Watch S1</h3>
<p class="desc">腕事俱备</p>
<p class="price"><span>1099元起</span> <del>2099元起</del></p>
</a>
</li>
<li><a href="#"><img src="../img/mi07.webp" alt="">
<h3>Xiaomi Watch S1</h3>
<p class="desc">腕事俱备</p>
<p class="price"><span>1099元起</span> <del>2099元起</del></p>
</a>
</li>
<!-- 9/10 -->
<li><a href="#">
<div class="txt">
<h4>Redmi Bus 青春旗舰版</h4>
<p>999元</p>
</div>
<div class="img"><img src="../img/mi08.webp" style="width: 80px;" alt=""></div>
</a></li>
<li><a href="#">
<div class="txt">
<h4 class="ti">浏览更多</h4>
<p class="hot">热门</p>
</div>
<div class="img more"><img src="../img/circle-arrow.svg" style="width: 48px;" alt=""></div>
</a></li>
</ul>
</div>
</div>
</body>
</html>
需要注意的地方:
提到了怪异盒子模型:box-sizing: border-box;这样设置可以使得原本
实际高度变为border的设置高度
此外
/* 文字不要换行 y1行显示*/
white-space: nowrap;
/* 超出的部分隐藏 */
text-overflow: ellipsis;
overflow:hidden;
img是行内块级元素,默认格式存在空隙,导致插入的图片有空隙,需要转换为块级元素
bluebaby258: 我没重启,但真的有用。谢谢!
驼同学.: 最后请务必重新启动计算机! 这样所设置的环境变量才能生效!
jkxbest: 不用,你直接将对应安装包覆盖安装一次就好了