一 购物前台页面
没有css及js
二 效果图
三 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cl1{
margin-left:8px;margin-right:8px
}
.cl2{
margin-left:0px;margin-right:20px
}
.cl3{
margin-left:4px;margin-top:5px;
}
.cl4{
margin-left:20px;
}
.cl5{
margin-left:60px;
}
.cl6{
font-size:15px;font-weight:700;color:white;
}
</style>
<style type="text/css">a {text-decoration: none;color:black;font-weight:600;}</style> <!--注释所有a标签里的文字下划线,并将文字统一设为黑色-->
</head>
<body style="margin:0 auto;">
<div style="width:91%;height:30px;background-color:#e6e3e3;margin:0 auto;line-height:30px;">
<div style="float:left;">
<a href="http://www.soso.com" class="cl1" target="_blank">收藏本站</a>
</div>
<div style="float:right;">
<a href="http://www.soso.com" class="cl1" target="_blank">登陆</a>
<a href="http://www.soso.com" class="cl1" target="_blank">注册</a>
<a href="http://www.soso.com" class="cl1" target="_blank">我的订单</a>
<a href="http://www.soso.com" class="cl1" target="_blank">我的收藏</a>
<a href="http://www.soso.com" class="cl1" target="_blank">VIP会员俱乐部</a>
<a href="http://www.soso.com" class="cl1" target="_blank">客户服务</a>
<a target="_blank" href="http://www.soso.com" class="cl1">关注</a>
<a href="http://www.soso.com" class="cl1" target="_blank">手机版</a>
</div>
</div> <!--头部-->
<div style="width:60%;float:left;height:100px;margin-left:300px;">
<div style="float:left;width:40%">
<img style="height:80px;width:150px;padding-top:10px;padding-left:50px" src="感恩3.png" title="促销" alt="hehe"/>
</div>
<div style="float:right;width:60%;padding-top:20px;">
<div>
<input type="text" style="height:30px;width:300px;float:left;border:2px solid #e6e3e3;">
<a href="abc.html" target="_blank">
<img src="搜索.png" style="height:35px;">
</a>
</div>
<div style="height:30px;width:300px;">
<a>热门搜索:</a>
<a href="搜索.png" target="_blank">火龙果</a>
<a href="http://www.soso.com" target="_blank">瓜子</a>
</div>
</div>
</div> <!--中间的搜索框-->
<div style="width:120px;float:left;height:100px;line-height:75px;">
<!--<input style="font-size:19px;width:110px;height:40px;" type="button" value="购物车2件"/>-->
<select name="shop" style="width:110px;height:40px;font-size:17px;">
<optgroup label="购物车 2 件"></optgroup>
<option>汗大衣</option>
<option>臭球鞋</option>
</select>
</div> <!--搜索框旁边的下拉列表-->
<div style="clear:both"></div> <!--使接下来的div可以正常下移-->
<div style="width:100%;height:40px;background-color:red;line-height:40px;">
<div style="float:left;width:22%;height:40px;">
<div style="width:80%;margin:0 auto;float:right;text-align:center;border:2px red;background-color:#e88c8c">
<a class="cl6" href="http://www.soso.com" target="_blank">全部商品分类</a>
</div>
</div>
<div style="float:left;width:50%;height:40px;">
<div style="float:left;background-color:#c71515;width:10%;text-align:center;">
<a class="cl6" href="http://www.soso.com" target="_blank">主页</a>
</div>
<div style="float:left;background-color:#c71515;width:10%;text-align:center;">
<a class="cl6" href="http://www.soso.com" target="_blank">网