WEB前端-CSS-静态购物页面V3
2016-08-19 19:08
176 查看
这是之前静态页面的第三版
相对于第二版，这一版新增了一个纯html-css实现的简易注册页面，并增加了遮罩层，明天会将这个注册页与JavaScript&DOM结合，实现web前端的简易交互。
相对于第二版，这一版新增了一个纯html-css实现的简易注册页面，并增加了遮罩层，明天会将这个注册页与JavaScript&DOM结合，实现web前端的简易交互。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" http-equiv="X-UA-COMPATIBLE" content="IE=edge"/>
<meta http-equiv="refresh" Content="300"/>
<meta name="keywords" content="shopping_car"/>
<title>MyShopCar</title>
<link rel="shortcut icon" href="p3.png"/>
<!--css start-->
<style type="text/css">
/*返回顶部*/
.b3_backtotop {
border:2px solid burlywood;
width:50px;
height:50px;
position:fixed;
bottom:0;
right:0;
background-image:url(http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3D8a7e333a43166d223877159c76220945%2Fe9e336d3d539b600e576bb46e950352ac75cb7b1.jpg&thumburl=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D1974011879%2C1336495790%26fm%3D21%26gp%3D0.jpg);
background-position:-107px -90px;
cursor:pointer;
}
/*背景*/
.b4{
display:block;
margin:0 auto 0;
padding:0;
background:#fff;
clear:both;
z-index: 9;
}
/*失效效果*/
.hide{
display:none;
}
/*遮罩层*/
.shadow{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:gray;
opacity:0.6;
z-index: 10;
}
/*对话框*/
.b1{
width:800px;
height:700px;
position: fixed;
top:50%;
left:50%;
font-size:20px;
font-weight:700;
margin-top:-350px;
margin-left:-400px;
background:#F1F1F1;
border:2px dashed gray;
z-index: 12;
}
/*顶部项目区*/
.b5_top{
width:100%;
height:250px;
position: relative;
}
.b5_top .b5_top_target{
margin:0 auto 0;
width:1350px;
height:30px;
font-size:14px;
overflow: hidden;
}
.b5_top .b5_top_target .b5_top_target_left{
margin-left:30px;
width:90px;
line-height:30px;
float:left;
cursor:pointer;
}
.b5_top .b5_top_target .b5_top_target_right{
margin-right:10%;
width:600px;
height:30px;
float:right;
}
ul{
margin:0;
list-style-type:none;
}
.b5_top .b5_top_target .b5_top_target_right .b5_top_target_right_tip{
line-height:30px;
border-left:1px dashed gray;
border-right:1px dashed gray;
padding:0 14px 0 14px;
cursor:pointer;
float:left;
}
.b5_top .b5_top_target .b5_top_target_right .b5_top_target_right_tip:hover{
background-color:snow;
color:darkred;
}
.b5_top_display{
margin:0 auto 0;
width: 1350px;
background:wheat url(http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fp3.gexing.com%2FG1%2FM00%2FCE%2F15%2FrBACFFKUV3zwxtFiAAY9um227e0611.jpg&thumburl=http%3A%2F%2Fimg5.imgtn.bdimg.com%2Fit%2Fu%3D37066705%2C642523342%26fm%3D21%26gp%3D0.jpg) 100% -234px no-repeat;
height:70px;
}
.b5_top_display_content{
margin-left:20%;
padding:10px 30px 10px 30px;
height:40px;
width:800px;
font-size:40px;
font-weight:800;
color:black;
float:left;
}
.b5_top_search{
margin:0 auto 0;
width:1350px;
height:150px;
background-color:#fff;
}
.b5_top_search .b5_top_search_logo{
/*display:block;*/
float:left;
width:240px;
height:150px;
background:url(http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fp3.gexing.com%2Ftouxiang%2F20121211%2F1456%2F50c6d91119b0e_200x200_3.jpg&thumburl=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D1058562824%2C3247128813%26fm%3D21%26gp%3D0.jpg) no-repeat;
cursor:pointer;
}
.b5_top_search .b5_top_search_search{
margin-left:5%;
float:left;
width:540px;
height:150px;
}
.b5_top_search .b5_top_search_search .b5_top_search_search_button{
border:1px solid darkred;
line-height:34px;
width:80px;
background-color:darkred;
font-size:21px;
font-family:微软雅黑;
font-weight:700;
color:white;
float:right;
cursor:pointer;
}
.b5_top_search .b5_top_search_search .b5_top_search_search_search{
height: 30px;
width:450px;
float:left;
}
.b5_top_search .b5_top_search_note{
margin:0;
width:450px;
height:30px;
}
.b5_top_search .b5_top_search_note .b5_top_search_note_ul{
margin:0;
list-style-type: none;
}
.b5_top_search .b5_top_search_note .b5_top_search_note_ul .b5_top_search_note_li{
padding:0 8px 0 8px;
border-right:1px dashed grey;
font-size:12px;
font-weight:300;
color:gray;
float:left;
}
.b5_top_search .b5_top_search_note .b5_top_search_note_ul .b5_top_search_note_li:hover{
color:red;
cursor:pointer;
}
.b5_top_search .b5_top_search_shoppingcar{
border:1px solid grey;
margin-top:60px;
margin-left:9%;
width:141px;
height:45px;
background-image:url(http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Ft1.ituba.cc%2Fmm8%2Ftupai%2F20150909%2F211932514.jpg&thumburl=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D3180836057%2C1724796458%26fm%3D21%26gp%3D0.jpg);
background-position:-46px 180px;
float:left;
cursor:pointer;
}
/*中部导航区*/
.b2_menu{
margin:0 auto 0;
width:1350px;
background-color:#fff;
height:44px;
}
.b2_menu .b2_menu_left{
padding:8px 20px 2px 20px;
height:34px;
width:200px;
font-size:18px;
font-weight:500;
color:#fff;
font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","\5b8b\4f53",sans-serif;
background-color:#B1191A;
cursor:pointer;
float:left;
}
.b2_menu .b2_menu_right{
margin-left:20px;
width:800px;
height:44px;
float:left;
}
.b2_menu .b2_menu_right .b2_menu_right_li{
padding:10px 10px 10px 10px;
width:100px;
height:24px;
font-size:16px;
font-weight:400;
font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","\5b8b\4f53",sans-serif;
float:left;
}
.b2_menu .b2_menu_right .b2_menu_right_li:hover{
color:#B1191A;
cursor:pointer;
height:16px;
border-right:1px dashed gray;
}
/*主展示区*/
.b5_main{
margin:0 auto 0;
width:1350px;
overflow: auto;
}
/*左边菜单区*/
.b5_left{
width:238px;
height:480px;
float:left;
background-color:#cc2954;
border:1px solid #cc2954;
}
.b5_left .b5_left_menu{
padding:10px 10px 10px 20px;
width:210px;
height:60px;
font-size:16px;
font-weight:400;
font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","\5b8b\4f53",sans-serif;
color:#fff;
cursor:pointer;
}
.b5_left .b5_left_menu:hover{
background-color:#fff;
color:#cc2954;
font-size:18px;
font-weight:400;
font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","\5b8b\4f53",sans-serif;
border-bottom:1px dashed gainsboro;
}
/*中间主要内容展示区*/
.b5_content{
width:1100px;
height:1600px;
float:left;
background-color:#F1F1F1;
}
.b5_content table{
height:1500px;
width:1080px;
padding:6px 15px 6px 15px;
}
.b5_content table tbody tr td{
padding:0 20px 0 20px;
height: 260px;
cursor:pointer;
}
.b5_content table tbody tr td div{
height:55px;
width:200px;
font-size:16px;
font-weight:500;
font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","\5b8b\4f53",sans-serif;
list-style-type: none;
}
.b5_content table tbody tr td li{
padding:0 20px 0 20px;
width:160px;
}
.b5_content table tbody tr td li:hover{
color:#B1191A;
border-bottom:1px solid #B1191A;
}
.b5_content table tbody tr td div div{
width:200px;
height:30px;
padding:0;
float:left;
}
.b5_content table tbody tr td .price{
padding:2px 0 2px 0;
width:40px;
height:29px;
font-weight:700;
color:#B1191A;
float:left;
}
.b5_content table tbody tr td .num{
padding:0;
width:130px;
height:25px;
border:1px solid gainsboro;
float:right;
}
.b5_content table tbody tr td .num .num_reduce-plus{
padding:0;
width:25px;
height:25px;
text-align: center;
float:left;
}
.b5_content table tbody tr td .num .inp{
padding:0;
width:80px;
height:25px;
border:0;
float:left;
}
/*底部版权声明等区域*/
.b5_bottom{
margin-left:15%;
width:100%;
height:150px;
background-color:#fff;
float:left;
}
.b5_bottom table{
height:100px;
width:80%;
border:1px dashed gray;
padding:20px 30px 20px 30px;
}
.b5_bottom table thead tr td{
padding:0 5% 0 5%;
line-height: 25px;
height:24px;
font-size:14px;
font-weight:400;
font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","\5b8b\4f53",sans-serif;
text-align: center;
}
.b5_bottom table tbody tr td{
padding:0 5% 0 5%;
line-height: 25px;
height:24px;
font-size:14px;
font-weight:400;
font-family: "Microsoft YaHei",tahoma,arial,"Hiragino Sans GB","\5b8b\4f53",sans-serif;
text-align: center;
cursor:pointer;
}
.b5_bottom table tbody tr td:hover{
color:#B1191A;
border-bottom:1px solid #B1191A;
}
</style>
<!--css end-->
<script type="text/javascript"></script>
</head>
<body class="b4">
<!--用户注册隐藏页-->
<div class="-hide">
<div class="shadow"></div>
<fieldset class="b1">
<legend style="font-size:18px;font-style: italic;">用户注册</legend>
<form enctype='multipart/form-data' method='get'>
<div>
用户名：
<input type="text">
</div>
<div>
密 码：
<input type="password">
</div>
<h4>爱好：:</h4>
<div>
男：
<input type="checkbox" name="male" value="1">
女：
<input type="checkbox" name="female" value="2">
动物：
<input type="checkbox" name="animal" value="3">
</div>
<h4>生日：</h4>
<div>
<select>
<option value="1">1970</option>
<option value="2">1980</option>
<option value="3">1990</option>
<option value="4">2000</option>
</select>
年份
<select>
<option value="1">第一</option>
<option value="2">第二</option>
<option value="3">第三</option>
<option value="4">第四</option>
</select>
季度
<select>
<option value="1">上旬</option>
<option value="2">中旬</option>
<option value="3">下旬</option>
</select>
</div>
<h4>性别:</h4>
<div>
male:
<input type="radio" value="male" name="sex"/>
female:
<input type="radio" value="female" name="sex"/>
</div>
<h4>上传照片:</h4>
<div>
<input type="file"/>
<input type="button" name="update" value="上传" />
</div>
<h4>自我介绍</h4>
<div>
<textarea></textarea>
</div>
<h4>数据操作</h4>
<div>
<input type="submit" name="submit" value="提交" />
<input type="reset" name="reset" value="重置" />
</div>
<ol>
必须遵守事项:
<li>防止世界被破坏</li>
<li>维护宇宙的和平</li>
<li>尊老爱幼讲礼貌</li>
</ol>
</form>
</fieldset>
</div>
<!--顶部展示区-->
<div class="b5_top">
<!--最上层标签-->
<div style="background-color:#F1F1F1;width:100%">
<div id="top" class="b5_top_target">
<div class="b5_top_target_left">
送至
<select>
<option>北京</option>
<option>上海</option>
<option>南京</option>
<option>武汉</option>
<option>成都</option>
<option>西安</option>
<option>广州</option>
<option>深圳</option>
<option>天津</option>
</select>
</div>
<div class="b5_top_target_right">
<ul>
<li class="b5_top_target_right_tip">最新活动</li>
<li class="b5_top_target_right_tip">我的账户</li>
<li class="b5_top_target_right_tip">我的订单</li>
<li class="b5_top_target_right_tip">掌上购物</li>
<li class="b5_top_target_right_tip">免费注册</li>
<li class="b5_top_target_right_tip">你好，请登录</li>
</ul>
</div>
</div>
</div>
<!--中部广告展示区-->
<div class="b5_top_display">
<div class="b5_top_display_content">更成熟的互联网行业正在成型，来一起见证</div>
</div>
<!--底部搜索栏-->
<div class="b5_top_search">
<div class="b5_top_search_logo"></div>
<div class="b5_top_search_search">
<form>
<div style="border:3px solid darkred;height:35px;margin-top:60px;">
<input type="text" name="特斯拉" value="Tesla" class="b5_top_search_search_search"/>
<input type="submit" name="搜索" value="搜索" class="b5_top_search_search_button"/>
</div>
<div class="b5_top_search_note">
<ul class="b5_top_search_note_ul">
<li class="b5_top_search_note_li">热门搜索:</li>
<li class="b5_top_search_note_li">Eric</li>
<li class="b5_top_search_note_li">Allen</li>
<li class="b5_top_search_note_li">Meta</li>
<li class="b5_top_search_note_li">Natasha</li>
<li class="b5_top_search_note_li">Oldboy</li>
<li class="b5_top_search_note_li">Lee</li>
<li class="b5_top_search_note_li">Jacky</li>
</ul>
</div>
</form>
</div>
<div class="b5_top_search_shoppingcar"></div>
</div>
</div>
<!--导航标签-->
<div style="border-bottom: 3px solid #B1191A;weight:100%;">
<div class="b2_menu">
<div class="b2_menu_left">全部课程分类</div>
<div class="b2_menu_right">
<a class="b2_menu_right_li">Python脱产</a>
<a class="b2_menu_right_li">Web前端</a>
<a class="b2_menu_right_li">运维开发</a>
<a class="b2_menu_right_li">全栈开发</a>
<a class="b2_menu_right_li">Linux基础</a>
<a class="b2_menu_right_li">PHP开发</a>
</div>
</div>
</div>
<!--主展区-->
<div class="b5_main">
<!--左侧菜单展示区-->
<div class="b5_left">
<div class="b5_left_menu">大数据 ›</div>
<div class="b5_left_menu">云计算 ›</div>
<div class="b5_left_menu">高度自动化 ›</div>
<div class="b5_left_menu">应用层 ›</div>
<div class="b5_left_menu">更高的入行门槛 ›</div>
<div class="b5_left_menu">压缩的人员需求 ›</div>
</div>
<!--右侧主展示区-->
<div class="b5_content">
<div>
<table>
<tbody>
<tr>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
<td>
<img src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dc6b88ba1ca8065387beaa41ba7dfa115%2Fcf1b9d16fdfaaf51a6758f508c5494eef11f7a4e.jpg&thumburl=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D1916061380%2C2771434036%26fm%3D21%26gp%3D0.jpg"/>
<div>
<li>红星美凯龙桃酥甜点</li>
<div>
<div class="price">¥188</div>
<div class="num">
<div class="num_reduce-plus">-</div>
<input type="text" name="num" value="0" class="inp"/>
<div class="num_reduce-plus">+</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!--返回顶部-->
<a href="#top" class="b3_backtotop"></a>
<!--底部展示区-->
<div class="b5_bottom">
<div>
<table>
<thead>
<tr>
<td>购物指南</td>
<td>配送方式</td>
<td>支付方式</td>
<td>售后服务</td>
<td>特色服务</td>
</tr>
</thead>
<tbody>
<tr>
<td>购物流程</td>
<td>上门自提</td>
<td>货到付款</td>
<td>售后政策</td>
<td>夺宝岛 </td>
</tr>
<tr>
<td>会员介绍</td>
<td>2111限时</td>
<td>在线支付</td>
<td>价格保护</td>
<td>上门装机</td>
</tr>
<tr>
<td>生活旅行</td>
<td>配送查询</td>
<td>分期付款</td>
<td>退款说明</td>
<td>延保服务</td>
</tr>
<tr>
<td>常见问题</td>
<td>收费标准</td>
<td>邮局汇款</td>
<td>返修换货</td>
<td>京东EA卡</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- WEB前端-CSS-静态购物页面V1
- WEB前端-CSS-静态购物页面V2
- jsp页面的调用静态资源（如img，css，js）等资源时路径的写法
- CSS+JS实现的静态页面翻页效果
- 用maven搭建springmvc项目时，jsp页面无法加载js或者css等静态资源
- Spring mvc 项目中页面访问不到静态文件，如img ， js ， css 等
- 一个静态页面效仿1（div+css）
- CSS+JS实现的静态页面翻页效果
- HTML+CSS编写静态网站-38 Vedio页面适配桌面布局
- HTML页面后台取静态资源(CSS,JS文件)的路劲问题！
- springmvc出现页面引用的js，css等静态资源访问出现404问题
- springmvc配置后jsp页面不能加载css,js等静态文件
- XHTML+CSS的静态页面实现多风格选择的方法
- HTML+CSS编写静态网站-32 为关于页面添加样式
- HTML+CSS编写静态网站-33 创建Contact页面
- Laravel页面引入css/js等静态文件
- div+css 误区 html标准标签 css建议 静态页面制作
- 静态页面生成技术中，把css，js，以及内容中的img标签放在同一个目录下
- html静态页面到jsp文件css错误
- HTML+CSS编写静态网站-24 调整页面文本