首页制作

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>商业网站</title>
</head>
<body>
	<!---------------导航部分--------------->
	<ul class="nav">
	<li class="log">LOGO</li>
	<li>网站首页</li>
	<li>关于我们</li>
	<li>新闻中心</li>		
	<li>产品展示</li>
	<li>客户案例</li>
	<li>给我留言</li>	
	<li>人才招聘</li>
	<li>联系我们</li>
	</ul>
	<!-------------横图部分---------------->
	<div class="banner">
	<img src="image/55ed5b640b931.jpg" alt="">
	</div>
	<!-------------关于我们---------------------->
	<div class="aboutus">
	  <div class="tittle">关于我们</div>
		<img src="image/653-151204152F1195.jpg" alt="">
		<div class="jieshao">公司介绍</div>
		<div class="neirong">
		<p>&nbsp;&nbsp;&nbsp;&nbsp;努力，让生活更加美好。一切哪怕是辛苦的付出，都是为了拥有一个美好的明天而做出准备。让梦想起航吧！
			成功永远是在历尽艰险之后方能获取，不要迷茫，不要纠结。现在有多么艰苦，恰恰就代表着将来会有多么的幸福。
			</p>
		<diiv class="more">more</diiv>
		</div>
	</div>
	
	<!----------产品展示------------------->
	<div class="show">
		<div class="tittle" style="color:#fff">产品展示</div>
		<div class="chanpinphoto">
		<img src="image/chanpin1.jpg" alt="">
		<img src="image/chanpin2.jpg" alt="">
		<img src="image/chanpin3.jpg" alt="">
		<img src="image/chanpin4.jpg" alt="">
		<div class="chaxun">点击查询</div>
		</div>
	</div>
	<!----------新闻中心------------------->
	<div class="news"></div>
	<div class="tittle">新闻中心</div>
	<div class="newsbox">
	<div class="box1" style="margin-right: 19px">
	<div class="left">
		<img src="image/new1.png" alt="">
		<p>戈壁也建站，新疆阿克苏联通联合华为为“找宝人”提供3G/4G信号&nbsp;<span>中国联通新疆阿克苏分公司（以下简称“新疆阿克苏联通”）联合华为宣布，在阿克苏地区的戈壁深处完成RuralStar站点的部署，为戈壁里的石油勘探队提供了3G/4G信号覆盖。</span></p>
		</div>
	<div class="right">+</div>
	</div>
	<div class="box1" >
	<div class="left">
		<img src="image/new2.png" alt="">
		<p>数字世界+物理网络双轮驱动，加速智简网络创新进程&nbsp;<span>在第五届全球超宽带高峰论坛期间，华为网络产品线总裁胡克文指出：“电信网络的结构化问题已经成为制约电信产业发展的最大瓶颈，只有在物理网络之上构建一个数字世界，........</span></p>
		</div>
	<div class="right">+</div>
	</div>
	<div class="box1" style="margin-right: 19px">
	<div class="left">
		<img src="image/new3.jpg" alt="">
		<p>华为发布电信发展立场文件：ICT产业的健康活跃发展需要政府的支持和引导&nbsp;<span>华为在南非德班举行的2018年国际电联世界电信展期间发布电信发展立场文件。该文件指出，信息通信技术具有促进经济社会发展的变革力量，........</span></p>
		</div>
	<div class="right">+</div>
	</div>
	<div class="box1">
	<div class="left">
		<img src="image/new4.jpg" alt="">
		<p>华为WTTx荣获2018 ITU 可持续发展大奖&nbsp;<span>由国际电信联盟（ITU）主办的2018年世界电信展于9月10日在南非德班隆重开幕。在颁奖典礼上，华为WTTx解决方案荣获可持续发展大奖（Global Corporate Award : Sustainable Development）。......</span></p>
		</div>
	<div class="right">+</div>
	</div>
		</div>
	<!-------------------客户案例-------------------->
	<div class="anlibox">
	<div class="tittle" style="color:#00B0FF">客户案例</div>
	<ul class="photobox">
		<li><img src="image/kehu1.jpg" alt=""></li>
		<li><img src="image/kehu2.jpg" alt=""></li>
		<li><img src="image/kehu3.jpg" alt=""></li>
		<li><img src="image/kehu4.JPEG" alt=""></li>
		<li><img src="image/kehu5.jpg" alt=""></li>
		<li><img src="image/kehu6.jpg" alt=""></li>
		<li><img src="image/kehu7.png" alt=""></li>
		<li><img src="image/kehu8.jpg" alt=""></li>
		</ul>
	</div>
	<!------------------联系我们------------------------->
	<div class="callme">
	<div class="tittle" style="color:#2D54DF">联系我们</div>
	<div class="callmebox">
		<div>
			<img src="image/地址.png" alt="">
			<p>ADRESS</p>
			<span>地址:桂林理工大学</span>
		</div>
		<div>
			<img src="image/telephone.png" alt="">
			<p>TELEPHONE</p>
			<span>电话:666666666</span>
		</div>
		<div>
			<img src="image/mail.png" alt="">
			<p>E-MAIL</p>
			<span>邮箱:[email protected]</span>
		</div>
		</div>
	</div>
	<!-------------------底部----------------------->
	<div class="bottom">
	<p>版权所有|本网页由张小黑制作</p>
	</div>
</body>
</html>

CSS样式

@charset "utf-8";
/* CSS Document */

body{
		margin: 0 auto;
	    padding: 0;
}
.nav{
	width: 1240px;
	height: 133px;
	margin: 0 auto;
}
.nav li{
	list-style: none;
	float:left;
	width:107px;
	height: 100%;
	line-height: 133px;
	text-align: center;
	font-size: 18px;
	color: #333;
	font-size: 18px;
	color: #333;
	font-family: "mirosoft yehei";
}
.nav li:hover{
	background-color: #1040a8;
	color: #fff;
}
.nav .log{
	width: 363px;
	height: 100%;
	font-size: 64px;
	color:#0c53ad;
}
.nav .xuanzhong{
	background-color: #1040a8;
	color: #fff;
}
.banner{
	width: 100%;
	height: 414px;
	margin: 0 auto;
}
.aboutus{
	width: 1162px;
	height: 445px;
	margin: 0 auto;
	border-bottom: 6px solid #1566c1;
	padding-top: 50px;
	position: relative;
}
.tittle{
	width: 631px;
	text-align: center;
	font-size: 32px;
	font-family: "mirosoft yehei";
	font-weight: bold;
	margin: 0 auto;
}
.aboutus img{
	width: 408px;
	height: 233px;
	position: absolute;
	bottom: 0;
}
.jieshao{
	width: 182px;
	height: 80px;
	color: #fff;
	font-family: "mirosoft yehei";
	font-size: 30px;
	font-weight: bold;
	background-color: #1566c1;
	position: absolute;
	left:408px;
	bottom: 150px;
	z-index: 99;
}
.neirong{
	width: 665px;
	height: 150px;
	background-color: #f5f5f5;
	position: absolute;
	left:408px;
	bottom: 0;
	z-index: 1;
	padding: 78px 94px 0 41px;
}
.neirong p{
	font-size: 18px;
	line-height: 36px;
	color: #333;
}
.more{
	width: 78px;
	height: 33px;
	text-align: center;
	line-height: 33px;
	color: #fff;
	background-color: #e6c50e;
	position: absolute;
	right: 12px;
	bottom: 28px;
	z-index: 2;
	font-family: "Arial";
	font-weight: bold;
	font-size: 16px;
}
.show{
   width: 100%;
   height: 500px;
   margin: 50px auto 0;
   background-image: url(image/s_1198_0b41e947f84c390e7eda9e662a871a61.jpg);
   padding-top: 37px;
}
.chanpinphoto{
	width: 1300px;
	height: 333px;
	margin: 73px auto 0;
	margin: 20px auto 0;
}
.chanpinphoto img{
	float:left;
	margin-left: 20px;
	cursor: pointer;
}
.chaxun{
	width: 150px;
	height: 100px;
	margin: 20px auto 0;
	color: #fff;
	font-size: 20px;
	font-family: "microsoft yahei";
	text-align: center;
	line-height: 120px;
	cursor: pointer;
}
.news{
	width: 100%;
	margin:63px 0 auto;
	
}
.newsbox{
	width: 1300px;
	margin: 0 auto;
	height: 500px;
}
.box1{
	width: 572px;
	height: 242px;
	float: left;
	margin-top:30px;
}
.box1 .left{
	float: left;
	width: 531px;
	height: 100%;
	background-color: #f5f5f5;
}
.box1 .left img{
	margin: 16px 0 0 14px; 
}
.box1 .left p{
	display: inline-block;
	width: 300px;
	float: right;
	font-size: 20px;
	font-family: "microsoft yehei";
}
.box1 .left p span{
	display:block;
	font-size: 16px;
	font-family: "songti";
	line-height: 30px;
	margin-top:7px;
}
.box1 .right{
	float: right;
	width: 27px;
	height: 54px;
	color: #fff;
	background-color: #C09B1C;
	text-align: center;
	line-height: 54px;
	font-weight: bold;
	cursor: pointer;
}
.anlibox{
	width: 100%;
	height: 626px;
	margin: 53px auto 0;
	background: #f5f5f5;
	padding-top:31px;
}
.photobox{
	width: 1149px;
	height: 486px;
	margin: 35px auto 0;
}
.photobox li{
	float: left;
	width: 287px;
	height: 242px;
	list-style: none;
	overflow: hidden;
}
.callme{
    width: 100%;
	height: 424px;
	padding-top: 36px;
}
.callmebox{
	width: 1020px;
	height: 314px;
	margin: 22px auto 0;
	background: #f5f5f5;
}
.callmebox div{
	width: 33%;
	height: 100%;
	float: left;
}
.callmebox div img{
	display: block;
	margin: 54px auto 0;
}
.callmebox div p {
	font-size: 30px;
	font-family: "Arial";
	color: #999;
	text-align: center;
	margin: 20px  0 12px;
}
.callmebox div span{
	display: block;
	font-size: 20px;
	color: #333;
	margin: 0 auto;
	text-align: center;
}
.bottom{
	background:#029FF7;
	width: 100%;
	height: 150px;
}
.bottom p{
	text-align: center;
	margin: 0 auto;
	line-height: 150px;
	font-size: 30px;
	font-weight: bold;
	color: #090202;
	
}

猜你喜欢