首屏

由于首屏比较复杂，这篇我们先写侧边栏以及图片区域，图片区域采用了左右分块，大家也可以采用上下。下面开始写左侧导航栏。

导航栏

显而易见采用ul下拉框是最合适的，由于是链接，在li中嵌入a标签即可，/这个符号直接打上去即可，最后面的那个箭头采用图标的样式用span包裹（这里注意span和a标签之间不能有空格）
由于鼠标悬浮在上面的时候样式会出现改变，我们可以使用hover来进行样式更改。
代码如下：

<div class="sideNav fl">
                <ul>
                    <li>
                        <a href="#">女装</a> / 
                        <a href="#">男装</a> / 
                        <a href="#">内衣</a><span
                        class="iconfont fr">&#xe50c;</span>
                    </li>
                    <li><a href="#">鞋靴</a> / 
                        <a href="#">箱包</a> / 
                        <a href="#">配件</a><span 
                        class="iconfont fr">&#xe50c;</span></li>
                    	<li>
                            <a href="#">童装玩具</a> / <a href="#">孕产</a> / <a href="#">用品</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">家电</a> / <a href="#">数码</a> / <a href="#">手机</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">美妆</a> / <a href="#">洗护</a> / <a href="#">保健品</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">珠宝</a> / <a href="#">眼镜</a> / <a href="#">手表</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">运动</a> / <a href="#">户外</a> / <a href="#">乐器</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">游戏</a> / <a href="#">动漫</a> / <a href="#">影视</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">美食</a> / <a href="#">生鲜</a> / <a href="#">零食</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">鲜花</a> / <a href="#">宠物</a> / <a href="#">农资</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">工具</a> / <a href="#">装修</a> / <a href="#">建材</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">家具</a> / <a href="#">家饰</a> / <a href="#">家纺</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">办公</a> / <a href="#">DIY</a> / <a href="#">五金电子</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">百货</a> / <a href="#">餐厨</a> / <a href="#">家庭保健</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">学习</a> / <a href="#">卡券</a> / <a href="#">本地服务</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                    </ul>
                </div>

样式：

/* 侧边导航 */
.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;
}

图片区域：

这里是第一部分的图片容器：
这是轮播图（js再讲动态的），这里先实现这张图片，还有当鼠标悬浮上去的两个小箭头以及图正下方的四个小按钮：

两个小按钮

那两个小箭头一般采用button标签（由于是行内块元素，所以很好的嵌入在图片上）配上图片就可以实现啦，然后当鼠标悬浮上去会呈现半透明的效果，这里使用rgba来使用（CSS3中的用法，支持ie9往上的浏览器，最后一个值表示透明度，透明度（A）取值 0~1 之间， 代表透明度。）
放在块中间则采用top:50%;

四个小圆点

这里采用span标签，再把它设置成行内块元素，再来个border-radiu:50%就可以实现圆点效果
最后再加上右边的图片即可。

 <!-- 图片1容器 -->
                <div class="img1Box fr">
                   <div class="pic fl">
                    <div class="img">
                        <a href="#"><img src="../淘宝/img/pic_01.jpg" alt=""></a>
                    </div>
                    <button class="iconfont leftBtn">&#xe50a;</button>
                    <button class="iconfont rightBtn">&#xe50c;</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="../淘宝/img/ad_02.jpg" alt=""></a><a href="#">
                </div>
                </div>

/* 图片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

这里左边部分上方一个块级元素写入两个span标签，用来写入文字，加上左浮动和右浮动，然后箭头那里是有一条线的，我们记得不要忘记，给它一个div写上相关样式即可，然后再写入天猫的图片，这里写入padding-left: 136px;让它移动到左边，剩下来的图片通过 display: table-cell;vertical-align: middle;来垂直居中。
这部分全部的代码：

 <!-- 首屏内容 -->
    
        <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">&#xe50c;</span>
                    </li>
                    <li><a href="#">鞋靴</a> / 
                        <a href="#">箱包</a> / 
                        <a href="#">配件</a><span 
                        class="iconfont fr">&#xe50c;</span></li>
                    	<li>
                            <a href="#">童装玩具</a> / <a href="#">孕产</a> / <a href="#">用品</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">家电</a> / <a href="#">数码</a> / <a href="#">手机</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">美妆</a> / <a href="#">洗护</a> / <a href="#">保健品</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">珠宝</a> / <a href="#">眼镜</a> / <a href="#">手表</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">运动</a> / <a href="#">户外</a> / <a href="#">乐器</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">游戏</a> / <a href="#">动漫</a> / <a href="#">影视</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">美食</a> / <a href="#">生鲜</a> / <a href="#">零食</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">鲜花</a> / <a href="#">宠物</a> / <a href="#">农资</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">工具</a> / <a href="#">装修</a> / <a href="#">建材</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">家具</a> / <a href="#">家饰</a> / <a href="#">家纺</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">办公</a> / <a href="#">DIY</a> / <a href="#">五金电子</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">百货</a> / <a href="#">餐厨</a> / <a href="#">家庭保健</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                        <li>
                            <a href="#">学习</a> / <a href="#">卡券</a> / <a href="#">本地服务</a><span
                                class="iconfont fr">&#xe50c;</span>
                        </li>
                    </ul>
                </div>
            <!-- 图片1容器 -->
                <div class="img1Box fr">
                   <div class="pic fl">
                    <div class="img">
                        <a href="#"><img src="../淘宝/img/pic_01.jpg" alt=""></a>
                    </div>
                    <button class="iconfont leftBtn">&#xe50a;</button>
                    <button class="iconfont rightBtn">&#xe50c;</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="../淘宝/img/ad_02.jpg" alt=""></a><a href="#">
                </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="img/pic_02.jpg" alt=""></a><a href="#"><img src="img/pic_03.jpg"
                                    alt=""></a>
                        </div>
    
                        <button class="iconfont leftBtn">&#xe50a;</button>
                        <button class="iconfont rightBtn">&#xe50c;</button>
                    </div>
                    <div class="ad fr">
                        <p class="title">今日热卖</p>
                        <a href="#"><img src="img/ad_03.jpg" alt=""></a>
                    </div>
                </div>

/* 首屏内容 */
.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(../img/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属性指让标签元素以表格单元格的形式呈现，类似于td标签
让大小不固定元素垂直居中 */
	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;
	
}