html5/CSS3进阶——宝贝之家网站首页

学习了一段时间的框架,最近在复习最早学的html5、css3,拿了一个小案例做了一下,整个过程还算顺利,附图:

在这里插入图片描述


其实页面整体结构还是很清晰的,这里我也是直接使用了多个div嵌套划分的常规手段,没有用到栅格。

附上.HTML代码~~~

<!DOCTYPE html>
<html>
<head>
	<title>宝贝之家</title>
	<Meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./web.css">
	<style type="text/css">
	</style>
</head>
<body>
	<div class = 'title_top'>
		<img src="./img/title.png">
		<div class = 'title_top_nav'>
			<ul>
				<li><a href="#">关于我们</a></li>
				<li><a href="#">联系方式</a></li>
				<li><a href="#">意见建议</a></li>
			</ul>
		</div>
	</div>

	<div class = 'nav'>
		<div class = 'nav_text'>
			<ul>
				<li><a href="#">网站首页</a></li>
				<li><a href="#">产品介绍</a></li>
				<li><a href="#">信息</a></li>
				<li><a href="#">畅销排行榜</a></li>
			</ul>
		</div>
		<div class = 'nav_bottom'></div>
		<div class = 'login_menu'><img src="./img/login.png" height = '120px'></img></div>
	</div>
	<script type="text/javascript">
		var nav = document.getElementsByClassName('nav_text');
		var text = document.querySelectorAll('li');
		for(var i = 3;i < 7;i++){
			text[i].onmouSEOver = function(){
				this.style.background = '#e5bf73';
				this.style.height = '25px';
			}
			text[i].onmouSEOut = function(){
				this.style.background = '#448bc0';
				this.style.bakcground = '20px';
			}
		}
	</script>

	<div class = 'content clearfix'>
		<div class = 'content_left'>
			<div class = 'title1'>
				<h2>今日推荐</h2>
				<img src="./img/icon.png"></img>
			</div>
			<div class = 'content1'>
				<img src="./img/pic1.png">
				<span>环保印花件套,采用超柔和进口面料,手感极其柔软、舒适。采用高支高密精梳纯棉织物作为面料,手感柔软舒适,经久耐用,多款图案风格能够和不同家居设计完美搭配</span></br><span>缩水率以及退色率均符合国家检测标准,绿色环保。30度以下水温洗衣机弱洗,中性洗涤剂,中温熨烫</span>
			</div>

			<div class = 'title2'>
				<h2>最受欢迎</h2>
				<img src="./img/icon.png"></img>
			</div>
			<div class = 'content2'>
				<span>九孔棉冬被选用优质涤纶面料,手感柔软、花型独特,填充料采用高科技的聚酯螺旋纤维精致而成,该纤维细如发,弹性极强,且饱含空气,恒温性强,使您倍感轻软舒适。经特殊工艺加工后,长期保持松软如新,为您提供健康的睡眠需要</span>
				<img src="./img/pic2.png" width=300px>
			</div>

			<div class = 'title3'>
				<h2>分类推荐</h2>
				<img src="./img/icon.png"></img>
			</div>
			<div class = 'content3'>
				<img src="./img/small_pic1.png" style = 'padding-top:30px;padding-left:100px;'></img>
				<img src="./img/small_pic2.png"  style = 'padding-top:30px;padding-left:100px;'></img>
				<img src="./img/small_pic3.png"  style = 'padding-top:30px;padding-left:100px;'></img>
				<div class = 'note'>
					<span>休闲款式,柔软富有弹</br>性。舒服自然,飘逸聪颖。</span>
					<span>小兔子披肩,柔软富有弹</br>性。舒服自然,飘逸聪颖。</span>
					<span>精梳棉材质,不起球、不</br>变形、更透气</span>
				</div>
			</div>
		</div>

		<div class = 'content_right'>
			<div class = 'content1'>
				<input type="text">
				<button>查询商品</button>
			</div>
			<div class = 'content2'>
				<img src="./img/content_right.png"></img>
			</div>
			<div class = 'content3'>
				<h3>特别提示</h3>
				<p>新品每周三8.8折优惠,两件8.5折优惠</p>
			</div>
		</div>
	</div>
	<div class = 'footer clearfix'>
		<ul>
			<li>网站首页<span style = 'color:black;'>|</span></li>
			<li>产品介绍<span style = 'color:black;'>|</span></li>
			<li>信息<span style = 'color:black;'>|</span></li>
			<li>畅销畅销榜</li>
		</ul>
	</div>
</body>
</html>

CSS代码~~~~

*{
	padding: 0;
	margin: 0;
}
.clearfix{
​	content:"";
​	clear:both;
​	display:block;
}
a{
	text-decoration: none;
}
ul li{
	list-style: none;
}
.title_top{
	width:100%;
	height:70px;
	background-color: #bdd6e8;
}
.title_top img{
	margin-bottom:20px;
	padding-left:50px;
}
.title_top .title_top_nav{
	display: inline-block;
}
.title_top .title_top_nav ul{
	margin-left:620px;
	padding-bottom:90px;
}
.title_top .title_top_nav li{
	margin-top:5px;
	margin-left:2px;
	width:70px;
	height:20px;
	float:left;
	padding:0 20px;
	color:#7381c4;
	background-color: #fff;
	border-bottom-right-radius: 10%;
	border-bottom-left-radius: 10%;
	text-align: center;
}
.title_top .title_top_nav li a{ 
	color:#3d81c4;
}

.nav{
	margin-top:5px;
	width:100%;
	height:50px;
	background:linear-gradient(to bottom,#85b3d5,#448bc0);
	position: relative;
}
.nav .nav_text{
	padding-left:50px;
	padding-top:25px;
}
.nav .nav_text ul li{
	float:left;
	padding: 0 20px;	
	background-color: ##448bc0;
}
.nav .nav_text ul li a{
	color:#fff;
	font-weight: bolder;
}
.nav .nav_bottom{
	float:left;
	width:100%;
	height:30px;
	background:linear-gradient(to bottom,#e3bc6c,#efd7a7);
}
.nav .login_menu{
	position: absolute;
	top:-30px;
	left:1100px;
}
.nav .login_menu img{
	cursor: pointer;
}

.content{
	width:1250px;
	margin:80px auto;

}
.content h2{
	color:#006699;
	border-bottom:1px solid #deaf50;
}

.content .content_left{
	width:900px;
	float:left;
}

.content .content_left .title1 h2{
	float:left;
	width:866px;
}
.content .content_left .title1 img{
	padding-top:2px;
}
.content .content_left .content1{
	margin-top:20px;
}
.content .content_left .content1 img{
	float:left;
}
.content .content_left .content1 span{
	font-size: 14px;
	display:block;
	width:500px;
	margin-left:200px;
	padding-left:70px;
	padding-top:10px;
	text-indent: 30px;
}

.content .content_left .title2 h2{
	float:left;
	width:866px;
	margin-top:30px;
}
.content .content_left .title2 img{
	padding-top:49px;
}
.content .content_left .content2 span{
	font-size: 14px;
	float:left;
	width:500px;
	text-indent: 30px;
	padding-top:30px;
	line-height: 3em;
}
.content .content_left .content2 img{
	display: block;
	padding-top:30px;
	padding-left:30px;
}

.content .content_left .title3 h2{
	float:left;
	width:866px;
	margin-top:30px;
}
.content .content_left .title3 img{
	padding-top:32px;
}
.content .content_left .content3 .note span{
	text-indent: 20px;
	font-size: 12px;
	display: inline-block;
	width:170px;
}
.content .content_left .content3 .note span:nth-child(1){
	padding-left:100px;

}
.content .content_left .content3 .note span:nth-child(2){
	padding-left:60px;

}
.content .content_left .content3 .note span:nth-child(3){
	padding-left:60px;

}
.content .content_right{
	width:300px;
	display:inline-block;
}
.content .content_right .content1{
	float:right;
	background-color: #bdd6e8;
	width:200px;
	height:100px;
	border-radius: 20%;
}
.content .content_right .content1 input{
	margin-left:12px;
	margin-top:10px;
}
.content .content_right .content1 button{
	margin-left:70px;
	margin-top:40px;
}
.content .content_right .content2{
	margin-left:110px;
	margin-top:150px;
}
.content .content_right .content3{
	float:right;
	background-color: #bdd6e8;
	width:200px;
	height:120px;
	margin-top:50px;
	border-radius: 20%;
}
.content .content_right .content3 h3{
	padding-top:20px;
	padding-left:50px;
	color:#0066ac;
}
.content .content_right .content3 p{
	text-indent: 20px;
	font-size:12px;
	padding:10px 5px;
}

.footer{
	display: inline-block;
	margin-top: 30px;
	width:100%;
	height:30px;
	background:linear-gradient(to bottom,#80b0d4,#448abf);
}
.footer ul{
	padding-left: 550px;
}
.footer ul li{
	float:left;
	line-height: 30px;
	color:#fff;
	font-size: 12px;
}

做出来也是可以放心的继续深入学习啦,就怕把最基础的东西给忘了!
大佬们多多指教批评啊!!

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码