2016.12.12产品官网

最新推荐文章于 2022-10-26 10:59:48 发布

烂人刘理淦

最新推荐文章于 2022-10-26 10:59:48 发布

阅读量419

点赞数

本文链接：https://blog.csdn.net/weixin_36786934/article/details/53978262

版权

在伯爵实验室通宵敲了13个半钟写出来的产品官网，50多个小时没有睡觉，算是对这段时间HTML&CSS学习的总结，接下来的时间要好好学习Javascript了。

但是由于目前技术问题

没有实现的部分有：

1.图片的轮播

2.关联下拉列表

HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--引入reset.css用来消去浏览器默认的样式-->
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/page-index.css"/>
		
		
	</head>
	<body>
		<div class="header clearfix">
			<div class="logo">
				<a href="#" ><img src="img/header_logo.png"/></a>
			</div>
			<h1>新世界</h1>
			<a href="#" class="login">登录</a>
			<div class="login_logo">
				<img src="img/登录.png"/>
			</div>
			<ul class="nav">
				<li><a href="#">首页</a></li>
				<li><a href="#">最新活动</a></li>
				<li><a href="#">项目介绍</a></li>
				<li><a href="#">爱心社区</a></li>
				<li><a href="#">关于我们</a></li>
			</ul>
			
			
		</div>
		<div class="banner">
			<h2>Time of new life</h2>
			<h3>新时代，年轻的人们让我们一起<br />体验新生活，享受新生活</h3>
		<a href="#" class="btn01">开始体验</a>
		</div>
		<div class="function">
			<div class="fct01">
				<div class="circle"></div>
				<p class="no-border">打造全新世界观，让你更<br />爱你的生活</p>
			</div>
			<div class="fct02">
				<div class="flag"></div>
				<p>丰富多彩的公益活动，发<br />挥新世界的主人公意识</p>
			</div>
			<div class="fct03">
				<div class="flower"></div>
				<p>时尚的新理念，超前体验<br />未知的生活</p>
			</div>
			<div class="fct04">
				<div class="square"></div>
				<p>完善的培养机制，培养你<br />全新的世界观</p>
			</div>
		</div>
		<div class="tummy clearfix">
			<div class="tummy-logo"><img src="img/tummy-logo.png"/></div>
			<p>关于新世界，你不知道的还有什么？</p>
		</div>
		<div class="inquire">
			<h2>查找新世界城市活动信息</h2>
			<div class="inquire-line"><img src="img/inquire-line.jpg"/></div>
			<h3>每个城市的有不同的活动信息，请自主查询您所需要了解的城市</h3>
			<form action="#" >
				<select name="country" class="choice01" >
					<option value="China">中国</option>
					<option value="Britain">英国</option>
					<option value="U.S.A">美国</option>
					<option value="Japan">日本</option>
					<option value="Thailand">泰国</option>
					<option value="Korea">韩国</option>
				</select>
				<select name="province" class="choice02" >
					<option value="Beijing">北京</option>
					<option value="Tianjin">天津</option>
					<option value="Hebei">河北</option>
					<option value="Shanxi">陕西</option>
					<option value="Inner Mongolia">内蒙古自治区</option>
					<option value="Liaoning">辽宁省</option>
				</select>
				<select name="city" class="choice03" >
					<option value="Beijing">北京</option>
					<option value="Tianjin">天津</option>
					<option value="Hebei">河北</option>
					<option value="Shanxi">陕西</option>
					<option value="Inner Mongolia">内蒙古自治区</option>
					<option value="Liaoning">辽宁省</option>
				</select>
				<input type="submit" value="搜        索" class="choice04"/>
			</form>
		</div>
		<div class="activity clearfix">
			<div class="activity02">
				<p>新世界/<span id="number">01</span></p>
				<div class="content">新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界</div>
				<a href="#" class="btn03">更多详情</a>
				<ul class="btn04">
					<li><img src="img/button02.png"/></li>
					<li><img src="img/button03.jpg"/></li>
					<li><img src="img/button03.jpg"/></li>
				</ul>
			</div>
			<div class="activity-Beijing">
				<h2>新世界</h2>
				<h3>TIME</h3>
				<h4>@新世界-北京<br />2016.04.01 </h4>
			</div>
		</div>		
		<div class="readmore clearfix">
			<div class="red">
				<h3>新时代<br/>关于爱生活的我们</h3>
				<div id="readmore-line01"><img src="img/remore-line01.png"/></div>
				<a href="#" class="btn05">查看更多</a>
			</div>
			<div class="white">
				<h3>新时代<br/>关于爱生活的我们</h3>
				<div id="readmore-line02"><img src="img/remore-line02.png"/></div>
				<a href="#" class="btn06">查看更多</a>
			</div>
			<div class="yellow"></div>
		</div>
		<div class="volunteer">
			<h2>成为我们的志愿者</h2>
			<div class="volunter-line"><img src="img/volunter-line.png"/></div>
			<h3>新世界的大家庭需要每一个爱生活的人的加入，如果你够年轻，有梦想，有激情<br />那就不要犹豫，快来加入我们，成为改变所有人生活的人 </h3>
		</div>
		<div class="information clearfix">
			<div class="explain">
				<h3>新世界志愿者协议</h3>
				<h4>加入新世界志愿者的人员必须遵守中华人民共共和国的<br/>相关法律法规，并且本着平等资源的原则 ...... </h4>
				<h3>新世界志愿者权利</h3>
				<h4>加入新世界志愿者的人员必须遵守中华人民共共和国的<br/>相关法律法规，并且本着平等资源的原则 ......</h4>
				<h3>更多条款</h3>
			</div>
			<div class="write">
				<div class="name-age">
					<form action="#">
						<input type="txt" name="name" placeholder="姓名：" class="btn07"/>
						<input type="txt" name="age" placeholder="年龄：" class="btn07"/><br /><br />
						<input type="txt" name="contect" placeholder="联系方式：" class="btn07"/>
						<input type="txt" name="address" placeholder="联系地址：" class="btn07"/><br /><br />
						<textarea name="dream" placeholder="请简单描述您梦想的生活：" class="btn08"></textarea>
						<button class="btn09">提交申请</button>
					</form>
					
				</div>
				
			</div>
		</div>
		<div class="bottom clearfix">
			<h2>联系我们</h2>
			<p>为了更好的获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯<br />也可以通过以下任何方式关注我们动态</p>
			<form action="#"">
				<input type="txt" name="e-mail" placeholder="someone@email.com" class="btn10" /><button class="btn11">提交</button>
			</form>
			<ul class="tools">
				<li><a href="#"><img src="img/QQ.jpg"/></a></li>
				<li><a href="#"><img src="img/weibo.jpg"/></a></li>
				<li><a href="#"><img src="img/tiwwer.jpg"/></a></li>
				<li><a href="#"><img src="img/earth.jpg"/></a></li>
			</ul>
		</div>
		<div class="footer">
			<div class="left">@2016新世界</div>
			<a href="#" class="right">Back to top</a>
		</div>
	</body>
</html>

CSS部分

body{
	/*height: 5000px;*/
	/*overflow-x: hidden;*/
}
/*header开始*/
.header{
	/*height: 56px;*/
	/*background-color: #bfa;*/
}
/*解决高度塌陷*/
.clearfix:before,
.clearfix:after{
	content: "";
	display: table;
	clear: both;
}
.clearfix{
	zoom: 1;
}
/*设置logo*/
.header .logo{
	float: left;
	margin: 13px 11px 12px 59px;
}
/*设置文字*/
.header h1{
	color: #393a3a;
	font: 21px/56px 黑体;
	display: inline
}
/*设置导航条*/
.header .nav{
	float: right;
	padding:16px 32px 23px 0;
}
.header li{
	float: left;
	padding-left: 40px;
}
.header li a{
	color: #787b83;
	font: 14px 微软雅黑;
}
.nav a:hover{
	color: #e74f4d;
	border-bottom: solid 1px #e74f4d;
}
/*设置登录*/
.header .login_logo{
	float: right;
	padding: 16px 6px 23px 0;
}
.header .login{
	float: right;
	color: #e74f4d;
	font: 14px "微软雅黑";
	padding: 16px 67px 23px 0px;
}
.header .login:hover{
	color: #f67d7b;
}
/*header结束*/

/*banner开始*/
.banner{
	height: 690px;
	/*width: 1349px;*/
	background: url(../img/picture01.jpg) no-repeat;
	position: relative;
}
/*设置h2*/
.banner h2{
	position: absolute;
	top: 231px;
	left: 117px;
	color: #fff;
	font: 60px "微软雅黑";
}
/*设置h3*/
.banner h3{
	position: absolute;
	top: 311px;
	left: 124px;
	color: #fff;
	font: 21px/32px "微软雅黑";
}
/*设置按钮*/
.banner .btn01{
	position: absolute;
	top: 429px;
	left: 125px;
	width: 331px;
	height: 65px;
	background: url(../img/button01.jpg) no-repeat;
	color: #fff;
	font: 30px/65px "微软雅黑";
	text-align: center;
	display: block;
}
.banner .btn01:hover{
	color: #ab3b3a;
}
/*banner结束*/

/*function开始*/
.function{
	height: 250px;
}
.function .fct01,.function .fct02,
.function .fct03,.function .fct04{
	width: 25%;
	height: 250px;	
	float: left;
	/*padding-top: 44px;*/
	position: relative;
} 
/*设置fct01*/
.fct01 .circle{
	width: 42px;
	height: 42px;
	background: url(../img/circle.png) no-repeat;
	position: absolute;
	top: 45px;
	left: 145px;
}
.fct01 p{
	position: absolute;
	top: 134px;
	left: 0px;
	color: #767777;
	font: 14px/1.5 "黑体";
	text-align: center;
	margin-bottom: 87px;
}
/*设置fct02*/
.fct02 .flag{
	width: 42px;
	height: 42px;
	background: url(../img/flag.png) no-repeat;
	position: absolute;
	top: 45px;
	left: 145px;
}
.fct02 p{
	position: absolute;
	top: 134px;
	left: 0px;
	color: #767777;
	font: 14px/1.5 "黑体";
	text-align: center;
	margin-bottom: 87px;
}
/*设置fct03*/
.fct03 .flower{
	width: 42px;
	height: 42px;
	background: url(../img/flower.png) no-repeat;
	position: absolute;
	top: 45px;
	left: 145px;
}
.fct03 p{
	position: absolute;
	top: 134px;
	left: 0px;
	color: #767777;
	font: 14px/1.5 "黑体";
	text-align: center;
	margin-bottom: 87px;
}
/*设置fct04*/
.fct04 .square{
	width: 42px;
	height: 42px;
	background: url(../img/square.png) no-repeat;
	position: absolute;
	top: 45px;
	left: 145px;
}
.fct04 p{
	position: absolute;
	top: 134px;
	left: 0px;
	color: #767777;
	font: 14px/1.5 "黑体";
	text-align: center;
	margin-bottom: 87px;
}
/*设置fct01,fct02，fct03，fct04中p的左边框*/
.fct01 p,.fct02 p,.fct03 p,.fct04 p{
	padding-left: 90px;
	border-left: rgb(118,119,119) 1px solid;
}
/*设置fct01中p没有左边框*/
.fct01 .no-border{
	border-left:none;
}
/*function结束*/

/*tummy开始*/
.tummy{
	background: url(../img/tummy-bg.jpg) repeat-x;
	height: 360px;
	position: relative;
}
.tummy .tummy-logo{
	position: absolute;
	top: 89px;
	left:595px;
}
.tummy p{
	color: #323333;
	font: 53.59px 黑体;
	position: absolute;
	top: 229px;
	left: 213px;
}
/*tummy结束*/

/*inquire开始*/
.inquire{
	background: url(../img/inquire-bg.jpg) no-repeat;
	height: 341px;
	position: relative;
}
/*设置h2*/
.inquire h2{
	color: #fff;
	font: 21px "微软雅黑";
	position: absolute;
	top: 53px;
	left: 502px;
}
/*设置h2下面的横线*/
.inquire .inquire-line{
	position: absolute;
	top: 83px;
	left: 601px;
}
/*设置h3*/
.inquire h3{
	color: #fff;
	font: 12px "微软雅黑";
	position: absolute;
	top: 116px;
	left: 449px;
}
/*设置下拉列表*/
.choice01{
	height: 36px;
	width: 236px;
	color:#a8aaaa;
	font: 12px "微软雅黑";
	position: absolute;
	top: 180px;
	left:126px;
}
.choice02{
	height: 36px;
	width: 236px;
	color:#a8aaaa;
	font: 12px "微软雅黑";
	position: absolute;
	top: 180px;
	left:390px;
}
.choice03{
	height: 36px;
	width: 236px;
	color:#a8aaaa;
	font: 12px "微软雅黑";
	position: absolute;
	top: 180px;
	left:655px;
}
.choice04{
	height: 36px;
	width: 236px;
	background-color: rgb(190,78,72);
	color: #FFFFFF;
	font: 14px "微软雅黑";
	position: absolute;
	left: 920px;
	top: 180px;
}
/*inquire结束*/

/*activity开始*/
.activity{
	height: 567px;
}
/*设置文字*/
.activity .activity02{
	float: right;
	width: 33.3%;
	height: 567px;
}
.activity02 p{
	float: left;
	color: black;
	font: bold 20px 黑体;
	margin: 167px 178px 33px;
}
#number{
	color: rgb(231,79,77);
}
.activity02 .content{
	color: #323333;
	font: 14px/30px "微软雅黑";
	margin: 0 55px 50px;
}
/*设置大按钮*/
.activity02 .btn03{
	padding: 9px 27px;
	border: solid 1px #e25c60;
	color: #e25c60;
	font: 12px "微软雅黑";
	margin: 0 168px;
}
/*设置小圆按钮*/
.activity02 .btn04{
	float: left;
	margin: 24px 0 0 190px;
}
.btn04 li{
	float: left;
	margin-right: 14px;
}
.btn04 li:hover{
	background: url(../img/button02.png) no-repeat;
}
/*设置图片*/
.activity .activity-Beijing{
	float: left;
	background: url(../img/activity-bg.jpg) no-repeat;
	height: 567px;
	width: 66.7%;
}
.activity-Beijing h2{
	color: #fff;
	font:49.47px "微软雅黑";
	margin: 123px 0 0 380px;
}
.activity-Beijing h3{
	 color: #fff;
	 font: 157.79px/107.79px "微软雅黑";
	 margin: 11px 0 0 265px;
}
.activity-Beijing h4{
	 color: #FFF;
	 font: 21.91px/1.75 "微软雅黑";
	 margin: 40px 0 0 377px;
}
/*activity结束*/

/*readmore开始*/
.readmore{
	height: 521px;
}
.readmore .red{
	float: left;
	background-color: #e74f4d;
	height: 521px;
	width: 33.3%;
}
.red h3{
	color: #ffffff;
	font: 21px/1.5 黑体;
	text-align: center;
	margin-top: 174px;
}
#readmore-line01{
	padding: 16px 0 36px 208px;
}
.readmore .btn05{
	color: #fff;
	font: 21px 黑体;
	padding: 12px 42px;
	border: solid 1px #fff;
	margin-left: 140px;
}
.readmore .white{
	float: left;
	background-color: #fff;
	height: 521px;
	width: 33.4%;
}
.white h3{
	color:  #e74f4d;
	font: 21px/1.5 黑体;
	text-align: center;
	margin-top: 174px;
}
#readmore-line02{
	padding: 16px 0 36px 208px;
}
.readmore .btn06{
	color:  #e74f4d;
	font: 21px 黑体;
	padding: 12px 42px;
	border: solid 1px  #e74f4d;
	margin-left: 140px;
}
.readmore .yellow{
	float: left;
	height: 521px;
	width: 33.3%;
	background: url(../img/picture02.jpg) no-repeat;
}
/*readmore结束*/

/*volunteer开始*/
.volunteer h2{
	font: 21px 黑体;
	color: #323333;
	text-align: center;
	margin-top: 119px;
}
.volunteer .volunter-line{
	padding: 0px 0px 10px 660px;
}
.volunteer h3{
	color: #aaaaaa;
	font: 12px "微软雅黑";
	text-align: center;
	margin-bottom: 105px;
}
/*volunteer结束*/

/*information开始*/
.information{
	/*height: 500px;*/
}
.information .explain{
	float: left;
	width: 317px;
	height: 420px;
	padding-left:139px ;
}
.explain h3{
	color: #5c5451;
	font: 14px 黑体;
	margin-bottom: 18px;
}
.explain h4{
	color: #323333;
	font: 12px/2.5 宋体;
	margin-bottom: 47px;
}
.information .write{
	float: left;
	width: 753px;
	height: 420px;
	padding: 0 80px 0 60px;
}
.information .btn07{
	background: url(../img/button04.jpg)  no-repeat;
	width: 311px;
	height: 41px;
	border: none;
	margin-left:17px ;
	text-indent:1em ;
	font: 12px/41px 宋体;
	color: #5c5451;
}
.information .btn08{
	background: url(../img/button05.jpg) no-repeat;
	border: none;
	resize: none;
	width: 639px;
	height: 114px;
	color: #5c5451;
	font: 12px 宋体;
	margin-left:17px ;
	text-indent:1em ;
	overflow: hidden;
	padding-top: 7px;
}
.information .btn09{
	background: url(../img/button06.jpg) no-repeat;
	width: 639px;
	height: 41px;
	color: #323333;
	font: 14px 黑体;
	margin-left: 18px;
	margin-top:13px ;
}
.information .btn09:hover{
	color: #e74f4d;
}
/*information结束*/

/*bottom开始*/
.bottom{
	height: 357px;
	background: url(../img/bottom-bg.jpg) repeat-x;
}
.bottom h2{
	color: #ffffff;
	font: 21px 黑体;
	text-align: center;
	margin: 90px 0 11px 0;
}
.bottom p{
	color: #fff;
	font: 12px 宋体;
	text-align: center;
}
.bottom .btn10{
	height: 41px;
	width: 431px;
	margin: 31px 0 0 420px;
	color: #aaaaaa;
	font: 14px "微软雅黑";
	text-indent: 1em;
}
.bottom .btn11{
	width: 80px;
	height: 44px;
	background-color: rgb(111,113,120);
	color: #ffffff;
	font: 15px "微软雅黑";
	text-align: center;
	/*border: none;*/
	margin: 30px 0 0 0;
}
.bottom .tools{
	float: left;
	padding: 37px 0 0 572px;
}
.tools li{
	float: left;
	margin-right:28px ;
}
/*bottom结束*/

/*footer开始*/
.footer{
	background: url(../img/footer-bg.jpg) repeat-x;
	height: 58px;
}
.footer .left{
	color: #fff;
	font: 12px 宋体;
	float: left;
	padding: 31px 0 0 100px;
}
.footer .right{
	color: #fff;
	font: 12px 宋体;
	float: right;
	padding: 31px 40px 0 0;
}
/*footer结束*/

烂人刘理淦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2016.12.12产品官网

在伯爵实验室通宵敲了13个半钟写出来的产品官网，50多个小时没有睡觉，算是对这段时间HTML&CSS学习的总结，接下来的时间要好好学习Javascript了。但是由于目前技术问题没有实现的部分有：1.图片的轮播2.关联下拉列表HTML部分新世界登录
复制链接

扫一扫