JavaScript_Homework6
JavaScript作业六 HTML5应用
JavaScript作业六
【任务9-1】实现商品详情页面的框架结构
html代码
<html>
<head>
<meta charset="utf-8">
<title>漫步时尚广场-商品详情title>
<link href="css/detail_frame.css" rel="stylesheet" type="text/css">
head>
<body>
<article id="main">
<header class="top_bg">
header>
<div class="logo">
<img src="images/logo.jpg" >
<img src="images/banner.jpg" >
div>
<nav class="nav_bg">nav>
<section>
<div class="main">
<nav class="menu">nav>
<div class="middle">
<h1 class="pic_title">商品详情h1>
<div class="clear">div>
<div class="left_pic">div>
<article class="tab_content2 none">article>
<article class="tab_content3 none">article>
<h1 class="pic_title">看了又看h1>
<div class="clear">div>
<ul class="pic_list4">ul>
div>
<aside class="right_nav">aside>
div>
section>
<footer>
<div class="clear">div>
<div class="foot">
<div class="foot_title">div>
<ul class="foot_list">ul>
<div class="clear">div>
<div class="foot_line">div>
div>
footer>
article>
body>
html> css代码
@charset "utf-8";
body{font-size:12px;font-family:microsoft yahei;margin:0;color:#000;}
*{padding:0;margin:0}
img{border:none;}
.clear{clear:both;}
.main{margin:10px auto;}
a:hover{color:#ce2626;text-decoration:none;}
/*头部*/
.top_bg{background:#f7f7f7;height:30px;line-height:30px;}
.logo{margin:5px auto;}
.nav_bg{background:#ce2626;width:100%;color:#fff;height:30px;}
a.white:hover{color:#ff0;text-decoration:none;}
/*左侧导航*/
.menu{width:220px;float:left;border:1px solid #e5e4e1;height:350px;
background-color:#FFC;}
/*中间部分*/
.middle{float:left;width:690px;}
.left_pic{height:200px; background-color:#6CF; margin-bottom:10px;
margin-left:10px;}
.pic_title{background:#ff9c01;line-height:35px;font-size:14px;
text-indent:20px;text-align:left;width:680px;float:left;
color:#fff;margin:0 10px 10px;}
/*右侧公告*/
.right_nav{width:280px;height:270px;border:1px solid #eee;float:right;
background-color:#fCC;}
/*foot*/
.pic_list4{height:200px; background-color:#CCC;margin-left:10px;}
.foot_title{background:#6a6665;width:100%;height:40px;padding-top:8px;}
.foot_line{border-bottom:1px solid #ccc;font-size:12px;margin-top:10px;}
.foot_list{width:100%;margin:0 auto;padding-top:20px; height:60px;
background-color:#ddd;}
【任务9-2】商品详情页面的整体实现
商品详情页面css html代码见最后
@charset "utf-8";
body{font-size:12px;font-family:microsoft yahei;margin:0;color:#000;}
*{padding:0;margin:0;}
li,ul{list-style:none;}
a{color:#000;text-decoration:none;}
a:hover{color:#ce2626;text-decoration:none;}
img{border:none;}
.font14{font-size:14px;font-weight:700;}
.font16{font-size:16px;font-weight:700;}
.clear{clear:both;}
.floatl{float:left;}
.floatr{float:right;}
.main{margin:10px auto;width:1200px;}
/*头部*/
.top_bg{border-bottom:1px solid #ccc;font-size:12px;font-family:"宋体";
line-height:30px;background:#f7f7f7;height:30px;line-height:30px;}
.top_content{width:1200px;margin:0 auto;}
.logo{margin:5px auto;width:1200px;}
.nav_bg{background:#ce2626;width:100%;color:#fff;}
.nav_content{width:1200px;margin:0 auto;height:40px;line-height:40px;}
.menu_nav{width:700px;float:left;margin-left:200px;}
.menu_nav li{font-size:16px;font-weight:700;color:#fff;width:80px;float:left;
text-align:center;margin-right:15px;}
.orange{font-weight:700;color:#f60;}
.nav_active{background:#b12121;}
a.white{color:#fff;text-decoration:none;}
a.white:hover{color:#ff0;text-decoration:none;}
.shopcart{background:url(../images/shoppingcart.png) no-repeat;width:16px;height:16px;display:inline-block;float:left;
margin:5px 5px 0 0;}
/*左侧导航*/
.right_arrow{background:url(../images/arrow_r.jpg) no-repeat;width:20px;height:20px;display:inline-block;float:right;}
.menu{width:220px;float:left;border:1px solid #e5e4e1;}
.menu li{float:left;width:220px;border-bottom:1px solid #e5e4e1;height:33px;
line-height:33px;background:#fafafa;font-size:14px;text-align:left;}
.menu li .title{height:33px;background:#e5e4e1;font-size:15px;
text-indent:20px;text-align:left;width:100%;line-height:33px;
display:inline-block;}
.red_dot{font-size:25px;margin-right:10px; width:8px;height:8px;
display:inline-block;background:url(../images/red_dot.gif) no-repeat;
margin-left:10px;}
/*中间部分*/
.middle{float:left;width:690px;}
.pic_title{background:#ff9c01;line-height:35px;font-size:14px;
text-indent:20px;text-align:left;width:680px;float:left;color:#fff;
margin:0 10px 10px;}
/*右侧公告*/
.right_nav{width:280px;border:1px solid #eee;float:right;}
.notice_title{background:#eee;line-height:35px;font-size:14px;
text-indent:20px;text-align:left;}
/*foot*/
.foot{width:100%;background:#efefef;height:310px;margin-top:15px;}
.foot_title{background:#6a6665;width:100%;height:40px;padding-top:8px;}
.foot_pic{margin:0 auto;width:1200px;}
.foot_pic li{width:210px;float:left;text-align:center;}
.padding-bottom{padding-bottom:10px;}
.padding-top{padding-top:10px;}
.foot_line{border-bottom:1px solid #ccc;font-size:12px;margin-top:10px;}
.line1{background:url(../images/line1.jpg) no-repeat;
width:20px;height:100px;display:inline-block;}
.red1{background:url(../images/red1.jpg) no-repeat;
width:35px;height:31px;display:block;}
.red2{background:url(../images/red2.jpg) no-repeat;
width:35px;height:31px;display:block;}
.red3{background:url(../images/red3.jpg) no-repeat;
width:35px;height:31px;display:block;}
.foot_list>li{float:left;width:170px;}
.foot_list{width:1100px;margin:0 auto;padding-top:20px;}
.foot_list li ul{padding-left:10px;}
.pic_list3 li{margin:5px;float:left;width:83px;}
.pic_list3 li img{border:1px solid #ccc;}
.pic_list4{margin-left:18px;}
.pic_list4 li{margin:5px;float:left;width:123px;}
.pic_list4 li img{border:1px solid #ccc;}
.small_piclist li{float:left;margin-right:10px;}
.small_piclist li img{width:70px;height:70px;border:1px solid #ccc;}
.left_pic{margin-left:10px;float:left;}
.tab{margin:10px;border-bottom:1px solid #ccc;height:35px;line-height:35px;}
.tab li{width:90px;float:left;font-size:14px;text-align:center;}
.tab_active{border-top:3px solid red;width:100px;font-weight:700;
background:#f2f2f2;height:33px;border-right:1px solid #ccc;
border-left:1px solid #ccc;}
.none{display:none;}
.particulars li{display:inline;float:left;height:24px;line-height:24px;
margin-right:20px;overflow:hidden;text-indent:5px;text-overflow:ellipsis;
white-space:nowrap;width:206px;}
.price2{font-size:12px;font-weight:700;color:red;text-align:center;}
.tab_content3{width:670px;margin:0 auto;}
.tab_content3 table th{height:30px;background:#f2f2f2;text-align:center;}
.tab_content3 table td{text-align:center;height:40px;
border-bottom:1px dashed #ccc;}
.right{float:left;}
article,footer,header,nav,section{display:block;}
.tab_content1 section{text-align:center;width:700px;}
.img_border{border:1px solid #ccc;margin-top:10px;}
/* 放大镜部分 */
.left_pic{
position:relative;
margin-left:10px;
float:left
}
#box{
position: relative;
margin-bottom: 10px;
width: 400px;
height: 400px;
}
#shade{
position: absolute;
top: 0px;
z-index: 1000;
width: 200px;
height: 200px;
filter: alpha(Opacity=70); /*IE设置透明度*/
-moz-opacity: 0.7; /*火狐设置透明度*/
opacity: 0.7; /*chrome设置透明度*/
background-color:#FFC;
display: none;
}
#canvas{
position: absolute;
left: 410px;
top: 0px;
display: none;
background-color:wheat;
display: none;
}【任务9-3】使用HTML 5对后台中的商品添加页面进行重构
【任务10-1】实现商品详情页面中的商品切换效果
此js实现商品切换效果
//切换商品展示区中的图像
function changeGoodsImage(thumb) {
//设置当前缩略图在商品展示区显示对应的大图
var showGoodsPicture = document.getElementById("showGoodsPicture");
showGoodsPicture.src = thumb.src;
//获取商品缩略图对应的li元素集合
var goodsList = document.getElementById("goodsList");
var items=goodsList.getElementsByTagName("li");
//遍历li元素集合，将所有的图像边框颜色改为默认样式
for (var i = 0; i < items.length; i++) {
var thumbImages=items[i].getElementsByTagName("img");
thumbImages[0].style.borderColor = "";
}
//设置当前缩略图为选中状态
thumb.style.borderColor = "red";
}
//Tab标签的切换
function changeGoodsInfo(obj){
var currentSelect=0;
var goodsTabs=document.getElementById("goodsTabs");
//获得商品的信息标签（商品详情、商品评价、成交记录）
var goodsTitles=goodsTabs.getElementsByTagName("li");
for(var i=0;i"";
//判断当前元素对应的位置
if(obj==goodsTitles[i]){
currentSelect=i;
}
}
//当前标签处于激活状态
obj.className="tab_active";
//设置标签对应的内容部分
var middleDiv=document.getElementsByClassName("middle");
var tabCotents=middleDiv[0].getElementsByTagName("article");
for(var j=0;jif(currentSelect==j){
tabCotents[j].className="tab_content"+(j);
}else{
tabCotents[j].className="none tab_content"+(j);
}
console.log(tabCotents[j].className);
}
}
//页面加载时调用
window.onload=function(){
//默认第一个缩略图为选中状态
var goodsList=document.getElementById("goodsList");
var thumb_images=goodsList.getElementsByTagName("li")[0]
.getElementsByTagName("img");
changeGoodsImage(thumb_images[0]);
}; 【任务10-2】实现商品详情页面中的放大镜效果
在10-1的基础上添加并在页面加载时调用放大镜效果函数（将zoomPicture()添加到页面加载调用的函数中）
//获取元素的纵坐标（相对于body）
function getTop(e){
var offset=e.offsetTop;
if (e.offsetParent!=null){
offset+=getTop(e.offsetParent);
}
return offset;
}
//获取元素的横坐标（相对于body）
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null){
offset+=getLeft(e.offsetParent);
}
return offset;
}
function zoomPicture() {
var box=document.getElementById("box");
var showGoodsPicture=document.getElementById("showGoodsPicture");
var canvas=document.getElementById("canvas");
var shade=document.getElementById("shade");
if(showGoodsPicture==null) {
return false;
}
//绑定鼠标移出所触发的事件
box.onmouseout=function(){
shade.style.display="none";
canvas.style.display="none";
document.body.style.cursor="default";
};
//绑定鼠标移动所触发的事件
box.onmousemove =function(ev){
//设定鼠标的样式
document.body.style.cursor="move";
var box = document.getElementById("box");
var shadeX, shadeY;
//获取box对象的左侧到浏览器窗口左侧的距离
var boxX=getLeft(box);
//获取box对象的顶部到浏览器窗口顶部的距离
var boxY=getTop(box);
//计算阴影区域的左上角的x坐标
shadeX=ev.pageX-boxX-100;
//计算阴影区域的左上角的y坐标
shadeY=ev.pageY-boxY-100;
//防止阴影区域移到图片之外
if(shadeX<0){
shadeX=0;
}
else if(shadeX>200){
shadeX=200;
}
if(shadeY<0){
shadeY=0;
}
else if(shadeY>200){
shadeY=200;
}
//使用Canvas绘制遮罩区域，并进行放大
var context=canvas.getContext("2d");
shade.style.display="block";
shade.style.left=shadeX+"px";
shade.style.top=shadeY+"px";
canvas.style.display="inline";
context.clearRect(0, 0, 400, 400);
var image=new Image();
image.src=showGoodsPicture.src;
context.drawImage(image, (shade.offsetLeft) * 2, (shade.offsetTop) * 2,
400, 400, 0, 0, 400, 400);
}
}【任务10-3】实现购物列表中的购物车拖拽效果
js实现 无法截演示效果
//购物车的显示与隐藏
function showCar(){
var shopCar = document.getElementsByClassName("dropdown")[0];
var rightNav = document.getElementsByClassName("right_nav")[0];
switch(shopCar.style.display){
case "":
case "none":
shopCar.style.display = "block";
rightNav.style.position = "relative";
//下移热门推荐模块
//rightNav.style.top = "100px";
shopCar.innerHTML = loadCar();
break;
case "block":
shopCar.style.display = "none";
rightNav.style.position = "static";
break;
}
}
//定义一个商品对象
var goods={goodsSrc: null, goodsNum: 1};
//设置拖拽效果
function drag(e){
e=e||event;
e.dataTransfer.effectAllowed = "copy";
e.dataTransfer.setData("text", e.target.src); //IE兼容写法
//e.dataTransfer.setData("text/plain", e.target.src); //标准写法
}
//拖拽释放效果
function drop(e){
//方式拖拽事件传播
allowDrop(e);
//从拖拽事件中获取数据
var data=e.dataTransfer.getData("text");
if(e.target.id=="dropdown" || e.target.parentNode.id=="dropdown"
|| e.target.parentNode.parentNode.id=="dropdown"
|| e.target.parentNode.parentNode.parentNode.id=="dropdown"
|| e.target.parentNode.parentNode.parentNode
.parentNode.id=="dropdown"){
//从localStorage中尝试根据Src读取数据
var newGoods=readFromStorage(data);
//如果localStorage中存在当前商品，则在原基础上加1
if (newGoods!=null){
for(var i=0; iif(data==newGoods.goodsSrc) {
newGoods.goodsNum+=1;
goods=newGoods;
break;
}
}
}else{
//如果localStorage中，没有该商品，创建一个新对象，且商品数量为1
goods.goodsSrc=data;
goods.goodsNum=1;
}
//把处理后的商品信息存储到localStorage
localStorage.setItem(data, JSON.stringify(goods));
//重新加载并刷新页面中的购物车
document.getElementsByClassName("dropdown")[0].innerHTML=loadCar();
}
}
//阻止被拖拽的图片在新窗口打开
function allowDrop(e){
e.preventDefault();//通知浏览器不再执行事件相关的默认动作
e.stopPropagation();//阻止事件冒
}
//根据key读取localStorage的值并封装成JSON
function readFromStorage(key){
var jsonStr=localStorage.getItem(key);
var newGoods=JSON.parse(jsonStr);
return newGoods;
}
//加载购物车
function loadCar(){
//localStorage不为空时，将购物车中的信息读出来并显示到页面中
if(localStorage.length!=0){
var ulObject=document.createElement("ul");
ulObject.className="shop_pic";
for(var i=0; ivar key=localStorage.key(i);
goods=readFromStorage(key);
if(goods!=null) {
var liObject=document.createElement("li");
liObject.innerHTML='
'" width="80px" height="96px"/>'
+goods.goodsNum
+'件删除';
}
ulObject.appendChild(liObject);
}
return ulObject.outerHTML;
}
return "购物车还是空的，赶快加点东西吧~";
}
//从localStorage中删除某个元素
function delStorage(element){
//获得被点击的元素的对应的img标签的src属性
var targetSrc=element.parentNode.parentNode.childNodes[0]
.childNodes[0].src;
//根据src属性读取localStorage中的商品
var delGoods=readFromStorage(targetSrc);
delGoods.goodsNum-=1;
//如果商品数量等于0，则移除该商品
if(delGoods.goodsNum==0){
localStorage.removeItem(targetSrc);
}else{
//如果商品数量大于0，将修改后的信息保存到localStorage中
localStorage.setItem(targetSrc,JSON.stringify(delGoods));
}
//删除成功后，重新加载并更新页面中的购物车
document.getElementsByClassName("dropdown")[0].innerHTML=loadCar();
}
//窗口加载时，为允许拖拽的图片添加draggable属性和ondragstart事件
window.onload=function(){
var pic_list=document.getElementsByClassName("pic_list")[0];
var pic_list_div=pic_list.getElementsByTagName("div");
for(var i=0;ivar image=pic_list_div[i].getElementsByTagName("img")[0];
image.setAttribute("draggable",true);
image.ondragstart=drag;
}
}
商品详情页面html代码
<html>
<head>
<meta charset="utf-8">
<title>漫步时尚广场-商品详情title>
<link href="css/detail.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/goodsOperator.js">script>
head>
<body>
<article id="main">
<header class="top_bg">
<div class="top_content">
<div class="floatl"><img src="images/star.jpg">收藏 | HI，欢迎来订购 ！<a href="#" class="orange">[请登录]a> <a href="#" class="orange"> [免费注册]a>div>
<div class="floatr">客户服务<img src="images/arrow.gif"> 网站导航<img src="images/arrow.gif"> <span class="droparrow"><span class="shopcart">span>我的购物车<span class="orange">0span>件<img src="images/arrow.gif" />span>div>
div>
header>
<div class="logo"><a href="../index.html"><img src="images/logo.jpg" >a><img src="images/banner.jpg" >div>
<nav class="nav_bg">
<div class="nav_content">
<ul class="menu_nav">
<li ><a href="shoppingIndex.html" class="white">首页a>li>
<li><a href="shoppingShow.html" class="white">最新上架a>li>
<li>品牌活动li>
<li>原厂直供li>
<li>团购li>
<li>限时抢购li>
<li>促销打折li>
ul>
div>
nav>
<section>
<div class="main">
<nav>
<ul class="menu">
<li><span class="title">女装span>li>
<li><span class="red_dot">span><a href="#" >上衣a><span class="right_arrow">span>li>
<li><span class="red_dot">span><a href="#" >下装a><span class="right_arrow">span>li>
<li><span class="red_dot">span><a href="#" >连衣裙a><span class="right_arrow">span>li>
<li><span class="red_dot">span><a href="#" >内衣a><span class="right_arrow">span>li>
<li><span class="title">男装span>li>
<li><span class="red_dot">span><a href="#" >T恤a><span class="right_arrow">span>li>
<li><span class="red_dot">span><a href="#" >短裤a><span class="right_arrow">span>li>
<li><span class="red_dot">span><a href="#" >衬衫a><span class="right_arrow">span>li>
<li><span class="title">童装span>li>
<li><span class="red_dot">span><a href="#" >上衣a><span class="right_arrow">span>li>
<li><span class="red_dot">span><a href="#" >裤子a><span class="right_arrow">span>li>
<li><span class="title">运动span>li>
<li><span class="red_dot">span><a href="#" >运动裤a><span class="right_arrow">span>li>
<li><span class="red_dot">span><a href="#" >跑步鞋a><span class="right_arrow">span>li>
ul>
nav>
<div class="middle">
<h1 class="pic_title">商品详情h1>
<div class="left_pic">
<div id="box">
<img src="images/showdetail/dd1.jpg" width="400" height="400" id="showGoodsPicture">
<div id="shade">div>
div>
<ul class="small_piclist" id="goodsList">
<li><img src="images/showdetail/dd1.jpg" onclick="changeGoodsImage(this)">li>
<li><img src="images/showdetail/dd1.jpg" onclick="changeGoodsImage(this)">li>
<li><img src="images/showdetail/dd1.jpg" onclick="changeGoodsImage(this)">li>
<li><img src="images/showdetail/dd1.jpg" onclick="changeGoodsImage(this)">li>
<li><img src="images/showdetail/dd1.jpg" onclick="changeGoodsImage(this)">li>
ul>
<canvas id="canvas" width="400px" height="400px">canvas>
div>
<div class="right">
<h1 class="font16">冬季新款牛仔外套女中长款加厚<br/>
女冬装连帽毛领加绒牛仔棉衣女风衣h1>
<img src="images/showdetail/pic_mess.jpg"> div>
<div class="clear">div>
<ul class="tab" id="goodsTabs">
<li class="tab_active" onClick="changeGoodsInfo(this)">商品详情li>
<li onClick="changeGoodsInfo(this)">商品评价li>
<li onClick="changeGoodsInfo(this)">成交记录li>
ul>
<article class="tab_content1">
<ul class="particulars">
<li title=" 修身">服装版型: 修身li>
<li title=" 甜美">风格: 甜美li>
<li title=" 瑞丽">甜美: 瑞丽li>
<li title=" 中长款">衣长: 中长款li>
<li title=" 长袖">袖长:长袖li>
<li title=" 常规">袖型: 常规li>
<li title=" 带帽">领型:带帽li>
<li title=" 拉链">衣门襟:拉链li>
<li title=" 纯色">图案: 纯色li>
<li title=" 81%(含)-90%(含)">成分含量:81%(含)-90%(含)li>
<li title=" 棉">质地: 棉li>
<li title=" 25-29周岁">适用年龄: 25-29周岁li>
<li title=" 2015年冬季">年份季节:2015年冬季li>
<li title=" 深蓝色 蓝色">颜色分类: 深蓝色 蓝色li>
<li title=" M L XL 2XL">尺码:M L XL 2XLli>
ul>
<section> <img src="images/showdetail/detail1.jpg"> <img src="images/showdetail/detail2.jpg"> <img src="images/showdetail/dd1.jpg" class="img_border"> <img src="images/showdetail/detail1.jpg" class="img_border"> <img src="images/showdetail/dd1.jpg" class="img_border"><img src="images/showdetail/detail6.jpg" class="img_border">section>
article>
<article class="tab_content2 none"><img src="images/showdetail/pinglun.jpg"/>article>
<article class="tab_content3 none">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>买家th>
<th>淘宝价th>
<th>数量th>
<th>付款时间th>
<th>款式和型号th>
tr>
thead>
<tbody>
<tr>
<td> a**男 (匿名) td>
<td><em class="price2">¥198.00em>td>
<td>1td>
<td> 2015-07-31 20:08:39 td>
<td><div>
<p>颜色分类:深蓝色[胸前格纹]p>
<p>尺码:Lp>
div>td>
tr>
<tr>
<td> 闺**你 (匿名) td>
<td><em class="price2">¥198.00em>td>
<td>1td>
<td> 2015-07-27 14:05:17 td>
<td><div>
<p>颜色分类:蓝色[口袋格纹]p>
<p>尺码:Lp>
div>td>
tr>
<tr>
<td> w**0 (匿名)td>
<td><em class="price2">¥198.00em>td>
<td>1td>
<td> 2015-07-23 12:33:54 td>
<td><div>
<p>颜色分类:深蓝色[胸前格纹]p>
<p>尺码:Lp>
div>td>
tr>
<tr>
<td> a**u (匿名)td>
<td><em class="price2">¥198.00em>td>
<td>1td>
<td> 2015-07-23 12:04:19 td>
<td><div>
<p>颜色分类:蓝色[口袋格纹]p>
<p>尺码:Lp>
div>td>
tr>
<tr>
<td> 落**1 (匿名) td>
<td><em class="price2">¥198.00em>td>
<td>1td>
<td> 2015-07-22 21:39:27 td>
<td><div>
<p>颜色分类:深蓝色[胸前格纹]p>
<p>尺码:Lp>
div>td>
tr>
<tr>
<td> 6**s (匿名) td>
<td><em class="price2">¥198.00em>td>
<td>1td>
<td> 2015-07-12 15:00:30 td>
<td><div>
<p>颜色分类:蓝色[口袋格纹]p>
<p>尺码:Lp>
div>td>
tr>
tbody>
table>
article>
<article>
<h1 class="pic_title">看了又看h1>
<ul class="pic_list4">
<li><img src="images/showdetail/ss1.jpg" title="2015新款条纹显瘦V领短袖露背宽松连身裤"/>
<p>2015新款条纹显瘦V领短袖露背宽松连身裤p>
li>
<li><img src="images/showdetail/ss1.jpg" title="2015女士新款百搭休闲阔腿裤高腰红色短裤"/>
<p>2015女士新款百搭休闲阔腿裤高腰红色短裤p>
li>
<li><img src="images/showdetail/ss1.jpg" title="女版街头个性休闲口袋纯色卫衣吊带哈伦裤"/>
<p>女版街头个性休闲口袋纯色卫衣吊带哈伦裤p>
li>
<li><img src="images/showdetail/ss1.jpg" title="韩版简约百搭五分袖喇叭袖圆领打底短袖"/>
<p>韩版简约百搭五分袖喇叭袖圆领打底短袖p>
li>
<li><img src="images/showdetail/ss1.jpg" title="卡玛娅秋装新款女装 圆领纯棉上衣棉T恤" />
<p>卡玛娅秋装新款女装 圆领纯棉上衣棉T恤p>
li>
ul>
<article>
div>
<aside class="right_nav">
<h1 class="notice_title"> 热门推荐 h1>
<ul class="pic_list3">
<ul>
<li><a href="#"><img src="images/shopshow/s1.jpg" />a>
<p class="price2">￥56.00元p>
li>
<li><a href="#"><img src="images/shopshow/s2.jpg" />a>
<p class="price2">￥97.00元p>
li>
<li><a href="#"><img src="images/shopshow/s3.jpg" />a>
<p class="price2">￥89.00元p>
li>
<li><a href="#"><img src="images/shopshow/s4.jpg" />a>
<p class="price2">￥69.00元p>
li>
<li><a href="#"><img src="images/shopshow/s5.jpg" />a>
<p class="price2">￥89.00元p>
li>
<li><a href="#"><img src="images/shopshow/s6.jpg" />a>
<p class="price2">￥93.00元p>
li>
<li><a href="#"><img src="images/shopshow/s7.jpg" />a>
<p class="price2">￥58.00元p>
li>
<li><a href="#"><img src="images/shopshow/s8.jpg" />a>
<p class="price2">￥69.00元p>
li>
<li><a href="#"><img src="images/shopshow/s9.jpg" />a>
<p class="price2">￥78.00元p>
li>
ul>
ul>
aside>
div>
section>
<footer>
<div class="clear">div>
<div class="foot">
<div class="foot_title">
<ul class="foot_pic">
<li><img src="images/gray1.jpg" >li>
<li><img src="images/gray2.jpg" >li>
<li><img src="images/gray3.jpg" >li>
<li><img src="images/gray4.jpg" >li>
<li><img src="images/gray5.jpg" >li>
ul>
div>
<ul class="foot_list">
<li>
<div class="floatl">
<p class="red1">p>
<p class="line1">p>
div>
<ul class="floatl">
<li class="font16 padding-bottom">新手指导li>
<li>用户注册li>
<li>电话下单li>
<li>购物流程li>
<li>购物保障li>
<li>服务协议li>
ul>
li>
<li>
<div class="floatl">
<p class="red2">p>
<p class="line1">p>
div>
<ul class="floatl">
<li class="font16 padding-bottom">支付方式li>
<li>货到付款li>
<li>商城卡支付li>
<li>支付宝、网银支付li>
<li>优惠券抵用li>
ul>
li>
<li>
<div class="floatl">
<p class="red3">p>
<p class="line1">p>
div>
<ul class="floatl">
<li class="font16 padding-bottom">配送方式li>
<li>闪电发货li>
<li>满百包邮li>
<li>配送范围及时间li>
<li>商品验收及签收li>
<li>服务协议li>
ul>
li>
<li>
<div class="floatl">
<p class="red3">p>
<p class="line1">p>
div>
<ul class="floatl">
<li class="font16 padding-bottom">售后服务li>
<li>退换货协议li>
<li>关于发票li>
<li>退换货流程li>
<li>退换货运费li>
ul>
li>
<li>
<div class="floatl">
<p class="red3">p>
<p class="line1">p>
div>
<ul class="floatl">
<li class="font16 padding-bottom">关于帐号li>
<li>修改个人信息li>
<li>修改密码li>
<li>找回密码li>
ul>
li>
<li>
<div class="floatl">
<p class="red3">p>
<p class="line1">p>
div>
<ul class="floatl">
<li class="font16 padding-bottom">优惠活动li>
<li>竞拍须知li>
<li>抢购须知li>
ul>
li>
ul>
<div class="clear">div>
<div class="foot_line">div>
<p align="center" class="padding-top">Copyright 2015-2020 Q- Walking Fashion E&S 漫步时尚广场（QST教育）版权所有<Br/>
中国青岛 高新区河东路8888号 青软教育集团 咨询热线：400-658-0166 400-658-1022 p>
<p align="center"><img src="images/foot_pic.jpg">p>
<div class="clear">div>
div>
footer>
article>
body>
html>