<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href='css/style.css' type="text/css" rel="stylesheet">
</head>
<body>
<div class="bg">
<!-- 顶栏菜单栏 -->
<div class="top">
<div class="top-l">
<a href="#" style="color:red;">亲,请登录</a>
<a href="#">免费注册</a>
<a href="#">手机逛淘宝</a>
</div>
<div class="top-r">
<ul>
<li><a href="#" style="color:red;">淘宝网首页</a></li>
<li><a href="#">我的淘宝</a></li>
<li><a href="#"><span></span>购物车</a></li>
<li><a href="#"><span></span>收藏夹</a></li>
<li><a href="#">商品分类</a></li>
<li><a href="#">卖家中心</a></li>
<li><a href="#">联系客服</a></li>
<li><a href="#"><span></span>网站导航</a></li>
</ul>
</div>
</div>
<div class="top-x">
<a href="#"><img src='img/tianmao.jpg'></a>
</div>
<!-- 搜索栏 -->
<div class="sousuo">
<img src='img/logo.jpg'>
<input type="text" name="address" size="60" maxlength="60" style="color:darkgray;" value=" 时尚男装"
onFocus="if(value==defaultValue){value='';this.style.color='#000'}" onBlur="if(!value){value=defaultValue;this.style.color='#999'}">
<ul>
<li><a href="#" style="color:red;">一淘限时抢</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>
<button><a href="#">搜索</a></button>
<!-- 超市平台 -->
<div class="daily">
<ul>
<li><a href="#">每日爆品 1元起</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="xia-l">
<table>
<img src='img/bag.jpg'>
<tr>
<td><a href="#">双肩背包</a></td>
<td><a href="#">托特包</a></td>
<td> <a href="#">zara</a></td>
<td><a href="#">背包</a></td>
</tr>
<tr>
<td><a href="#" class="color">行李箱</a></td>
<td><a href="#">腰包</a></td>
<td><a href="#">斜挎男包</a></td>
<td><a href="#">挎包</a></td>
</tr>
</table>
<table>
<img src='img/数码.jpg'>
<tr>
<td><a href="#">空调</a></td>
<td><a href="#">冰箱</a></td>
<td> <a href="#">耳机</a></td>
<td><a href="#" class="color">格力空调</a></td>
</tr>
<tr>
<td><a href="#">投影仪</a></td>
<td><a href="#">键盘</a></td>
<td><a href="#">小冰箱</a></td>
<td><a href="#">饮水机</a></td>
</tr>
</table>
<table>
<img src='img/women.jpg'>
<tr>
<td><a href="#">凉鞋</a></td>
<td><a href="#">半身裙</a></td>
<td><a href="#">上衣夏</a></td>
<td><a href="#">套装夏</a></td>
</tr>
<tr>
<td><a href="#">鞋子</a></td>
<td><a href="#">高跟鞋</a></td>
<td><a href="#">半身裙夏</a></td>
<td><a href="#" class="color">旗袍</a></td>
</tr>
</table>
<table>
<img src='img/man.jpg'>
<tr>
<td><a href="#">短裤</a></td>
<td><a href="#">电动车</a></td>
<td><a href="#">帆布鞋</a></td>
<td><a href="#">打火机</a></td>
</tr>
<tr>
<td><a href="#">眼镜</a></td>
<td> <a href="#" class="color">头盔</a></td>
<td><a href="#">男士衬衫</a></td>
<td><a href="#">男裤</a></td>
</tr>
</table>
<table>
<img src='img/母婴.jpg'>
<tr>
<td><a href="#">饼干</a></td>
<td><a href="#">文具盒</a></td>
<td><a href="#">婴儿床</a></td>
<td><a href="#" class="color">护膝</a></td>
</tr>
<tr>
<td><a href="#">奶粉</a></td>
<td><a href="#">妈咪包</a></td>
<td><a href="#">月子服</a></td>
<td><a href="#">铅笔盒</a></td>
</tr>
</table>
<table>
<img src='img/家居.jpg'>
<tr>
<td><a href="#">床垫子</a></td>
<td><a href="#">拖鞋女</a></td>
<td> <a href="#">枕头</a></td>
<td><a href="#" class="color">四件套</a></td>
</tr>
<tr>
<td><a href="#">衣架</a></td>
<td><a href="#">毛巾</a></td>
<td><a href="#">洗脸巾</a></td>
<td><a href="#">夏凉被</a></td>
</tr>
</table>
<table>
<img src='img/美食.jpg'>
<tr>
<td><a href="#">咖啡</a></td>
<td><a href="#">饼干</a></td>
<td><a href="#">茶叶</a></td>
<td><a href="#">零食礼包</a></td>
</tr>
<tr>
<td><a href="#" class="color">巧克力</a></td>
<td><a href="#">牛肉干</a></td>
<td><a href="#">白酒</a></td>
<td> <a href="#">矿泉水</a></td>
</tr>
</table>
<table>
<img src='img/美妆.jpg'>
<tr>
<td><a href="#">沐浴乳</a></td>
<td><a href="#" class="color">防晒霜</a></td>
<td> <a href="#">香水</a></td>
<td><a href="#">口红</a></td>
</tr>
<tr>
<td><a href="#">防晒喷雾</a></td>
<td><a href="#">眼影盘</a></td>
<td><a href="#">眼影盒</a></td>
<td><a href="#">美甲</a></td>
</tr>
</table>
</div>
<div class="banner">
<a href="#" class="big"><img src='img/banner.jpg'></a>
<a href="#" class="small"><img src='img/产品.jpg' ></a>
</div>
<!-- 我的淘宝 -->
<div class="my">
<table>
<tr>
<td colspan="2" style="border-top-style:none;">
<img src="img/五角星.jpg" class="star">
<a href="#" class="star">
<span>我的淘宝</span>
</a>
</td>
</tr>
<tr>
<td>
<a href="#"><img src="img/天猫logo.jpg"></a>
</td>
<td>
<a href="#"><img src='img/淘宝网logo.jpg'></a>
</td>
</tr>
<tr>
<td>
<a href="#"><img src='img/聚划算logo.jpg'></a>
</td>
<td>
<a href="#"><img src='img/天猫国际logo.jpg'></a>
</td>
</tr>
<tr>
<td>
<a href="#"><img src='img/9.9logo.jpg'></a>
</td>
<td>
<a href="#"><img src='img/淘抢购logo.jpg'></a>
</td>
</tr>
<tr>
<td>
<a href="#"><img src='img/天猫超市logo.jpg'></a>
</td>
<td>
<a href="#"><img src='./img/大药房logo.jpg'></a>
</td>
</tr>
</table>
</div>
<!-- 超值专区 -->
<div class="chaozhi">
<p>超值活动专区</p>
<em>每天10点更新</em>
</div>
<div class="fashion">
<img src='img/时尚.jpg'>
<img src='img/女装特惠.jpg' style="padding-left:5px;">
</div>
<div class="station">
<img src='img/一站式.jpg'>
</div>
<!-- 一站式购物 -->
<div class="yizhanshi">
<a href="#">
<p>
<img src='img/男装.jpg'>
<em>酱心十足 下饭开胃</em>
</p>
</a>
<a href="#">
<p>
<img src='img/家居1.jpg'>
<em>海尔净水品牌团</em>
</p>
</a>
<a href="#">
<p>
<img src='img/聚划算.jpg'>
<em>聚划算天天折上折</em>
</p>
</a>
<a href="#">
<p>
<img src='img/活动.jpg'>
<em>海尔净水品牌团</em>
</p>
</a>
</div>
<!-- 商品展区 -->
<div class="like">
<h3>猜你喜欢</h3>
<div class="tuijian1">
<a href="#">
<img src='img/1.jpg'>
<p style="margin:-15px 0px 0px 164px;">月销3</p>
</a>
</div>
<div class="tuijian1">
<a href="#">
<img src='img/2.jpg'>
<p style="margin:-15px 0px 0px 145px;">月销2981</p>
</a>
</div>
<div class="tuijian1">
<a href="#">
<img src='img/3.jpg'>
<p style="margin:-15px 0px 0px 132px;">月销5.13万</p>
</a>
</div>
<div class="tuijian1">
<a href="#">
<img src='img/4.jpg'>
<p style="margin:-15px 0px 0px 133px;">月销5.28万</p>
</a>
</div>
<div class="tuijian1">
<a href="#">
<img src='img/5.jpg'>
<p style="margin:-15px 0px 0px 152px;">月销143</p>
</a>
</div>
<div class="tuijian1">
<a href="#">
<img src='img/6.jpg'>
<p style="margin:-15px 0px 0px 133px;">月销2.08万</p>
</a>
</div>
<div class="tuijian1">
<a href="#">
<img src='img/7.jpg' >
<p style="margin:-15px 0px 0px 150px;">月销327</p>
</a>
</div>
<div class="tuijian1">
<a href="#">
<img src='img/8.jpg'>
<p style="margin:-15px 0px 0px 145px;">月销5106</p>
</a>
</div>
<div class="tuijian1">
<a href="#">
<img src='img/9.jpg'>
<p style="margin:-15px 0px 0px 150px;">月销384</p>
</a>
</div>
<div class="tuijian1">
<a href="#">
<img src='img/10.jpg'>
<p style="margin:-15px 0px 0px 132px;">月销3.22万</p>
</a>
</div>
<div class="tuijian2">
<a href="#">
<img src='img/11.jpg'>
<p style="">月销3.22万</p>
</a>
</div>
<div class="tuijian2">
<a href="#">
<img src='img/15.jpg' >
<p>月销3.22万</p>
</a>
</div>
<div class="tuijian2">
<a href="#">
<img src='img/12.jpg' >
<p>月销3.22万</p>
</a>
</div>
<div class="tuijian2">
<a href="#">
<img src='img/13.jpg' >
<p>月销3.22万</p>
</a>
</div>
<div class="tuijian2">
<a href="#">
<img src='img/14.jpg' >
<p>月销3.22万</p>
</a>
</div>
<div class="tuijian2">
<a href="#">
<img src='img/16.jpg'>
<p>月销3.22万</p>
</a>
</div>
<div class="tuijian2">
<a href="#">
<img src='img/17.jpg' >
<p>月销3.22万</p>
</a>
</div>
<div class="tuijian2">
<a href="#">
<img src='img/18.jpg' >
<p>月销3.22万</p>
</a>
</div>
<div class="tuijian2">
<a href="#">
<img src='img/19.jpg' >
<p>月销3.22万</p>
</a>
</div>
<div class="tuijian2">
<a href="#">
<img src='img/20.jpg' >
<p>月销3.22万</p>
</a>
</div>
</div>
</div>
<div class="number">
<a href="#" class="main">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
<!-- 底栏 -->
<div class="footer">
<a href="#"><p>联系客服</p></a>
<a href="#"><p>开放平台</p></a>
<a href="#"><p>法律声明</p></a>
<p>Taobao版权所有2003-现在</p>
<a href="#"><p>增值电信业务经营许可证</p></a>
<img src='img/公安.jpg' style="float:left;height:20px;margin:0 -12px 0 10px;">
<p>浙公网安备 33010002******号</p>
<a href="#"><p>阿里云计算</p></a>
<a href="#"><p>AliOS</p></a>
<a href="#"><p>阿里通信</p></a>
<a href="#"><p>高德</p></a>
<a href="#"><p>阿里巴巴集团</</a>
<a href="#"><p>淘宝网</p></a>
<a href="#"><p>天猫</p></a>
<a href="#"><p>聚划算</p></a>
<a href="#"><p>全球速卖通</p></a>
<a href="#"><p>阿里巴巴国际交易市场</p></a>
<a href="#"><p>1688</p></a>
<a href="#"><p>阿里妈妈</p></a>
<a href="#"><p>飞猪</p></a>
<a href="#"><p>UC</p></a>
<a href="#"><p>友盟</p></a>
<a href="#"><p>虾米</p></a>
<a href="#"><p>阿里星球</p></a>
<a href="#"><p>钉钉</p></a>
<a href="#"><p>支付宝</p></a>
<a href="#"><p>达摩院</p></a>
<div class="symbol">
<img src='img/police.jpg'>
<img src='img/徽.jpg'>
<img src='img/police1.jpg'>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
font-family: 黑体;
}
/* 字体图标引用 */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?a5ern');
src: url('fonts/icomoon.eot?a5ern#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?a5ern') format('truetype'),
url('fonts/icomoon.woff?a5ern') format('woff'),
url('fonts/icomoon.svg?a5ern#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
/* 背景设置 */
.bg {
width: 1520px;
height: 2270px;
}
/* 顶部栏设置 */
.top {
height: 33px;
font-size: 11px;
padding-left: 290px;
line-height: 33px;
background-color: #F5F5F5;
overflow:hidden;
}
.top-l {
float: left;
margin-left: 20px;
}
.top-r ul{
float:right;
margin-right: 300px;
}
.top-r ul li {
float: left;
margin-right: 15px;
}
.top-r span {
font-family: 'icomoon';
font-size: 10px;
color: #808080;
}
.top-r span:hover{
color:#F03726;
}
.top a {
color: gray;
}
.top a:hover {
color: #FF0000;
}
/* 天猫超市一站式购齐 */
.top-x {
width: 1520px;
height: 80px;
background-color: #4ad2aa;
}
.top-x img {
display: block;
width: 1070px;
height: 80px;
margin: 0 auto;
}
/* 搜索栏 */
input {
float: left;
width: 530px;
height: 30px;
margin-left: 30px;
margin-top: 2px;
border: 2.5px solid #FF0000;
border-right: none;
outline: none;
}
button {
float: left;
width: 70px;
height: 35px;
margin-left: 930px;
margin-top: -73px;
font-size: 14px;
border: 0;
right: 2px;
background: #f03726;
}
button a {
color: white;
}
.sousuo {
float: left;
width: 1020px;
height: 75px;
margin: 20px 0px 0px 230px;
}
.sousuo img{
float:left;
width:170px;
height:75px;
}
.sousuo ul {
float: left;
margin: 5px 0px 0px 30px;
}
.sousuo ul li {
float: left;
padding-right: 12px;
font-size: 14px;
}
.sousuo a {
color:#808080;
}
.sousuo a:hover {
text-decoration: underline;
color: #f03726;
}
.sousuo a:active {
border: 1px dashed #F03726;
}
/* 每日爆品 */
.daily {
width: 1520px;
height: 30px;
margin-top: 120px;
background-color: #f03726;
}
.daily a {
color: #FFFFFF;
}
.daily ul {
margin-left: 225px;
}
.daily ul li {
float: left;
padding-right: 50px;
font-size: 14px;
line-height: 30px;
}
/* 商品种类 */
.xia-l {
width: 235px;
height: 480px;
font-size: 22px;
margin-left: 225px;
border-color: #F03726;
border-style: solid;
border-width: 0px 1px 1px;
background-color: white;
overflow: hidden;
}
.xia-l img{
width:28px;
margin:5px;
}
.xia-l table {
width: 236px;
height: 15px;
padding: 9px 0px 12px 50px;
margin: -60px 0px 8px 0px;
line-height: 14px;
border-bottom: 1px solid #F5F5F5;
}
.xia-l table:hover {
background-color: #F5F5F5;
}
.xia-l a {
color: #808080;
}
.xia-l a:hover {
color: #FF0000;
}
.xia-l table td {
padding-right: 5px;
font-size: 12px;
}
.xia-l .color{
color:#F03726;
}
.banner {
float: left;
width: 605px;
height: 243px;
margin: -481px 0px 0px 470px;
}
.banner .big img{
width:465px;
height:243px;
}
.banner .small img{
float:left;
width:125px;
height:243px;
margin:-247px 0px 0px 477px;
}
/* 我的淘宝 */
.my {
float: right;
width: 208px;
height: 238px;
margin: -480px 224px 0px 0px;
border: 1px solid #F5F5F5;
text-align:center;
}
.my table{
width:100%;
height:100%;
border-collapse: collapse;
}
.my span{
font-size:14px;
color:#F03726;
}
.my .star{
width:21px;
vertical-align:bottom;
}
.my img{
width:70px;
}
/* 超值活动专区 */
.chaozhi {
float: left;
width: 465px;
height: 26px;
margin: -230px 0px 0px 470px;
color: #F03726;
font-size: 13px;
border-bottom: 2px solid #F03726;
}
.chaozhi p{
float:left;
margin-top:5px;
color:#A9A9A9;
}
.chaozhi em{
float:right;
margin-top:5px;
font-style:normal;
}
.fashion {
float: left;
width: 465px;
height: 190px;
margin: -190px 0px 0px 470px;
}
.fashion img{
float:left;
width:230px;
height:190px;
}
.station{
position:absolute;
right:440px;
bottom:-11px;
width:130px;
}
.station img{
width:130px;
height:221px;
}
.yizhanshi {
position: relative;
float: right;
width: 208px;
height: 221px;
margin: -220px 224px 0px 0px;
border: 1px solid #F5F5F5;
}
.yizhanshi img{
float:left;
height:15px;
margin:-1px 5px 10px 7px;
}
.yizhanshi p{
float:left;
margin-top:5px;
font-size:10px;
}
.yizhanshi em{
font-style:normal;
}
.yizhanshi a {
color: #808080;
}
.yizhanshi a:hover {
color: #F03726;
}
/* 商品展示区 */
.like {
width: 1072px;
margin: 25px auto;
}
.like h3 {
margin-bottom: 5px;
font-family: 幼圆;
font-size: 15px;
color: #F03726;
}
.tuijian1,.tuijian2 {
position: relative;
float: right;
width: 212px;
height: 330px;
margin-left: -1px;
border: 1px solid #F5F5F5;
}
.tuijian1:hover,
.tuijian2:hover{
z-index: 1;
border-color: #F03726;
}
.tuijian1 img,
.tuijian2 img{
width:180px;
height:285px;
margin:17px;
border-bottom:1px solid #f5f5f5;
}
.tuijian1 p{
font-size:13px;
color:#A9A9A9;
}
.tuijian2 img{
width:175px;
height:285px;
margin:19px;
}
.tuijian2 p{
margin:-18px 0px 0px 127px;
font-size:13px;
color:#A9A9A9;
}
.number {
position: relative;
top: -100px;
text-align: center;
}
.number a {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: #F03726;
text-align: center;
text-decoration: none;
border: 1px solid #F03726;
}
.number .main {
border: 1px solid #F03726;
background-color: #fff;
color: #000;
}
/* 底栏 */
.footer {
position: relative;
width: 1072px;
height: 180px;
margin: 0 auto;
font-size: 12px;
}
.footer p {
float: left;
margin-left: 15px;
line-height: 20px;
}
.footer p,
a {
color:#808080;
}
.symbol {
position: absolute;
top: 60px;
left: 10px;
width: 150px;
}
.symbol img {
width: 30px;
}
更多推荐
淘宝网首页静态页面自写代码(html+css）
发布评论