ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2020-06-29 14:06:54  阅读:228  来源: 互联网

标签:CSS3 padding 进阶 top content nav html5 margin left


学习了一段时间的框架,最近在复习最早学的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;
}

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

标签:CSS3,padding,进阶,top,content,nav,html5,margin,left
来源: https://blog.csdn.net/m0_46995864/article/details/106977416

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有