本文是web前端的学习笔记，介绍了Web前端的基本概念，推荐了黑马程序员pink老师的视频资源，重点讲解了HBulider的常用快捷键，并详细阐述了如何在项目中使用字体图标，包括从IcoMoon下载、引入到项目中的步骤。
web前端学习笔记
大家好，我是链表哥，新的学期，新的学习，我会为您展示我的学习进程。
一：什么是WEB前端？
所谓的Web前端指的是用户所能接触到的，并服务于用户的前沿端口，经我们程序员编辑修饰后展示给大众，如各个网页，淘宝是网站页面等。
二：学习门路：
我的自学是黑马程序员pink老师发布的视频，可在b站搜索到。、、
用的软件是HBulider,大家可根据老师或者习惯来下载web前端编辑工具、、、
三： HBulider的常用快捷键
1.激活代码助手 Alt + /
2.开启关闭注释整行 Ctrl + /
3.开启关闭注释已选内容 Ctrl + Shift + /
4.删除此行Ctrl+D
5.向左选中 Ctrl + Shift + 向左
6.向右选中 Ctrl + Shift + 向右
7.运行Ctrl+R
四：字体图标
字体图标相等对于难以放大缩小的图片来说有很多的优势，而且易于移动端响应，同时http请求相对于图片也更小，下面就让我们学习一下如何运用图标。
4-1：图标的下载
http://icomoon.io
IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。 内容种类繁多，非常全面，网速较慢的原因是国外网站。
4.2 首先把 fonts文件夹放入我们 根目录下
4.3 点开文件中的链接，复制图标右侧的正方形
4.4在样式（style）里申明字体
@font-face {
font-family: ‘icomoon’;
src: url(‘fonts/icomoon.eot?7kkyc2’);
src: url(‘fonts/icomoon.eot?7kkyc2#iefix’) format(‘embedded-opentype’),
url(‘fonts/icomoon.ttf?7kkyc2’) format(‘truetype’),
url(‘fonts/icomoon.woff?7kkyc2’) format(‘woff’),
url(‘fonts/icomoon.svg?7kkyc2#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
4.5 给盒子使用字体
span {
font-family: “icomoon”;
}
更新icon图标
如果图标不够用了，可将我们压缩包里面的selection.json 重新上传到icomoon网站，下载新的压缩包，重新替换原来的包即可。
9月14日
今日目标：完整的快捷键引用。
绝对位置和相对位置的补充
表格的应用。
10月23日
到今天为止，我的前端项目已经基本完成了，运用了html,css,js等语言。
版面设计，可分为index目录页，列表页、详情页和注册页等。
附上index首页的html、js代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
<meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通
讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，
为您提供愉悦的网上购物体验!" />
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机
,数码,配件,手表,存储卡,品优购" />
<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="css/common.css"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/index.css" />
<!--引入 首页的css文件-->
<script src="js/animate.js"></script>
<!--animate.js必须写到index.js上面-->
<script src="js/index.js"></script>
</head>
<body>
<!--顶部快捷导航启动-->
<div class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品优购欢迎你！</li>
<li> <a href="#">请登录</a>
<a href="#" class="style-red"> 免费注册 </a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li><a href="#">我的订单</a></li>
<li class=spacer></li>
<li><a href="#">我的品优购</a>
<i class="icomoon"></i>
</li>
<li class=spacer></li>
<li><a href="#">品优购会员</a></li>
<li class=spacer></li>
<li><a href="#">企业采购</a></li>
<li class=spacer></li>
<li><a href="#">关注品优购</a> <i class="icomoon"></i> </li>
<li class=spacer></li>
<li><a href="#">客户服务</a> <i class="icomoon"></i> </li>
<li class=spacer></li>
<li><a href="#">网站导航</a> <i class="icomoon"></i> </li>
</ul>
</div>
</div>
</div>
<!--顶部快捷导航结束-->
<!--header制作-->
<div class="header w">
<div class="logo">
<h1>
<a herf="index.html" title="品优购">品优购</a>
</h1> <!--h1很重要，搜索引擎就靠这个找，所以要添加文字-->
</div>
<!--搜索-->
<div class="search">
<input type="text" class="text" value="请搜索.." >
<button class=btn>搜索</button>
</div>
<!--热词-->
<div class="hotwords">
<a herf="#" class="style-red">优惠购首发</a>
<a herf="#">亿元优惠</a>
<a herf="#">9.9元团购</a>
<a herf="#">每满99减30</a>
<a herf="#">成人用品</a>
<a herf="#">电脑 </a>
<a herf="#">通信 </a>
</div>
<!--我的购物车-->
<div class="shopcar">
<i class="car"></i> 我的购物车 <i class="arrow"></i>
<i class="count">8</i>
</div>
<!--每个图片都得新建一个class-->
</div>
<!--header结束-->
<!--顶部导航nav--> <!-- 此处需要一个操作：取消隐藏-->
<div class="nav">
<div class="w">
<div class="dropdown fl" >
<div class="dt">全部商品分类</div>
<div class="dd" > <!--此处要取消隐藏-->
<ul>
<li class="menu_item " > <a href="#">家用电器</a><i></i></li>
<li class="menu_item ">
<a href="list.html">手机</a> 、
<a href="#">数码</a> 、
<i></i>
</li>
<li class="menu_item "> <a href="#">图书、音像、数字商品</a> <i></i></li>
<li class="menu_item "> <a href="#">家居、家具、家装、厨具</a> <i></i></li>
<li class="menu_item "> <a href="#">服饰内衣、个护化妆</a> <i></i></li>
<li class="menu_item "> <a href="#">运动健康、汽车用品</a> <i></i></li>
<li class="menu_item "> <a href="#">彩票、旅行</a> <i></i></li>
<li class="menu_item "> <a href="#">理财、众筹</a> <i></i></li>
<li class="menu_item "> <a href="#">箱包、珠宝、奢侈品、鞋靴</a> <i></i></li>
<li class="menu_item "> <a href="#">运动户外、钟表</a> <i></i></li>
<li class="menu_item "> <a href="#">母婴、玩具</a> <i></i></li>
</ul>
</div>
</div>
<!--右侧当好模式-->
<div class="navitems fl" >
<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>
<li><a href="#">拍卖</a></li>
<li><a href="#">有趣</a></li>
</ul>
</div>
</div>
</div>
<!--顶部导航nav结束-->
<div class="w">
<div class="main">
<div class="focus fl">
<a href="javascript:;" class="arrow-l"> < </a>
<a href="javascript:;" class="arrow-r"> </a>
<!--滚动区-->
<ul>
<li>
<a href="#"><img src="upload/focus.png" alt="" ></a>
</li>
<li>
<a href="#"><img src="upload/banner1.jpg" alt="" ></a>
</li>
<li>
<a href="#"><img src="upload/banner2.jpg" alt="" ></a>
</li>
<li>
<a href="#"><img src="upload/banner3.jpg" alt="" ></a>
</li>
</ul>
<ol class="circle">
</ol>
</div>
<div class="newflash fr">
<div class="news">
<div class="news-hd">
评优购快报
<a href="#"> 更多></a>
</div>
<div class="news-bd">
<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>
</ul>
</div>
</div>
<div class="lifeservise">
<ul>
<li><a href="#">
<i class="servise_ico servise_ico_huafei">
</i>
<p>话费</p>
</a>
</li>
<li><a href="#">
<i class="servise_ico servise_ico_feiji">
</i>
<p>飞机</p>
</a>
<span class="hot"> </span>
</li>
<li><a href="#">
<i class="servise_ico servise_ico_dianyingpiao">
</i>
<p>电影票</p>
</a></li>
<li><a href="#">
<i class="servise_ico servise_ico_youxi">
</i>
<p>游戏</p>
</a></li>
<li><a href="#">
<i class="servise_ico servise_ico_caipiao">
</i>
<p>彩票</p>
</a></li>
<li><a href="#">
<i class="servise_ico servise_ico_jiayouzhan">
</i>
<p>加油站</p>
</a></li>
<li><a href="#">
<i class="servise_ico servise_ico_jiudian">
</i>
<p>酒店</p>
</a></li>
<li><a href="#">
<i class="servise_ico servise_ico_huochepiao">
</i>
<p>火车票</p>
</a></li>
<li><a href="#">
<i class="servise_ico servise_ico_zhongchou">
</i>
<p>众筹</p>
</a></li>
<li><a href="#">
<i class="servise_ico servise_ico_licai">
</i>
<p>理财</p>
</a></li>
<li><a href="#">
<i class="servise_ico servise_ico_lipingka">
</i>
<p>礼品卡</p>
</a></li>
<li><a href="#">
<i class="servise_ico servise_ico_baitiao">
</i>
<p>白条</p>
</a></li>
</ul>
</div>
<div class="bargain">
<img src="upload/bargin.jpg" alt="" />
</div>
</div>
</div>
</div>
<!--推荐服务模块-->
<div class="recommend w">
<div class="recom-hd fl">
<img src="img/clock.png" alt="" />
<h3>今日推荐</h3>
</div>
<div class="recom-bd fl">
<ul>
<li><a href="#"></a><img src="upload/1.jpg" alt="" /></li>
<li><a href="#"></a><img src="upload/2.jpg" alt="" /></li>
<li><a href="#"></a><img src="upload/3.jpg" alt="" /></li>
<li class="last"><a href="#"></a><img src="upload/4.jpg" alt="" /></li>
</ul>
</div>
</div>
<!--推荐服务模块结束-->
<!--楼层区 开始-->
<div>
<div class="jiadian w">
<div class="box-hd">
<h3>家用电器</h3>
<div class="tab-list ">
<ul>
<li><a href="#" class="style-red">热门</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>
<li><a href="#">高端电器</a>|</li>
</ul>
</div>
</div>
<div class="box-bd">
<ul class="tab-con">
<li class="w209">
<ul class="tab-con-list">
<li ><a href="#">节能补贴</a></li>
<li ><a href="#">4K电视</a></li>
<li ><a href="#">空气净化箱</a></li>
<li ><a href="#">电饭煲</a></li>
<li ><a href="#">滚筒洗衣机</a></li>
<li ><a href="#">电热水器</a></li>
</ul><img src="upload/floor-1-1.png" alt="" /></li>
<li class="w329">
<img src="upload/floor-1-b02.png" alt="" />
</li>
<li class="w219">
<div class="tab-con-item">
<a href="#"><img src="upload/floor-1-2.png" alt="" /></a>
</div>
<div class="tab-con-item">
<a href="#"><img src="upload/floor-1-3.png" alt="" /></a>
</div>
</li>
<li class="w220"> <div class="tab-con-item">
<a href="#"><img src="upload/floor-1-4.png" alt="" /></a>
</div></li>
<li class="w220"> <div class="tab-con-item">
<a href="#"><img src="upload/floor-1-5.png" alt="" /></a>
</div>
<div class="tab-con-item">
<a href="#"><img src="upload/floor-1-6.png" alt="" /></a>
</div></li>
</ul>
</div>
</div>
<div class="jiadian w">
<div class="box-hd">
<h3>手机通讯</h3>
<div class="tab-list ">
<ul>
<li><a href="#" class="style-red">热门</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>
<li><a href="#">高端电器</a>|</li>
</ul>
</div>
</div>
<div class="box-bd">
<ul class="tab-con">
<li class="w209">
<ul class="tab-con-list">
<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><img src="upload/211.jpg" alt="" /></li>
<li class="w329">
<img src="upload/212.jpg" alt="" />
</li>
<li class="w219">
<div class="tab-con-item">
<a href="#"><img src="upload/213.jpg" alt="" /></a>
</div>
<div class="tab-con-item">
<a href="#"><img src="upload/214.jpg" alt="" /></a>
</div>
</li>
<li class="w220"> <div class="tab-con-item">
<a href="#"><img src="upload/215.jpg" alt="" /></a>
</div></li>
<li class="w220"> <div class="tab-con-item">
<a href="#"><img src="upload/216.jpg" alt="" /></a>
</div>
<div class="tab-con-item">
<a href="#"><img src="upload/217.jpg" alt="" /></a>
</div></li>
</ul>
</div>
</div>
<div class="jiadian w">
<div class="box-hd">
<h3>电脑办公</h3>
<div class="tab-list ">
<ul>
<li><a href="#" class="style-red">热门</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>
<li><a href="#">高端电器</a>|</li>
</ul>
</div>
</div>
<div class="box-bd">
<ul class="tab-con">
<li class="w209">
<ul class="tab-con-list">
<li ><a href="#">SSD硬盘</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><img src="upload/311.jpg" alt="" /></li>
<li class="w329">
<img src="upload/312.jpg" alt="" />
</li>
<li class="w219">
<div class="tab-con-item">
<a href="#"><img src="upload/313.jpg" alt="" /></a>
</div>
<div class="tab-con-item">
<a href="#"><img src="upload/314.jpg" alt="" /></a>
</div>
</li>
<li class="w220"> <div class="tab-con-item">
<a href="#"><img src="upload/315.jpg" alt="" /></a>
</div></li>
<li class="w220"> <div class="tab-con-item">
<a href="#"><img src="upload/316.jpg" alt="" /></a>
</div>
<div class="tab-con-item">
<a href="#"><img src="upload/317.jpg" alt="" /></a>
</div></li>
</ul>
</div>
</div>
</div>
<!--楼层区 结束-->
<!--固定电梯导航-->
<div class="fixedtool">
<ul>
<li class="current">家用电器</li>
<li>手机通讯</li>
<li>电脑办公</li>
<li>家用家具</li>
<li>益虫</li>
<li>星灵</li>
</ul>
</div>
<!--固定电梯导航结束-->
<!--动画开始-->
<!--动画结束-->
<!--footer start-->
<div class="footer">
<div class="w">
<!--mod_servise-->
<div class="mod_servise">
<ul>
<li>
<i class="mod-service-icon mod_servise_kuai"></i>
<div class="mod_servise_tit">
<h5>正品保障</h5>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<i class="mod-service-icon mod_servise_zheng"></i>
<div class="mod_servise_tit">
<h5>极速物流</h5>
<p>极速物流，极速送达</p>
</div>
</li>
<li><i class="mod-service-icon mod_servise_bao"></i>
<div class="mod_servise_tit">
<h5>无忧售后</h5>
<p>七天无理由退货</p>
</div></li>
<li><i class="mod-service-icon mod_servise_ti"></i>
<div class="mod_servise_tit">
<h5>特色服务</h5>
<p>私人定制家电套餐</p>
</div></li>
<li><i class="mod-service-icon mod_servise_gong"></i>
<div class="mod_servise_tit">
<h5>家电中心</h5>
<p>您的购物指南</p>
</div></li>
</ul> <!--cs精灵技术-->
</div>
<!--mod_help-->
<div class="mod_help">
<dl class="mod_help_item">
<dt>购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">常见问题/团购</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl class="mod_help_item">
<dt>特色服务</dt>
<dd><a href="#">夺宝岛</a></dd>
<dd><a href="#">DIY装机</a></dd>
<dd><a href="#">延保服务/团购</a></dd>
<dd><a href="#">品优购E卡</a></dd>
<dd><a href="#">品优购通信</a></dd>
</dl>
<dl class="mod_help_item">
<dt>配送方式</dt>
<dd><a href="#">上门自提</a></dd>
<dd><a href="#">985限时达</a></dd>
<dd><a href="#">配送服务查询</a></dd>
<dd><a href="#">配送费收取标准</a></dd>
<dd><a href="#">海外配送</a></dd>
</dl>
<dl class="mod_help_item">
<dt>支付方式</dt>
<dd><a href="#">货到付款</a></dd>
<dd><a href="#">在线支付</a></dd>
<dd><a href="#">分期付款/团购</a></dd>
<dd><a href="#">邮局汇款</a></dd>
<dd><a href="#">公司转账</a></dd>
</dl>
<dl class="mod_help_item">
<dt>售后服务</dt>
<dd><a href="#">售后政策</a></dd>
<dd><a href="#">价格保护</a></dd>
<dd><a href="#">退款说明/团购</a></dd>
<dd><a href="#">返修/退换货</a></dd>
<dd><a href="#">取消订单</a></dd>
</dl>
<dl class="mod_help_item mod_help_app ">
<dt>帮助中心</dt>
<dd>
<img src="upload/wx_cz.jpg" alt="" />
<p>评优购客户端</p>
</dd>
</dl>
</div>
<!--mod_copy_right-->
<div class="mod_copyright">
<p class="mod_copyright_link">
关于我们 | 联系我们 | 关于我们 | 商家入驻 | 营销中心 | 友情链接 | 关于我们 | 营销中心 | 友情链接 | 关于我们
</p>
<p class="mod_copyright_info">
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100
<br />
京ICP备08001421号京公网安备110108007702
</p>
</div>
<!--mod_copy_right-->
</div>
</div>
<!--footer end-->
<div id="divFly" style="position:absolute;">
<img src="favicon.ico" />
</div>
<script type="text/javascript">
function DivFlying() {
var div = document.getElementById("divFly");
if (!div) {
return;
}
var intX = window.event.clientX;
var intY = window.event.clientY;
div.style.left = intX + "px";
div.style.top = intY + "px";
}
document.onmousemove = DivFlying;
</script>
</body>
</html>
<!--下次看76个
-->
css代码
/*此文件放首页的样式*/
.main {
width: 980px;
height: 455px;
margin-left: 219px ;
margin-top: 10px;
}
.focus {
/*子绝对,父窗体相对;*/
position: relative;
width: 727px;
height: 455px;
overflow: hidden;
}
.focus ul{
position: absolute;
top: 0;
left: 0;
width: 600%;
}
.focus ul li{
float: left;
}
.newflash {
width: 250px;
height: 455px;
/*background-color: skyblue; */ /*左边窗体*/
}
.arrow-l ,
.arrow-r {
display: none;
position: absolute;
top: 50%;
margin-top: -20px ;
width: 24px;
height: 40px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-family: 'icomoon';
font-size: 18px;
z-index: 2; /*层级比图片高,显示小圆圈*/
}
.arrow-r {
right: 0; /*右侧透明图标靠右*/
}
.circle{
position: absolute;
bottom: 10px;
left: 50px;
}
.circle li{
float: left;
width: 8px;
height: 8px;
/*background-color: #fff;*/
border: 2px solid rgba(255, 255, 255, 0.5);
margin: 0 3px;
border-radius: 50% ;
/*鼠标经过显示小手*/
cursor: pointer;
}
/*小圆圈鼠标点击后变成白色*/
.current {
background-color: #fff;
box-shadow: ; /*?*/
}
/*接下来的是左边的div区域*/
.news {
height: 163px;
border: 1px solid #ccc;
/* background-color: pink;*/
}
.lifeservise {
overflow: hidden; /*超出隐藏*/
height: 208px;
/*background-color: purple;*/
border: 1px solid #ccc;
border-top:none ; /*无上边距*/
}
.bargain {
height: 75px;
margin-top: 5px;
}
.news-hd {
height: 32px;
border-bottom: 1px dotted #ccc; /*dotted点线 dashed虚线*/
padding: 0 15px;
font-size: 14px;
line-height: 34px;
padding-left: 15px;
}
.news-hd a {
float: right;
font-size: 12px;
;
}
.news-bd {
padding: 10px 0 0 15px;
}
.news-bd li {
height: 23px;
}
.lifeservise ul {
width: 252px; /*子盒子可以比父盒子大,将ul设置大一点就能一行装4个图片了,然后超出部分隐藏*/
}
.lifeservise li {
position: relative;
float: left;
width: 62px;
height: 70px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.lifeservise li a {
display: block;
overflow: hidden; /*解决i引起的外边距合并问题*/
height: 100%;
}
.servise_ico {
display: block;
width: 24px;
height: 24px;
background: url(../img/icons.png) no-repeat;
margin: 10px auto;
}
.lifeservise li p {
text-align: center;
}
.hot {
position: absolute;
right: 0;
top: 0;
width: 12px;
height: 15px;
background: url(../img/jian.jpg) no-repeat;
}
.servise_ico_huafei {
background-position: -17px -16px;
}
.servise_ico_feiji {
background-position: -80px -18px;
width: -26px;
}
.servise_ico_dianyingpiao {
background-position: -139px -18px;
width: -26px;
}
.servise_ico_youxi {
background-position: -205px -18px;
width: -26px;
}
.servise_ico_caipiao {
background-position: -17px -87px;
width: -26px;
}
.servise_ico_jiayouzhan {
background-position: -78px -86px;
}
.servise_ico_jiudian {
background-position: -141px -86px;
}
.servise_ico_huochepiao {
background-position: -203px -86px;
}
.servise_ico_zhongchou {
background-position: -17px -156px;
}
.servise_ico_licai {
background-position: -139px -16px;
}
.servise_ico_lipingka {
background-position: -203px -16px;
}
.servise_ico_baitiao {
background-position: -17px -16px;
}
/*推荐模块*/
.recommend {
height: 163px;
margin-top: 10px;
}
.recom-hd {
width: 200px;
height: 163px;
background-color: #5c5251;
text-align: center;
}
.recom-hd img {
margin:30px 0 10px 0 ;
}
.recom-hd h3 {
font-size:18px ;
color:#fff ;
font-weight: normal;
}
.recom-bd {
width: 1000px;
height: 163px;
background-color: #ebebeb;
}
.recom-bd li {
float: left;
width: 249px;
height: 145px;
border-right: 1px solid #ccc;
margin-top: 10px;
}
.recom-bd last {/*提权,last放入recom-bd中去*/
border-right: 0;
}
.box-hd {
height: 30px;
border-bottom: 2px solid #C81623;
margin-top: 25px;
}
.box-hd h3 {
float: left;
font-size: 18px;
color: #c81623;
}
.tab-list {
float: right;
line-height: 30px;
}
.tab-list li{
float: left;
}
.tab-list li a {
margin: 0 10px;
}
.box-bd {
height: 360px;
}
.tab-con li {
height: 361px;
}
.w209 {
width: 209px;
background-color: #f9f9f9;
}
.w329 {
width: 329px;
}
.w219 {
width: 219px;
border-right: 1px solid #ccc;
}
.w220 {
width: 220px;
border-right: 1px solid #ccc;
}
.tab-con li {
float: left;
height: 360px;
}
.tab-con-item {
border-bottom: 1px solid #ccc;
}
.tab-con-list li {
width: 86px;
height: 32px;
line-height: 32px;
border-bottom: 1px solid #ccc;
margin-left: 10px;
text-align: center;
}
.tab-con-list {
overflow: hidden;
margin-bottom: 15px;
}
.box-bd li {
overflow: hidden;
}
.box-bd img {
/*过度写到本身上*/
transition: all 0.2s;
} /*鼠标经过图片往右走*/
.box-bd img:hover {
margin-left: 8px;
}
/*电梯导航*/
.fixedtool {
position: fixed;
width: 66px;
background-color: #fff;
top:100px;
left: 50% ;
margin-left: -666px; /*先中间的一半再版心的一半再加上自己宽度的一半*/
}
.fixedtool li {
height: 32px;
line-height: 32px; /*行高*/
text-align: center;
font-size: 12px;
border-bottom: 1px solid #ccc;
cursor:pointer; /*鼠标变成小手*/
}
.fixedtool .current {
background-color: #c81623;
color: #fff;
}
@keyframes move{
0% {
top: 100%;
bottom: 0%;
}
100% {
top: 10%;
bottom: 100%;
}
}
.move {
width: 60px;
height: 60px;
background-color: pink;
animation-name: move;
animation-duration: 5s;
}
.ani {
position:fixed;
width: 1000px;
height: 1000px;
top: 0;
}
js，比较难的轮播图
window.addEventListener('load',function() {
/*获取左右按钮*/
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
var focusWidth = focus.offsetWidth;
/*鼠标经过显示隐藏的左右按钮*/
focus.addEventListener('mouseenter',function(){
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
clearInterval(timer);
timer = null;
})
/*鼠标离开隐藏左右按钮*/
focus.addEventListener('mouseleave',function(){
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
timer = setInterval(function(){
arrow_r.click();
},1300);
})
/*自动生成圆点*/
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle');
for(var i=0;i<ul.children.length;i++) {
var li = document.createElement('li');
li.setAttribute('index',i);
ol.appendChild(li);
li.addEventListener('click',function() {
for(var i = 0;i<ol.children.length;i++) {
ol.children[i].className = '';
}
this.className = 'current';
var index =this.getAttribute('index');
var focusWidth = focus.offsetWidth;
num = index;
circle = index;
console.log(focusWidth);
console.log(index);
animate(ul,-index*focusWidth);
})
}
/*第一个圆圈current*/
ol.children[0].className = 'current';
/*克隆第一张图并放在最后*/
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
/*点击右侧按钮切换*/
var num = 0;
var circle=0;
arrow_r.addEventListener('click',function() {
/*走到最后再从新开始*/
if(num == ul.children.length-1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul,-num*focusWidth);
circle++;
if(circle == ol.children.length) {
circle=0;
}
for(var i = 0;i< ol.children.length;i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
});
arrow_l.addEventListener('click',function() {
/*走到最后再从新开始*/
if(num == 0) {
num = ul.children.length-1;
ul.style.left = -num * focusWidth+ 'px';
}
num--;
animate(ul,-num*focusWidth);
circle--;
if(circle < 0 ) {
circle=ol.children.length - 1;
}
circleChange();
for(var i = 0;i< ol.children.length;i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
});
/*自动播放*/
var timer = setInterval(function(){
arrow_r.click();/*手动调用点击事件*/
},1300);
})
anime动画（JS）
function animate(obj,target,callback) {
clearInterval(obj.timer);
obj.timer= setInterval(function(){
var step = (target - obj.offsetLeft)/10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target){
clearInterval(obj.timer);
if(callback) {
callback();
}
}
obj.style.left = obj.offsetLeft + step +'px';
},15);
}
== 持续更新中ing… ==
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
