jQuery学习笔记05
2024-04-17 19:04:45
常见效果
01__表格隔行变色.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>01__表格隔行变色</title><style>div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;}#data {width: 600px;}#data, td, th {border-collapse: collapse;border: 1px solid #aaaaaa;}th, td {height: 28px;}#data thead {background-color: #333399;color: #ffffff;}.odd {background-color: #ccccff;}</style>
</head>
<body>
<table id="data"><thead><tr><th>姓名</th><th>工资</th><th>入职时间</th><th>操作</th></tr></thead><tbody><tr><td>Tom</td><td>$3500</td><td>2010-10-25</td><td><a href="javascript:void(0)">删除</a></td></tr><tr><td>Mary</td><td>$3400</td><td>2010-12-1</td><td><a href="javascript:void(0)">删除</a></td></tr><tr><td>King</td><td>$5900</td><td>2009-08-17</td><td><a href="javascript:void(0)">删除</a></td></tr><tr><td>Scott</td><td>$3800</td><td>2012-11-17</td><td><a href="javascript:void(0)">删除</a></td></tr><tr><td>Smith</td><td>$3100</td><td>2014-01-27</td><td><a href="javascript:void(0)">删除</a></td></tr><tr><td>Allen</td><td>$3700</td><td>2011-12-05</td><td><a href="javascript:void(0)">删除</a></td></tr></tbody>
</table><script src="jquery-1.10.1.js"></script>
<script>// $("#data>tbody>tr:odd").addClass("odd")$("#data>tbody>tr:odd").attr('class', 'odd')
</script>
</body>
</html>
02_多Tab点击切换.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>02_多Tab点击切换</title><script src="jquery-1.10.1.js"></script><style>* {margin: 0;padding: 0;}#tab li {float: left;list-style: none;width: 80px;height: 40px;line-height: 40px;cursor: pointer;text-align: center;}#container {position: relative;}#content1, #content2, #content3 {width: 300px;height: 100px;padding: 30px;position: absolute;top: 40px;left: 0;}#tab1, #content1 {background-color: #ffcc00;}#tab2, #content2 {background-color: #ff00cc;}#tab3, #content3 {background-color: #00ccff;}</style>
</head>
<body>
<h2>多Tab点击切换</h2>
<ul id="tab"><li id="tab1" value="1">10元套餐</li><li id="tab2" value="2">30元套餐</li><li id="tab3" value="3">50元包月</li>
</ul>
<div id="container"><div id="content1">10元套餐详情：<br/> 每月套餐内拨打100分钟，超出部分2毛/分钟</div><div id="content2" style="display: none">30元套餐详情：<br/> 每月套餐内拨打300分钟，超出部分1.5毛/分钟</div><div id="content3" style="display: none">50元包月详情：<br/> 每月无限量随心打</div>
</div><script>$(function () {var index = 0var $contents = $('#container>div')$("#tab>li").click(function () {var clickIndex = $(this).index()if (clickIndex != index) {$contents[index].style.display = 'none'$contents[clickIndex].style.display = 'block'index = clickIndex}})})
</script>
</body>
</html>
03_回到顶部.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>03_回到顶部</title><style>#to_top {width: 30px;height: 40px;font: 14px/20px arial;text-align: center;background: #06c;position: fixed;cursor: pointer;color: #fff;left: 1250px;top: 500px;}</style>
</head>
<body style="height: 2000px;"><div id="to_top">返回顶部</div><script src="jquery-1.10.1.js"></script>
<script>$(function () {//回到顶部$('#to_top').click(function () {var $body = $(document.body)var $html = $(document.documentElement)//使用scrollTop(): 瞬间滚动到顶部// $('html,body').scrollTop(0)//使用scrollTop(): 平滑滚动到顶部var offset = $body.scrollTop() + $html.scrollTop()if(offset===0) {return}var totalTime = 300var intervalTime = 30var itemOffset = offset/(totalTime/intervalTime)var intervalId = setInterval(function () {offset -= itemOffsetif(offset<=0) {offset = 0clearInterval(intervalId)}$('html,body').scrollTop(offset)}, intervalTime)//使用动画: 平滑滚动到顶部// $('body,html').animate({scrollTop:0},300)})});
</script>
</body></html>
04_导航动态显示效果.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>04_导航动态显示效果</title><script src="jquery-1.10.1.js"></script><style rel="stylesheet">* {margin: 0;padding: 0;word-wrap: break-word;word-break: break-all;}body {background: #FFF;color: #333;font: 12px/1.6em Helvetica, Arial, sans-serif;}a {color: #0287CA;text-decoration: none;}a:hover {text-decoration: underline;}ul, li {list-style: none;}img {border: none;}h1, h2, h3, h4, h5, h6 {font-size: 1em;}html {overflow: -moz-scrollbars-vertical; /* 在Firefox下始终显示滚动条*/}#navigation {width: 784px;padding: 8px;margin: 8px auto;background: #3B5998;height: 18px;}#navigation ul li {float: left;margin-right: 14px;position: relative;z-index: 100;}#navigation ul li a {display: block;padding: 0 8px;background: #EEEEEE;font-weight: 700;}#navigation ul li a:hover {background: none;color: #fff;}#navigation ul li ul {background-color: #88C366;position: absolute;width: 80px;overflow: hidden;display: none;}#navigation ul li ul li {border-bottom: 1px solid #BBB;text-align: left;width: 100%;}</style>
</head>
<body>
<div id="navigation"><ul><li><a href="#">首 页</a></li><li><a href="#">衬 衫</a><ul><li><a href="#">短袖衬衫</a></li><li><a href="#">长袖衬衫</a></li><li><a href="#">无袖衬衫</a></li></ul></li><li><a href="#">卫 衣</a><ul><li><a href="#">开襟卫衣</a></li><li><a href="#">套头卫衣</a></li></ul></li><li><a href="#">裤 子</a><ul><li><a href="#">休闲裤</a></li><li><a href="#">卡其裤</a></li><li><a href="#">牛仔裤</a></li><li><a href="#">短裤</a></li></ul></li><li><a href="#">联系我们</a></li></ul>
</div><script>$("#navigation>ul>li:has(ul)").hover(function () {$(this).children("ul").stop().slideDown(400)}, function () {$(this).children("ul").stop().slideUp("fast")})
</script>
</body>
</html>
爱好选择器
练习1_爱好选择器_jQuery.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>全选练习</title>
</head>
<body><form>你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选<br/><input type="checkbox" name="items" value="足球"/>足球<input type="checkbox" name="items" value="篮球"/>篮球<input type="checkbox" name="items" value="羽毛球"/>羽毛球<input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/><input type="button" id="checkedAllBtn" value="全 选"/><input type="button" id="checkedNoBtn" value="全不选"/><input type="button" id="checkedRevBtn" value="反 选"/><input type="button" id="sendBtn" value="提 交"/>
</form><script src="jquery-1.10.1.js"></script>
<script type="text/javascript">/*功能说明:1. 点击'全选': 选中所有爱好2. 点击'全不选': 所有爱好都不勾选3. 点击'反选': 改变所有爱好的勾选状态4. 点击'全选/全不选': 选中所有爱好, 或者全不选中5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态6. 点击'提交': 提示所有勾选的爱好*/$(function () {var $Items = $(':checkbox[name=items]')var $checkedAllBox = $('#checkedAllBox')// 1. 点击'全选': 选中所有爱好$('#checkedAllBtn').click(function () {$Items.prop('checked', true)$checkedAllBox.prop('checked', true)})// 2. 点击'全不选': 所有爱好都不勾选$('#checkedNoBtn').click(function () {$Items.prop('checked', false)$checkedAllBox.prop('checked', false)})// 3. 点击'反选': 改变所有爱好的勾选状态$('#checkedRevBtn').click(function () {$Items.each(function () {this.checked = !this.checked})$checkedAllBox.prop('checked', $Items.filter(':not(:checked)').size()===0)})// 4. 点击'全选/全不选': 选中所有爱好, 或者全不选中$checkedAllBox.click(function () {$Items.prop('checked', this.checked)})// 5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态$Items.click(function () {$checkedAllBox.prop('checked', $Items.filter(':not(:checked)').size()===0)})// 6. 点击'提交': 提示所有勾选的爱好$('#sendBtn').click(function () {$Items.filter(':checked').each(function () {alert(this.value)})})})
</script>
</body></html>
练习1_爱好选择器_原生.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>全选练习</title>
</head>
<body>
<form method="post" action="">你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选<br/><input type="checkbox" name="items" value="足球"/>足球<input type="checkbox" name="items" value="篮球"/>篮球<input type="checkbox" name="items" value="羽毛球"/>羽毛球<input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/><input type="button" id="checkedAllBtn" value="全 选"/><input type="button" id="checkedNoBtn" value="全不选"/><input type="button" id="checkedRevBtn" value="反 选"/><input type="button" id="sendBtn" value="提 交"/>
</form>
<script type="text/javascript">/*功能说明:1. 点击'全选': 选中所有爱好2. 点击'全不选': 所有爱好都不勾选3. 点击'反选': 改变所有爱好的勾选状态4. 点击'提交': 提示所有勾选的爱好5. 点击'全选/全不选': 选中所有爱好, 或者全不选中6. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态技术点：1.DOM查询2.事件回调函数绑定3.checkbox操作4.事件回调函数中的this5.逻辑思维能力*/window.onload = function () {var items = document.getElementsByName("items");//1.#checkedAllBtnvar checkedAllBtn = document.getElementById("checkedAllBtn");checkedAllBtn.onclick = function () {setItemsChecked(true);checkedAllBox.checked = true;};//2.#checkedNoBtnvar checkedNoBtn = document.getElementById("checkedNoBtn");checkedNoBtn.onclick = function () {setItemsChecked(false);checkedAllBox.checked = false;};//3.#checkedRevBtnvar checkedRevBtn = document.getElementById("checkedRevBtn");checkedRevBtn.onclick = function () {setItemsChecked();//点满时将checkedAllBox.checked设置为true//统计当前items中被选中的个数checkedAllBox.checked = isAllChecked();};//4.#checkedAllBoxvar checkedAllBox = document.getElementById("checkedAllBox");checkedAllBox.onclick = function () {setItemsChecked(this.checked);};//5.#sendBtnvar sendBtn = document.getElementById("sendBtn");sendBtn.onclick = function () {for (var i = 0; i < items.length; i++) {if (items[i].checked) {alert(items[i].value);}}};//6.itemsfor (var i = 0; i < items.length; i++) {items[i].onclick = function () {//点满时将checkedAllBox.checked设置为true//统计当前items中被选中的个数checkedAllBox.checked = isAllChecked();}}function isAllChecked() {for (var j = 0; j < items.length; j++) {if (!items[j].checked)return false;}return true;}function setItemsChecked(checked) {for (var i = 0; i < items.length; i++) {items[i].checked = (checked == undefined) ? (!items[i].checked) : checked;}}}
</script>
</body>
</html>
添加删除记录
练习2_添加删除记录_jQuery.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>添加删除记录练习</title><link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="deleteEmp?id=001">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr></table><div id="formDiv"><h4>添加新员工</h4><table><tr><td class="word">name:</td><td class="inp"><input type="text" name="empName" id="empName"/></td></tr><tr><td class="word">email:</td><td class="inp"><input type="text" name="email" id="email"/></td></tr><tr><td class="word">salary:</td><td class="inp"><input type="text" name="salary" id="salary"/></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton" value="abc">Submit</button></td></tr></table>
</div><script src="jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">/*功能说明:1. 点击'Submit', 根据输入的信息在表单中生成一行员工信息2. 点击Delete链接, 提示删除当前行信息, 点击确定后删除信息技术要点:1. DOM查询2. 绑定事件监听3. DOM增删改4. 取消事件的默认行为*/$(function () {$('#addEmpButton').click(function () {var $empName = $('#empName')var $email = $('#email')var $salary = $('#salary')var empName = $empName.val()var email = $empName.val()var salary = $empName.val()var id = Date.now()/*<tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr>*/$('<tr></tr>').append('<td>'+empName+'</td>').append('<td>'+email+'</td>').append('<td>'+salary+'</td>').append('<td><a href="deleteEmp?id="'+id+'>Delete</a></td>').appendTo('#employeeTable').find('a').click(clickA)$empName.val('')$email.val('')$salary.val('')})$('a').click(clickA)function clickA (event) {event.preventDefault()var $tr = $(this).parent().parent()var name = $tr.children('td:first').html()if(confirm('确定删除'+name+'吗?')) {$tr.remove()}}})</script>
</body>
</html>
练习2_添加删除记录_原生.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>添加删除记录练习</title><link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th> </th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="deleteEmp?id=001">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="deleteEmp?id=002">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="deleteEmp?id=003">Delete</a></td></tr></table><div id="formDiv"><h4>添加新员工</h4><table><tr><td class="word">name: </td><td class="inp"><input type="text" name="empName" id="empName" /></td></tr><tr><td class="word">email: </td><td class="inp"><input type="text" name="email" id="email" /></td></tr><tr><td class="word">salary: </td><td class="inp"><input type="text" name="salary" id="salary" /></td></tr><tr><td colspan="2" align="center"><button id="addEmpButton" value="abc">Submit</button></td></tr></table></div><script type="text/javascript">/*功能说明:1. 点击'Submit', 根据输入的信息在表单中生成一行员工信息2. 点击Delete链接, 提示删除当前行信息, 点击确定后删除信息技术要点:1. DOM查询2. 绑定事件监听3. DOM增删改5. 取消事件的默认行为*/function removeTr(){var trNode = this.parentNode.parentNode;var tds = trNode.getElementsByTagName("td");var nameStr = tds[0].firstChild.nodeValue;var flag = confirm("真的要删除" + nameStr + "的信息吗？");if(flag){trNode.parentNode.removeChild(trNode);}return false;}window.onload = function(){//目标1：点击Delete删除记录var aEles = document.getElementsByTagName("a");for(var i = 0;i < aEles.length;i++){aEles[i].onclick = removeTr;}//目标2：点击Submit增加记录var subBtn = document.getElementById("addEmpButton");subBtn.onclick = function(){var nameText = trim(document.getElementById("empName").value);var emailText = trim(document.getElementById("email").value);var salaryText = trim(document.getElementById("salary").value);document.getElementById("empName").value = nameText;document.getElementById("email").value = emailText;document.getElementById("salary").value = salaryText;if(nameText == "" || emailText == "" || salaryText == ""){alert("您输入的内容不完整");return ;}//组装节点var nameTd = document.createElement("td");nameTd.appendChild(document.createTextNode(nameText));var emailTd = document.createElement("td");emailTd.appendChild(document.createTextNode(emailText));var salaryTd = document.createElement("td");salaryTd.appendChild(document.createTextNode(salaryText));var aTd = document.createElement("td");var aNewEle = document.createElement("a");aNewEle.href = "deleteEmp?id=XXX";aNewEle.appendChild(document.createTextNode("Delete"));aNewEle.onclick = removeTr;aTd.appendChild(aNewEle);var trNode = document.createElement("tr");trNode.appendChild(nameTd);trNode.appendChild(emailTd);trNode.appendChild(salaryTd);trNode.appendChild(aTd);var empTable = document.getElementById("employeeTable");empTable.appendChild(trNode);}function trim(str){var reg = /^\s*|\s*$/g;return str.replace(reg,"");}}</script>
</body>
</html>轮播图
练习3_轮播图_jQuery.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>焦点轮播图</title><style type="text/css">/*去除内边距,没有链接下划线*/* {margin: 0;padding: 0;text-decoration: none;}/*让<body有20px的内边距*/body {padding: 20px;}/*最外围的div*/#container {width: 600px;height: 400px;overflow: hidden;position: relative; /*相对定位*/margin: 0 auto;}/*包含所有图片的<div>*/#list {width: 4200px; /*7张图片的宽: 7*600 */height: 400px;position: absolute; /*绝对定位*/z-index: 1;}/*所有的图片<img>*/#list img {float: left; /*浮在左侧*/}/*包含所有圆点按钮的<div>*/#pointsDiv {position: absolute;height: 10px;width: 100px;z-index: 2;bottom: 20px;left: 250px;}/*所有的圆点<span>*/#pointsDiv span {cursor: pointer;float: left;border: 1px solid #fff;width: 10px;height: 10px;border-radius: 50%;background: #333;margin-right: 5px;}/*第一个<span>*/#pointsDiv .on {background: orangered;}/*切换图标<a>*/.arrow {cursor: pointer;display: none;line-height: 39px;text-align: center;font-size: 36px;font-weight: bold;width: 40px;height: 40px;position: absolute;z-index: 2;top: 180px;background-color: RGBA(0, 0, 0, 0.3);color: #fff;}/*鼠标移到切换图标上时*/.arrow:hover {background-color: RGBA(0, 0, 0, 0.7);}/*鼠标移到整个div区域时*/#container:hover .arrow {display: block; /*显示*/}/*上一个切换图标的左外边距*/#prev {left: 20px;}/*下一个切换图标的右外边距*/#next {right: 20px;}</style>
</head><body><div id="container"><div id="list" style="left: -600px;"><img src="img/5.jpg" alt="5"/><img src="img/1.jpg" alt="1"/><img src="img/2.jpg" alt="2"/><img src="img/3.jpg" alt="3"/><img src="img/4.jpg" alt="4"/><img src="img/5.jpg" alt="5"/><img src="img/1.jpg" alt="1"/></div><div id="pointsDiv"><span index="1" class="on"></span><span index="2"></span><span index="3"></span><span index="4"></span><span index="5"></span></div><a href="javascript:;" id="prev" class="arrow"><</a><a href="javascript:;" id="next" class="arrow">></a>
</div><script src="./js/jquery.1.10.2.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body></html>
/*功能说明:1. 点击向右(左)的图标, 平滑切换到下(上)一页2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页3. 每隔3s自动滑动到下一页4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换5. 切换页面时, 下面的圆点也同步更新6. 点击圆点图标切换到对应的页bug: 快速点击下一页时, 有问题*/
$(function () {var $container = $('#container')var $list = $('#list')var $points = $('#pointsDiv>span')var $prev = $('#prev')var $next = $('#next')var TIME = 400 // 移动的总时间var ITEM_TIME = 20 //单元移动的间隔时间var PAGE_WIDTH = 600 // 一页的宽度var imgCount = $points.length //图片的数量var index = 0 //当前圆点的下标var moving = false //是否正在翻页中// 1. 点击向右(左)的图标, 平滑切换到下(上)一页$next.click(function () {nextPage(true)})$prev.click(function () {nextPage(false)})// 3. 每隔3s自动滑动到下一页var intervalId = setInterval(function () {nextPage(true)}, 1000)// 4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换$container.hover(function () {clearInterval(intervalId)}, function () {intervalId = setInterval(function () {nextPage(true)}, 1000)})// 6. 点击圆点图标切换到对应的页$points.click(function () {var targetIndex = $(this).index()if(targetIndex!=index) {nextPage(targetIndex)}})/*** 平滑翻页* @param next* true: 翻到下一页* false: 翻到上一页* 数值: 翻到指定页*/function nextPage (next) {/*移动的总距离: offset=?移动的总时间: time=500ms单元移动的间隔时间: itemTime=20ms单元移动的距离: itemOffset = offset/(time/itemTime)启动循环定时器不断移动, 到达目标位置时清除定时器*/// 如果正在翻页, 此次翻页请求不执行if(moving) {return}moving = true // 标识正在翻页中var offset = 0 //移动的总距离// 计算offsetif(typeof next==='boolean') {offset = next ? -PAGE_WIDTH : PAGE_WIDTH} else {offset = -PAGE_WIDTH * (next - index)}// 计算单元移动的距离var itemOffset = offset/(TIME/ITEM_TIME)// 当前的leftvar currLeft = $list.position().left// 目标的leftvar targetLeft = currLeft + offset// 启动循环定时器不断移动, 到达目标位置时清除定时器var intervalId = setInterval(function () {// 计算当前要设置的leftcurrLeft += itemOffsetif(currLeft===targetLeft) {//清除定时器clearInterval(intervalId)//标识翻页完成moving = false// 如果滑动到了最左边的图片, 直接跳转到最右边的第2张图片if(currLeft===0) {currLeft = -PAGE_WIDTH * imgCount} else if(currLeft===-PAGE_WIDTH*(imgCount+1)) {// 如果滑动到了最右边的图片, 直接跳转到最左边的第2张图片currLeft = -PAGE_WIDTH}}// 更新$list的left样式$list.css({left: currLeft})}, ITEM_TIME)// 5. 切换页面时, 下面的圆点也同步更新updatePoints(next)}/*** 更新标识圆点* @param next*/function updatePoints (next) {var targetIndex = 0// 计算目标下标if(typeof next==='boolean') {if(next) {targetIndex = index + 1if(targetIndex===imgCount) {targetIndex = 0}} else {targetIndex = index-1if(targetIndex===-1) {targetIndex = imgCount-1}}} else {targetIndex = next}// 移除当前下标元素的class$points[index].className = ''// 给目标下标的元素指定class$points[targetIndex].className = 'on'//更新当前下标index = targetIndex}
})
练习3_轮播图_原生.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>焦点轮播图</title><style type="text/css">/*去除内边距,没有链接下划线*/* {margin: 0;padding: 0;text-decoration: none;}/*让<body有20px的内边距*/body {padding: 20px;}/*最外围的div*/#container {width: 600px;height: 400px;overflow: hidden;position: relative; /*相对定位*/margin: 0 auto;}/*包含所有图片的<div>*/#list {width: 4200px; /*7张图片的宽*/height: 400px;position: absolute; /*绝对定位*/z-index: 1; /*???*/}/*所有的图片<img>*/#list img {float: left; /*浮在左侧*/}/*包含所有圆点按钮的<div>*/#buttons {position: absolute;height: 10px;width: 100px;z-index: 2;bottom: 20px;left: 250px;}/*所有的圆点<span>*/#buttons span {cursor: pointer;float: left;border: 1px solid #fff;width: 10px;height: 10px;border-radius: 50%;background: #333;margin-right: 5px;}/*第一个<span>*/#buttons .on {background: orangered;}/*切换图标<a>*/.arrow {cursor: pointer;display: none;line-height: 39px;text-align: center;font-size: 36px;font-weight: bold;width: 40px;height: 40px;position: absolute;z-index: 2;top: 180px;background-color: RGBA(0, 0, 0, 0.3);color: #fff;}/*鼠标移到切换图标上时*/.arrow:hover {background-color: RGBA(0, 0, 0, 0.7);}/*鼠标移到整个div区域时*/#container:hover .arrow {display: block; /*显示*/}/*上一个切换图标的左外边距*/#prev {left: 20px;}/*下一个切换图标的右外边距*/#next {right: 20px;}</style>
</head>
<body><div id="container"><div id="list" style="left: -600px;"><img src="img/5.jpg" alt="1"/><img src="img/1.jpg" alt="1"/><img src="img/2.jpg" alt="2"/><img src="img/3.jpg" alt="3"/><img src="img/4.jpg" alt="4"/><img src="img/5.jpg" alt="5"/><img src="img/1.jpg" alt="5"/></div><div id="buttons"><span index="1" class="on"></span><span index="2"></span><span index="3"></span><span index="4"></span><span index="5"></span></div><a href="javascript:;" id="prev" class="arrow"><</a><a href="javascript:;" id="next" class="arrow">></a>
</div>
<script type="text/javascript">/*功能说明:1. 点击向右(左)的图标, 平滑切换到下(上)一页2. 无限循环切换: 第一页的上一页为最后页, 最后一页的下一页是第一页3. 每隔3s自动滑动到下一页4. 当鼠标进入图片区域时, 自动切换停止, 当鼠标离开后,又开始自动切换5. 切换页面时, 下面的圆点也同步更新6. 点击圆点图标切换到对应的页*//*** 根据id得到对应的标签对象* @param {Object} id*/function $(id) {return document.getElementById(id);}/*** 给指定id对应的元素绑定点击监听* @param {Object} id* @param {Object} callback*/function click(id, callback) {$(id).onclick = callback;}window.onload = function () {var listDiv = $("list");var totalTime = 400;//换页的总时间var intervalTime = 20;//移动的间隔时间var intervalId;//循环定时器的id(翻页中的不移动)var imgCount = 5; //图片的个数var moveing = false; //是否正在移动中var index = 0;//当前显示图片的下标(从0开始到imgCount-1)var buttonSpans = $("buttons").children; //所有标识圆点标签的集合var containerDiv = $("container");var intervalId2; //循环定时器的id(自动翻页)//给下一页绑定点击监听click("next", function () {//切换到下一页nextPage(true);});//给上一页绑定点击监听click("prev", function () {//切换到上一页nextPage(false);});//给所有的提示圆点绑定点击监听clickButtons();//启动定时自动翻页autoNextPage();//给容器div绑定鼠标移入的监听: 停止自动翻页containerDiv.onmouseover = function () {clearInterval(intervalId2);}//给容器div绑定鼠标移出的监听: 启动自动翻页containerDiv.onmouseout = function () {autoNextPage();};/*** 启动定时自动翻页*/function autoNextPage() {intervalId2 = setInterval(function () {nextPage(true);}, 3000);}/*** 切换到下一页/上一页* true 下* false 上* index 目标页* @param {Object} next true*/function nextPage(next) {//如果正在移动, 直接结束if (moveing) {return;}//标识正在移动moveing = true;//需要进行的总偏移量var offset;if (typeof next === 'boolean') {offset = next ? -600 : 600;} else {offset = -600 * (next - index);}//var offset = next ? -600 : 600;//每个小移动需要做的偏移量var itemOffset = offset / (totalTime / intervalTime);//切换完成时div的left的坐标var targetLeft = listDiv.offsetLeft + offset;//循环定时器intervalId = setInterval(function () {//var currentLeft = listDiv.offsetLeft;//得到当前这次偏移的样式left坐标var left = listDiv.offsetLeft + itemOffset;//如果已经到达目标位置if (left == targetLeft) {//移除定时器clearInterval(intervalId);//如果当前到达的是最左边的图片, 跳转到右边第二张图片的位置if (left == 0) {left = -imgCount * 600;} else if (left == -600 * (imgCount + 1)) {//如果当前到达的是最右边的图片, 跳转到左边第二张图片的位置left = -600;}//标识没有移动了moveing = false;}//指定div新的left坐标listDiv.style.left = left + "px";}, intervalTime);//更新标识圆点updateButtons(next);}/*** 更新标识圆点* @param {Object} next*/function updateButtons(next) {//将当前的圆点更新为一般圆点buttonSpans[index].removeAttribute("class");//计算出目标圆点的下标var targetIndex;if (typeof next == 'boolean') {if (next) {targetIndex = index + 1;if (targetIndex == imgCount) {targetIndex = 0;}} else {targetIndex = index - 1;if (targetIndex == -1) {targetIndex = imgCount - 1;}}} else {targetIndex = next;}//将标圆点的下标更新为当前下标index = targetIndex;//将目标圆点设置为当前圆点buttonSpans[index].className = 'on';}/*** 给所有的圆点设置点击监听*/function clickButtons() {for (var i = 0, length = buttonSpans.length; i < length; i++) {buttonSpans[i].index = i;buttonSpans[i].onclick = function () {nextPage(this.index);};/*(function (index) {buttonSpans[index].onclick = function () {nextPage(index);};})(i);*/}}};
</script>
</body>
</html>
练习4_京东商品详情界面
<!DOCTYPE HTML>
<html>
<head><title>产品详情页面----修改</title><meta http-equiv="content-type" content="text/html;charset=utf-8"/><link href="css/common_07.css" type="text/css" rel="Stylesheet"/><link href="css/product.css" type="text/css" rel="Stylesheet"/><link href="css/product_left.css" type="text/css" rel="Stylesheet"/><link href="css/product_right.css" type="text/css" rel="Stylesheet"/><link href="css/product_right_detail.css" type="text/css" rel="Stylesheet"/><link href="css/product_right_more.css" type="text/css" rel="Stylesheet"/>
</head>
<body>
<!--固定的浮动栏-->
<div id="side_panel"><a class="research" href="3"><b></b>调查问卷</a><a class="gotop" href="#"><b></b>返回顶部</a>
</div><!--页面顶部! -->
<div id="top"><div id="top_box"><img src="Images/star.jpg"/><a href="#">收藏京东 </a><pre> <br> </pre><div class="rt"><ul><li>您好，欢迎来到京东！<a href="#">[登录]</a> <a href="#">[免费注册]</a></li><li><b></b><a href="#">我的订单</a></li><li class="vip"><b></b><a href="#">会员俱乐部</a></li><li class="dakehu"><b></b><a href="#">企业频道</a></li><li id="app_jd" class="app_jd" name="show_hide"><b></b><label class="rt"><a href="#">手机京东</a></label><div id="app_jd_items"><div class="app"><h3>京东客户端</h3><a href="#" class="app"></a><a href="#" class="android"></a></div><div class="bank"><h3>网银钱包客户端</h3><a href="#" class="app"></a><a href="#" class="android"></a></div></div></li><li id="service" class="service" name="show_hide"><b></b><label class="rt"><a href="#"> 客户服务</a></label><ul id="service_items"><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></li><li id="site_nav" class="site_nav" name="show_hide"><b></b><label class="rt"><a href="#">网站导航</a></label><div id="site_nav_items"><h3>特色栏目</h3><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="#">京东 E 卡</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><h3>企业服务</h3><ul><li><a href="#">企业采购</a></li><li><a href="#">办公直通车</a></li></ul><div></div><h3>旗下网站</h3><ul><li><a href="#">English Site</a></li></ul></div></li></ul></div></div>
</div>
<div class="clear"></div><!--LOGO和搜索框! -->
<div id="top_main"><a href="#" class="lf"><img src="data:images/logo-201305.png" alt="LOGO"/></a><div id="search_box" class="lf"><div id="search_helper"><p>卫<b>33衣</b><span>约1120个商品</span></p><p>卫<b>衣</b><span>约1120个商品</span></p><ul><li>在<b>男装 > 卫衣</b>分类中搜索<span>约11731个商品</span></li><li>在<b>女装 > 卫衣</b>分类中搜索<span>约10253个商品</span></li></ul><p>卫<b>新</b><span>约1120个商品</span></p><p>卫<b>生纸</b><span>约5100个商品</span></p><p>卫<b>浴</b><span>约12758商品</span></p><p>卫<b>裤</b><span>约1120个商品</span></p><p>卫<b>衣 套装</b><span>约1486个商品</span></p><p>卫<b>衣 男</b><span>约210个商品</span></p><p>卫<b>生纸 套装</b><span>约631个商品</span></p></div><div class="search"><input id="txtSearch" type="text" class="text"/><input class="button" name="" type="button" value="搜索"/></div><div class="hot_words"><span>热门搜索：</span><a href="#">家纺11月大促</a><a href="#">彩虹电热毯</a><a href="#">博洋家纺</a><a href="#">霞珍</a><a href="#">床垫床褥</a><a href="#">九洲鹿被子</a><a href="#">南极人家纺</a></div></div><div id="my_jd" class="lf" name='show_hide'><div class="my_jd_mt">我的京东<b></b></div><div id="my_jd_items"><p>您好，请<a href="#">登录</a></p><ul class="lf"><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><ul class="lf"><li><a href="#">我的关注 ></a></li><li><a href="#">我的京豆 ></a></li><li><a href="#">我的理财 ></a></li><li><a href="#">我的白条 ></a></li></ul></div></div><div id="settle_up" class="lf" name='show_hide'><div class="settle_up_mt">去购物车结算<b></b></div><div id="settle_up_items"><div id="no_goods"><b></b>购物车中还没有商品，赶紧去选购吧</div></div></div>
</div>
<div class="clear"></div><!--主导航 -->
<div id="nav"><div id="category" class="category" name='show_hide'><div id="cate_mt"><a href="#">全部商品分类</a><span></span></div><div id="category_items"><div class="cate_item"><h3><a href="#">图书</a><span>、</span><a href="#">音像</a><span>、</span><a href="#">数字商品</a></h3><div class="sub_cate_box"><div class="sub_cate_items"><div><a href="#">电子书</a><p><a href="#">免费</a><a href="#">小说</a><a href="#">励志与成功</a><a href="#">婚恋/两性</a><a href="#">文学</a><a href="#">经营</a><a href="#">畅读VIP</a></p></div><div><a href="#">数字音乐</a><p><a href="#">通俗流行</a><a href="#">古典音乐</a><a href="#">摇滚说唱</a><a href="#">爵士蓝调</a><a href="#">乡村民谣</a><a href="#">有声读物</a></p></div><div><a href="#">音像</a><p><a href="#">音乐</a><a href="#">影视</a><a href="#">教育音像</a><a href="#">游戏</a></p></div><div><a href="#">文艺</a><p><a href="#">小说</a><a href="#">文学</a><a href="#">青春文学</a><a href="#">传记</a><a href="#">艺术</a></p></div></div><div class="sub_cate_banner"><div><img src="Images/cate_banner_01.jpg"/></div><div><img src="Images/cate_banner_02.jpg"/></div><div><p>推荐品牌出版商/书店</p><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><li><a href="#">中信出版社</a></li><li><a href="#">化学工业出版社</a></li><li><a href="#">北京大学出版社</a></li></ul></div></div></div></div><div class="cate_item"><h3><a href="#">家用电器</a></h3><div class="sub_cate_box"><div class="sub_cate_items"><div><a href="#">大家电</a><p><a href="#">家电爆品</a><a href="#">平板电视</a><a href="#">空调</a><a href="#">冰箱</a><a href="#">洗衣机</a><a href="#">家庭影院</a><a href="#">DVD</a><a href="#">迷你音响</a><a href="#">烟机/灶具</a><a href="#">热水器</a><a href="#">消毒柜/洗碗机</a><a href="#">酒柜/冷柜</a><a href="#">家电配件</a></p></div><div><a href="#">生活电器</a><p><a href="#">取暖电器</a><a href="#">净化器加湿器</a><a href="#">扫地机器人</a><a href="#">吸尘器</a></p></div><div><a href="#">厨房电器</a><p><a href="#">电压力锅</a><a href="#">电饭煲</a><a href="#">豆浆机</a></p></div><div><a href="#">五金家电</a><p><a href="#">电动工具</a><a href="#">手动工具</a><a href="#">仪器仪表</a><a href="#">浴霸/排气扇</a><a href="#">灯具</a><a href="#">洁身器</a><a href="#">LED灯</a><a href="#">水槽</a><a href="#">淋浴花洒</a><a href="#">厨卫五金</a><a href="#">家具五金</a><a href="#">门铃</a><a href="#">电气开关</a><a href="#">插座</a><a href="#">电工电料</a><a href="#">监控安防</a><a href="#">电线/线缆</a></p></div></div><div class="sub_cate_banner"></div></div></div></div></div><div id="nav_items"><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></ul></div>
</div>
<div class="clear"></div><!--主体内容! -->
<div id="main"><!--产品的类别导航路径--><div class="bread-crumb"><a href="#"><b>家居家装</b></a><a href="#">清洁用品</a><span>></span><a href="#">衣物清洁</a><span>></span><a href="#">卫新</a><span>></span><a href="#">卫新洗衣液</a></div><!--产品简介--><div id="product_intro"><div id="preview"><p id="medimImgContainer"><img id="mediumImg" src="data:images/products/product-s1-m.jpg"/><span id="mask"></span><!--小黄块--><span id="maskTop"></span><!--悬于图片/mask上方的专用于接收鼠标移动事件的一个完全透明的层--><span id="largeImgContainer"><img id="loading" src="data:images/loading.gif"/><img id="largeImg"/></span></p><h1><a class="backward_disabled"></a><a class="forward_disabled"></a><div><ul id="icon_list"><li><img src="data:images\products\product-s1.jpg"/></li><li><img src="data:images\products\product-s2.jpg"/></li><li><img src="data:images\products\product-s3.jpg"/></li><li><img src="data:images\products\product-s4.jpg"/></li><li><img src="data:images\products\product-s1.jpg"/></li><li><img src="data:images\products\product-s2.jpg"/></li><li><img src="data:images\products\product-s3.jpg"/></li><li><img src="data:images\products\product-s4.jpg"/></li></ul></div></h1><div id="short_share"><a href="#" class="lf">查看大图</a><span class="lf"></span><div class="lf" id="dd" style="width:155px;"><span>分享到：</span><a class="share_sina" href="#"></a><a class="share_qq" href="#"></a><a class="share_renren" href="#"></a><a class="share_kaixin" style="display:none;" href="#"></a><a class="share_douban" style="display:none;" href="#"></a><a class="share_more" id='shareMore'><b></b></a></div></div></div><h1><span>卫新 薰衣草洗衣液 4.26kg</span><b>与威露士一起巩固健康生活</b></h1><ul id="summary"><li id="summary_price"><div class="title">京 东 价：</div><div class="content"><b>￥39.90</b><a href="#">(降价通知)</a></div></li><li id="summary_market"><div class="title">商品编号：</div><div class="content"><span>960148</span></div></li><li id="summary_grade"><div class="title">商品评分：</div><div class="content"><span></span><a href="#">(已有<b>47662</b>人评价)</a><a href="#" class="words">留言咨询</a></div></li><li id="summary_stock"><div class="title">配送至：</div><div class="content"><!--送货地址的下拉选择框--><div id="store_select"><div class="text"><p>北京海淀区大钟寺</p><b></b></div><div id="store_content"><ul id="store_tabs"><li class="hover">北京<b></b></li><li>海淀区<b></b></li><li>三环以内<b></b></li></ul><ul id="store_items"><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><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><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 id="store_close"></div></div><b>有货</b>，23:00前完成下单，预计<i>明日（12月06日）</i>送达</div></li><li id="summary_service"><div class="title">服 务：</div><div class="content">由 <span>京东</span> 发货并提供售后服务。支持：<a class="sendpay_211" href="#"></a><a class="jingdou_xiankuan" href="#"></a><a class="special_ziti" href="#"></a></div></li></ul><ul id="choose"><li id="choose_color"><div class="title">选择颜色：</div><div class="content"><a href="#" class="selected"><img src="data:images\products\p_icon_01.jpg"/><span>薰衣草</span><b></b></a><a href="#"><img src="data:images\products\p_icon_02.jpg"/><span>索菲亚玫瑰</span><b></b></a></div></li><li id="choose_amount"><div class="title">购买数量：</div><div class="content"><a href="#" class="btn_reduce"></a><input type="text" value="1"/><a href="#" class="btn_add"></a></div></li><li id="choose_result">已选择<b>“薰衣草”</b>，<b>“4.26kg”</b></li><li id="choose_btns" class="clear"><a href="#" class="choose_btn_append"></a><a href="#" class="choose_baitiao_fq"></a><a href="#" class="choose_mark"></a><div class="m_buy"><span>客户端首次下单</span><p>送 5 元京券 </p></div></li></ul></div><!--左侧浮动栏--><div id="left_product"><!--相关分类--><div id="related_sorts"><div class="m_title">相关分类</div><ul class="m_content"><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 id="related_brands"><div class="m_title">同类其他品牌</div><ul class="m_content"><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><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><li><a href="#">好爸爸</a></li><li><a href="#">绿伞</a></li><li><a href="#">净安</a></li><li><a href="#">地球</a></li></ul></div><!--最终购买--><div class="view_buy"><div class="m_title">浏览了该商品的用户最终购买</div><ul class="m_content"><li><p><a href="#"><img src="data:images/products/p001.jpg"/></a></p><a href="#">卫新 护色洗衣液 2kg 袋装</a><h2><a href="#">￥22.90</a></h2></li><li><p><a href="#"><img src="data:images/products/p002.jpg"/></a></p><a href="#">卫新 护色洗衣液 2kg 袋装</a><h2><a href="#">￥39.90</a></h2></li><li><p><a href="#"><img src="data:images/products/p004.jpg"/></a></p><a href="#">卫新 护色洗衣液 2kg 袋装</a><h2><a href="#">￥69.90</a></h2></li><li class="no_bottom"><p><a href="#"><img src="data:images/products/p005.jpg"/></a></p><a href="#">威露士（Walch）2kg+2kg洗衣液（有氧洗）特惠双袋组合装</a><h2><a href="#">￥39.90</a></h2></li></ul></div><!--排行榜--><div id="rank_list"><div class="m_title">衣物清洁排行榜</div><div class="m_content"><ul class="m_tabs"><li>同价位</li><li class="current">同品牌</li><li>同类别</li></ul><ul class="m_list"><li><span class="hot">1</span><a href="#"><img src="data:images/products/product-s4.jpg"/></a><p><a href="#">卫新洗衣液</a></p><h2>￥39.90</h2></li><li><span class="hot">2</span><a href="#"><img src="data:images/products/product-s5.jpg"/></a><p><a href="#">卫新消毒液</a></p><h2>￥49.90</h2></li><li><span class="hot">3</span><a href="#"><img src="data:images/products/product-s6.jpg"/></a><p><a href="#">卫新消毒液</a></p><h2>￥49.90</h2></li><li class="no_bottom"><span>4</span><a href="#"><img src="data:images/products/product-s7.jpg"/></a><p><a href="#">卫新消毒液</a></p><h2>￥49.90</h2></li></ul></div></div><!--还购买了--><div class="view_buy"><div class="m_title">购买了该商品的用户还购买了</div><ul class="m_content"><li><p><a href="#"><img src="data:images/products/p001.jpg"/></a></p><a href="#">卫新 护色洗衣液 2kg 袋装</a><h2><a href="#">￥22.90</a></h2></li><li><p><a href="#"><img src="data:images/products/p002.jpg"/></a></p><a href="#">卫新 护色洗衣液 2kg 袋装</a><h2><a href="#">￥39.90</a></h2></li><li><p><a href="#"><img src="data:images/products/p004.jpg"/></a></p><a href="#">卫新 护色洗衣液 2kg 袋装</a><h2><a href="#">￥69.90</a></h2></li><li class="no_bottom"><p><a href="#"><img src="data:images/products/p005.jpg"/></a></p><a href="#">威露士（Walch）2kg+2kg洗衣液（有氧洗）特惠双袋组合装</a><h2><a href="#">￥39.90</a></h2></li></ul></div><!--还浏览了--><div class="view_buy"><div class="m_title">浏览了该商品的用户还浏览了</div><ul class="m_content"><li><p><a href="#"><img src="data:images/products/p001.jpg"/></a></p><a href="#">卫新 护色洗衣液 2kg 袋装</a><h2><a href="#">￥22.90</a></h2></li><li><p><a href="#"><img src="data:images/products/p002.jpg"/></a></p><a href="#">卫新 护色洗衣液 2kg 袋装</a><h2><a href="#">￥39.90</a></h2></li><li><p><a href="#"><img src="data:images/products/p004.jpg"/></a></p><a href="#">卫新 护色洗衣液 2kg 袋装</a><h2><a href="#">￥69.90</a></h2></li><li class="no_bottom"><p><a href="#"><img src="data:images/products/p005.jpg"/></a></p><a href="#">威露士（Walch）2kg+2kg洗衣液（有氧洗）特惠双袋组合装</a><h2><a href="#">￥39.90</a></h2></li></ul></div><!--其他--><ul id="left_shows"><li><a><img src="Images/products/left_p001.jpg"/></a></li><li><a><img src="Images/products/left_p002.jpg"/></a></li><li><a><img src="Images/products/left_p003.jpg"/></a></li></ul></div><!--右侧产品信息--><div id="right_product"><!--优惠套装--><div id="favorable_suit"><p class="main_tabs">优惠套装</p><div class="m_content"><ul class="sub_tabs"><li class="current">优惠套装1</li></ul><div class="sub_content"><div class="master"><span class="add"></span><a href="#"><img src="data:images/products/product_01_m.jpg"/></a><p><a href="#">卫新 薰衣草洗衣液 4.26kg</a></p></div><div class="suits"><ul><li><span class="add"></span><a href="#"><img src="data:images/products/product_02_m.jpg"/></a><p><a href="#">卫新 去静电柔顺剂 清怡樱花袋装 500</a></p></li><li><span class="add"></span><a href="#"><img src="data:images/products/product_03_m.jpg"/></a><p><a href="#">威露士（Walch） 手洗洗衣液单袋装 500ml</a></p></li><li><a href="#"><img src="data:images/products/product_04_m.jpg"/></a><p><a href="#">威露士（Walch） 衣物家居消毒液 3</a></p></li></ul></div><div class="infos"><span></span><h1><a href="#">威露士组合</a></h1><p>套装价：<b class="empasis">105.30</b></p><p>京东价：<b class="strike">142.40</b></p><p>立即节省：<b>37.10</b></p><div class="btns"><a href="#" class="btn_buy">购买套装</a></div></div></div></div></div><!--推荐配件--><div id="recommend"><ul class="main_tabs"><li class="current"><a href="#">推荐配件</a></li><li><a href="#">人气组合</a></li></ul><div class="m_content"><ul class="sub_tabs"><li class="current">全部配件</li><li>清洁工具(1)</li><li>毛巾浴巾(3)</li><li>衬衫(1)</li><li>收纳用品(2)</li><li>商务男袜(1)</li></ul><div class="sub_content"><div class="master"><span class="add"></span><a href="#"><img src="data:images/products/product_01_m.jpg"/></a><p><a href="#">卫新 薰衣草洗衣液 4.26kg</a></p></div><div class="suits"><ul style="width:1000px;"><li><span class="add"></span><a href="#"><img src="data:images/products/product_05_m.jpg"/></a><p><a href="#">卫新 去静电柔顺剂 清怡樱花袋装 500</a></p><input type="checkbox" id="chk_01"/><label for="chk_01">￥49.00</label></li><li><span class="add"></span><a href="#"><img src="data:images/products/product_06_m.jpg"/></a><p><a href="#">佳佰Hommy9丝压缩袋(2大2中4小)</a></p><input type="checkbox" id="Checkbox1"/><label for="chk_01">￥49.00</label></li><li><span class="add"></span><a href="#"><img src="data:images/products/product_07_m.jpg"/></a><p><a href="#">【京东自营】INTERIGHT 100支全棉</a></p><input type="checkbox" id="Checkbox2"/><label for="chk_01">￥49.00</label></li><li><span class="add"></span><a href="#"><img src="data:images/products/product_08_m.jpg"/></a><p><a href="#">INTERIGHT 商务休闲男袜 精梳棉中</a></p><input type="checkbox" id="Checkbox3"/><label for="chk_01">￥49.00</label></li><li><span class="add"></span><a href="#"><img src="data:images/products/product_09_m.jpg"/></a><p><a href="#">威露士（Walch） 衣物家居消毒液 3</a></p><input type="checkbox" id="Checkbox4"/><label for="chk_01">￥49.00</label></li><li><a href="#"><img src="data:images/products/product_10_m.jpg"/></a><p><a href="#">威露士（Walch） 衣物家居消毒液 3</a></p><input type="checkbox" id="Checkbox5"/><label for="chk_01">￥49.00</label></li></ul></div><div class="infos"><span></span><h1><a href="#">已选择<b>0</b>个配件</a></h1><p>搭配价：<b class="empasis">39.90</b></p><p>获得优惠：<b class="strike">36.60</b></p><div class="btns"><a href="#" class="btn_buy">立即购买</a></div></div></div></div></div><!--产品详细--><div id="product_detail"><!--页签--><ul class="main_tabs"><li class="current"><a>商品介绍</a></li><li><a>规格参数</a></li><li><a>包装清单</a></li><li><a>商品评价(43390)</a></li><li><a>售后保障</a></li></ul><!--加入购物车--><div id="minicart"><p><a href="#"></a></p><div style="display:none;"><img src="data:images/products/product_01_m.jpg"/><h1>卫新 薰衣草洗衣液 4.26kg</h1><h2>京东价：<b>￥41.90</b></h2></div></div><!--商品介绍--><div id="product_info"><ul class="detail_list"><li>商品名称：卫新洗衣液</li><li>商品编号：1039778</li><li>品牌：<a href="#" target="_blank">卫新</a></li><li>上架时间：2014-01-23 16:28:06</li><li>商品毛重：4.55kg</li><li>商品产地：广东省从化市</li><li>类别：手洗洗衣液，机洗洗衣液</li><li>规格：3kg以上</li><li>香型：香味</li></ul><div class="detail_correct"><b></b>如果您发现商品信息不准确，<a href="#" target="_blank">欢迎纠错</a></div><div class="detail_content" style="text-align:center;"><p><a src="#"><img src="data:images/products/weilushi.jpg"/></a></p><div class="dotted_split"></div><div class="jd_split"><b>产品信息</b><span>Product Information</span></div><table><tr><td><img src="data:images/products/product_01.jpg"/></td><td><h1>卫新 薰衣草洗衣液 （新老包装 随机发货）</h1><p>净含量：4.26kg</p><p>产品功效：</p><p>1.特别添加法国薰衣草精油成分，令衣物充满芬<br/>2.纳米智能分解技术，深层渗透衣物纤维，自动逐一瓦解各种顽固污渍及细菌，不损衣物纤维，净白亮色。<br/>3.特有去渍防护配方，减少污渍吸附在衣物表面，穿着时持久洁净更耐脏。<br/>4.中性配方，成分更温和，温柔呵护家人皮肤。<br/>5.全新低泡技术，用量少，易漂无残留。<br/>6.含柔顺成分，令衣物恢复天然弹性不易变形，易熨更柔顺<br/>7.环保更健康，不含磷、荧光增白剂。<br/></p><p> 箱规：4支/箱</p><p><br/>更多容量选择: 3kg 4.26kg</p></td></tr></table><div class="jd_split"><b>产品特色</b><span>Selling Point</span></div><p><a src="#"><img src="data:images/products/product_02.jpg"/></a></p><div class="dotted_split"></div><p><a src="#"><img src="data:images/products/product_03.jpg"/></a></p><div class="dotted_split"></div><div class="jd_split"><b>适用范围</b><span>Heritage</span></div><p><a src="#"><img src="data:images/products/product_04.jpg"/></a></p><div class="dotted_split"></div><div class="jd_split"><b>使用说明</b><span>Instructions</span></div><p><a src="#"><img src="data:images/products/product_05.jpg"/></a></p><div class="dotted_split"></div><div class="jd_split"><b>品牌介绍</b><span>Brand Introduction</span></div><table><tr><td><img src="data:images/products/weilushi_01.jpg"/></td><td><h1>威莱为你每一天，未来健康每一天</h1><p>威莱集团是家用清洁及卫生消毒产品市场的领导者。在多个国家及地区，其消毒产品均占有领先的市场地位。</p></td></tr></table></div></div><!--规格参数--><div id="product_data"><div class="detail_correct"><b></b>如果您发现商品信息不准确，<a href="#" target="_blank">欢迎纠错</a></div><table cellpadding="0" cellspacing="1" width="100%" border="0" class="Ptable"><thead><tr><th colspan="2">主体</th></tr></thead><tbody><tr></tr><tr><td class="td_title">品牌</td><td>威露士（Walch）</td></tr><tr><td class="td_title">类别</td><td>洗衣液</td></tr><tr><td class="td_title">产品规格（ml/kg）</td><td>4.26kg</td></tr><tr><td class="td_title">产品包装尺寸（cm）</td><td>254*117*326</td></tr><tr><td class="td_title">香型</td><td>薰衣草</td></tr></tbody></table></div><!--包装清单--><div id="product_package"><p>卫新 薰衣草洗衣液 4.26kg*1</p></div><br/><!--商品评价--><div id='product_comment'></div><!--售后保障--><div id="product_saleAfter"><p>本产品全国联保，享受三包服务，质保期为：无质保</p></div></div><!--服务承诺--><div id="promise"><b>服务承诺：</b><p>京东向您保证所售商品均为正品行货，京东自营商品开具机打发票或电子发票。凭质保证书及京东发票，可享受全国联保服务（奢侈品、钟表除外；奢侈品、钟表由京东联系保修，享受法定三包售后服务），与您亲临商场选购的商品享受相同的质量保证。京东还为您提供具有竞争力的商品价格和<ahref="#">运费政策</a>，请您放心购买！ </p><p>注：因厂家会在没有任何提前通知的情况下更改产品包装、产地或者一些附件，本司不能确保客户收到的货物与商城图片、产地、附件说明完全一致。只能确保为原厂正货！并且保证与当时市场上同样主流新品一致。若本商城没有及时更新，请大家谅解！</p></div><!--权力声明--><div id="state"><span>权利声明：</span><p>京东上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是京东重要的经营资源，未经许可，禁止非法转载使用。</p><p><b>注：</b>本站商品信息均来自于合作方，其真实性、准确性和合法性由信息拥有者（合作方）负责。本站不提供任何保证，并不承担任何法律责任。</p></div><!--商品评价--><div id="comment"><p class="main_tabs">商品评价</p><div class="m_content"><div class="rate"><span>97</span><b>%</b><p>好评度</p></div><div class="percent"><dl><dt>好评(<span>97%</span>)</dt><dd><p style="width:97px;"></p></dd></dl><dl><dt>中评(<span>2%</span>)</dt><dd><p style="width:2px;"></p></dd></dl><dl><dt>差评(<span>1%</span>)</dt><dd><p style="width:1px;"></p></dd></dl></div><div class="buyers"><p>买家印象：</p><ul><li>比超市便宜<span>(8450)</span></li><li>味道不错<span>(6931)</span></li><li>质量不错<span>(5034)</span></li><li>洗衣效果好<span>(5003)</span></li><li>洗涤效果好<span>(4834)</span></li><li>洗衣服干净<span>(4712)</span></li></ul></div><div class="btns">您可对已购商品进行评价<a class="btn_comment" href="#">发评价拿京豆</a><b>前五名可获双倍京豆</b><a href="#">[规则]</a></div></div></div><!--评价详细--><div id="comment_list"><ul class="main_tabs"><li class="current"><a href="#">全部评价(49639)</a></li><li><a href="#">好评(48232)</a></li><li><a href="#">中评(992)</a></li><li><a href="#">差评(415)</a></li><li><a href="#">有晒单的评价(962)</a></li></ul><!--全部评价--><div id="comment_0"><div class="comment_item"><ul><li><a href="#"><img src="data:images/user_01.jpg"/></a></li><li>kkngj2008</li><li><b>金牌会员</b><span>广东</span></li></ul><div><div class="topic"><p class="star3"></p><a href="#">2014-08-12 19:01</a></div><table><tr><td class="comment_option">标签：</td><td class="comment_tag"><span>比洗衣粉好</span><span>去污能力强</span></td></tr><tr><td class="comment_option">心得：</td><td>味道清香..价格也比较公道</td></tr><tr><td class="comment_option">用户晒单：</td><td class="comment_show"><a href="#"><img src="data:images/products/show_01.jpg"/></a><a href="#"><img src="data:images/products/show_02.jpg"/></a><a href="#"><img src="data:images/products/show_03.jpg"/></a>共<b>3</b>张图片<a href="#">查看晒单></a></td></tr><tr><td class="comment_option">购买日期：</td><td>2014-08-11</td></tr></table><p class="btns"><a href="#">有用(3)</a><a href="#">回复(0)</a></p><div class="reply_lz"><div class="reply_form"><p>回复<a>kkngj2008 </a>：</p><input class="txt" type="text"/><input class="btn" type="button" value="回复"/></div></div><div class="comment_reply"><span>22</span><p><b>Koolmeng</b>回复<b>SE7EN_Gary</b>：</p><h4>牛也没那么厉害！你真牛X</h4><div><b>2014-12-16 15:09</b><a>回复</a></div></div><div class="reply_lz"><div class="reply_form"><p>回复<a>kkngj2008 </a>：</p><input class="txt" type="text"/><input class="btn" type="button" value="回复"/></div></div><div class="comment_reply"><span>21</span><p><b>Koolmeng</b>回复<b>SE7EN_Gary</b>：</p><h4>牛也没那么厉害！你真牛X</h4><div><b>2014-12-16 15:09</b><a>回复</a></div></div><div class="reply_lz"><div class="reply_form"><p>回复<a>kkngj2008 </a>：</p><input class="txt" type="text"/><input class="btn" type="button" value="回复"/></div></div></div><div class="corner"></div></div><div class="comment_item"><ul><li><a href="#"><img src="data:images/user_01.jpg"/></a></li><li>kkngj2008</li><li><b>金牌会员</b><span>广东</span></li></ul><div><div class="topic"><p class="star4"></p><a href="#">2014-08-12 19:01</a></div><table><tr><td class="comment_option">标签：</td><td class="comment_tag"><span>比洗衣粉好</span><span>去污能力强</span></td></tr><tr><td class="comment_option">心得：</td><td>味道清香..价格也比较公道</td></tr><tr><td class="comment_option">用户晒单：</td><td class="comment_show"><a href="#"><img src="data:images/products/show_01.jpg"/></a><a href="#"><img src="data:images/products/show_02.jpg"/></a><a href="#"><img src="data:images/products/show_03.jpg"/></a>共<b>3</b>张图片<a href="#">查看晒单></a></td></tr><tr><td class="comment_option">购买日期：</td><td>2014-08-11</td></tr></table><p class="btns"><a href="#">有用(3)</a><a href="#">回复(0)</a></p><div class="reply_lz"><div class="reply_form"><p>回复<a>kkngj2008 </a>：</p><input class="txt" type="text"/><input class="btn" type="button" value="回复"/></div></div><div class="comment_reply"><span>22</span><p><b>Koolmeng</b>回复<b>SE7EN_Gary</b>：</p><h4>牛也没那么厉害！你真牛X</h4><div><b>2014-12-16 15:09</b><a>回复</a></div></div><div class="reply_lz"><div class="reply_form"><p>回复<a>kkngj2008 </a>：</p><input class="txt" type="text"/><input class="btn" type="button" value="回复"/></div></div></div><div class="corner"></div></div><div class="comment_item"><ul><li><a href="#"><img src="data:images/user_01.jpg"/></a></li><li>kkngj2008</li><li><b>金牌会员</b><span>广东</span></li></ul><div><div class="topic"><p class="star5"></p><a href="#">2014-08-12 19:01</a></div><table><tr><td class="comment_option">标签：</td><td class="comment_tag"><span>比洗衣粉好</span><span>去污能力强</span></td></tr><tr><td class="comment_option">心得：</td><td>味道清香..价格也比较公道</td></tr><tr><td class="comment_option">购买日期：</td><td>2014-08-11</td></tr></table><p class="btns"><a href="#">有用(3)</a><a href="#">回复(0)</a></p><div class="reply_lz"><div class="reply_form"><p>回复<a>kkngj2008 </a>：</p><input class="txt" type="text"/><input class="btn" type="button" value="回复"/></div></div><div class="comment_reply"><span>22</span><p><b>Koolmeng</b>回复<b>SE7EN_Gary</b>：</p><h4>牛也没那么厉害！你真牛X</h4><div><b>2014-12-16 15:09</b><a>回复</a></div></div><div class="reply_lz"><div class="reply_form"><p>回复<a>kkngj2008 </a>：</p><input class="txt" type="text"/><input class="btn" type="button" value="回复"/></div></div><div class="comment_reply"><span>21</span><p><b>Koolmeng</b>回复<b>SE7EN_Gary</b>：</p><h4>牛也没那么厉害！你真牛X</h4><div><b>2014-12-16 15:09</b><a>回复</a></div></div><div class="reply_lz"><div class="reply_form"><p>回复<a>kkngj2008 </a>：</p><input class="txt" type="text"/><input class="btn" type="button" value="回复"/></div></div></div><div class="corner"></div></div></div><!--页码--><div><a class="comment_show_all" href="#">[查看全部评价]</a><div id="pages"><a class="current">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">....</a><a href="#">3421</a><a href="#">下一页</a></div></div></div><div class="clear"></div><!--咨询--><div id="consult"><ul class="main_tabs"><li class="current"><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><li><input type="text" id="txt_consult_search" value="请输入关键词"/><input type="button" value="搜索" id="btn_consult_search"/></li><li><a id="add_consult" href="#">发表咨询</a></li></ul><div class="m_content"><b>温馨提示：</b>因厂家更改产品包装、产地或者更换随机附件等没有任何提前通知，且每位咨询者购买情况、提问时间等不同，为此以下回复仅对提问者3天内有效，其他网友仅供参考！<br/>若由此给您带来不便请多多谅解，谢谢！</div><div id="consult_0"><div id="consult_result"><p>共搜索到<span>14</span>条相关咨询<a>返回</a></p><h4>声明：以下回复仅对提问者3天内有效，其他网友仅供参考！</h4></div><div class="consult_item"><p>网 友：<b>135*****193_p</b><span>2014-11-23 12:27:13</span></p><ul class="consult_ask"><li class="consult_title">咨询内容：</li><li><a href="#">怎么买呀？</a></li></ul><ul class="consult_answer"><li class="consult_title">京东回复：</li><li>您好！请您于京东客服联系。感谢您对京东的支持！祝您购物愉快！</li><li class="consult_answer_time">2014-11-24 15:25:59</li></ul></div><div class="consult_item"><p>网 友：<b>jd_158998lub</b><span>2014-11-11 14:19:00</span></p><ul class="consult_ask"><li class="consult_title">咨询内容：</li><li><a href="#">请问一箱里面装几瓶?</a></li></ul><ul class="consult_answer"><li class="consult_title">京东回复：</li><li>您好！4瓶/箱， 感谢您对京东的支持！祝您购物愉快！</li><li class="consult_answer_time">2014-11-11 16:44:06</li></ul></div><div class="consult_item"><p>网 友：<b>jd_158998lub</b><span>2014-11-11 14:19:00</span></p><ul class="consult_ask"><li class="consult_title">咨询内容：</li><li><a href="#">请问一箱里面装几瓶?</a></li></ul><ul class="consult_answer"><li class="consult_title">京东回复：</li><li>您好！4瓶/箱， 感谢您对京东的支持！祝您购物愉快！</li><li class="consult_answer_time">2014-11-11 16:44:06</li></ul></div></div><div id="consult_extra">购买之前，如有问题，请咨询<a class="offline" href="#">留言咨询</a>，或<a href="#"> [发表咨询]</a><p>共<span>101</span>条 <a href="#">浏览所有咨询信息>></a></p></div></div><!--讨论--><div id="discuss"><ul class="main_tabs"><li class="current"><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><table id="discuss-datas"><tr class="header"><td class="col1">主题</td><td class="col2">回复/浏览</td><td class="col3">作者</td><td class="col4">时间</td></tr><tbody><tr><td class="col1"><b class="topic shai"></b><a href="#">好大一瓶，不错</a></td><td>0/0</td><td><a href="#">2001年冬天</a></td><td>2014-11-19</td></tr><tr><td class="col1"><b class="topic lun"></b><a href="#">洗衣液超级划算，活动给力</a></td><td>0/0</td><td><a href="#">xpx2001</a></td><td>2014-11-18</td></tr><tr><td class="col1"><b class="topic lun"></b><a href="#">洗衣液超级划算，活动给力</a></td><td>0/0</td><td><a href="#">xpx2001</a></td><td>2014-11-18</td></tr><tr><td class="col1"><b class="topic shai"></b><a href="#">好大一瓶，不错</a></td><td>0/0</td><td><a href="#">2001年冬天</a></td><td>2014-11-19</td></tr></tbody></table><div class="discuss_extra"><div class="newdiscuss"><span>有问题要与其他用户讨论？</span><a href="#">[发表帖子]</a></div><div class="totaldiscuss"><span>共900个话题</span><a href="#">浏览全部话题>></a></div></div></div></div>
</div>
<div class="clear"></div><!--最近浏览和猜你喜欢-->
<div id="footmark"><div id="may_like"><p><span class="lf">根据浏览猜你喜欢</span><b class="rt">换一批</b></p><ul><li><div><a href="#"><img src="Images/products/p001.jpg"/></a></div><p><a href="#">卫新 香薰洗衣液4.26kg （索菲亚玫瑰）</a></p><h5><a href="#">(已有46242人评价)</a></h5><h6>￥49.90</h6></li><li><div><a href="#"><img src="Images/products/p002.jpg"/></a></div><p><a href="#">威露士（Walch） 衣物除菌液（阳光清香）2.5L送1.5L</a></p><h5><a href="#">(已有46242人评价)</a></h5><h6>￥49.90</h6></li><li><div><a href="#"><img src="Images/products/p003.jpg"/></a></div><p><a href="#">威露士（Walch） 衣物除菌液（阳光清香）2.5L送1.5L</a></p><h5><a href="#">(已有46242人评价)</a></h5><h6>￥49.90</h6></li><li><div><a href="#"><img src="Images/products/p004.jpg"/></a></div><p><a href="#">卫新 香薰洗衣液4.26kg （索菲亚玫瑰）</a></p><h5><a href="#">(已有46242人评价)</a></h5><h6>￥49.90</h6></li><li><div><a href="#"><img src="Images/products/p005.jpg"/></a></div><p><a href="#">卫新 香薰洗衣液4.26kg （索菲亚玫瑰）</a></p><h5><a href="#">(已有46242人评价)</a></h5><h6>￥49.90</h6></li></ul></div><div id="recent_view"><p><span class="lf">最近浏览</span><b class="rt">更多浏览记录</b></p><ul><li><div><a href="#"><img src="Images/products/p_small_001.jpg"/></a></div><h6>￥49.90</h6></li><li><div><a href="#"><img src="Images/products/p_small_002.jpg"/></a></div><h6>￥49.90</h6></li><li><div><a href="#"><img src="Images/products/p_small_003.jpg"/></a></div><h6>￥49.90</h6></li><li><div><a href="#"><img src="Images/products/p_small_004.jpg"/></a></div><h6>￥49.90</h6></li><li><div><a href="#"><img src="Images/products/p_small_005.jpg"/></a></div><h6>￥49.90</h6></li><li><div><a href="#"><img src="Images/products/p_small_006.jpg"/></a></div><h6>￥49.90</h6></li><li><div><a href="#"><img src="Images/products/p_small_007.jpg"/></a></div><h6>￥49.90</h6></li><li><div><a href="#"><img src="Images/products/p_small_008.jpg"/></a></div><h6>￥49.90</h6></li><li><div><a href="#"><img src="Images/products/p_small_009.jpg"/></a></div><h6>￥49.90</h6></li></ul></div>
</div>
<div class="clear"></div><!--购物指南、配送方式等! -->
<div id="foot_box"><p class="shopping_guide"></p><ul><li><b>购物指南</b></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><p class="send_type"></p><ul><li><b>配送方式</b></li><li><a href="#">上门自提</a></li><li><a href="#">211限时达</a></li><li><a href="#">配送服务查询</a></li><li><a href="#">配送费收取标准</a></li><li><a href="#">海外配送</a></li></ul><p class="pay_type"></p><ul><li><b>支付方式</b></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><p class="sale_service"></p><ul><li><b>售后服务</b></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><p class="special_service"></p><ul><li><b>特色服务</b></li><li><a href="#">夺宝岛</a></li><li><a href="#">DIY装机</a></li><li><a href="#">延保服务</a></li><li><a href="#">京东E卡</a></li><li><a href="#">节能补贴</a></li><li><a href="#">京东通信</a></li></ul>
</div>
<div class="clear"></div><!--页面底部! -->
<div id="footer"><div class="links"><a href="#">关于我们</a>|<a href="#">联系我们</a>|<a href="#">人才招聘</a>|<a href="#">商家入驻</a>|<a href="#">广告服务</a>|<ahref="#">手机京东</a>|<a href="#">友情链接</a>|<a href="#">销售联盟</a>|<a href="#">京东社区</a>|<a href="#">京东公益</a></div><div class="copyright">北京市公安局朝阳分局备案编号110105014669 | 京ICP证070359号 | 互联网药品信息服务资格证编号(京)-非经营性-2011-0034<br/><a href="#">音像制品经营许可证苏宿批005号 </a> | 出版物经营许可证编号新出发(苏)批字第N-012号 | 互联网出版许可证编号新出网证(京)字150号<br/><a href="#">网络文化经营许可证京网文[2011]0168-061号 </a> Copyright © 2004-2014 京东JD.com 版权所有 <br/>京东旗下网站：<a href="#">English Site</a> <a href="#">拍拍网</a> <a href="#">网银在线</a></div><div class="authentication"><a href=""><img src="data:images/jy.jpg" width="108" height="40"/></a><a href=""><img src="data:images/kx.jpg" width="108" height="40"/></a><a href=""><img src="data:images/cy.jpg" width="108" height="40"/></a><a href=""><img src="data:images/cx.jpg" width="112" height="40"/></a></div>
</div><script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="js/jd.js" type="text/javascript"></script>
</body>
</html>/*1. 鼠标移入显示,移出隐藏目标: 手机京东, 客户服务, 网站导航, 我的京东, 去购物车结算, 全部商品2. 鼠标移动切换二级导航菜单的切换显示和隐藏3. 输入搜索关键字, 列表显示匹配的结果4. 点击显示或者隐藏更多的分享图标5. 鼠标移入移出切换地址的显示隐藏6. 点击切换地址tab7. 鼠标移入移出切换显示迷你购物车8. 点击切换产品选项 (商品详情等显示出来)9. 点击向右/左, 移动当前展示商品的小图片10. 当鼠标悬停在某个小图上,在上方显示对应的中图11. 当鼠标在中图上移动时, 显示对应大图的附近部分区域*/$(function () {showHide()subMenu()search()share()address()minicart()products()midumImg()movePic()showBig()//1. 鼠标移入显示,移出隐藏function showHide() {$('[name=show_hide]').hover(function () {var id = $(this).attr('id') //当前元素的idvar subId = id + '_items' //子元素id$('#' + subId).show() //显示}, function () {var id = $(this).attr('id') //当前元素的idvar subId = id + '_items' //子元素id$('#' + subId).hide() //隐藏})}//2. 鼠标移动切换二级导航菜单的切换显示和隐藏function subMenu() {$('#category_items .cate_item').hover(function () {$(this).children('.sub_cate_box').show()}, function () {$(this).children('.sub_cate_box').hide()})}//3. 输入搜索关键字, 列表显示匹配的结果function search() {// 1.写入数据的时候，出现智能提示// 2.失去焦点的时候，隐藏智能提示// 3.当输入框中有数据的时候，获得焦点 出现智能提示，// 4.当输入框中没有数据的时候，获得焦点 不出现智能提示$('#txtSearch').on('keyup focus', function () {var value = this.value.trim()if (value){$('#search_helper').show()}}).blur(function () {$('#search_helper').hide()})}//4. 点击显示或者隐藏更多的分享图标function share() {var isClose = true$('#shareMore').click(function () {if (isClose) { //当前关闭==>打开$('#dd').width('200px') //宽度增加$('a').prevAll(':gt(3)').show()$(this).children('b').addClass('backword')isClose = false} else { //当前打开==>关闭$('#dd').width('155') //宽度增加$(this).prevAll(':lt(2)').hide()$(this).children('b').removeClass('backword')isClose = true}})}//5. 鼠标移入移出切换地址的显示隐藏function address() {$('#store_select').hover(function () {$('#store_content, #store_close').show()}, function () {$('#store_content, #store_close').hide()})//点击叉隐藏$('#store_close').click(function () {$('#store_content, #store_close').hide()})// 6. 点击切换地址tab$('#store_tabs>li').click(function () {$(this).siblings().removeClass('hover')$(this).addClass('hover')})}//7. 鼠标移入移出切换显示迷你购物车function minicart() {$('#minicart').hover(function () {$(this).addClass('minicart').children('div').show()}, function () {$(this).removeClass('minicart').children('div').hide()})}//8. 商品详情的切换显示function products() {$('#product_detail>ul>li').click(function () {$(this).siblings().removeClass('current') //兄弟姐妹去掉被选中的状态$(this).addClass('current') //本身添加 classvar index = $(this).index() //得到在兄弟中的下标//找到5个div 把他们隐藏 找到当前的索引，根据当前的索引 显示当前div$('#product_detail>div:not(:eq(0))').hide().eq(index).show()})}//9. 点击向右/左, 移动当前展示商品的小图片function movePic() {var $preview = $('#preview')var $backward = $preview.children('h1').children('a:eq(0)')var $forward = $preview.children('h1').children('a:eq(1)')var $iconList = $('#icon_list')var WIDTH = 5var PIC_WIDTH = 62var counter = 0 //左侧的图片的数量var THRESHOLD = 0 //阈值//初始化//检查有几张图片var pics = $iconList.children('li').lengthvar THRESHOLD = pics - WIDTHif (pics > WIDTH) {//调节按钮$forward.attr('class', 'forward')//列表的宽度$iconList.width(pics * PIC_WIDTH)}//事件响应$forward.click(function () {//检查当前状态var currentState = $(this).attr('class')if ('forward_disabled' !== currentState) {counter++$iconList.css({left: -PIC_WIDTH * counter})if (counter === THRESHOLD) {//把按钮设置为 不可用状态$forward.attr('class', 'forward_disabled')}if (counter > 0) {//把左侧按钮设置为 可用状态$backward.attr('class', 'backward')}}})$backward.click(function () {//检查当前状态var currentState = $(this).attr('class')if ('backward_disabled' !== currentState) {counter--$iconList.css({left: -PIC_WIDTH * counter})if (counter === 0) {//把按钮设置为 不可用状态$backward.attr('class', 'backward_disabled')}if (counter < THRESHOLD) {//把左侧按钮设置为 可用状态$forward.attr('class', 'forward')}}})}//10. 当鼠标悬停在某个小图上,在上方显示对应的中图function midumImg() {$('#icon_list>li').hover(function () {//获取到 自己 srcvar src = $(this).children('img').attr('src')//设置中图的srcvar srcMedium = src.replace('.jpg', '-m.jpg')$('#mediumImg').attr('src', srcMedium)//加红框$(this).children('img').addClass('hoveredThumb')}, function () {$(this).children('img').removeClass('hoveredThumb')})}//11. 当鼠标在中图上移动时, 显示对应大图的附近部分区域function showBig() {var $mask = $('#mask') //小黄块var $maskTop = $('#maskTop') //透明层var $largeImgContainer = $('#largeImgContainer') //大图的容器var $loading = $('#loading') //加载过程图var $largeImg = $('#largeImg') //大图的标签var $mediumImg = $('#mediumImg') //中图标签var MASK_WIDTH = $mask.width()var MASK_HEIGHT = $mask.height()var MEDIUM_WIDTH = $mediumImg.width()var MEDIUM_HEIGHT = $mediumImg.height()$maskTop.hover(function () {//显示$mask.show()$largeImgContainer.show()//通知系统加载图片var srcM = $mediumImg.attr('src')var srcL = srcM.replace('m.jpg', 'l.jpg')$largeImg.attr('src', srcL)//图片加载好后做一些处理//loading 隐藏$largeImg.on('load', function () {// console.log('aaa')$loading.hide() //隐藏//容器大小由 图片大小决定var picLWidth = $largeImg.width()var picLHeight = $largeImg.height()//设置容器$largeImgContainer.width(picLWidth / 2)$largeImgContainer.height(picLHeight / 2)$largeImg.show() //显示//监听鼠标事件$maskTop.mousemove(function (event) {//关于父元素var mouseLeft = event.offsetXvar mouseTop = event.offsetYconsole.log(mouseLeft, mouseTop)//小黄块运动var maskLeft = mouseLeft - MASK_WIDTH / 2var maskTop = mouseTop - MASK_HEIGHT / 2//横向范围if (maskLeft < 0) {maskLeft = 0}if (maskLeft > MEDIUM_WIDTH / 2) {maskLeft = MEDIUM_WIDTH / 2}//纵向范围if (maskTop < 0) {maskTop = 0}if (maskTop > MEDIUM_HEIGHT / 2) {maskTop = MEDIUM_HEIGHT / 2}// 重新绘制小黄块的位置$mask.css({top: maskTop,left: maskLeft})//计算大图的位置var largImgLeft = picLWidth * maskLeft / MEDIUM_WIDTHvar largImgTop = picLHeight * maskTop / MEDIUM_HEIGHT//设置大图的位置$largeImg.css({left: -largImgLeft,top: -largImgTop})})})}, function () {//隐藏$mask.hide()$largeImgContainer.hide()})}})common_07.css
@charset "utf-8";body,a
{font: 12px "���ź�", Arial, Helvetica, sans-serif;color:#666;
}
*
{margin:0px;padding:0px;border:none;list-style:none;
}
.lf {float:left;}
.rt {float:right;}
.clear {clear:both;}
a{text-decoration:none;}
a:hover {text-decoration:underline;}#top_box,#top_main,#nav,#main,#foot_box,#footer
{width:1211px;margin:0px auto;
}#top
{width:100%;height:30px;background:#F7F7F7;line-height:30px;border-bottom:1px solid #eee;
}
#top a
{text-decoration:none;
}
#top a:hover
{text-decoration:underline;color:#ff0700;
}
#top_box
{height:30px;
}/*�������ġ��ղؾ�����*/
#top_box>img
{display:block;float:left;margin:8px 4px;
}
#top_box>a
{display:block;float:left;line-height:30px;width:60px;
}#top_box ul li
{float:left;text-align:center;position:relative;margin-right:5px;z-index:1;
}
#top_box ul li b
{height: 12px;border-left: 1px solid #DDD;padding:0px 5px 0px 0px;
}
li.vip a
{background:url(../images/vip.jpg) left center no-repeat;padding-left:30px;
}
li.dakehu a
{background:url(../images/dakehu.jpg) left center no-repeat;padding-left:30px;
}
li.app_jd label,li.service label,li.site_nav label
{ display:block;height:26px;line-height:26px;padding-left:5px;margin-top:2px; border:1px solid transparent;position:relative;z-index:2;
}
li.app_jd label
{background:url(../images/iconlist_2.png) -126px -357px no-repeat;padding-left:20px;
}
li.app_jd label:hover,li.service label:hover,li.site_nav label:hover
{height:27px;background-color:#fff;border:1px solid #DDD;border-bottom-width:0px;z-index:10;
}
li.app_jd label:hover
{background:#fff url(../images/iconlist_2.png) -126px -397px no-repeat;
}
li.app_jd label a,li.service label a,li.site_nav label a
{ padding:8px 19px 5px 0px;background:url(../images/jt_down.jpg) 55px center no-repeat;
}
li.app_jd label a:hover,li.service label a:hover,li.site_nav label a:hover
{background:url(../images/jt_up.jpg) 55px center no-repeat;
}#app_jd_items
{display:none;position:absolute;left: 6px;top:30px;z-index:3;width: 215px;height:214px;padding: 50px 0 20px 20px;border:1px solid #DDD;border-top:1px solid #fff;box-shadow:0 0 10px #DDD;background:#fff url(../images/app_jd_1.png) 10px 10px no-repeat;
}
#app_jd_items div.app,#app_jd_items div.bank
{height:110px;padding-left:100px;
}
#app_jd_items div.app
{background:url(../images/app_jd_erwei.jpg) 15px center no-repeat;
}
#app_jd_items div.bank
{background:url(../images/app_jd_wangyin.png) 15px center no-repeat;
}
#app_jd_items h3
{text-align:left;padding-left:3px;color: #E4393C;
}
#app_jd_items a
{width: 97px;height: 29px;display: block; margin-bottom:6px;
}
#app_jd_items a.app
{background:url(../images/iconlist_2.png) 0px -360px no-repeat;
}
#app_jd_items a.android
{background:url(../images/iconlist_2.png) 0px -399px no-repeat;
}#service_items
{display:none;position:absolute; left:6px;top:29px;border:1px solid #ddd;background-color:#fff;box-shadow:0 0 10px #DDD; z-index:3;
}
#service_items li
{padding:0px 5px;margin:0px;
}#site_nav_items
{display:none;position:absolute;left: -182px;top:30px;z-index:3;width: 250px;height:214px;padding: 5px 0 20px 10px;border:1px solid #DDD;border-top:1px solid #fff;box-shadow:0 0 10px #DDD;background-color:#fff;
}
#site_nav_items h3
{clear:left;line-height: 20px;text-align:left; padding-top:5px;
}
#site_nav_items div
{clear:left;border-bottom: 1px solid #f2f2f2;width:245px;margin:5px 0px;padding-top:5px;
}
#site_nav_items ul li
{float:left;margin: 0 9px;min-width:58px;line-height: 22px;text-align:left;
}#top_main
{height:60px;padding:15px 0px;
}
#top_main>a
{display:block;width:330px;
}#search_box
{width: 510px;padding: 4px 86px 0 0;position:relative;
}#search_helper
{overflow: hidden;position: absolute;top: 38px;left: 0px;width: 416px;border: 1px solid #E4393C;background: #fff; box-shadow: 0 0 5px #999;display:none;z-index: 2;
}
#search_helper p
{padding: 1px 6px;line-height: 22px;cursor: pointer;
}
#search_helper p:hover,#search_helper ul li:hover
{background-color:#ffdfc6;
}
#search_helper p span,#search_helper ul li span
{float:right;line-height:22px;color:#aaa;
}
#search_helper ul
{ padding-right:5px;border-bottom:1px solid #ccc;
}
#search_helper ul li
{line-height:22px;text-indent:30px;
}
#search_helper ul li b
{color: #C00;line-height:22px;
}div.search
{width:494px;height: 30px;margin-bottom: 5px;border: 3px solid #E4393C;background-color:#E4393C;
}
input.text
{width: 405px;height: 20px;padding: 5px;background-color: #fff;line-height: 20px;color: #999;font-family: arial,"\5b8b\4f53";font-size: 14px;
}
input.button
{width: 75px;background: #E4393C;font-size: 14px;font-weight: 700;color: #fff;height: 30px;
}div.hot_words
{height: 18px;color: #999;overflow: hidden;
}
div.hot_words span,div.hot_words a
{float: left;font-weight: 400;margin-right: 10px;color: #999;
}
div.hot_words span
{margin:0px;
}#my_jd
{width: 106px;height: 30px;margin-top: 12px;position:relative;
}
div.my_jd_mt
{background-image: url(../images/iconlist_2.png);background-repeat: no-repeat;height: 30px;padding: 0 4px 0 30px;border: 1px solid #EFEFEF;background-position: -116px -24px;background-color: #F7F7F7;text-align: center;line-height: 27px;cursor: pointer;position:relative;
}
div.my_jd_mt b
{border-style: solid;border-width: 5px;border-color: #CCC transparent transparent transparent;line-height: 27px;cursor: pointer;position:relative;top:10px;right:-5px;
}
div.my_jd_mt:hover
{background-color:#fff;background-position: -116px -54px;z-index:20;border-bottom:0;
}#my_jd_items
{position: absolute;top: 30px;right: 0;width: 310px;border: 1px solid #E3E3E3;background: #fff;z-index:4;display:none;
}
#my_jd_items p
{padding: 6px 6px 6px 9px;border-bottom: 1px solid #EEE;line-height: 25px;
}
#my_jd_items p a
{color: #005EA7;margin-left:3px;
}
#my_jd_items ul
{border-right: 1px solid #F1F1F1; width: 134px;padding: 0 10px;
}
#my_jd_items li a
{display: block;height: 18px;overflow: hidden;padding: 5px;text-decoration: none;color: #005EA7;
}
#my_jd_items li a:hover
{background-color:#eee;color:#ff0700;
}#settle_up
{width: 145px;height: 30px;margin-top: 12px;position:relative;
}
div.settle_up_mt
{background-image: url(../images/iconlist_2.png);background-repeat: no-repeat;height: 30px;padding: 0 10px 0 30px;border: 1px solid #EFEFEF;background-position: -115px -84px;background-color: #F7F7F7;text-align: center;line-height: 27px;cursor: pointer;margin-left:10px;position:relative;
}
div.settle_up_mt b
{border-style: solid;border-width: 5px;border-color: #CCC transparent transparent transparent;line-height: 27px;cursor: pointer;position:relative;top:10px;right:-5px;
}
div.settle_up_mt:hover
{background-color:#fff;background-position: -115px -114px;z-index:20;border-bottom:0;
}#settle_up_items
{position: absolute;top: 30px;right: 0;width: 350px;z-index:4;border: 1px solid #ddd;padding: 10px 15px;background: #fff;display:none;
}
#no_goods
{margin-left: 30px;line-height: 49px;height: 49px;color: #999;
}
#no_goods b
{display:inline-block;width:56px;height:49px;background-image: url(../images/iconlist_2.png);background-repeat: no-repeat;background-position: 0 0;vertical-align:middle;
}
#no_goods p
{display:inline-block;line-height:49px;border:1px solid red;height:49px;
}#nav
{width:1210px;height:40px;margin: 10px auto;background: #E64346;border:1px solid yellow;
} #category
{width:210px;height:40px;float:left;position:relative;
}#nav_items
{float:left;
}
#nav_items li
{float:left;width:83px;height:40px;
}
#nav_items li a
{display:block;height:40px;width: 85px;text-align: center;color: #fff;font-weight: bold;font-size:15px;text-decoration: none; line-height:40px;
}
#nav_items li a:hover
{background-color:#BD2A2C;
}#cate_mt
{background: #CD2A2C;
}
#cate_mt>a
{display: inline-block;height: 40px;padding-left: 20px;line-height: 40px;color: #fff;font-size:14px;font-weight:bold;text-decoration:none;
}
#cate_mt>a:hover
{text-decoration:underline;
}
#cate_mt>span
{width:20px;height: 20px;background-image:url(../images/iconlist_2.png);background-position: -65px 0;background-repeat:no-repeat;display:block;float:right;margin-top:10px;
}#category_items{display: none; position: absolute;top: 40px;width: 203px;height: 402px;padding: 4px 3px 3px 0;background: #FAFAFA;border:2px solid #E4393C;border-top-width: 0px;overflow: visible;z-index:1;
}.cate_item
{width:190px;height:28px;border-bottom: 1px solid #FFF;
}
.cate_item>h3
{position:relative;margin:0px;padding:0px 0px 0px 13px;font-size:14px;width: 186px;height: 28px;line-height: 28px;border-width: 1px 0;font-weight: 400; background-image: url(../images/youjiantou.png);background-repeat: no-repeat;background-position: right center;
}
.cate_item>h3:hover
{border-top:1px solid #DDD;border-bottom:1px solid #DDD;background-image: none; background-color:#fff;z-index:3;
}
.cate_item>h3>a
{color:#333;text-decoration:none;
}.sub_cate_box
{position: absolute;left: 198px;top: 3px;width: 705px;border: 1px solid #DDD;background: #fff;overflow: visible;box-shadow: 0 0 10px #DDD;z-index:2;display:none;
}.sub_cate_items
{width:400px;float:left;
}
.sub_cate_items>div
{clear:left;padding:0px;margin:0px 0px 10px 10px;width:477px;border-bottom:1px solid #EEE;
}
.sub_cate_items>div>a
{display:block;float:left;width:54px;height:22px;line-height: 22px;text-align: right;padding: 3px 8px 0 0px;color: #E4393C;text-decoration: underline;font-weight:700;
}
.sub_cate_items p
{width:400px;line-height:22px;float:left;margin:0px;
}
.sub_cate_items p a
{ height:22px;line-height: 22px;text-align: right;padding: 0px 8px 0 0px;display:inline-block;padding: 0 4px;margin: 4px 0;border-left: 1px solid #ccc;color:#666;text-decoration:none;
}
.sub_cate_items p a:hover
{color:red;text-decoration:underline;
}.sub_cate_banner
{width:200px;float:right;padding:10px;
}
.sub_cate_banner>div
{width:100%;margin-bottom:5px;
}
.sub_cate_banner p
{padding: 3px 6px 0 0;font-weight: 700;color: #E4393C;
}
.sub_cate_banner li
{width: 194px;float:left;
}
.sub_cate_banner li a
{line-height:20px;color:#666; text-decoration:none;
}
.sub_cate_banner li a:hover
{ text-decoration:underline;
} div.close
{position: absolute;top: -1px;left: 706px;z-index: 2;width: 26px;height: 26px;background: #555;text-align: center;line-height: 26px;color: #fff;cursor: pointer;font-size: 26px;
}#main
{/*height:300px;*/
}/*ҳ�ţ����ܵ���*/
#foot_box
{height:173px;border-top:1px #DDD solid;border-bottom:1px #F1F1F1 solid;margin-top:12px;background: #FFF;
}
#foot_box p
{display:inline-block;width:40px;height:40px; float:left;margin:5px 5px 0px 40px;
}
#foot_box ul
{width:140px;float:left;}#foot_box ul li
{line-height:22px;}#foot_box ul li b
{font-weight:bold;line-height:30px;}#foot_box a:hover {color:#ff0700;}p.shopping_guide {background:url(../images/iconlist_2.png) 0px -55px no-repeat;}
p.send_type {background:url(../images/iconlist_2.png) -50px -55px no-repeat;}
p.pay_type {background:url(../images/iconlist_2.png) 0px -102px no-repeat;}
p.sale_service {background:url(../images/iconlist_2.png) -50px -102px no-repeat;}
p.special_service {background:url(../images/iconlist_2.png) 0px -149px no-repeat;}#footer
{height:180px;text-align:center;font-size:12px;margin:22px auto;
}.copyright
{width:800px;margin:0px auto;margin-top:12px;line-height:20px;
}
.links a
{margin:0px 10px;
}
.authentication
{margin:12px auto;width:532px;
}
.authentication a
{margin:10px 12px;float:left;
}
#footer a:hover {color:#ff0700;}#footmark
{width: 1210px;margin:0px auto;
}#may_like,#recent_view
{padding: 0 9px;border: 1px solid #ddd;border-top: 2px solid #999;margin-bottom: 10px;height:276px;
}#may_like p,#recent_view p
{height: 30px;line-height: 30px;
}#may_like p span,#recent_view p span
{display:block;width: 50%;font-weight: 400;
}#may_like p b,#recent_view p b
{background:url("../images/update.png") left center no-repeat;padding-left:20px;display:block;font-weight: 400;color: #005ea7;
}
#may_like ul
{padding-top: 15px;margin-right: -10px;
}#may_like ul li
{padding-left: 20px;width: 150px;height: 216px;float: left;margin: 0 8px 0 0;padding: 0 18px 15px;text-align: center;
}
#may_like ul li a:hover
{color:#ff0700;
}
#may_like ul li div
{padding: 5px 0;
}
#may_like ul li p
{height: 36px;line-height:18px;margin:0;padding:0;
}
#may_like ul li h5
{line-height:20px;
}
#may_like ul li h5 a
{color: #005ea7;
}
#may_like ul li h6,#recent_view ul li h6
{line-height: 20px;color: #e3393c;
}/*������*/
#recent_view
{height:156px;
}
#recent_view p b
{background-image:none;
}
#recent_view ul
{padding-top: 14px;
}
#recent_view ul li
{margin: 0 2px 0 3px;width: 86px;float: left;padding-bottom: 14px;text-align: center;
}
#recent_view ul li div
{height:70px;padding: 5px 0;
}/*�Ҳ�ĸ�����*/
#side_panel
{position:fixed;right: 43.5px;bottom: 65px;display: block;
}
#side_panel a
{background-position: -85px -149px;display: block;position: relative;width: 17px;height: 66px;padding: 10px 4px 20px;margin: 5px 0;text-align: center;line-height: 14px;background-repeat: no-repeat;background-image:url("../images/iconlist_2.png");
}
#side_panel a b
{display:block;margin-bottom:5px;width: 17px;height: 16px;overflow: hidden;background-image: url("../images/iconlist_2.png");background-repeat: no-repeat;
}
#side_panel a.research b
{background-position: 0 -219px;
}
#side_panel a.research:hover,#side_panel a.gotop:hover
{background-position: -50px -149px;text-decoration:none;
}
#side_panel a.research b:hover
{background-position: 0 -200px;
}#side_panel a.gotop b
{background-position: -21px -219px;
}
#side_panel a.gotop b:hover
{background-position: -21px -200px;
}/*������*/
@keyframes myfirst
{from {transform: rotate(0deg);-ms-transform: rotate(0deg); /* IE 9 */-webkit-transform: rotate(0deg); /* Safari and Chrome */-o-transform: rotate(0deg); /* Opera */-moz-transform: rotate(0deg); /* Firefox */}to {transform: rotate(720deg);-ms-transform: rotate(720deg); /* IE 9 */-webkit-transform: rotate(720deg); /* Safari and Chrome */-o-transform: rotate(720deg); /* Opera */-moz-transform: rotate(720deg); /* Firefox */}
}@-webkit-keyframes myfirst
{from {transform: rotate(0deg);-ms-transform: rotate(0deg); /* IE 9 */-webkit-transform: rotate(0deg); /* Safari and Chrome */-o-transform: rotate(0deg); /* Opera */-moz-transform: rotate(0deg); /* Firefox */}to {transform: rotate(720deg);-ms-transform: rotate(720deg); /* IE 9 */-webkit-transform: rotate(720deg); /* Safari and Chrome */-o-transform: rotate(720deg); /* Opera */-moz-transform: rotate(720deg); /* Firefox */}
}@-moz-keyframes myfirst
{from {transform: rotate(0deg);-ms-transform: rotate(0deg); /* IE 9 */-webkit-transform: rotate(0deg); /* Safari and Chrome */-o-transform: rotate(0deg); /* Opera */-moz-transform: rotate(0deg); /* Firefox */}to {transform: rotate(720deg);-ms-transform: rotate(720deg); /* IE 9 */-webkit-transform: rotate(720deg); /* Safari and Chrome */-o-transform: rotate(720deg); /* Opera */-moz-transform: rotate(720deg); /* Firefox */}
}@-o-keyframes myfirst
{from {transform: rotate(0deg);-ms-transform: rotate(0deg); /* IE 9 */-webkit-transform: rotate(0deg); /* Safari and Chrome */-o-transform: rotate(0deg); /* Opera */-moz-transform: rotate(0deg); /* Firefox */}to {transform: rotate(720deg);-ms-transform: rotate(720deg); /* IE 9 */-webkit-transform: rotate(720deg); /* Safari and Chrome */-o-transform: rotate(720deg); /* Opera */-moz-transform: rotate(720deg); /* Firefox */}
}#top_box>img:hover
{animation: myfirst 0.5s;-moz-animation:myfirst 0.5s; /* Firefox */-webkit-animation:myfirst 0.5s; /* Safari and Chrome */-o-animation:myfirst 0.5s; /* Opera */
}
product_left.css
/*左侧的相关信息*/
a:hover
{color:#E4393C;
}
#left_product
{float: left;width: 210px;
}#left_product div.m_title
{border: 1px solid #ddd;height: 28px;line-height: 28px;font: 14px/30px 'microsoft yahei';background-color: #f7f7f7;font-weight: 400;padding: 0 8px;font-size: 14px;
}
#left_product .m_content
{border: 1px solid #ddd;border-top: 0;overflow: hidden;padding: 4px 2px 4px 6px;
}
#related_sorts,#related_brands,.view_buy,#rank_list
{margin-bottom: 10px;overflow:hidden;
}
#related_sorts li
{float: left;width: 94px;height: 18px;padding: 3px 6px 3px 0;overflow: hidden;
}
#related_brands li
{float: left;width: 60px;height: 18px;padding: 3px 6px 3px 0;overflow: hidden;
}
.view_buy li
{border-bottom: 1px dotted #DEDEDE;
}
.view_buy p
{text-align:center;padding: 5px 0;margin-bottom:5px;
}
.view_buy p img
{background: url(../images/loading-jd.gif) no-repeat 50% 50%;border: 0;vertical-align: middle;height: 100px;width: 100px;
}
.view_buy a
{line-height:18px;
}
.view_buy a:hover
{color:#E4393C;
}
.view_buy h2
{margin-bottom:10px;text-align:center;
}
.view_buy h2 a
{color:#E4393C;font-weight:bold;text-decoration:none;
}
.view_buy .no_bottom
{border-bottom:0;
}
/*品牌的排行榜*/
#rank_list .m_content
{padding:0px 5px 5px 0px;
}
.m_tabs
{width: 100％;padding-left: 5px;margin: 8px auto 0;border-bottom: 1px solid #DEDFDE;overflow: visible;float: left;
}
.m_tabs li
{width: 58px;height: 20px;border: solid #DEDFDE;border-width: 1px 1px 0;margin-right: 4px;text-align: center;line-height: 20px;color: #333;cursor: default;background-color: #f7f7f7;float:left;
}
.m_tabs li.current
{font-weight: 700;background-color: #fff;color: #e4393c;height: 21px;margin-bottom: -1px;
}
.m_list
{padding:0 5px;overflow:hidden;
}
.m_list li
{position: relative;height: 50px;padding: 8px 0 8px 70px;border-bottom: 1px dotted #DEDEDE;
}
.m_list li span
{display:block;width: 18px;height: 18px;line-height:18px;background-position: -256px -322px;text-align: center; font-size: 10px;color: #ddd;background-image: url(../images/iconlist_1.png);background-repeat: no-repeat; position:absolute;left:-3px;top: 8px;
}
.m_list li span.hot
{color: #e4393c;background-position: -232px -322px;
}
.m_list li img
{position:absolute;left:15px;top:8px;background: url(../images/error-jd.gif) no-repeat 50% 50%;vertical-align:middle;width:50px;height:50px;
}
.m_list h2
{font-size:12px;color: #E4393C;font-weight: bold;margin-top:20px;
}
.m_list .no_bottom
{border-bottom:0;
}
#left_shows li
{margin-bottom:10px;
}
product_right_detail.css
/*右侧的产品详细*/
#product_detail
{position:relative;padding-top: 2px;background: url(../images/tab.png) 0 -41px repeat-x;margin-bottom: 10px;
}/*加入购物车*/
#minicart
{padding:1px;position: absolute;right: 0;top: 1px;font-size: 12px;width: 229px;margin: -1px -1px 0 0;
}
div.minicart
{border: 1px solid #ddd;background: #fff;box-shadow: 0 0 5px #DDD;
}
#minicart p
{text-align:right;
}
#minicart p a
{display: inline-block;width: 105px;height: 21px;background-position: 0 -46px;background-image: url(../images/iconlist_3.png);background-repeat: no-repeat;line-height: 100px;overflow: hidden;margin: 3px 3px 0 0;cursor: pointer;
}
#minicart img
{float: left;margin: 5px 10px;
}
#minicart h1
{line-height: 1.5em;height: 4.5em;margin: 10px;color: #333;font-weight: 400;font-size:12px;
}
#minicart h2
{line-height: 1.2em;color: #999;font-weight: 400;font-size:12px;
}
#minicart h2 b
{font-weight: 700;color: #e4393c;
}/*商品介绍*/
#product_info
{clear:both;
}
ul.detail_list
{padding: 8px;border:1px solid #DEDFDE;border-width: 0 1px 1px;overflow: hidden;
}
ul.detail_list li
{float: left;width: 33%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 4px 0;
}
.detail_correct
{padding:8px 0;
}
.detail_correct b
{display: inline-block;width: 18px;height: 15px;background-position: -260px -270px;background-image: url(../images/iconlist_1.png);background-repeat: no-repeat;margin-right: 5px;vertical-align: middle;
}
.detail_correct a
{color:#005aa0;
}
.detail_content
{text-align:center;
}
.detail_content>div
{width: 753px;
}
/*虚线分隔线，京东分隔线*/
.dotted_split,.jd_split
{overflow: hidden;width: 100%;padding: 5px 0;border-bottom: 1px dashed #e6e6e6;line-height: 23px;font-family: Arial,Helvetica,sans-serif;font-size: 14px;margin:0px auto;margin-bottom:10px;
}
.jd_split
{text-align: left;border:0;background-position: 0 -90px;background-image: url(../images/iconlist_6.png);background-repeat: no-repeat;height:30px;font-family: "\5fae\8f6f\96c5\9ed1";font-size:12px;
}
.jd_split b
{font-size: 18px;color: #C90014;padding-left: 2px;padding-top: 12px;line-height: 25px;font-weight:normal;
}
.jd_split span
{color: #666;padding-left: 10px;line-height: 25px;padding-top: 16px;
}
/*商品详细*/
.detail_content table
{width:750px;border-collapse: separate;border-spacing: 6px;text-align:left;vertical-align:middle;margin:0px auto;
}
.detail_content table h1
{line-height: 25px;font-size: 14px;font-weight: 700;margin-bottom:10px;
}
.detail_content table p
{line-height: 22px;font-size: 12px;
}
/*规格参数*/
#product_data
{display:none;
}
#product_data table
{margin: 10px 0;border-collapse:collapse;width: 100%;border:1px solid #ccc;
}
#product_data table td
{border:1px solid #ccc;padding: 2px 5px;font-size: 12px;text-align:left;
}
#product_data table th
{background: #F5FAFE;font-weight:bold;padding:5px;text-align:center;
}
#product_data td.td_title
{text-align: right;width: 110px;background: #F5FAFE;
}
/*包装清单，售后保障*/
#product_package,#product_saleAfter
{display:none;
}
#product_package p,#product_saleAfter p
{padding: 10px;
}
product_right_more.css
/*服务承诺*/#promise {padding: 10px;overflow: hidden;border-top: 1px dotted #DEDEDE;
}#promise b {font-weight: bold;
}#promise p {margin-top: 5px;margin-bottom: 10px;
}#promise a {color: #005AA0;
}/*权利声明*/#state {padding: 10px;overflow: hidden;border-top: 1px dotted #DEDEDE;
}#state span {font-weight: bold;color: #e4393c;
}#state p {margin-top: 5px;margin-bottom: 10px;
}/*商品评价*/#comment {border-top: 2px solid #999;margin-bottom: 10px;overflow: hidden;
}div.rate {width: 190px;padding: 20px 0 0;text-align: center;float: left;
}div.rate span {font: 400 46px/30px arial;color: #e4393c;font-weight: bold;
}div.rate b {font-size: 24px;color: #e4393c;font-weight: normal;
}div.rate p {color: #999;font-family: arial;
}div.percent {float: left;width: 186px;height: 74px;padding: 8px 0;border-right: 1px solid #E4E4E4;
}div.percent dl {float: left;padding: 2px 0;overflow: hidden;
}div.percent dt {float: left;width: 70px;
}div.percent dt span {color: #9C9A9C;
}div.percent dd {float: left;width: 100px;height: 10px;margin-top: 6px;overflow: hidden;background-color: #efefef;
}div.percent dd p {overflow: hidden;height: 10px;background-image: linear-gradient(to bottom, #ED0000 0, #A50000 100%);
}div.buyers {width: 398px;float: left;position: relative;height: 85px;padding: 5px 15px 0;line-height: 15px;border-right: 1px solid #E4E4E4;white-space: nowrap;
}div.buyers p {line-height: 15px;
}div.buyers ul {width: 398px;
}div.buyers ul li {margin-top: 5px;float: left;height: 21px;line-height: 21px;padding: 0 7px;margin-right: 5px;background: #fdedd2;color: #333;
}div.buyers ul li span {color: #999;
}#comment div.btns {padding-right: 10px;float: right;width: 140px;height: 75px;padding-top: 5px;line-height: 15px;text-align: center;
}#comment div.btns b {color: #e4393c;font-weight: normal;
}#comment div.btns a,
#comment div.btns a:hover {color: #005aa0;text-decoration: none;
}#comment div.btns a.btn_comment {color: #333;display: block;overflow: hidden;margin: 5px auto;width: 119px;height: 30px;line-height: 30px;background-image: url(../images/iconlist_1.png);background-repeat: no-repeat;background-position: -142px -390px;
}/*评价详细*/#comment_list {margin-bottom: 10px;padding-top: 2px;background: url(../images/tab.png) 0 -41px repeat-x;
}#comment_list>div {padding-top: 10px;
}.comment_item {position: relative;padding: 0 0 2px 120px;margin-top: 8px;background: #fff;clear: both;
}.comment_item ul {position: absolute;top: 10px;left: 0;width: 120px;text-align: center;color: #9C9A9C;
}.comment_item ul li {width: 120px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 20px;
}.comment_item ul li img {width: 50px;height: 50px;padding: 8px;background: url(../images/avatar-bg.png) no-repeat 0 0;vertical-align: middle;
}.comment_item ul li b {color: #088000;
}.comment_item ul li span {margin-left: 5px;
}.comment_item>div {padding: 10px 15px 5px;border: 1px solid #d0e4c2;background: #fcfffa;
}div.topic {padding: 0 0 2px;margin-bottom: 10px;border-bottom: 1px solid #d0e4c2;overflow: hidden;
}div.topic p {float: left;margin: 1px 0 3pxs 5px;background-position: -109px -239px;background-image: url(../images/iconlist_1.png);background-repeat: no-repeat;display: inline-block;width: 75px;height: 14px;
}div.topic p.star5 {background-position: -109px -239px;
}div.topic p.star4 {background-position: -124px -239px;
}div.topic p.star3 {background-position: -139px -239px;
}div.topic p.star2 {background-position: -154px -239px;
}div.topic p.star1 {background-position: -169px -239px;
}div.topic a {float: right;color: #9C9A9C;margin-left: 10px;
}div.comment_item table {padding: 2px 0;overflow: hidden;color: #666;vertical-align: top;
}div.comment_item td.comment_option {width: 62px;height: 25px;line-height: 25px;text-align: right;color: #9C9A9C;vertical-align: top;
}td.comment_tag span {color: #333;float: left;height: 21px;line-height: 21px;padding: 0 7px;margin-right: 5px;background: #fdedd2;
}td.comment_show {vertical-align: bottom;overflow: hidden;margin: 5px 0 0 5px;
}td.comment_show a {display: inline-block;width: 118px;height: 96px;border: 1px solid #d3d3d3;background: #fff;padding: 2px 5px;margin-right: 5px;
}td.comment_show a img {width: 118px;height: 96px;
}td.comment_show b {padding: 0px 1px;font-weight: normal;
}td.comment_show a {color: #005ea7;display: inline;border: 0;
}p.btns {text-align: right;margin-bottom: 15px;
}p.btns a {margin-right: 10px;line-height: 20px;padding: 5px 10px;border: 1px solid #d5d5d5;text-decoration: none;text-align: center;background-image: linear-gradient(to bottom, #fafafa 0, #f2f2f2 100%);border-radius: 3px;color: #333;
}div.reply_lz {overflow: hidden;clear: both;padding-left: 50px;margin-top: 0px;display: none;
}div.reply_form {border: 1px solid #d9d9d9;background: #f5f5f5;padding: 5px 10px 10px 10px;margin-top: 10px;margin-bottom: 5px;clear: both;overflow: hidden;
}div.reply_form p {color: #999;margin-bottom: 10px;
}div.reply_form p a,
div.reply_form p a:hover {margin-left: 2px;color: #666;text-decoration: none;
}div.reply_form input.txt {width: 684px;height: 15px;line-height: 12px;padding: 4px 5px;border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;border-left: 1px solid #aaa;border-top: 1px solid #aaa;
}div.reply_form input.btn {color: #333;margin-left: 5px;width: 51px;height: 23px;line-height: 23px;border-top: 1px solid #DEDEDE;border-right: 1px solid #B5B6B5;border-bottom: 1px solid #B5B6B5;border-left: 1px solid #DEDEDE;text-align: center;background: linear-gradient(to bottom, #fafafa 0, #f2f2f2 100%);
}div.comment_reply {border-top: 1px dotted #F7E7C6;padding-left: 50px;
}div.comment_reply span {width: 45px;color: #BEBEBE;font-size: 20px;font-family: arial;text-align: right;float: left;display: inline;margin: 5px 0 0 -45px;font-weight: bold;
}div.comment_reply p {padding: 5px;color: #999;float: left;
}div.comment_reply b {font-weight: normal;color: #666;margin: 0px 3px;
}div.comment_reply h4 {padding: 5px;float: left;font-weight: normal;
}div.comment_reply div {clear: left;padding: 5px;
}div.comment_reply div a {color: #005AA0;float: right;margin-right: 50px;
}div.corner {padding: 0px;border: 0;position: absolute;overflow: hidden;top: 10px;left: 108px;width: 14px;height: 26px;background-position: -259px -47px;background-image: url(../images/iconlist_1.png);background-repeat: no-repeat;
}/*评论的页码*/#comment_list #pages {font: 12px Arial, Verdana, "\5b8b\4f53";color: #666;margin-top: 10px;margin-bottom: 20px;text-align: right;float: right;
}#comment_list #pages a {padding: 3px 10px;border: 1px solid #ccc;margin-left: 2px;font-family: arial;line-height: 20px;font-size: 14px;border-radius: 5px;color: #005aa0;text-decoration: none;
}#comment_list #pages a:hover {background-color: #005aa0;color: #fff;
}#comment_list #pages a.current {color: #f60;font-weight: 700;border: 0;padding: 4px 11px;
}#comment_list #pages a.current {background-color: #fff;
}a.comment_show_all {padding: 8px 0 0 120px;color: #005AA0;float: left;
}/*咨询*/#consult {margin-bottom: 10px;padding-top: 2px;background: url(../images/tab.png) 0 -41px repeat-x;
}#consult .m_content {padding-left: 15px;line-height: 20px;
}#txt_consult_search {width: 130px;border: 1px solid #ccc;padding: 3px 0;margin-left: 10px;
}#btn_consult_search {width: 53px;height: 25px;border: 0;background-position: -103px -112px;background-image: url(../images/iconlist_1.png);background-repeat: no-repeat;cursor: pointer;padding: 1px 6px;
}#add_consult {padding: 6px 10px;font-size: 12px;font-family: simsun;color: #fff;background-color: #e74649;border-radius: 2px;background: linear-gradient(to bottom, #e74649 0, #df3033 100%);margin-left: 50px;
}#consult_result {padding: 7px 20px;background: #F4F9FF;overflow: hidden;
}#consult_result p {float: left;
}#consult_result p span {color: #f30;font-weight: bold;
}#consult_result p a {color: #005aa0;margin-left: 15px;
}#consult_result h4 {color: #d75509;float: right;font-weight: normal;
}.consult_item {padding: 8px 0;border-bottom: 1px dotted #DEDEDE;color: #9C9A9C;
}.consult_item p b {font-weight: normal;display: inline-block;width: 120px;margin-left: 10px;
}.consult_item p span {margin-left: 20px;
}.consult_ask {margin-top: 8px;overflow: hidden;color: #666;
}.consult_ask li,
.consult_answer li {float: left;
}li.consult_title {width: 62px;margin-right: 5px;
}.consult_answer {margin-top: 8px;overflow: hidden;color: #FF6500;
}li.consult_answer_time {color: #9C9A9C;float: right;
}#consult_extra {margin-top: 4px;
}#consult_extra a {color: #005aa0;
}#consult_extra a.offline {background: url(../images/words.png) 0 0 no-repeat;padding-left: 27px;margin-left: 5px;width: 59px;height: 24px;line-height: 24px;display: inline-block;color: #ccc;
}#consult_extra p {float: right;line-height: 24px;
}#consult_extra p span {font-weight: bold;
}#consult_extra p a {margin-left: 5px;
}/*讨论*/#discuss {margin-bottom: 10px;padding-top: 2px;background: url(../images/tab.png) 0 -41px repeat-x;
}/*表格*/#discuss-datas {width: 990px;border-spacing: 2px;
}#discuss-datas a,
.discuss_extra a {color: #005aa0;
}#discuss-datas td {border-bottom: 1px dotted #DEDEDE;padding: 6px 0px;text-align: center;color: #9C9A9C;
}#discuss-datas tr.header td {height: 18px;border-bottom: 1px solid #dedfde;font-weight: bold;color: #666;
}#discuss-datas td.col1 {width: 620px;text-align: left;
}#discuss-datas td.col2 {width: 70px;
}#discuss-datas td.col3 {width: 80px;
}#discuss-datas td.col4 {width: 130px;
}#discuss a {text-decoration: none;padding-left: 6px;
}#discuss a:hover {text-decoration: underline;
}b.topic {padding-bottom: 5px;padding-left: 20px;line-height: 19px;background-repeat: no-repeat;background-image: url(../images/iconlist_1.png);
}.shai {background-position: -110px -220px;
}.lun {background-position: -152px -220px;
}/*其他讨论*/div.discuss_extra {width: 990px;height: 18px;margin-top: 6px;
}div.newdiscuss {float: left;
}div.totaldiscuss {float: right;
}
product_right.css
/*右侧的相关信息*/
#right_product
{width: 990px;float:right;
}/*优惠套装*/
#favorable_suit,#recommend
{margin-bottom: 10px;padding-top: 2px;background: url(../images/tab.png) 0 -41px repeat-x;
}
p.main_tabs
{padding:0px 8px;
}
.m_content
{padding: 10px 0;border: 1px solid #ddd;border-top: 0;clear:both;overflow:hidden;
}
.sub_tabs
{margin-bottom: 10px;overflow:hidden;
}
.sub_tabs li
{padding: 0 15px;height: 16px;cursor: pointer;border-left: 1px solid #D4D1C8;line-height: 16px;text-align: center;color: #005aa0;float:left;cursor:pointer;
}
.sub_tabs li.current
{border:0;font-weight: 700;color: #333;
}
.sub_content
{overflow:hidden;
}
.master
{float: left;width: 155px;padding: 0 0 10px 10px;overflow: hidden;
}
span.add
{float: right;width: 24px;height: 22px;margin-top: 40px;margin-bottom: 80px;margin-right: 3px;background-image: url(../images/iconlist_1.png);background-repeat: no-repeat;background-position: 0 -260px;
}
.master p
{width: 100px;padding: 0 13px;
}
.suits
{width:620px;float:left;overflow-x: auto;padding-bottom: 10px;
}.suits ul
{width:495px;padding-bottom: 10px;
}.suits ul li
{width: 145px;padding-left: 20px;float:left;
}.infos
{float: left;width: 190px;line-height: 20px;padding-left: 10px;
}
.infos span
{float: left;width: 24px;height: 22px;background-position: -30px -260px;margin-top: 40px;background-image: url(../images/iconlist_1.png);background-repeat: no-repeat;line-height: 20px;
}
.infos h1
{height:36px;margin-left: 35px;
}
.infos h1 a
{ color:#005AA0;font-weight:700;
}
.infos p,.infos .btns
{margin-left: 35px;color:#999;line-height:20px;
}
.empasis
{color: #E4393C;
}
.strike
{text-decoration: line-through;
}.btn_buy, .btn_buy:hover{display: block;width: 77px;height: 25px;margin-top: 10px;text-align: center;line-height: 25px;color: #fff;font-weight: 700;background-image: url(../images/iconlist_1.png);background-repeat: no-repeat;background-position: -166px -112px;text-decoration:none;}/*推荐配件*/
.main_tabs
{height: 28px;overflow:visible;border-left: 1px solid #ddd;border-right: 1px solid #ddd;font: 14px/30px 'microsoft yahei';font-weight: 400;cursor:pointer;
}
.main_tabs li
{float:left;text-align:center;text-align:center;
}
.main_tabs li a
{height: 30px;line-height: 28px;font: 14px/30px 'microsoft yahei';font-weight: 400;padding:0 13px;
}.main_tabs li.current
{height:34px;color: #e4393c;background-color: #fff;margin-top: -6px;margin-left:-1px;border-left: 1px solid #ddd;border-right: 1px solid #ddd;border-top: 2px solid #e4393c;
}
.main_tabs li.current a
{height: 36px;line-height: 36px;padding: 0 12px;color: #e4393c;
}
#recommend .infos h1 a
{ color:#666;font-weight:700;
}input[type="checkbox"]
{margin: 3px 3px 3px 4px;vertical-align:middle;
}
.suits label
{color: #E4393C;font-weight:bold;
}
product.css
@charset "utf-8";
/*产品详细页面的样式*//*类别导航路径*/
div.bread-crumb
{width:1204px;height:20px;height: 20px;padding: 0 0 4px 6px;margin-bottom: 10px;overflow: hidden;line-height: 20px;
}
div.bread-crumb a
{padding-right:3px;
}
div.bread-crumb a:hover
{color: #cd2a2c;text-decoration: underline;
}
div.bread-crumb b
{ font-weight: 700;line-height: 20px;font-size: 18px;font-family: "microsoft yahei";
}
div.bread-crumb span
{padding:0px 2px;
}/*产品介绍*/
#product_intro
{position:relative;padding-left:370px;height:474px;min-height: 474px;
}
/*产品预览*/
#preview
{position: absolute;top: 0;left: 0;width: 352px;
}
#preview>p
{width: 350px;height: 350px;border: 1px solid #ddd;margin-bottom: 5px; text-align:center;
}
#preview p img
{vertical-align:middle;width:350px;height:350px;
}
#preview h1
{width: 352px;height: 54px;overflow:hidden;padding: 0px;position:relative;
}
/*前后移动的按钮*/
#preview a.backward,#preview a.forward,#preview a.backward_disabled,#preview a.forward_disabled
{width: 17px;height: 54px;background-image: url(../images/iconlist_1.png);background-repeat: no-repeat;display:block;
}
#preview a.backward,#preview a.backward_disabled
{z-index:20;position:absolute;top:0px;left:0px;
}
#preview a.forward,#preview a.forward_disabled
{z-index:20;position:absolute;top:0px;right:0px;
}
#preview a.backward
{background-position: 0px -139px;
}
#preview a.backward:hover
{background-position: -34px -139px;
}
#preview a.backward_disabled
{background-position: -68px -139px;
}
#preview a.forward
{background-position: -17px -139px;
}
#preview a.forward:hover
{background-position: -51px -139px;
}
#preview a.forward_disabled
{background-position: -85px -139px;
}
/*产品的图标列表*/
#preview h1 div
{width:310px;height: 54px;margin:0px auto;position:relative;
}
#preview h1 div ul
{position:absolute;left: 0px;top: 0px;
}
#preview h1 ul li
{width: 62px;text-align: center;float: left;
}
#preview h1 ul li img
{width: 50px;height: 50px;padding: 1px;border: 1px solid #CECFCE;
}
/*#preview h1 ul li img:hover
{border: 2px solid #e4393c;padding: 0;
}*/
#preview h1 ul li img.hoveredThumb{border: 2px solid #e4393c;padding: 0;
}
/*中等大小的图片显示区域*/
p#medimImgContainer{position: relative;
}
#medimImgContainer #mask{display: block;position: absolute;left: 0;top: 0;width: 175px;height: 175px;background: #ffa;opacity: 0.7;display: none;
}
/*悬于图片/mask上方的专用于接收鼠标移动事件的
一个完全透明的层*/
#medimImgContainer #maskTop{display: block;position: absolute;width: 100%;height: 100%;top: 0;left: 0;cursor: move;opacity: 0;
}/**
产品大图显示区域
**/
#medimImgContainer #largeImgContainer{position:absolute;width: 350px;height: 350px;top: -1px;left: 352px;background: #fff;z-index: 500;overflow: hidden;border: 1px solid #ddd;display: none;/*效果演示*//*overflow: visible;display: block;border: 1px solid red;*/
}
#medimImgContainer #largeImgContainer img{width: auto;height: auto;/* !*效果演示*!z-index: -50;opacity: 0.6;*/
}
#largeImg{display: none;position: absolute;
}/*产品图片下方的分享等*/
#short_share
{padding-top: 20px;position: relative;
}
#short_share>a
{width: 74px;height: 25px;line-height: 25px;background: url(../images/iconlist_1.png) -1px -287px no-repeat;padding-left: 5px;display: block;text-align: right;padding-right: 10px;
}
#short_share>span
{background: url(../images/iconlist_3.png) 0px -399px no-repeat;display:block;margin: 0 5px;text-align: center;overflow: hidden;width: 92px;height: 25px;
}
#short_share>span.selected,#short_share>span:hover
{background: url(../images/iconlist_3.png) -157px -399px no-repeat;
}
#short_share div
{width: 155px;border: 1px solid #ddd;border-right: 0;height:23px;line-height:23px;position:absolute;top:20px;left:200px;
}
#short_share div span
{padding-left:8px;line-height:23px;height: 23px;display:block;float:left;
}
#short_share div a
{line-height: 23px;width: 22px;height: 23px;float:left;
}
#short_share div a.share_sina
{background: url(../images/iconlist_1.png) -190px -166px no-repeat;
}
#short_share div a.share_qq
{background: url(../images/iconlist_1.png) -102px -166px no-repeat;
}
#short_share div a.share_renren
{background: url(../images/iconlist_1.png) -146px -166px no-repeat;
}
#short_share div a.share_kaixin
{background: url(../images/iconlist_1.png) -168px -166px no-repeat;
}
#short_share div a.share_douban
{background: url(../images/iconlist_1.png) -124px -166px no-repeat;
}
#short_share div a.share_more
{border-left: 1px solid #ddd;border-right: 1px solid #ddd;float:right;
}
#short_share div a.share_more b
{background: url("../images/iconlist_1.png") -271px -258px no-repeat ;margin:6px 7px;width: 7px;height:11px;cursor: pointer;display:block;
}
#short_share div a.share_more b.backword
{background: url("../images/iconlist_1.png") -263px -258px no-repeat ;
}/*产品介绍右侧：name*/
#product_intro>h1
{width:840px;font: 700 16px/1.5em Arial,Verdana,"microsoft yahei";padding-bottom: 10px;border-bottom: 1px dotted #ccc;
}
#product_intro>h1>b
{display: block;color: #e4393c;font-size: 16px;
}
/*产品介绍右侧：summary*/
#summary
{width: 600px;padding: 10px 0;
}
#summary li
{padding: 6px 0;height:18px;
}
#summary a
{color: #005aa0;
}
div.title
{width:72px;font-family: simsun;float: left;text-align:right;height:23px;line-height:23px;
}
div.content
{width:524;float: left;min-height:23px;line-height:23px;
}
#summary_price b
{color: #e4393c;font-size: 18px;font-weight: bold;
}
#summary_grade span
{margin: 1px 5px 0 0;background-position: -109px -239px;display: inline-block;width: 75px;height: 14px;background-image: url(../images/iconlist_1.png);background-repeat: no-repeat;
}
#summary_grade a.words
{margin: -3px 0 0 5px;background: url(../images/words.png) 0 0 no-repeat;display: inline-block;padding-left: 27px;width: 59px;height: 24px;line-height: 24px;color:#CCC;font-weight:400;
}
#summary_stock b
{font-size:14px;
}
#summary_stock i
{font-weight:bold;font-style:normal;
}
#summary_service a {display: inline-block;height: 16px;line-height: 16px;margin-right: 5px;background-image: url(../images/promise.png);background-repeat: no-repeat;vertical-align: middle;
}
.sendpay_211
{width: 78px;background-position: 0 -64px;
}
.jingdou_xiankuan
{width: 80px;background-position: 0 -576px;
}
.special_ziti
{width: 43px;
background-position: 0 -320px;
}
/*选择购买*/
#choose
{width: 598px;border-top: 1px dotted #ddd;padding-top: 10px;margin-bottom: 20px;
}
#choose_color div.title
{margin-top:6px;
}
#choose_color a
{position:relative;float:left;margin: 2px 8px 2px 0;padding:1px 6px 1px 1px;border: 1px solid #ccc;
}
#choose_color a.selected
{padding:0px 5px 0px 0px;border: 2px solid #e4393c;
}
#choose_color a img
{vertical-align:middle;
}
#choose_color a.selected b
{display:block;position: absolute;bottom: 0;right: 0;width: 12px;height: 12px;overflow: hidden;background-image: url(../images/iconlist_1.png);background-repeat: no-repeat;background-position: -202px -224px;
}
#choose_amount
{clear:both;padding-top:10px;
}
#choose_amount a.btn_reduce,#choose_amount a.btn_add
{background-position: -216px -190px;float:left;background-image: url(../images/iconlist_1.png);background-repeat: no-repeat;width: 15px;height: 15px;margin-top:5px;
}
#choose_amount a.btn_add
{float:left;background-position: -232px -190px;
}
#choose_amount input
{width: 30px;height: 16px;border: 1px solid #ccc;padding: 2px;text-align: center;float:left;margin:0px 3px;
}
#choose_result
{padding: 10px 0 0 10px;clear:both;color: #e4393c;
}
#choose_btns a
{height: 38px;line-height: 38px;float: left;margin:10px 6px 0px 0px;
}
a.choose_btn_append
{width: 137px;background-image: url(../images/iconlist_3.png);background-repeat: no-repeat;background-position: 0 0;
}
a.choose_baitiao_fq
{width:100px;background-image: url(../images/baitiao_fq.png);
}
a.choose_mark
{width:78px;background-image: url(../images/iconlist_3.png);background-position: 0 -307px;
}
div.m_buy
{float: left;border: 1px solid #ddd;height: 40px;padding:10px 70px 0px 10px;background: url(../images/iconlist_4.png) right 3px no-repeat;cursor: pointer;margin-top: 6px;
}
div.m_buy span
{margin-top:5px;
}
div.m_buy p
{padding-top:5px;color: #e4393c;font-weight:bold;
}/*送货地址的下拉选择框*/
#store_select
{position: relative;height: 26px;margin-right: 6px;float:left;
}
div.text
{position:relative;height: 23px;background: #fff;border: 1px solid #CECBCE;padding: 0 20px 0 4px;line-height: 23px;overflow: hidden;/*z-index:1;*/
}
div.textHover
{border-bottom:2px solid #fff;
}
div.text p
{line-height:23px;
}
div.text b
{display: block;position: absolute;top: 0;right: 0;width: 17px;height: 24px;background-position: -264px -188px;background-image: url(../images/iconlist_1.png);background-repeat: no-repeat;
}
/*弹出的选择地址框*/
#store_content
{position: absolute;top: 25px;left: -45px;border: 1px solid #CECBCE;width: 390px;padding: 15px;background: #fff;-moz-box-shadow: 0 0 5px #ddd;-webkit-box-shadow: 0 0 5px #ddd;box-shadow: 0 0 5px #ddd;z-index:20;display: none;
}
#store_close
{display:none;position: absolute;z-index: 21;top: 20px;left: 365px;width: 17px;height: 17px;background-position: -257px -86px;background-image: url(../images/iconlist_1.png);background-repeat:no-repeat;background-color:transparent;
}
#store_tabs
{position:relative;z-index:10;width: 100%;height: 26px;float: left;border-bottom: 2px solid #edd28b;overflow: visible;
}
#store_tabs li
{padding: 0 20px 0 10px;background-color: #fff;height: 25px;float:left;color: #005aa0;cursor:pointer;line-height:22px;position:relative;border: 1px solid #ddd;border-bottom: 0;margin-right:3px;
}
#store_tabs li.hover
{border: 2px solid #edd28b;border-bottom: 2px solid #fff;line-height: 22px;color: #005aa0;z-index:20;
}
#store_tabs li b
{position: absolute;right: 4px;top: 10px;display: block;width: 7px;height: 5px;overflow: hidden;background-position: 0 -35px;background-image: url(../images/iconlist_5.png);background-repeat: no-repeat;
}
#store_tabs li.hover b
{background-position: 0 -28px;
}
#store_items
{padding-top:30px;padding-left:10px;
}
#store_items li
{line-height:38px;float:left;width:80px;cursor:pointer;color:#005aa0;padding: 2px 0 2px 15px;
}#store_items li a
{color: #005aa0;padding:2px 4px;
}
#store_items li a:hover
{background-color:#005aa0;color:#fff;text-decoration:underline;
}
jQuery学习笔记05相关推荐
- JavaWeb-综合案例(用户信息)-学习笔记05【分页查询功能】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb-综合案例(用户信息)-学习笔记01[列表查询] JavaWeb-综合案例(用户信息)-学习笔记02[登录功能] JavaWeb-综合案 ...
- JavaWeb黑马旅游网-学习笔记05【分类数据展示功能】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
- JavaScript学习笔记05【高级——DOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
- MySQL学习笔记05【多表操作、三大范式、数据库的备份和还原】
MySQL 文档-黑马程序员(腾讯微云):https://share.weiyun.com/RaCdIwas 1-MySQL基础.pdf.2-MySQL约束与设计.pdf.3-MySQL多表查询与事务 ...
- jQuery学习笔记--目录
jQuery学习笔记--Helloworld jQuery学习笔记--DOM对象和jQuery对象 jQuery学习笔记--jQuery选择器 jQuery学习笔记--jQuery的DOM操作 jQu ...
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- 【转载】jQuery学习笔记
jQuery学习笔记 1 基础 HTML :一个人的裸体,是一个人的物质基础,是一个结构. CSS :一个人的漂亮外衣,使一个人看起来不是那么原始,修饰了一个人. JavaScript :一个人的灵魂 ...
- jQuery学习笔记：Ajax(二)
接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...
- jQuery学习笔记02：核心部分
jQuery学习笔记:核心部分 一.$(expr) 1.说明 $(expr) 该函数通过CSS选择器.XPath或html代码来匹配目标元素 参数:expr(字符串,一个查询表达式或一段html字符串 ...
最新文章
- 关于虚拟化技术软硬件兼容问题的探讨
- 输入年月日，判断为该年的第几天
- sdwan能取代mpls吗?—Vecloud
- bzoj2957：楼房重建
- [BUAA OO]第三次博客作业
- 基于FPGA的CameraLink视频开发案例
- [从零开始学习FPGA编程-34]：进阶篇 - 基本时序电路-计数器（Verilog语言）
- 公众号添加跳转网页链接
- Java基础 第一节 第一课
- linux中文件颜色，蓝色，白色等各自代表的含义
- 假如杨笠吐槽程序员。。。
- Adobe Acrobat XI Pro 2019安装教程
- 北大计算机录取分数线2017,北大2017年高考在全国31省市录取分数线人数对比
- 考研日语线上笔记（八）：完型易混易考知识点梳理篇
- 脚手架的这个好搭档 今天要重点来介绍下！
- Ae动态模糊插件ReelSmart Motion Blur
- mysql建图书馆表_创建学校图书馆数据库 BookDB
- Win7关闭防火墙的脚本
- 创业公司CEO与技术大拿必读：CEO与大拿之间的距离
- 脑机接口（BCI）常用的实验范式