HTML（5）、CSS（3）、JS的一些小案例（淘宝页面）

【小白级别】HTML、CSS实现淘宝静态页面。

有需要欢迎大家下载源码观看~下载地址

三连关注后私信也可以拿源码哦~

移步【入门级别】案例：HTML CSS JS实现动态360防丢卫士页面

页面效果：

使用了原生HTML和css语法实现静态淘宝页面【简单】 ☆

代码段展示：

                    <div class="inner-content">
						<div class="pic-box">
							<img src="./img/pic2.png" alt="">
						</div>
						<div class="inner-mall">
							<div class="head">
								<img src="./img/tm.png" alt="">
								<span class="tm">理想生活上天猫
								</span>
								<a href="#">
									<img src="./img/pic3.png" alt="">
								</a>
							</div>
						</div>
					</div>
					<div class="inner-right">
						<a href="#">
							<img src="./img/pic1.png" alt="">
						</a>
						<div class="hot">
							<span>今日热卖</span>
							<a href="#">
								<img src="./img/pic4.png" alt="">
							</a>
						</div>
					</div>
				</div>
				<div class="main-bottom">
					<div class="content">
						<div class="logo-box"></div>
						<a href="#">
							<img src="./img/pic5.png">
							<h4>前端前端前端前端前前端前端前端前端前！</h4>
							<p>前端前端前端前端前前端前端前端前端前！前端前端前端前端前 
                      前端前端前端前端前！</p>
						</a>
					</div>
				</div>
			</div>
			<div class="col-right">
				<div class="member">
					<div class="member-head">
						<div class="head">
							<a href="#"></a>
						</div>
						<span class="info">hi!您好</span>
						<p>
							<a href="#" class="icon">
								<span></span>
								领淘金币抵钱
							</a>
							<a href="#" class="club">
								<span></span>
								会员俱乐部
							</a>
						</p>
					</div>
					<div class="member-foot">
						<a href="#" class="login">登录</a>
						<a href="#">注册</a>
						<a href="#">开店</a>
					</div>
				</div>
				<div class="message">
					<a href="#">网上有害信息举报
						<span></span>
					</a>
				</div>
				<div class="notice">
					<div class="title">
						<ul>
							<li><a href="#">公告</a></li>
							<li><a href="#">公告</a></li>
							<li><a href="#" class="active">论坛</a></li>
							<li><a href="#">公告</a></li>
							<li><a href="#">公告</a></li>
						</ul>
					</div>
					<div class="content">
						<ul>
							<li><a href="#" class="active">前端前端前端前端前</a></li>
							<li><a href="#">前端前端前端前端前</a></li>
							<li><a href="#">前端前端前端前端前</a></li>
							<li><a href="#">前端前端前端前端前</a></li>
						</ul>
					</div>
				</div>
				<div class="module">
					<ul>
						<li>
							<a href="#">
								<span class="icon1"></span>
								<p>购物</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon2"></span>
								<p>购物</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon3"></span>
								<p>购物</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon4"></span>
								<p>购物</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon5"></span>
								<p>购物</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon6"></span>
								<p>购物</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon7"></span>
								<p>购物</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon8"></span>
								<p>购物</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon9"></span>
								<p>购物</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon10"></span>
								<p>购物</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon11"></span>
								<p>购物</p>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="icon12"></span>
								<p>购物</p>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>

css代码段：

* {
	padding: 0;
	margin: 0;
	list-style: none;
	text-decoration: none;
}

html, body {
	width: 100%;
	height: 100%;
	background-color: #f4f4f4;
	color: #3c3c3c;
	overflow-x: hidden; /*横向滚动条隐藏*/

}

.wrapper {
	width: 100%;
	height: 100%;
}

/*上导航条*/
.wrapper .top-nav-wrap {
	width: 100%;
	height: 105px;
}

.wrapper .top-nav-wrap .top-nav {
	width: 1190px;
	height: 35px;
	margin: 0 auto;

}

.wrapper .top-nav-wrap .top-nav .top-nav-l {
	float: left;
}

.wrapper .top-nav-wrap .top-nav .top-nav-r {
	float: right;
}

.wrapper .top-nav-wrap .top-nav ul li {
	float: left;
	margin-right: 7px;
}

.wrapper .top-nav-wrap .top-nav a {
	color: #6c6c6c;
	font-size: 12px;
	line-height: 35px;
	padding: 0 6px;
} 

.wrapper .top-nav-wrap .top-nav a:hover {
	color: #f40;	
}

.wrapper .top-nav-wrap .top-nav .china {
	color: #3c3c3c;
	line-height: 35px;
	font-size: 13px;

}

.wrapper .top-nav-wrap .top-nav .bg-pic {
	display: inline-block;
	width: 6px;
	height: 3px; 
	background-size: 100% 100%;
	vertical-align: middle;  /*垂直排列中间对齐*/
}

.wrapper .top-nav-wrap .top-nav .c-span {
	padding: 0 6px;
}

.wrapper .top-nav-wrap .top-nav .bg-pic.xsj-pic {
	background-image: url('./img/xsj.png');
}

.wrapper .top-nav-wrap .top-nav .bg-pic.shopCar-pic {
	background-image: url(./img/gwc.png);
	width: 12px;
	height: 12px;
}

有需要欢迎大家下载源码观看~下载地址

三连关注后私信也可以拿源码哦~