常见效果
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 = 0
var $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 = 300
var intervalTime = 30
var itemOffset = offset/(totalTime/intervalTime)
var intervalId = setInterval(function () {
offset -= itemOffset
if(offset<=0) {
offset = 0
clearInterval(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.事件回调函数中的this
5.逻辑思维能力
*/
window.onload = function () {
var items = document.getElementsByName("items");
//1.#checkedAllBtn
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function () {
setItemsChecked(true);
checkedAllBox.checked = true;
};
//2.#checkedNoBtn
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function () {
setItemsChecked(false);
checkedAllBox.checked = false;
};
//3.#checkedRevBtn
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function () {
setItemsChecked();
//点满时将checkedAllBox.checked设置为true
//统计当前items中被选中的个数
checkedAllBox.checked = isAllChecked();
};
//4.#checkedAllBox
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function () {
setItemsChecked(this.checked);
};
//5.#sendBtn
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function () {
for (var i = 0; i < items.length; i++) {
if (items[i].checked) {
alert(items[i].value);
}
}
};
//6.items
for (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 //移动的总距离
// 计算offset
if(typeof next==='boolean') {
offset = next ? -PAGE_WIDTH : PAGE_WIDTH
} else {
offset = -PAGE_WIDTH * (next - index)
}
// 计算单元移动的距离
var itemOffset = offset/(TIME/ITEM_TIME)
// 当前的left
var currLeft = $list.position().left
// 目标的left
var targetLeft = currLeft + offset
// 启动循环定时器不断移动, 到达目标位置时清除定时器
var intervalId = setInterval(function () {
// 计算当前要设置的left
currLeft += itemOffset
if(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 + 1
if(targetIndex===imgCount) {
targetIndex = 0
}
} else {
targetIndex = index-1
if(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="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="images/products/product-s1-m.jpg"/>
<span id="mask"></span><!--小黄块-->
<span id="maskTop"></span><!--悬于图片/mask上方的专用于接收鼠标移动事件的一个完全透明的层-->
<span id="largeImgContainer">
<img id="loading" src="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="images\products\product-s1.jpg"/></li>
<li><img src="images\products\product-s2.jpg"/></li>
<li><img src="images\products\product-s3.jpg"/></li>
<li><img src="images\products\product-s4.jpg"/></li>
<li><img src="images\products\product-s1.jpg"/></li>
<li><img src="images\products\product-s2.jpg"/></li>
<li><img src="images\products\product-s3.jpg"/></li>
<li><img src="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="images\products\p_icon_01.jpg"/>
<span>薰衣草</span>
<b></b>
</a>
<a href="#">
<img src="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="images/products/p001.jpg"/></a></p>
<a href="#">卫新 护色洗衣液 2kg 袋装</a>
<h2><a href="#">￥22.90</a></h2>
</li>
<li>
<p><a href="#"><img src="images/products/p002.jpg"/></a></p>
<a href="#">卫新 护色洗衣液 2kg 袋装</a>
<h2><a href="#">￥39.90</a></h2>
</li>
<li>
<p><a href="#"><img src="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="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="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="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="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="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="images/products/p001.jpg"/></a></p>
<a href="#">卫新 护色洗衣液 2kg 袋装</a>
<h2><a href="#">￥22.90</a></h2>
</li>
<li>
<p><a href="#"><img src="images/products/p002.jpg"/></a></p>
<a href="#">卫新 护色洗衣液 2kg 袋装</a>
<h2><a href="#">￥39.90</a></h2>
</li>
<li>
<p><a href="#"><img src="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="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="images/products/p001.jpg"/></a></p>
<a href="#">卫新 护色洗衣液 2kg 袋装</a>
<h2><a href="#">￥22.90</a></h2>
</li>
<li>
<p><a href="#"><img src="images/products/p002.jpg"/></a></p>
<a href="#">卫新 护色洗衣液 2kg 袋装</a>
<h2><a href="#">￥39.90</a></h2>
</li>
<li>
<p><a href="#"><img src="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="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="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="images/products/product_02_m.jpg"/></a>
<p><a href="#">卫新 去静电柔顺剂 清怡樱花袋装 500</a></p>
</li>
<li>
<span class="add"></span>
<a href="#"><img src="images/products/product_03_m.jpg"/></a>
<p><a href="#">威露士（Walch） 手洗洗衣液单袋装 500ml</a></p>
</li>
<li>
<a href="#"><img src="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="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="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="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="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="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="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="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="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="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="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="images/products/product_02.jpg"/></a></p>
<div class="dotted_split"></div>
<p><a src="#"><img src="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="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="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="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>
京东向您保证所售商品均为正品行货，京东自营商品开具机打发票或电子发票。凭质保证书及京东发票，可享受全国联保服务（奢侈品、钟表除外；奢侈品、钟表由京东联系保修，享受法定三包售后服务），与您亲临商场选购的商品享受相同的质量保证。京东还为您提供具有竞争力的商品价格和<a
href="#">运费政策</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="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="images/products/show_01.jpg"/></a>
<a href="#"><img src="images/products/show_02.jpg"/></a>
<a href="#"><img src="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="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="images/products/show_01.jpg"/></a>
<a href="#"><img src="images/products/show_02.jpg"/></a>
<a href="#"><img src="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="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>|<a
href="#">手机京东</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="images/jy.jpg" width="108" height="40"/></a>
<a href=""><img src="images/kx.jpg" width="108" height="40"/></a>
<a href=""><img src="images/cy.jpg" width="108" height="40"/></a>
<a href=""><img src="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. 点击切换地址tab
7. 鼠标移入移出切换显示迷你购物车
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') //当前元素的id
var subId = id + '_items' //子元素id
$('#' + subId).show() //显示
}, function () {
var id = $(this).attr('id') //当前元素的id
var 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') //本身添加 class
var 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 = 5
var PIC_WIDTH = 62
var counter = 0 //左侧的图片的数量
var THRESHOLD = 0 //阈值
//初始化
//检查有几张图片
var pics = $iconList.children('li').length
var THRESHOLD = pics - WIDTH
if (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 () {
//获取到 自己 src
var src = $(this).children('img').attr('src')
//设置中图的src
var 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.offsetX
var mouseTop = event.offsetY
console.log(mouseLeft, mouseTop)
//小黄块运动
var maskLeft = mouseLeft - MASK_WIDTH / 2
var 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_WIDTH
var 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;
}
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
