基础案例
01-导航搜索
训练描述
搜索栏鼠标经过后出现搜索框,失去焦点还原,并且是以过渡的方式
训练提示
- 搭建以项目为主的几个文件
- 书写导航栏页面布局
- logo原图比较大,需要设置父盒子宽度和自身的100%
- 设置导航项
- 右侧基本都是精灵图,所以不需要使用字体图标,注意间距的调整
- 将搜索框设置成初始位置,然后当鼠标经过的时候,设置宽度和透明度变化
操作步骤
-
创建index文件,新建css文件夹,创建base.css文件并初始化基本代码,新建images文件夹
-
创建index.css保存至css文件夹,首页html文件引入css样式
-
编写结构代码
-
创建版心盒子,左左右模块,分别代表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; }
-
-
排版搜索栏默认的样式,设置当鼠标经过父盒子的样式
-
打开首页文件,观察效果
- 附:
* {
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像素,并且加上投影
训练提示
-
先进行基本的布局,排出来具体的大小位置
-
添加底部信息块,,定位在bottom底部,完成后,将高度设置为0,加上溢出隐藏属性
-
当鼠标经过盒子,显示盒子,并且加上阴影和位移
操作步骤
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-按钮
训练描述
当鼠标经过按钮的时候,有一个灰色的背景或者其他颜色的背景升上来
训练提示
-
创建index文件,新建css文件创建base.css文件,完成css初始化
-
在首页文件中引入文件,完成结构布局
-
完成样式排版,设计鼠标经过样式(预先有一个盒子在底部等待,鼠标经过就升上来)
操作步骤
-
创建基本结构
<div class="button"> <ul> <li> <a href="#"> <span class="button-inner"> 探索 <span class="a11y"></span> </span> <span class="mask"></span> </a> </li> </ul> </div>
-
设置基本样式和鼠标经过样式
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,熟练使用伪元素
训练提示
- 先下载,然后通过@font-face声明字体文件
- 利用单独类名的伪元素引入图标,建立基本类名设置字体名称和文字相关
- 给当前的元素加入基本类名,和单独的类名
操作步骤
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>