由于jquery2.0及以下不再支持IE6/7/8,因此选择jquery1.x版本中较新的一个
推荐一个各种插件URL地址的公共库:https://www.bootcdn.cn/
CDN加载jquery的优点:
1、减轻服务器压力
2、速度快
3、可以缓存
缺点:
不稳定(取决于别人的服务器,因此需要做防范措施)
措施:
短路操作判断cdn方式是否加载成功
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script> //短路操作,如果cdn的jquery没有引用成功,则会执行后面一句,引入本地jquery 括号中的<\/script>标签会被当做当前标签的结束标签,因此需要转义 window.jQuery || document.write('<script src="js/jquery.js"><\/script>'); </script>
base.css 是一般通用的样式重置代码,直接引入即可
/*css reset*/ 清除内外边距*/ body,h1,h2,h3,h4,h5,h6,p,hr,结构元素 ul,ol,li,dl,dt,dd,1)">列表元素 form,fieldset,legend,input,button,select,textarea,1)">表单元素 th,td,1)">表格元素 pre { padding: 0; margin: 0; } 重置默认样式font: 12px/1 微软雅黑,Tahoma,Helvetica,Arial,宋体,sans-serif;*/ color: #333; font: 12px/1 "Microsoft YaHei",SimSun,sans-serif; } h1,h6 { font-size: 100%; font-weight: normal; } em,i { font-style: a { text-decoration: none; } li { list-style-type: none; vertical-align: top; } img { border: none; display: block; textarea { overflow: auto; resize: table { border-spacing: border-collapse: collapse; } 常用公共样式 .fl { float: left; display: inline; } .fr { right; .cf:before,.cf:after { content: " "; table; } .cf:after { clear: both; } .cf { *zoom: 1; }
查看PSD设计图:
信息面板(选框工具框选目标查看尺寸)
历史记录面板
图层面板
视图-标尺
站点导航编写
推荐一个插件:Pixel Perfect
能够导入网页设计图,可以改变透明度,与编写的页面进行实时对比
工具介绍:
下载网址:https://www.chromedownloads.net/extensions/938.html
注意如果.crx的插件谷歌浏览器无法安装,就改为.rar或者.zip,然后在扩展程序中安装
然后在打开的网页中,右上角,添加设计图
可以调整透明度什么的,
鼠标滚轮左右滚动也可以实时调整透明度
我的目前是没办法重合了,因此笔记本设置了显示150%,emmm……
index.html
<!DOCTYPE html> <html lang="zh-CN"><!-- 设置简体中文 --> head> meta charset="UTF-8"title>index</link rel="stylesheet" href="css/base.css"="css/index.css"="css/common.css" css一般放在DOM加载前,防止DOM裸奔 body 导航 --> div class="nav-site"> ="container"> ul ="fl"> li ><a href="javascript:;" class="nav-site-login">亲,请登录a></li="nav-site-reg link">免费注册="#"="nav-site-shop link">手机逛慕淘ul="fr"="fl dropdown"> ="dropdown-toggle link">我的慕淘i ="dropdown-arrow"i="dropdown-list dropdown-left"> ="dropdown-item"="#">已买到的宝贝>我的足迹>收藏夹>收藏的宝贝>收藏的店铺="nav-site-cat link">商品分类>卖家中心>免费开店>已卖出的宝贝>出售中的宝贝>卖家服务市场>卖家培训中心>体验中心="nav-site-service fl dropdown">联系客服="dropdown-list dropdown-right"divscript src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"script> //短路操作,如果cdn的jquery没有引用成功,则会执行后面一句,引入本地jquery 括号中的<\/script>标签会被当做当前标签的结束标签,因此需要转义 window.jQuery || document.write('<script src="js/jquery.js"><\/script>); ="js/index.js"; html>
common.css 公共样式
公共样式 .container{ width:1200px; margin:0 auto; } .link{ color:#4d555d; } .link:hover{#f01414; } .fl{ float:left; } .fr{right; }
index.css
nav-site .nav-site{100%; background-color: #f3f5f7; } .nav-site .container{ height:44px; line-height: 44px; border-bottom:1px solid #cdd0d4; } .nav-site-login{#f01414; margin-left:15px; } .nav-site-reg{10px; } .nav-site-shop{ .dropdown{ } .dropdown-toggle{ display: block; padding:0 16px 0 12px; border-right:1px solid #f3f5f7; border-left: position: relative; z-index:2; } .dropdown-arrow{ inline-block;8px;6px; background:url(../img/dropdown-arrow.png) left center no-repeat; vertical-align: middle; } .dropdown-list{ border:1px solid #cdd0d4; #fff; absolute;1; top:43px; } .dropdown-left{ } .dropdown-item{30px;0 12px; } .dropdown-item:hover{ .nav-site-cat{0 10px; } .nav-site-service{ margin-right:15px; } # sourceMappingURL=index.css.map */ */
index.js
$(".dropdown-toggle").hover(function(){ 鼠标移入 var ui=$(this背景色和边框改变 ui.css({ "background-color":"#fff","border-color":"#cdd0d4" }); 箭头切换 ui.find(".dropdown-arrow").css({ "background-image":"url(img/dropdown-arrow-active.png)" }) 下拉列表显示 ui.next(".dropdown-list").show(); },1)">鼠标移出 ui.css({ "background-color":"").css({ "background-image":"url(img/dropdown-arrow.png)"下拉列表隐藏 ui.next(".dropdown-list").hide(); });
在js中直接修改css,存在浏览器的重绘(背景色等,元素自身)以及回流(宽高等,元素自身及周围元素),造成性能问题
修改:在js中添加或删除类,将样式写在css中
index.css中新增:
鼠标悬停样式 .dropdown-toggle:hover{#fff; border-color:#cdd0d4; } .dropdown-active .dropdown-arrow{ background-image:url(../img/dropdown-arrow-active.png); } .dropdown-active+.dropdown-list{ block; }
index.js代码修改为:
$(".dropdown-toggle").hover(鼠标移入 $(this).addClass("dropdown-active"); },1)">鼠标移出 $(this).removeClass("dropdown-active"); });
还有更简单的修改方式,全部使用:hover伪类来完成,不使用js
只需要在index.css中新增:
.dropdown:hover .dropdown-toggle{ .dropdown:hover .dropdown-arrow{ .dropdown:hover .dropdown-list{ block; }
不过这种写法不兼容 IE6 ,因为 IE6 只支持 a 标签的 hover 伪类
效果图