• h5c3_01练习


    基础案例

    01-导航搜索

    训练描述

    搜索栏鼠标经过后出现搜索框,失去焦点还原,并且是以过渡的方式

    训练提示

    1. 搭建以项目为主的几个文件
    2. 书写导航栏页面布局
      • logo原图比较大,需要设置父盒子宽度和自身的100%
      • 设置导航项
      • 右侧基本都是精灵图,所以不需要使用字体图标,注意间距的调整
    3. 将搜索框设置成初始位置,然后当鼠标经过的时候,设置宽度和透明度变化

    操作步骤

    1. 创建index文件,新建css文件夹,创建base.css文件并初始化基本代码,新建images文件夹

    2. 创建index.css保存至css文件夹,首页html文件引入css样式

    3. 编写结构代码

      • 创建版心盒子,左左右模块,分别代表logo,导航项,右侧信息

        <header>
        	<div class="logo"></div>
        	<div class="topnav">
        		<ul>
        			<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="#">美的分期</a></li>
        		</ul>
        	</div>
        	<div class="right-info">
        		<ul>
        			<li class="searchbox">
        				<input type="text" placeholder="美的热水器">
        				<i class="icon-meidi search"></i>
        			</li>
        			<li class="mobilebox">
        				<i class="icon-meidi mobile"></i>
        			</li>
        			<li class="carbox">
        				<i class="icon-meidi car"></i>
        			</li>
        			<li class="loginbox">
        				<i class="icon-meidi login"></i>
        				<span>登录</span>
        			</li>
        		</ul>
        	</div>
        </header>
        <div class="news">【通知】1、美的商城为美的集团官方渠道,请勿相信任何刷单信息。2、新疆部分区域无法快递正常发货,恢复时间待定。3、 因美的会员体系改版,10月26-29日期间美的积分将处于冻结状态。届时您将无法获得和消耗积分,感谢理解!</div>
        
      • 排版logo和导航项的内容

        body {
        	height: 2000px;
          	/*这句话可以不要,没有什么太大的帮助*/
        }
        
        header {
        	min- 1200px;
        	height: 44px;
        	background-color: #0092d8;
        }
        
        header .logo {
        	float: left;
             120px;
            height: 44px;
            background-image: url(../images/index_service_sprite@2x.png);
            background-repeat: no-repeat;
            background-size: 200px 80px;
            background-position: -80px 0;
        }
        
        header .topnav {
        	float: left;
        	height: 44px;
        }
        
        header .topnav li {
        	float: left;
        }
        
        header .topnav li a {
        	display: block;
        	height: 44px;
        	line-height: 44px;
        	color: #a3c3e6;
        	font-size: 12px;
        	padding: 0 30px;
        }
        
        header .topnav li a:hover {
        	color: #fff;
        }
        
      • 下载相关的图片,排版右侧信息内容

        .right-info {
        	float: right;
        }
        
        .right-info li {
        	float: left;
        	height: 44px;
        	position: relative;
        }
        
        .right-info li input {
        	 100%;
        	height: 100%;
        	text-indent: 2rem; /*文字缩进*/
        	opacity: 0; /*不透明*/
        }
        
        .icon-meidi {
        	display: block;
             20px;
            height: 20px;
        	position: absolute;
            right: 30px;
            cursor: pointer; /*指针*/
            background-image: url(../images/index_sprite.png);
            background-repeat: no-repeat;
        }
         
        .search {
        	top: 12px;
            background-position: -96px -215px;
        }
         
        .searchbox {
        	 45px;
        	transition: width .4s ease-in;  /*宽4s缓入*/
        }
         
        .searchbox:hover {
        	 250px;
        }
         
        .searchbox:hover input {
        	opacity: 1;
        }
         
        .searchbox:hover i {
        	top: 12px;
            left: 10px;
            background-position: -66px -215px;
        }
         
        .mobilebox {
        	 65px;
        	padding-top: 11px;
        	box-sizing: border-box;
        }
         
        .mobile {
        	background-position: -120px -215px;
        }
         
        .carbox {
        	padding: 0 20px;
        	padding-top: 11px;
        	box-sizing: border-box;
        }
         
        .car {
        	position: static;
            background-position: -146px -215px;
            cursor: pointer;
        }
         
        .loginbox {
        	 85px;
        	padding-top: 11px;
        	box-sizing: border-box;
        }
         
        .login {
        	position: static;
        	float: left;
             20px;
            height: 20px;
            cursor: pointer;
            background-position: -35px -216px;
            margin-left: 20px;
        }
         
        .loginbox span {
        	float: left;
        	font-size: 12px;
        	color: #fff;
        }
         
        .news {
            font-size: 12px;
            background: rgb(0, 59, 102);
            line-height: 16px;
            color: rgb(255, 255, 255);
            text-align: center;
            padding: 4px;
        }
        
    4. 排版搜索栏默认的样式,设置当鼠标经过父盒子的样式

    5. 打开首页文件,观察效果

    • 附:
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    ul, ol {
    	list-style: none;
    }
    
    input, button {
    	outline: none;
    	border: none;
    }
    
    a {
    	text-decoration: none;
    }
    
    .clearfix::before,
    .clearfix::after {
    	content: "";
    	height: 0;
    	line-height: 0;
    	display: block;
    	visibility: hidden;
    }
    
    .clearfix::after {
    	clear: both;
    }
    

    02-防《小米》产品

    训练描述

    这个产品模块中,鼠标经过大盒子,底部有信息模块升上来,并且本身上移2像素,并且加上投影

    训练提示

    1. 先进行基本的布局,排出来具体的大小位置

    2. 添加底部信息块,,定位在bottom底部,完成后,将高度设置为0,加上溢出隐藏属性

    3. 当鼠标经过盒子,显示盒子,并且加上阴影和位移

    操作步骤

    ​ 1,创建index文件,新建css文件夹并创建base.css文件,初始化css样式

    ​ 2,新建images文件夹,在首页文件中引入样式

    ​ 3,创建基本的结构

    	<div class="product">
    		<ul>
    			<li>
    				<div class="pro-img">
    					<a href="#">
    						<img src="images/pms_1524883847.49276938!220x220.jpg" alt="">
    					</a>
    				</div>
    				<h3><a href="#">小米电视4A 43英寸青春版</a></h3>
    				<p class="desc">全高清屏 / 人工智能语音</p>
    				<p class="price">
    					<span>1499</span>元
    					<del>1699</del>
    				</p>
    				<div class="review">
    					<a href="#">
    						<span class="msg">一如既往的好,小米情怀</span>
    						<span class="auther"> 来自于 惊喜 的评价 </span>
    					</a>
    				</div>
    			</li>
    		</ul>
    	</div>
    

    ​ 4,排版基本的样式

    body {
    	padding: 100px;
    	background-color: #f5f5f5;
    }
    
    .product li {
        float: left;
         234px;
    	height: 246px;
        padding: 34px 0 20px;
        z-index: 1;
        margin-left: 14px;
        margin-bottom: 14px;
        background: #fff;
        -webkit-transition: all .2s linear;
        transition: all .2s linear;
    	position: relative;
    }
    
    .pro-img {
    	 150px;
    	height: 150px;
    	margin: 0 auto 18px;
    }
    
    .pro-img a {
    	 100%;
    	height: 100%;
    }
    
    .pro-img img {
    	display: block;
    	 100%;
    	height: 100%;
    }
    
    .product li h3 {
    	margin: 0 10px;
        font-size: 14px;
        font-weight: 400;
        text-align: center;
    }
    
    .product li h3 a {
    	color: #333;
    }
    
    .desc {
    	margin: 0 10px 10px;
        height: 18px;
        font-size: 12px;
        text-align: center;
        text-overflow: ellipsis;  /*文字溢出省略*/
        white-space: nowrap;/*文本不进行换行*/
        overflow: hidden;/*溢出隐藏*/
        color: #b0b0b0;
    }
    
    .price {
    	font-size: 14px;
    	margin: 0 10px 10px;
        text-align: center;
        color: #ff6700;
    }
    
    .price del {
    	color: #b0b0b0;
    }
    
    .review {
    	position: absolute;
        bottom: 0;
        left: 0;
        z-index: 3;
         234px;
        height: 0;
        overflow: hidden;
        font-size: 12px;
        background: #ff6700;
        opacity: 0;
        -webkit-transition: all .2s linear;
        transition: all .2s linear;
    }
    
    .review a {
    	color: #757575;
    	display: block;
        padding: 8px 30px;
        outline: 0;/*outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用*/
    }
    
    .review a span {
    	display: block;
    	margin-bottom: 5px;
        color: #fff;
    }
    

    ​ 5,设置鼠标经过样式

    .product li:hover {
    	-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        -webkit-transform: translate3d(0, -2px, 0);
        transform: translate3d(0, -2px, 0);
      	/*这里的位移可以使用2d的转换方式*/
    }
    
    .product li:hover .review {
    	opacity: 1;
    	height: 76px;
    }
    

    03-按钮

    训练描述

    当鼠标经过按钮的时候,有一个灰色的背景或者其他颜色的背景升上来

    训练提示

    1. 创建index文件,新建css文件创建base.css文件,完成css初始化

    2. 在首页文件中引入文件,完成结构布局

    3. 完成样式排版,设计鼠标经过样式(预先有一个盒子在底部等待,鼠标经过就升上来)

    操作步骤

    1. 创建基本结构

      	<div class="button">
      		<ul>
      			<li>
      				<a href="#">
      					<span class="button-inner">
      						探索
      						<span class="a11y"></span>
      					</span>
      					<span class="mask"></span>
      				</a>
      			</li>
      		</ul>
      	</div>
      
    2. 设置基本样式和鼠标经过样式

      body {
      	padding: 50px;
      }
      
      .button ul li {
      	float: left;
      }
      
      .button li a {
      	display: inline-block;
      	position: relative;
      	line-height: 30px;
      	text-align: center;
      	color: #1e1e1e;
      	/* 文字间距 */
      	letter-spacing: 0.5px;
      	border-radius: 50px;/*圆角半径*/
      	overflow: hidden;
      	z-index: 1;
      	cursor: pointer; /*光标*/
      	vertical-align: middle;/*垂直对齐 中间*/
      	box-sizing: border-box;
      }
      .button-inner {
      	position: relative;
      	z-index: 3;
      	display: block;
      	border-radius: 22px;
      	padding: 5px 37px 0 37px;
      	margin-right: 0px;
      	box-sizing: border-box;
      }
      .a11y {
          height: 1px;
          overflow: hidden;
          position: absolute !important;/*优先*/
           1px;
          display: block;
          margin: 0;
          padding: 0;
      }
      .mask {
      	position: absolute;
      	top: 0;
      	left: 0;
      	 100%;
      	height: 100%;
      	z-index: 2;
      	background-color: #d6d6d6;
      	padding-top: 0px;
      	line-height: 46px;
      	color: #fff;
      	display: block;
      	transition: transform 0.2s ease-in;
      	transform: translate(0%, 105%) translate3d(0px, 0px, 0px);
      }
      .button li a:after{
          content: "";
          display: block;
          position: absolute;
          z-index: 1;
          top: 1px;
          left: 1px;
          bottom: 1.1px;
          right: 1px;
          box-shadow: inset 0px 0px 0px 2px #d3d2d2;
          border-radius: 50px;
      }
      .button li a:hover .mask {
      	transform: none;
      }
      

    扩展案例

    04- 整理icomoon图标, 阿里图标,awesome图标

    训练描述

    ​ 1,熟练使用三个平台提供的图标字体
    ​ 2,熟练使用伪元素

    训练提示

    1. 先下载,然后通过@font-face声明字体文件
    2. 利用单独类名的伪元素引入图标,建立基本类名设置字体名称和文字相关
    3. 给当前的元素加入基本类名,和单独的类名

    操作步骤

    ​ 1,在平台中下载文件,得到download.zip,解压文件

    ​ 2,新建fonts文件夹,创建css引入字体图标,注意路径,注意路径,注意路径

    @font-face {
    	font-family: 'iconfont';
    	src: url('../fonts/iconfont.eot'); /* IE9*/
    	src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    	url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
    	url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    	url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
    }
    

    ​ 3,建立基本类名声明字体和样式

    .myFont{
    	font-family: iconfont;
      	font-size: 16px;
    }
    

    ​ 3,利用单独的类名设置伪元素,加载图标的编码

    .output::before{
    	content: "e640";
    }
    

    使用1个盒子完成太极图案.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		* {
    			margin: 0;
    			padding: 0;
    		}
    		body {
    			background-color: skyblue;
    		}
    		div {
    			 200px;
    			height: 400px;
    			background-color: #fff;
    			border-left: 200px solid #000;
    			margin: 50px auto;
    			border-radius: 50%;
    
    			transition: all .6s ease-in-out;
                -webkit-transition: all .6s ease-in-out;
                -moz-transition: all .6s ease-in-out;
                -o-transition: all .6s ease-in-out;
    		}
    		div::before,div::after {
    			content: "";
    			display: block;
    			 50px;
    			height: 50px;
    			border-radius: 50%;
    			margin-left: -100px;
    		}
    		div::before {
    			background-color: #fff;
    			border: 75px solid #000;
    		}
    		div::after {
    			background-color: #000;
    			border: 75px solid #fff;
    		}
    		div:hover {
    			transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
    		}
    	</style>
    </head>
    <body>
    	<div></div>
    </body>
    </html>
    
  • 相关阅读:
    Docker大行其道—镜像
    Google 推出全新的两步验证机制
    安全警告——“Windows已经阻止此软件因为无法验证发行者”解决办法
    Word2010 自动生成二级编号
    正则表达式判断汉字
    c# IList<T> 深拷贝
    C#IList 取区间数据
    Oracle 同环比排除分母0
    Git 删除服务器的远程分支
    【转】C#获取当前路径7种方法
  • 原文地址:https://www.cnblogs.com/fly-book/p/12094765.html
Copyright © 2020-2023  润新知