30个html+CSS和html5动画经典案例

空调制冷坏了

已于 2022-06-14 22:29:59 修改

阅读量3.7k

点赞数 7

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html 前端

于 2022-06-13 23:49:23 首次发布

本文链接：https://blog.youkuaiyun.com/qq_53863770/article/details/125244670

前端专栏收录该内容

5 篇文章

订阅专栏

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.设置块间距如图片按钮等

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="">&lt;</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="">&gt;</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是行内块级元素，默认格式存在空隙，导致插入的图片有空隙，需要转换为块级元素