html + css 实现淘宝首页（静态页面）
待续。。。
效果图：
html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>淘宝网 - 淘！我喜欢</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="icon" href="favicon.ico">
<base target="_blank">
</head>
<body>
<!-- 头部信息 -->
<div id="headMessage" class="clearfix layer">
<!-- 左边 -->
<ul class="fl">
<li>
<span>中国大陆</span>
<span></span>
</li>
<li class="mr7">
<a href="#" class="login mr7">亲，请登录</a>
<a href="#">免费注册</a>
</li>
<li class="mr7">
<a href="#">手机逛淘宝</a>
</li>
<li>
<a href="#">网页无障碍</a>
</li>
</ul>
<!-- 右边 -->
<ul class="fr">
<li>
<a href="#">我的淘宝</a>
<span></span>
</li>
<li>
<span class="mr5 c4"></span>
<a href="#">购物车</a>
<strong class="c4">0</strong>
<span></span>
</li>
<li>
<a href="#"><span></span>收藏夹</a>
<span></span>
</li>
<li>
<a href="#">商品分类</a>
<a href="#">免费开店</a>
</li>
<li class="line">|</li>
<li>
<a href="#">千牛卖家中心</a>
<span></span>
</li>
<li>
<a href="#">联系客服</a>
<span></span>
</li>
</ul>
</div>
<!-- 头部搜索 -->
<div id="headSearch">
<div class="clearfix layer">
<!-- <h1><a href="#"><img src="images/logo.jpg" alt="淘宝网"></a></h1> -->
<h1 class="fl"><a href="#">淘宝网</a></h1>
<div class="fr code">
<span class="inonfont close"></span>
<span class="c5">手机淘宝</span>
<img src="images/code.jpg">
</div>
<div class="search">
<!-- 上边 -->
<ul class="searchTab clearfix">
<li class="active">宝贝</li>
<li class="active">天猫</li>
<li class="active">店铺</li>
</ul>
<!-- 中间 -->
<div class="searchContent clearfix">
<form action="#">
<div class="searchBox fl">
<input type="text" name="">
<div class="placeholder">
<i class="inonfont imgSearch"></i>
<span>毛绒玩具</span>
</div>
<span class="inonfont"></span>
</div>
<div class="searchButton fl">
<button type="submit">搜索</button>
</div>
</form>
</div>
<!-- 下边 -->
<div class="hotKey">
<a href="#">新款连衣裙</a>
<a href="#">四件套</a>
<a href="#">潮流T恤</a>
<a href="#">时尚女鞋</a>
<a href="#">短裤</a>
<a href="#">半身裙</a>
<a href="#">男士外套</a>
<a href="#">墙纸</a>
<a href="#">行车记录仪</a>
<a href="#">新款男鞋</a>
</div>
</div>
</div>
</div>
<!-- 导航 -->
<div id="nav" class="layer clearfix">
<!-- 左边 -->
<h2 class="fl">主题市场</h2>
<!-- 右边 -->
<ul class="fl">
<li class="size"><a href="#">天猫</a></li>
<li class="size"><a href="#">聚划算</a></li>
<li class="size"><a href="#">天猫超市</a></li>
<li class="line"><a href="#">|</a></li>
<li><a href="#">司法拍卖</a></li>
<li><a href="#">飞猪旅行</a></li>
<li><a href="#">天天特卖</a></li>
<li class="line"><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>
<!-- 首屏内容 -->
<div id="firstScreen" class="layer clearfix">
<!-- 左边的内容 -->
<div class="firstLeft fl">
<!-- 侧边导航 -->
<div class="sideNav fl">
<ul>
<li>
<a href="#">女装</a> / <a href="#">内衣</a> / <a href="#">家居</a> <span class="inonfont fr">></span>
</li>
<li>
<a href="#">女鞋</a> / <a href="#">男鞋</a> / <a href="#">箱包</a> <span class="inonfont fr">></span>
</li>
<li>
<a href="#">母婴</a> / <a href="#">童装</a> / <a href="#">玩具</a> <span class="inonfont fr">></span>
</li>
<li>
<a href="#">男装</a> / <a href="#">运动户外</a> <span class="inonfont fr">></span>
</li>
<li>
<a href="#">美妆</a> / <a href="#">彩妆</a> / <a href="#">个护</a> <span class="inonfont fr">></span>
</li>
<li>
<a href="#">手机</a> / <a href="#">数码</a> / <a href="#">企业礼品</a> <span class="inonfont fr">></span>
</li>
<li>
<a href="#">大家电</a> / <a href="#">生活电器</a> <span class="inonfont fr">></span>
</li>
<li>
<a href="#">零食</a> / <a href="#">生鲜</a> / <a href="#">茶酒</a> <span class="inonfont fr">></span>
</li>
<li>
<a href="#">厨具</a> / <a href="#">收纳</a> / <a href="#">清洁</a> <span class="inonfont fr">></span>
</li>
<li>
<a href="#">家纺</a> / <a href="#">家饰</a> / <a href="#">鲜花</a> <span class="inonfont fr">></span>
</li>
<li>
<a href="#">图书音像</a> / <a href="#">文具</a> <span class="inonfont fr">></span>
</li>
<li>
<a href="#">医药保健</a> / <a href="#">进口</a> <span class="inonfont fr">></span>
</li>
<li>
<a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a> <span class="inonfont fr">></span>
</li>
<li>
<a href="#">房产</a> / <a href="#">装修家具</a> / <a href="#">建材</a> <span class="inonfont fr">></span>
</li>
<li>
<a href="#">手表</a> / <a href="#">眼镜</a> / <a href="#">珠宝饰品</a> <span class="inonfont fr">></span>
</li>
</ul>
</div>
<!-- 图片1容器 -->
<div class="img1Box fr">
<div class="pic fl">
<div class="img">
<a href="#"><img src="images/pic_01.jpg"></a>
</div>
<button class="leftBtn"><</button>
<button class="rightBtn">></button>
<div class="circle">
<span class="active">。</span><span>。</span><span>。</span><span>。</span><span>。</span>
</div>
</div>
<div class="ad fr">
<a href="#"><img src="images/ad_02.jpg"></a>
</div>
</div>
<!-- 图片2容器 -->
<div class="img2Box fr">
<div class="pic fl">
<div class="picTitle">
<div class="text">
<span class="fl bg">理想生活上天猫</span>
<span class="fr"><i>1</i>/6</span>
</div>
<div class="line">
<span></span>
</div>
</div>
<div class="img">
<a href="#"><img src="images/pic_03.jpg"></a>
<a href="#"><img src="images/pic_04.jpg"></a>
</div>
<button class="leftBtn"><</button>
<button class="rightBtn">></button>
</div>
<div class="ad fr">
<p class="title">今日特卖</p>
<a href="#"><img src="images/ad_03.jpg"></a>
</div>
</div>
</div>
!-- 右边的内容 -->
<div class="firstRight fr">
<!-- 用户 -->
<div class="user">
<a href="#" class="avatar"><img src="images/avatar.jpg"></a>
<p class="username">Hi! 你好</p>
<p class="members">
<a href="#" class="gold">领淘金币抵钱</a>
<a href="#" class="club">会员俱乐部</a>
</p>
<div class="btn">
<button class="login">登录</button>
<button class="register">注册</button>
<button class="shop">开店</button>
</div>
</div>
<!-- 举报 -->
<a href="#" class="tipOff">
<span>网上有害信息举报专区</span>
<i class="inonfont"></i>
</a>
<!-- 公告区 -->
<div class="notice">
<ul class="title">
<li class="active"><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>
<ul class="content clearfix">
<li class="item1"><a href="#">规则 淘宝网疫情影响地区发货时间要求调整公告</a></li>
<li><a href="#">热点 疫情场景淘宝卖家指导手册</a></li>
<li><a href="#">热点 淘宝平台打击流量造假、黑公关、网络水军公告</a></li>
</ul>
</div>
<!-- 图标区域 -->
<table class="inco">
</table>
<!-- APP -->
<div class="app">
</div>
</div>
</div>
</div>
<!-- 右侧固定定位导航 -->
<div id="tool">
</div>
</body>
</html>
css代码如下：
@import 'reset.css';
/*头部信息*/
#headMessage li{
float: left;
line-height: 35px;
padding: 0 6px;
}
#headMessage li a{
color: #6c6c6c;
}
#headMessage li a.login{
color: #f22e00;
}
#headMessage span{
font-size: 12px;
}
#headMessage li.line{
font-size: 12px;
color: #ddd;
padding: 0 5px;
}
/*头部搜索*/
#headSearch{
background-color: #fff;
padding: 24px 0 10px 0;
}
#headSearch h1 a{
display: block;
width: 190px;
height: 58px;
background: url(../images/logo.jpg) no-repeat;
text-indent: -9999px;
overflow: hidden;
margin-top: 8px;
}
#headSearch .code{
width: 72px;
height: 86px;
border: 1px solid #eee;
position: relative;
margin-right: 110px;
text-align: center;
}
#headSearch .code img{
width: 62px;
height: 62px;
}
#headSearch .close{
position: absolute;
left: -16px;
top: -1px;
width: 14px;
height: 14px;
line-height: 14px;
font-size: 14px;
border: 1px solid #eee;
color: #ddd;
cursor: pointer;
}
#headSearch .search{
width: 630px;
margin: 0 auto;
}
#headSearch .searchTab{
height: 22px;
padding-left: 17px;
}
#headSearch .searchTab li{
float: left;
width: 36px;
line-height: 22px;
margin-right: 4px;
text-align: center;
color: #f40;
cursor: pointer;
}
#headSearch .searchTab li:hover{
background-color: #ffeee5;
}
#headSearch .searchTab li.active{
color: #fff;
font-weight: bold;
background-image: linear-gradient(to right, #ff9000, #ff5000);
border-radius: 6px 6px 0 0;
}
#headSearch .searchContent{
height: 40px;
}
#headSearch .searchBox{
width: 554px;
height: 40px;
box-sizing: border-box;
border: 2px solid #ff5000;
border-right: none;
border-radius: 20px 0 0 20px;
overflow: hidden;
position: relative;
}
#headSearch .searchBox input{
width: 490px;
height: 36px;
line-height: 36px;
outline: none;
border: none;
text-indent: 10px;
position: absolute;
z-index: 1;
background-color: transparent; /*透明，为了能看到后面的文字*/
}
#headSearch .searchBox .placeholder{
position: absolute;
top: 6px;
left: 14px;
}
#headSearch .placeholder span{
color: #9c9c9c;
vertical-align: 1px;
}
#headSearch .imgSearch{
font-size: 28px;
position: absolute;
right: 20px;
color: #9c9c9c;
top: -2px;
cursor: pointer;
}
#headSearch button{
width: 74px;
height: 40px;
text-align: center;
font-size: 18px;
line-height: 40px;
color: #fff;
border: none;
background-image: linear-gradient(to right, #ff9000, #ff5000);
border-radius: 0 20px 20px 0;
}
#headSearch .hotKey{
height: 25px;
line-height: 25px;
margin-bottom: 5px;
}
#headSearch .hotKey a:hover{
color: #f50;
}
/*导航*/
#nav h2{
width: 190px;
height: 30px;
line-height: 30px;
font-size: 16px;
color: #fff;
text-align: center;
background-color: #f50;
}
#nav ul{
/* margin-left: 190px;
overflow: hidden;*/
width: 1000px;
width: calc(100% - 190px); /*支持情况：IE9+*/
background-image: linear-gradient(to right, #ff9000, #ff5000);
}
#nav ul li{
float: left;
line-height: 30px;
margin: 0 7px;
font-size: 14px;
color: #fff;
padding: 0 5px;
}
#nav ul li.size{
font-size: 16px;
}
#nav ul li a{
color: #fff;
font-weight: bold;
}
#nav ul li.line{
margin: 0;
padding: 0;
}
/*首屏内容*/
.firstLeft{
width: 890px;
}
/*侧边导航*/
.sideNav{
width: 190px;
height: 522px;
background: #fff;
border: 1px solid #ff5000;
box-sizing: border-box;
border-top: none;
padding-top: 5px;
}
.sideNav li{
height: 32px;
line-height: 32px;
padding-left: 25px;
color: #999;
font-size: 14px;
transition: background-color 0.3s;
}
.sideNav li a{
font-size: 14px;
color: #666;
}
.sideNav li span{
font-size: 12px;
}
.sideNav li:hover{
background: #ffe4dc;
color: #f50;
}
.sideNav li:hover a{
color: #f50;
}
.sideNav a:hover{
text-decoration: underline;
}
/*图片1容器*/
.img1Box{
width: 690px;
height: 282px;
background: #eee;
margin-top: 10px;
}
.firstLeft .pic{
width: 520px;
position: relative;
}
.firstLeft .pic button{
width: 20px;
height: 30px;
line-height: 30px;
color: #fff;
cursor: pointer;
border: none;
background-color: rgba(0, 0, 0, 0.3); /*支持情况：IE9+*/
position: absolute;
top: 50%;
margin-top: -15px;
display: none;
}
.firstLeft .pic button.leftBtn{
left: 0;
/*border-radius: 0 15x 15px 0;*/
border-radius: 15px 0 0 15px;
}
.firstLeft .pic button.rightBtn{
right: 0;
border-radius: 15px 0 0 15px;
}
.firstLeft .pic:hover button{
display: block;
}
.firstLeft .pic .circle{
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -35px;
border-radius: 10px;
padding: 3px 0;
font-size: 0;
background-color: rgba(255, 255, 255, 0.3);
}
.firstLeft .pic .circle span{
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #fff;
margin: 0 3px 3px 0;
cursor: pointer;
}
.firstLeft .pic .circle span.active{
background-color: #f00;
}
.firstLeft .ad{
width: 160px;
}
.firstLeft .ad img{
width: 160px;
}
/*图片2容器*/
.firstLeft .img2Box{
width: 690px;
height: 220px;
margin-top: 10px;
}
.firstLeft .img2Box .picTitle{
height: 20px
}
.firstLeft .img2Box .picTitle .text{
height: 17px;
line-height: 17px;
}
.firstLeft .img2Box .picTitle .text .bg{
background: url(../images/TMAll.jpg) no-repeat left;
padding-left: 136px;
columns: #666;
}
.firstLeft .img2Box .picTitle .text i{
color: #ff1648;
}
.firstLeft .img2Box .picTitle .line{
height: 3px;
background-color: #ff1648;
position: relative;
}
.firstLeft .img2Box .picTitle .line span{
width: 87px;
height: 3px;
background-color: #000;
position: absolute;
left: 0;
}
.firstLeft .img2Box .img{
background-color: #fff;
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
}
.firstLeft .img2Box .img img{
margin: 0 10px;
}
.firstLeft .img2Box .ad .title{
height: 20px;
line-height: 20px;
}
.firstRight{
width: 290px;
margin-top: 10px;
}
/*用户*/
.firstRight .user{
height: 140px;
padding-top: 5px;
}
.firstRight .user .avatar{
display: block;
width: 50px;
height: 50px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
}
.firstRight .user .avatar img{
width: 50px;
height: 50px;
}
.firstRight .user .username{
text-align: center;
line-height: 16px;
}
.firstRight .user .members{
text-align: center;
font-size: 0;
}
.firstRight .user .members a{
display: inline-block;
font-size: 12px;
border-radius: 9px;
padding: 0 10px 0 20px;
margin: 0 2px;
}
.firstRight .user .members a .gold{
background: #ffe4dc url(../images/icon.jpg) 0 -572 no-repeat;
}
.firstRight .user .members a .club{
background: #ffe4dc url(../images/icon.jpg) 0 -528 no-repeat;
}
.firstRight .user .btn{
text-align: center;
}
.firstRight .user .btn button{
width: 75px;
height: 25px;
line-height: 25px;
margin: 12px 2px 0 2px;
color: #fff;
font-weight: bold;
border-radius: 4px;
border: none;
background-image: linear-gradient(to right, #ff5000, #ff6f06);
}
.firstRight .user .btn button .login{
width: 92px;
}
/*举报*/
.firstRight .tipOff{
display: block;
height: 26px;
line-height: 26px;
color: #f40;
background: #ffe4dc;
text-align: center;
}
.firstRight .tipOff i{
font-size: 12px;
vertical-align: 1px;
position: relative;
left: 30px;
}
/*公告区*/
.firstRight .notice{
height: 108px;
background-color: #fff;
}
.firstRight .notice .title{
text-align: center;
font-size: 0;
padding-top: 10px;
}
.firstRight .notice .title li{
display: inline-block;
font-size: 12px;
line-height: 20px;
padding: 0 4px;
margin: 0 10px;
}
.firstRight .notice .title li.active{
font-weight: bold;
border-bottom: 2px solid #f40;
}
.firstRight .notice .title li a:hover{
color: #f40;
}
.firstRight .notice .content{
margin: 0 12px;
padding-top: 10px;
}
.firstRight .notice .content li{
font-size: 12px;
color: #666;
margin-left: 8px;
float: left;
width: 295px;
overflow: hidden;
}
.firstRight .notice .content li a:hover{
color: #ff5000;
}