前言：
七和八首先要感谢一下陈同学陈大佬，感谢他提供的援助，疯狂示爱。
用css优化的购物模块首页
预览如下：
shoppingIndex.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>漫步时尚广场-购物栏目</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
.focusBox {
position: absolute;
top: 490px;
width: 120px;
left: 50%;
margin-left: -60px;
list-style: none;
}
.focusBox li {
float: left;
margin-right: 10px;
width: 15px;
height: 15px;
border-radius: 10px;
background: gray;
cursor: pointer;
}
.focusBox li.cur {
background: #f60;
opacity: 0.6;
filter: alpha(opacity=60);
}
</style>
</head>
<body>
<!--顶部区域 start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="top_line">
<tr>
<td bgcolor="#f7f7f7" ><table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="padding-top"><img src="images/star.jpg">收藏 | HI，欢迎来订购 ！<a href="../manageadmin/login.html" class="orange">[请登录]</a> <a href="../register/register.html" class="orange"> [免费注册]</a></td>
<td align="right" > 客户服务<img src="images/arrow.gif"> 网站导航<img src="images/arrow.gif"> <span class="droparrow"><span class="shopcart"></span>我的购物车<span class="orange">0</span>件<img src="images/arrow.gif" /></span></td>
</tr>
</table></td>
</tr>
</table>
<!--顶部区域 end-->
<!--logo和banner start-->
<table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="95"><a href="../index.html"><img src="images/logo.jpg"></a></td>
<td align="right"><img src="images/banner.jpg"></td>
</tr>
</table>
<!--logo和banner end-->
<!--菜单导航 start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ce2626" >
<tr>
<td><table width="1200" border="0" cellspacing="0" cellpadding="4" align="center" class="nav_font16">
<tr>
<td width="200"> </td>
<td width="80" align="center" class="nav_active"><a href="shoppingIndex.html" class="white">首页</a></td>
<td width="100" align="center"><a href="shoppingShow.html" class="white">最新上架</a></td>
<td width="100" align="center">品牌活动</td>
<td width="100" align="center">原厂直供</td>
<td width="80" align="center">团购</td>
<td width="100" align="center">限时抢购</td>
<td width="100" align="center">促销打折</td>
<td width="200" align="center"> </td>
</tr>
</table></td>
</tr>
</table>
<!--菜单导航 end-->
<!--中间部分 start-->
<table width="1200" border="0" align="center" cellpadding="0" cellspacing="0" class="padding-top">
<tr>
<td width="220" valign="top" ><!--购物分类 start-->
<table width="100%" border="0" cellspacing="1" cellpadding="0" class="table1" bgcolor="#e5e4e1">
<tr>
<th >女装</th>
</tr>
<tr>
<td ><span class="red_dot"></span><a href="#" >上衣</a><img src="images/arrow_r.jpg" align="right" ></td>
</tr>
<tr>
<td ><span class="red_dot"></span>下装<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<td ><span class="red_dot"></span>连衣裙<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<td ><span class="red_dot"></span>内衣<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<th>男装</th>
</tr>
<tr>
<td ><span class="red_dot"></span>T恤<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<td ><span class="red_dot"></span>短裤<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<td ><span class="red_dot"></span>衬衫<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<th>童装</th>
</tr>
<tr>
<td ><span class="red_dot"></span>上衣<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<td ><span class="red_dot"></span>裤子<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<th>运动</th>
</tr>
<tr>
<td ><span class="red_dot"></span>运动裤<img src="images/arrow_r.jpg" align="right"></td>
</tr>
<tr>
<td ><span class="red_dot"></span>跑步鞋<img src="images/arrow_r.jpg" align="right"></td>
</tr>
</table>
<!--购物分类end--></td>
<td width="716" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
<!--焦点图 start-->
<img src="images/pic1.jpg" width="690" height="350" id="focusImg">
<ul class="focusBox">
<li onclick="showPic(1);"></li>
<li onclick="showPic(2);"></li>
<li onclick="showPic(3);"></li>
</ul>
<!--焦点图 end-->
</td>
<td valign="top">
<!--右侧start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><!--公告 start-->
<table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#eeeeee">
<tr>
<td height="35" bgcolor="#f7f7f7" class="notice_title">公告</td>
</tr>
<tr>
<td bgcolor="#ffffff"><table width="95%" border="0" align="center" cellpadding="0" cellspacing="0" class="padding-top">
<tr>
<td height="30" class="notice_text"><a href="#"><span class="gray_dot"></span>李主任点赞网店第一村</a></td>
</tr>
<tr>
<td height="30" class="notice_text"><span class="gray_dot"></span>网购维权有望一站解决</td>
</tr>
<tr>
<td height="30" class="notice_text"><span class="gray_dot"></span>25国30万商品全球直供</td>
</tr>
<tr>
<td height="30" class=" notice_text"><span class="gray_dot"></span>青岛交警淘宝体获公安部肯定</td>
</tr>
<tr>
<td height="30" class=" notice_text"><span class="gray_dot"></span>面对新常态 惟改革创新</td>
</tr>
<tr>
<td height="30" class=" notice_text"><span class="gray_dot"></span>差评敲诈淘宝 “差评师”获刑8个月</td>
</tr>
</table></td>
</tr>
</table>
<!--公告 end--></td>
</tr>
<tr>
<td height="8"></td>
</tr>
<tr>
<td><!--品牌推荐区 start-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f7f7f7">
<tr>
<td align="center"><img src="images/link1.gif" width="80" height="35"></td>
<td align="center"><img src="images/link2.gif" width="80" height="35"></td>
<td align="center"><img src="images/link3.gif" width="80" height="35"></td>
</tr>
<tr>
<td align="center"><img src="images/link4.gif" width="80" height="35"></td>
<td align="center"><img src="images/link7.jpg" width="90" height="45" /></td>
<td align="center"><img src="images/link6.jpg" width="90" height="45"></td>
</tr>
<tr>
<td align="center"><img src="images/link5.jpg" width="90" height="45" /></td>
<td align="center"><img src="images/link8.jpg" width="90" height="45"></td>
<td align="center"><img src="images/link9.jpg" width="90" height="45"></td>
</tr>
</table>
<!--品牌推荐区 end--></td>
</tr>
</table>
<!-- 右侧end--></td>
</tr>
</table></td>
</tr>
<!--产品分类区start-->
<tr>
<td><table width="99%" border="0" align="right" cellpadding="0" cellspacing="1" bgcolor="#dddddd">
<tr>
<td width="20%" bgcolor="#ffffff"><table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><img src="images/pro1.jpg" width="65" height="65"></td>
<td class="font14">热门品类<br/>
护肤彩妆启示</td>
</tr>
<tr>
<td colspan="2">洗护套装 面部精华 香水</td>
</tr>
<tr>
<td colspan="2">粉底液 面霜 洁面</td>
</tr>
<tr>
<td colspan="2">美容工具 复方精油 洗发水 </td>
</tr>
</table></td>
<td width="20%" bgcolor="#ffffff"><table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><img src="images/pro2.jpg" width="65" height="65"></td>
<td class="font14">强效保养<br/>
逆转皮肤问题</td>
</tr>
<tr>
<td colspan="2">隔离 保湿 补水 清洁</td>
</tr>
<tr>
<td colspan="2">清爽 排毒 去角质</td>
</tr>
<tr>
<td colspan="2">美白 袪痘 收缩毛孔 紧质</td>
</tr>
</table></td>
<td width="20%" bgcolor="#ffffff"><table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><img src="images/pro3.jpg" width="65" height="65"></td>
<td class="font14"> 人气品牌<br/>
最IN大牌</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">薇姿
欧莱雅
美宝莲 </td>
</tr>
<tr>
<td colspan="2">SK-II
百雀羚
雅顿 </td>
</tr>
<tr>
<td colspan="2">美即
谜尚
妮维雅 </td>
</tr>
</table></td>
<td width="20%" bgcolor="#ffffff"><table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><img src="images/pro4.jpg" width="65" height="65"></td>
<td class="font14">潮流单品<br/>
当季最红</td>
</tr>
<tr>
<td colspan="2">奶浴奶膏 补水凝胶 </td>
</tr>
<tr>
<td colspan="2">防装生发液 假发片 香水</td>
</tr>
<tr>
<td colspan="2">艾米尔彩妆 丰胸美乳霜</td>
</tr>
</table></td>
<td width="20%" bgcolor="#ffffff"><table width="90%" border="0" align="center" cellpadding="3" cellspacing="0">
<tr>
<td><img src="images/pro5.jpg" width="65" height="65"></td>
<td class="font14">美装精选<br/>
超赞专题</td>
</tr>
<tr>
<td colspan="2">孕妇护肤 护季保养</td>
</tr>
<tr>
<td colspan="2">护肤嫩白集锦 快速约会妆</td>
</tr>
<tr>
<td colspan="2">美容时钟模式 5步护肤术</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- 产品分类区end-->
</table></td>
</tr>
</table>
<!--中间部分 end-->
<!--底部 start--><Br/>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#6a6665" height="35" class="foot_bg">
<tr>
<td class="padding-top"><table width="1200" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="20%" align="center"><img src="images/gray1.jpg" ></td>
<td width="20%" align="center"><img src="images/gray2.jpg" ></td>
<td width="20%" align="center"><img src="images/gray3.jpg" ></td>
<td width="20%" align="center"><img src="images/gray4.jpg" ></td>
<td width="20%" align="center"><img src="images/gray5.jpg" ></td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#efefef" class="foot_line padding-top"><table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top"><img src="images/red1.jpg"><br>
<img src="images/line1.jpg"/></td>
<td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="font16 padding-bottom">新手指导</td>
</tr>
<tr>
<td>用户注册</td>
</tr>
<tr>
<td>电话下单</td>
</tr>
<tr>
<td>购物流程</td>
</tr>
<tr>
<td>购物保障</td>
</tr>
<tr>
<td>服务协议</td>
</tr>
</table></td>
<td align="center" valign="top"><img src="images/red2.jpg"><br>
<img src="images/line1.jpg"/></td>
<td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="font16 padding-bottom">支付方式</td>
</tr>
<tr>
<td>货到付款</td>
</tr>
<tr>
<td>商城卡支付</td>
</tr>
<tr>
<td>支付宝、网银支付</td>
</tr>
<tr>
<td>优惠券抵用</td>
</tr>
</table>
<td align="center" valign="top"><img src="images/red3.jpg"><br>
<img src="images/line1.jpg"/></td>
<td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="font16 padding-bottom">配送方式</td>
</tr>
<tr>
<td>闪电发货</td>
</tr>
<tr>
<td>满百包邮</td>
</tr>
<tr>
<td>配送范围及时间</td>
</tr>
<tr>
<td>商品验收及签收</td>
</tr>
<tr>
<td>服务协议</td>
</tr>
</table></td>
<td align="center" valign="top"><img src="images/red4.jpg"><br>
<img src="images/line1.jpg"/></td>
<td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="font16 padding-bottom">售后服务</td>
</tr>
<tr>
<td>退换货协议</td>
</tr>
<tr>
<td>关于发票</td>
</tr>
<tr>
<td>退换货流程</td>
</tr>
<tr>
<td>退换货运费</td>
</tr>
</table></td>
<td align="center" valign="top"><img src="images/red5.jpg"><br>
<img src="images/line1.jpg"/></td>
<td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="font16 padding-bottom">关于帐号</td>
</tr>
<tr>
<td>修改个人信息</td>
</tr>
<tr>
<td>修改密码</td>
</tr>
<tr>
<td>找回密码</td>
</tr>
</table></td>
<td align="center" valign="top"><img src="images/red6.jpg"><br>
<img src="images/line1.jpg"/></td>
<td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="font16 padding-bottom">优惠活动</td>
</tr>
<tr>
<td>竞拍须知</td>
</tr>
<tr>
<td>抢购须知</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#efefef" align="center" class="padding-top">Copyright 2015-2020 Q- Walking Fashion E&S 漫步时尚广场（QST教育）版权所有<Br/>
中国青岛 高新区河东路8888号 青软教育集团 咨询热线：400-658-0166 400-658-1022<br/>
<img src="images/foot_pic.jpg"></td>
</tr>
</table>
<!--底部 end-->
</body>
</html>
style.css
@charset "utf-8";
/* CSS Document */
body{
font-size:12px;font-family:microsoft yahei;margin:0;color:#000
}
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
}
.padding-top{
padding-top:8px
}
/*头部*/
.top_line{
border-bottom:1px solid #ccc;
font-size:12px;font-family:"宋体";
line-height:30px
}
.nav_font16{
font-size:16px;
font-weight:700;
color:#fff
}
.orange{
font-weight:700;
color:#f60
}
.nav_active{
background:#b12121;
padding:5px 0;
height:30px
}
a.white{
color:#fff;
text-decoration:none
}
a.white:hover{
color:#ff0;
text-decoration:none
}
.shopcart{
width:16px;height:16px;
display:inline-block
}
/*左侧导航*/
.table1 tr th{
height:33px;
background:#e5e4e1;
font-size:15px;
text-indent:10px;
text-align:left
}
.table1 tr td{
height:33px;background:#fafafa;
font-size:14px;text-indent:10px;
text-align:left
}
.red_dot{
font-size:25px;
margin-right:10px;
width:8px;height:8px;display:inline-block
}
/*右侧公告*/
.notice_title{
font-size:16px;
text-indent:20px;
text-align:left
}
.gray_dot{
color:#ccc;
font-size:25px;
margin-right:10px;
width:8px;
height:8px;
display:inline-block
}
.notice_text{
display:block;
width:230px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
text-align:left
}
/*foot*/
.foot_bg{
line-height:20px;
padding-top:10px;
font-size:12px
}
.padding-bottom{
padding-bottom:10px
}
.foot_line{
border-bottom:1px solid #ccc;
font-size:12px;
margin-top:10px
}
后记
和你已经陌生到，连是否要点赞都要斟酌再三的地步了——来自网易云音乐《我害怕》热评
