目前只写了一部分emmm
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝网 - 淘!我喜欢</title>
<link rel="stylesheet" href="css/index.css">
<link rel="icon" href="favicon.ico">
<base target="_blank">
</head>
<body>
<!--头部信息-->
<div id="headMessage" class="layer clearfix">
<ul class="fl">
<li>
<span>中国大陆</span>
<span class="iconfont arrow"></span>
</li>
<li class="mr7">
<a href="#" class="login mr7">亲,请登录</a>
<a href="#">免费注册</a>
</li>
<li>
<a href="#">手机逛淘宝</a>
</li>
</ul>
<ul class="fr">
<li>
<a href="#">我的淘宝</a>
<span class="iconfont arrow"></span>
</li>
<li>
<span class="iconfont mr5 c4"></span>
<a href="#">购物车</a>
<strong>0</strong>
<span class="iconfont arrow"></span>
</li>
<li>
<a href="#"><span class="iconfont mr5 stroe">㐲</span>收藏夹</a>
<span class="iconfont arrow"></span>
</li>
<li>
<a href="#">商品分类</a>
</li>
<li class="line">|</li>
<li>
<a href="#">千牛卖家中心</a>
<span class="iconfont arrow"></span>
</li>
<li>
<a href="#">联系客服</a>
<span class="iconfont arrow"></span>
</li>
<li>
<span class="iconfont c4 mr5"></span>
<a href="#">网站导航</a>
<span class="iconfont arrow"></span>
</li>
</ul>
</div>
<!--头部广告-->
<div id="headAd">
<div class="layer clearfix">
<a href="#"class="fl go"><img src="images/go.png" alt=""></a>
<ul class="fr">
<li class="item1">
<a href="#"class="fr">
<img src="images/adimg_01.jpg" alt="">
</a>
<h3><a href="#">电视会场</a></h3>
<p><a href="#">最高降2000</a></p>
</li>
<li class="item2">
<a href="#"class="fr">
<img src="images/adimg_02.jpg" alt="">
</a>
<h3><a href="#">厨房电器</a></h3>
<p><a href="#">抢大额劵</a></p>
</li>
<li class="item3">
<a href="#"class="fr">
<img src="images/adimg_03.jpg" alt="">
</a>
<h3><a href="#">超值囤货</a></h3>
<p><a href="#">1元抢百元劵</a></p>
</li>
<li class="item4">
<a href="#"class="fr">
<img src="images/adimg_04.jpg" alt="">
</a>
<h3><a href="#">全球冰洗</a></h3>
<p><a href="#">三门冰箱888</a></p>
</li>
<li class="item5">
<a href="#"class="fr">
<img src="images/adimg_05.jpg" alt="">
</a>
<h3><a href="#">潮酷数码</a></h3>
<p><a href="#">大牌爆款直降</a></p>
</li>
</ul>
</div>
</div>
<!--头部搜索-->
<div id="headSearch">
<div class="clearfix layer">
<h1 class="fl"><a href="#">淘宝网</a></h1>
<div class="code fr">
<span class="iconfont close"></span>
<span class="c5">手机淘宝</span>
<img src="images/code.png" alt="">
</div>
<div class="search">
<ul class="searchTab clearfix">
<li class="active">宝贝</li>
<li>天猫</li>
<li>店铺</li>
</ul>
<div class="searchContent clearfix">
<form action="#">
<div class="searchBox fl">
<input type="text">
<div class="placeholder">
<i class="iconfont"></i>
<span>网红裤腰带 洋气 国际范 9.9包邮</span>
</div>
<span class="iconfont imgSearch"></span>
</div>
<div class="btn fl">
<button type="submit">搜索</button>
</div>
</form>
</div>
<div class="hotKey">
<a href="#" class="c5">积木</a>
<a href="#">网线</a>
<a href="#" class="c5">爬行垫</a>
<a href="#">时尚连衣裙</a>
<a href="#">男士T恤</a>
<a href="#" class="c5">时尚休闲裤</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>
<li class="size"><a href="#">天猫</a></li>
<li class="size"><a href="#">聚划算</a></li>
<li class="size"><a href="#">天猫超市</a></li>
<li class="line">|</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 class="line">|</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="iconfont fr"></span>
</li>
<li>
<a href="#">鞋靴</a> / <a href="#">箱包</a> / <a href="#">配件</a><span
class="iconfont fr"></span>
</li>
<li>
<a href="#">童装玩具</a> / <a href="#">孕产</a> / <a href="#">用品</a><span
class="iconfont fr"></span>
</li>
<li>
<a href="#">家电</a> / <a href="#">数码</a> / <a href="#">手机</a><span
class="iconfont fr"></span>
</li>
<li>
<a href="#">美妆</a> / <a href="#">洗护</a> / <a href="#">保健品</a><span
class="iconfont fr"></span>
</li>
<li>
<a href="#">珠宝</a> / <a href="#">眼镜</a> / <a href="#">手表</a><span
class="iconfont fr"></span>
</li>
<li>
<a href="#">运动</a> / <a href="#">户外</a> / <a href="#">乐器</a><span
class="iconfont fr"></span>
</li>
<li>
<a href="#">游戏</a> / <a href="#">动漫</a> / <a href="#">影视</a><span
class="iconfont fr"></span>
</li>
<li>
<a href="#">美食</a> / <a href="#">生鲜</a> / <a href="#">零食</a><span
class="iconfont fr"></span>
</li>
<li>
<a href="#">鲜花</a> / <a href="#">宠物</a> / <a href="#">农资</a><span
class="iconfont fr"></span>
</li>
<li>
<a href="#">工具</a> / <a href="#">装修</a> / <a href="#">建材</a><span
class="iconfont fr"></span>
</li>
<li>
<a href="#">家具</a> / <a href="#">家饰</a> / <a href="#">家纺</a><span
class="iconfont fr"></span>
</li>
<li>
<a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a><span
class="iconfont fr"></span>
</li>
<li>
<a href="#">办公</a> / <a href="#">DIY</a> / <a href="#">五金电子</a><span
class="iconfont fr"></span>
</li>
<li>
<a href="#">百货</a> / <a href="#">餐厨</a> / <a href="#">家庭保健</a><span
class="iconfont fr"></span>
</li>
<li>
<a href="#">学习</a> / <a href="#">卡券</a> / <a href="#">本地服务</a><span
class="iconfont 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" alt=""></a>
</div>
<button class="iconfont leftBtn"></button>
<button class="iconfont 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" alt=""></a>
</div>
</div>
<!--图片2容器-->
<div class="img2Box fr">
<div class="pic fl">
<div class="picTitle">
<div class="text clearfix">
<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_02.jpg" alt=""></a><a href="#"><img src="images/pic_03.jpg" alt=""></a>
</div>
<button class="iconfont leftBtn"></button>
<button class="iconfont rightBtn"></button>
</div>
<div class="ad fr">
<p class="title">今日特卖</p>
<a href="#"><img src="images/ad_03.jpg" alt=""></a>
</div>
</div>
<!--淘宝头条-->
<div class="news fl">
</div>
</div>
<!--右边的内容-->
<div class="firstRight fr">
</div>
</div>
<!--有好货与爱逛街-->
<div id="layer">
</div>
<!--右侧固定定位导航-->
<div id="tool">
</div>
</body>
</html>>
index.css
/*
@规则
@charset 设置样式表的编码
@import 导入其它样式文件
@meida 媒体查询
@font-face 自定义字体
*/
@import 'reset.css';
@font-face {
font-family: 'iconfont';
src: url('../font/iconfont.eot');
src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
url('../font/iconfont.woff2') format('woff2'),
url('../font/iconfont.woff') format('woff'),
url('../font/iconfont.ttf') format('truetype'),
url('../font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 头部信息 */
#headMessage li{
float: left;
line-height: 35px;
padding: 0 6px;
font-size: 0;
}
#headMessage a{
color: #6c6c6c;
font-size: 12px;
}
#headMessage a:hover{
color: #f40;
}
#headMessage a.login{
color: #f22e00;
}
#headMessage span{
font-size: 12px;
}
#headMessage span.arrow{
margin-left: 7px;;
}
#headMessage li strong{
font-size: 12px;
color: #f22e00;
}
#headMessage li span.stroe{
color: #9c9c9c;
}
#headMessage li.line{
font-size: 12px;
color: #ddd;
padding: 0 5px;
}
/* 头部广告 */
#headAd{
background-color: #f12f04;
}
#headAd .go{
display: block;
padding: 10px 10px 10px 15px;
}
#headAd .go img{
width: 80px;
height: 80px;
}
#headAd ul{
padding-top: 13px;
}
#headAd li{
float: left;
width: 209px;
height: 75px;
margin-right: 10px;
padding: 12px 15px 0 15px;
box-sizing: border-box;
/*
盒模型
1、标准盒模型
总宽度=border(左右)+width+padding(左右)
总高度=border(上下)+height+padding(上下)
2、IE盒模型(怪异盒模型)
总宽度=width;
总高度=height;
*/
}
#headAd li h3{
font-size: 20px;
line-height: 28px;
}
#headAd li p{
font-size: 14px;
line-height: 20px;
}
#headAd li a{
color: #fff;
display: block;
}
#headAd li a img{
width: 52px;
height: 52px;
border-radius: 5px;
}
#headAd li.item1{
background: url(../images/adbg_01.png) no-repeat;
}
#headAd li.item2{
background: url(../images/adbg_02.png) no-repeat;
}
#headAd li.item3{
background: url(../images/adbg_03.png) no-repeat;
}
#headAd li.item4{
background: url(../images/adbg_04.png) no-repeat;
}
#headAd li.item5{
background: url(../images/adbg_05.png) no-repeat;
margin-right: 0;
}
/* 头部搜索 */
#headSearch{
background-color: #fff;
padding: 24px 0 10px 0;
}
#headSearch h1 a{
display: block;
width: 190px;
height: 58px;
background: url(../images/logo.png) center 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);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
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: 2;
background-color: transparent; /* 透明,为了能够看到后面的文字 */
}
#headSearch .placeholder{
position: absolute;
top: 6px;
left: 14px;
}
#headSearch .placeholder span{
color: #9c9c9c;
vertical-align: 1px;
}
#headSearch .imgSearch{
font-size: 28px;
color: #9c9c9c;
position: absolute;
right: 20px;
top: -2px;
cursor: pointer;
}
#headSearch .searchContent 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);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
border-radius: 0 20px 20px 0;
}
#headSearch .hotKey{
height: 25px;
line-height: 25px;
}
#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;
height: 30px;
/* width: 1000px;
width: calc(100% - 190px); */ /* 支持情况:IE9+ */
background-image: linear-gradient(to right,#ff9000,#ff5000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', endColorstr='#ffff5000', GradientType=1);
}
#nav ul li{
float: left;
line-height: 30px;
margin: 0 7px;
font-size: 14px;
color: #fff;
padding: 0 5px;
position: relative;
}
#nav ul li.size{
font-size: 16px;
}
#nav ul li a{
color: #fff;
font-weight: bold;
}
#nav ul li.line{
margin: 0;
padding: 0;
}
#nav ul li:hover:before{
content: '';
position: absolute;
width: 23px;
height: 13px;
background-image: url(../images/ico_01.gif);
top: -13px;
left: 50%;
margin-left: -12px;
}
/* 首屏内容 */
.firstLeft{
width: 890px;
}
/* 侧边导航 */
.firstLeft .sideNav{
width: 190px;
height: 522px;
background: #fff;
border: 1px solid #ff5000;
box-sizing: border-box;
border-top: none;
padding-top: 5px;
}
.firstLeft .sideNav li{
height: 32px;
line-height: 32px;
padding-left: 25px;
color: #999;
font-size: 14px;
transition: background-color 0.3s;
}
.firstLeft .sideNav li a{
font-size: 14px;
color: #666;
}
.firstLeft .sideNav li span{
font-size: 12px;
margin-right: 5px;
}
.firstLeft .sideNav li:hover{
background: #ffe4dc;
color: #f50;
}
.firstLeft .sideNav li:hover a{
color: #f50;
}
.firstLeft .sideNav a:hover{
text-decoration: underline;
}
/* 图片1容器 */
.firstLeft .img1Box{
width: 690px;
height: 282px;
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+ */
/*
background-color: #000\9; IE9以下的浏览器认识
filter: alpha(opacity=30); 透明
*/
position: absolute;
top: 50%;
margin-top: -15px;
display: none;
}
.firstLeft .pic button.leftBtn{
left: 0;
border-radius: 0 15px 15px 0;
}
.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;
cursor: pointer;
}
.firstLeft .pic .circle span.active{
background-color: #ff5000;
}
.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/title_bg.png) 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{
width: 520px;
height: 200px;
background-color: #fff;
position: relative;
display: table-cell;
vertical-align: middle;
/* 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;
}
reset.css
body,p,h1,h2,h3,h4,ul{
margin: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
img{
border: none;
vertical-align: middle;
}
a{
text-decoration: none;
color: #3c3c3c;
}
i{
font-style: normal;
}
input,button{
margin: 0;
padding: 0;
}
button{
outline: none;
}
table{
border-collapse: collapse; /* 边框模式,合并的模式 */
}
th,td{
padding: 0;
}
body{
font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
/* font-family: '宋体';
font-family: '\5b8b\4f53';
font-family: SimSun;
font-family: "微软雅黑";
font-family: Miscrosoft YaHei; */
color: #3c3c3c;
background-color: #f4f4f4;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
.fl{
float: left;
}
.fr{
float: right;
}
.layer{
width: 1190px;
margin: 0 auto;
}
.c4{
color: #f40;
}
.c5{
color: #f50;
}
.c6{
color: #8d7afb;
}
.c7{
color: #a8c001;
}
.mr7{
margin-right: 7px;
}
.mr5{
margin-right: 5px;
}
.mt10{
margin-top: 10px;
}
.mr10{
margin-right: 10px;
}