⑪HTML+CSS 页面设计练习

练习

  • 01_图片的列表
  • 02_京东左侧导航条
  • 03_网易新闻的右侧列表 ※
  • 04_w3导航条 ※
  • 05_京东的轮播图 ※
  • 06_京东顶部导航条 ※
  • 07_背景重复
  • 08_按钮练习
  • 09_雪碧图 ※
  • 10_电影卡片 ※
  • 11_米兔的动画 ※
  • 12_奔跑的少年 ※
  • 13_钟表 ※
  • 14_复仇者联盟 ※
  • 15_再做导航条(弹性容器) ※
  • 16_淘宝导航
  • 17_移动端页面 ※


本人是个新手,写下博客用于自我复习、自我总结。
如有错误之处,请各位大佬指出。
学习资料来源于:尚硅谷


01_图片的列表

之前涉及到的一直是文字类型的列表结构,现在想要用列表来实现图片的竖向排列。
效果图:
⑪HTML+CSS 页面设计练习_第1张图片
使用到的图片:
⑪HTML+CSS 页面设计练习_第2张图片
⑪HTML+CSS 页面设计练习_第3张图片
⑪HTML+CSS 页面设计练习_第4张图片


<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>
    <ul class="img-list">
        <li>
            <a href="javascript:;">
                <img src="./img/01/1.jpg" alt="图片1">
            a>
        li>
        <li>
            <a href="javascript:;">
                <img src="./img/01/2.jpg" alt="图片2">
            a>
        li>
        <li>
            <a href="javascript:;">
                <img src="./img/01/3.jpg" alt="图片3">
            a>
        li>
    ul>
body>
html>

02_京东左侧导航条

效果图:
⑪HTML+CSS 页面设计练习_第5张图片


<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 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_网易新闻的右侧列表 ※

效果图:
⑪HTML+CSS 页面设计练习_第6张图片
使用到的图片:
⑪HTML+CSS 页面设计练习_第7张图片


<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恤嘲讽LBJa>
            li>
            <li>
                <a href="#">塔克4000双鞋让保罗羡慕嫉妒 乔丹被震惊a>
            li>
            <li>
                <a href="#">CBA下季新赛制:常规赛4组循环 增至46轮a>
            li>
        ul>
    div>
body>
html>

04_w3导航条 ※

效果图:
在这里插入图片描述


<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/CSSa>
        li>
        <li>
            <a href="#">Browser Sidea>
        li>
        <li>
            <a href="#">Server Sidea>
        li>
        <li>
            <a href="#">Programminga>
        li>
        <li>
            <a href="#">XMLa>
        li>
        <li>
            <a href="#">Web Buildinga>
        li>
        <li>
            <a href="#">Referencea>
        li>
    ul>
body>
html>

05_京东的轮播图 ※

效果图:
⑪HTML+CSS 页面设计练习_第8张图片
虽然实际上的效果应该是图片的轮播,但是在现在这个阶段无法实现这个行为,要实现这个行为需要JavaScript。所以为了节省空间,就只展示这一张图。

使用到的图片:
⑪HTML+CSS 页面设计练习_第9张图片


<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>
        /* 设置图片的容器 */
        .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;
            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_京东顶部导航条 ※

效果图:
在这里插入图片描述


<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 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_背景重复

效果图:
在这里插入图片描述

使用到的图片:
在这里插入图片描述


<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>
    <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_按钮练习

使用到的图片:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


<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>
    <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>

09_雪碧图 ※

效果图:
⑪HTML+CSS 页面设计练习_第10张图片
使用的雪碧图:
⑪HTML+CSS 页面设计练习_第11张图片
在这里插入图片描述


<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>
    <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_电影卡片 ※

效果图:
⑪HTML+CSS 页面设计练习_第12张图片
使用到的图片:
⑪HTML+CSS 页面设计练习_第13张图片


<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>
        /* 设置外层容器 */
        .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_米兔的动画 ※

效果:把鼠标放在图片上就可展现出动态效果

使用到的图片:
⑪HTML+CSS 页面设计练习_第14张图片


<html>
<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>
    <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_奔跑的少年 ※

效果和11类似。

使用到的图片:
⑪HTML+CSS 页面设计练习_第15张图片


<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>
    <style>
        .box1{
      
            width: 256px;
            height: 256px;
            margin: 0 auto;
            background-image: url('./img/12/bg2.png');
            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_钟表 ※

效果图:
⑪HTML+CSS 页面设计练习_第16张图片

使用到的图片:
⑪HTML+CSS 页面设计练习_第17张图片


<html>
<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>
    <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_复仇者联盟 ※

设置3D效果后:transform-style: preserve-3d;
transform可以在不需要过渡/动画的情况下,直接对元素进行如下操作:
transform: rotateZ(20deg);
(就算设置视距perspective,有的浏览器也无法看到Z轴旋转的效果)

经测试旋转情况:(详细可参考3D绘图,正方体的X、Y、Z旋转情况)
⑪HTML+CSS 页面设计练习_第18张图片

效果图:
⑪HTML+CSS 页面设计练习_第19张图片
使用到的图片:
⑪HTML+CSS 页面设计练习_第20张图片
⑪HTML+CSS 页面设计练习_第21张图片
⑪HTML+CSS 页面设计练习_第22张图片
⑪HTML+CSS 页面设计练习_第23张图片
⑪HTML+CSS 页面设计练习_第24张图片
⑪HTML+CSS 页面设计练习_第25张图片


<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>
    <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); */
            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_再做导航条(弹性容器) ※

弹性容器的导航条和之前的导航条相比,最大的好处就是,弹性容器可以帮我们填补元素未使用的空白,比较实用。之前想要保证导航条充分利用,需要合理利用空间(即要细心排版,设计每个子元素的大小,以便最大程度的占据父元素)。但实际上,对于不同浏览器,就算细心排版,仍然可能会出现问题,因为不同的浏览器有它自己的样式。而使用弹性容器,它不会考虑这些,因为它会根据大小,自动分配。

效果图:
在这里插入图片描述


<html lang="zh">
<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{
      
            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/CSSa>li>
        <li><a href="#">Browser Sidea>li>
        <li><a href="#">Server Sidea>li>
        <li><a href="#">Programminga>li>
        <li><a href="#">XMLa>li>
        <li><a href="#">Web Buildinga>li>
        <li><a href="#">Referencea>li>
    ul>
body>
html>

16_淘宝导航

效果图:
⑪HTML+CSS 页面设计练习_第26张图片
使用到的图片:
⑪HTML+CSS 页面设计练习_第27张图片
⑪HTML+CSS 页面设计练习_第28张图片
⑪HTML+CSS 页面设计练习_第29张图片
⑪HTML+CSS 页面设计练习_第30张图片
⑪HTML+CSS 页面设计练习_第31张图片
⑪HTML+CSS 页面设计练习_第32张图片
⑪HTML+CSS 页面设计练习_第33张图片
⑪HTML+CSS 页面设计练习_第34张图片
⑪HTML+CSS 页面设计练习_第35张图片
⑪HTML+CSS 页面设计练习_第36张图片


<html lang="zh">
<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>
    <style>
        * {
      
            margin: 0;
            padding: 0;
        }

        /* 设置外层的容器 */
        .nav{
      
            width: 100%;
        }

        /* 设置每一行的容器 */
        .nav-inner{
      
        	margin: 0 auto;
        	width: 50%;
            /* 设置为弹性容器 */
            display: flex;
            /* 设置主轴上空白的分布 */
            justify-content: space-around;
        }

        .item{
      
            width: 10%;
            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_移动端页面 ※

使用到的图片:
在这里插入图片描述
⑪HTML+CSS 页面设计练习_第37张图片
⑪HTML+CSS 页面设计练习_第38张图片


<html lang="zh">
<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">
    <style>
    	*{
      
			margin: 0;
			padding: 0
		 }

		.w, .top-bar, .banner, .menu, .course-list {
      
			width: 17.325rem;
			margin: 0 auto
		}

		html {
      
			font-size: 5.33333333vw;
			background-color: #eff0f4
		}

		a {
      
			text-decoration: none
		}

		.top-bar {
      
			display: flex;
			height: 4.375rem;
			line-height: 4.375rem;
			justify-content: space-between;
			align-items: center
		}	

		.top-bar a {
      
			color: #24253d;
			font-size: 1.25rem
		}

		.top-bar a i {
      
			color: #999;
			font-size: 1rem
		}

		.banner img {
      
			width: 100%
		}

		.menu {
      
			height: 8.225rem;
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;
			align-content: space-evenly
		}

		.menu a {
      
			width: 8.175rem;
			height: 2.6rem;
			line-height: 2.6rem;
			color: white;
			border-radius: .25rem
		}

		.menu a i {
      
			margin: 0 .5rem 0 .95rem
		}

		.menu .course {
      
			background-color: #f97053
		}

		.menu .star {
      
			background-color: #cd6efe
		}	

		.menu .sub {
      
			background-color: #fe4479
		}

		.menu .download {
      
			background-color: #1bc4fb
		}

		.course-list {
      
			height: 9.85rem;
			display: flex;
			flex-flow: column;
			justify-content: space-between;
			margin-bottom: 1.15rem
		}	

		.course-list .title {
      
			display: flex;
			justify-content: space-between;
			align-items: center
		}

		.course-list .title h2 {
      
			font-size: .825rem;
			color: #24253d;
			border-left: 2px solid #3a84ff;
			padding-left: 4px
		}

		.course-list .title a {
      
			font-size: .7rem;
			color: #656565
		}

		.item-list {
      
			width: 18rem;
			display: flex;
			overflow: auto
		}

		.item {
      
			flex: none;
			box-sizing: border-box;
			width: 8rem;
			height: 8.1rem;
			padding: 0 .55rem;
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
			border-radius: 5px;
			display: flex;
			flex-flow: column;
			justify-content: space-evenly;
			margin-right: .6rem
		}

		.item img {
      
			width: 100%;
			vertical-align: top
		}

		.item .course-title {
      
			font-size: .8rem;
			color: #24253d
		}

		.item .user-info {
      
			display: flex;
			align-items: center
		}

		.item .avatar {
      
			width: 1.05rem;
			height: 1.05rem
		}

		.item .nickname {
      
			margin-left: 6px;
			font-size: .6rem;
			color: #969393
		} 
    style>
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>
    
    
    <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>
    div>
body>
html>

你可能感兴趣的:(#,HTML和CSS,html,css)