创建类似淘宝的静态网页（四）创建主题展示部分

一开始，同样献上最后效果图
这是页面的最后的一个部分–主题展示部分。显然，该部分从左往右又可分为3个部分。最左边部分是热词分类部分，中间部分是热门商品图片展示，最右边部分是淘宝分会场展示与链接。第四部分html代码如下：

	<!-- 图片主体展示部分 -->
	<div class="screen-box">
		<div class="box-classfy">
			<span class="line one">
				<a href="#">
					<div class="a-only">女人</div>
				</a>
				<a href="#">
					<div>外套</div>
				</a>
				<a href="#">
					<div>/毛衣</div>
				</a>
				<a href="#">
					<div>/裙子</div>
				</a>
				<a href="#">
					<div>/鞋子</div>
				</a>
			</span>
			<span class="line two">
				<a href="#">
					<div class="a-only">男人</div>
				</a>
				<a href="#">
					<div>针织</div>
				</a>
				<a href="#">
					<div>/大衣</div>
				</a>
				<a href="#">
					<div>/男鞋</div>
				</a>
				<a href="#">
					<div>/帽子</div>
				</a>
			</span>
			<span class="line three">
				<a href="#">
					<div class="a-only">数码</div>
				</a>
				<a href="#">
					<div>手机</div>
				</a>
				<a href="#">
					<div>/耳机</div>
				</a>
				<a href="#">
					<div>/充电</div>
				</a>
				<a href="#">
					<div>/家电</div>
				</a>
			</span>
			<span class="line four">
				<a href="#">
					<div class="a-only">母婴</div>
				</a>
				<a href="#">
					<div>文胸</div>
				</a>
				<a href="#">
					<div>/棉袜</div>
				</a>
				<a href="#">
					<div>/童装</div>
				</a>
				<a href="#">
					<div>/童鞋</div>
				</a>
			</span>
			<span class="line five">
				<a href="#">
					<div class="a-only">家居</div>
				</a>
				<a href="#">
					<div>家纺</div>
				</a>
				<a href="#">
					<div>/收纳</div>
				</a>
				<a href="#">
					<div>/厨具</div>
				</a>
				<a href="#">
					<div>/家居</div>
				</a>
			</span>
			<span class="line six">
				<a href="#">
					<div class="a-only">美妆</div>
				</a>
				<a href="#">
					<div>护肤</div>
				</a>
				<a href="#">
					<div>/彩妆</div>
				</a>
				<a href="#">
					<div>/香氛</div>
				</a>
				<a href="#">
					<div>/男士</div>
				</a>
			</span>
			<span class="line seven">
				<a href="#">
					<div class="a-only">美食</div>
				</a>
				<a href="#">
					<div>零食</div>
				</a>
				<a href="#">
					<div>/坚果</div>
				</a>
				<a href="#">
					<div>/特产</div>
				</a>
				<a href="#">
					<div>/粮油</div>
				</a>
			</span>
			<span class="line eight">
				<a href="#">
					<div class="a-only">箱包</div>
				</a>
				<a href="#">
					<div>包包</div>
				</a>
				<a href="#">
					<div>/钱包</div>
				</a>
				<a href="#">
					<div>/背包</div>
				</a>
				<a href="#">
					<div>/拉杆箱</div>
				</a>
			</span>
		</div>
		<div class="box-pic">
			<img src="./img/box-pic.jpg" alt="轮播图">
		</div>
		<div class="box-sel">
			<img class="top-img" src="./img/聚划算.png" alt="聚划算">
			<img class="l-img" src="./img/天猫超市.png" alt="天猫超市">
			<img class="r-img" src="./img/天猫国际.png" alt="天猫国际">
		</div>
	</div>

第四部分的css代码如下：

/*主要内容*/
.wrapper .screen-box{
	width: 1190px;
	height: 300px;
	/*border: 1px solid red;*/
	margin:0 auto;
	position: relative;
	vertical-align: top;
	background: #e2c38a;
}
.wrapper .screen-box .box-classfy{
	display: inline-block;
	width: 230px;
	height: 280px;
	/*border: 1px solid #000;*/
	margin:10px 0px;
	background: #333A4A;
	position: relative;
	top:-26px;
} 
.wrapper .screen-box .box-pic{
	display: inline-block;
	width: 520px;
	height: 280px;
	/*border: 1px solid #000;*/
	margin-left: -4px;
	position: relative;
	top:0px;
}
.wrapper .screen-box .box-sel{
	display: inline-block;
	width: 420px;
	height: 280px;
	/*border: 1px solid #000;*/
	margin-left: 10.5px;
	position: relative;
	top:-16px;
}
.wrapper .screen-box .box-classfy .line{
	display: block;
	height: 32px;
	width: 228px;
	/*border:1px solid #000;*/
	margin:1px;
	line-height: 32px;
	position: relative;
}
.wrapper .screen-box .box-classfy .line:hover:before{
	content: "";
	position: absolute;
	background-color: red;
	width: 2px;
	height: 14px;
	top:11px;
}
.wrapper .screen-box .box-classfy .line:hover{
	background: #454545;
}
.wrapper .screen-box .box-classfy .a-only{
	display: inline-block;
	margin:0 15px;
	font-size: 12px;
	color: white;
	font-weight: bold;
}
.wrapper .screen-box .box-classfy a{
	display: inline-block;
}
.wrapper .screen-box .box-classfy div:hover{
	text-decoration:underline;
}
.wrapper .screen-box .box-classfy div{
	font-size: 12px;
	display: inline-block;
	color: white;
}
.wrapper .screen-box .box-pic img{
	width: 520px;
	height: 280px;
}
.wrapper .screen-box .box-sel img{
	display: inline-block;
}
.wrapper .screen-box .box-sel .top-img{
	width:420px;
	height: 130px;
}
.wrapper .screen-box .box-sel .l-img{
	width:205px;
	height: 130px;
}
.wrapper .screen-box .box-sel .r-img{
	width:205px;
	height: 130px;
}

加上前面三个部分，最后创建类似淘宝的静态页面可达到如下效果：
要真正做出类似淘宝的动态页面，还要用到Javascript语言和相应技术，这个需要以后继续学习。