html公司网页的简单制作
1、<!DOCTYPE html><html>
<head> <meta charset="UTF-8"> <title></title> <style> * {padding: 0px;margin: 0px;} ol,ul{list-style: none;} #form {width: 980px;height: 740px;margin: 50px auto;} #top {width:980px;height: 130px;background: #e9e9e9;}
2、 #logo{width: 980px;height: 100px;float: left;} #logo h1,h3{color: #0065a3;float: left;display: block;} #logo h1{padding-top: 20px;} #logo img{display: block;float: left;margin-top: 20px;padding-left: 50px;} nav{width: 980px;height: 30px;float: left;background: #005486;display: block;} nav li{float: left;}
3、 nav li a{line-height: 30px;color: #FFF;text-decoration: none;display: block;padding:0 30px;text-align: center;} nav li:hover{background: #f00;} #center{width: 980px;height: 510px;} #bj{width: 980px;height: 300px;} #bj img{height: 280px;width: 940px;margin: 10px 20px;display: block;}
4、 #jj{width: 310px;height: 190px;background: #e8f8ff;margin: 0px 10px 10px 20px;float: left;} .span{width: 290px;height: 30px;padding-left: 20px;display: block;} .h3{background: url(img/bluepoint.jpg) no-repeat center left;color: #000;line-height: 30px;padding-left: 5px;} #jj p{text-indent: 28px;line-height: 30px;} #xw{width: 310px;height: 190px;background: #e8f8ff;margin: 0px 10px 10px 0px;float: left;} #xw ul{padding-left: 10px;}
5、 #xw li a{line-height: 30px;text-decoration: none;background: url(img/bluepoint.jpg) no-repeat center left;padding-left: 5px;color: #000;} #al{width: 300px;height: 190px;background: #e8f8ff;margin: 0px 0px 10px 0px;float: left;} #al img{width: 280px;height: 130px;display: block;margin: 0px 10px 10px 10px;} #al h4{font-size: 12px;padding-left:20px ;font-weight: normal;} #bottom{width: 980px;height: 100px;background:#e8f8ff;} #bottom h4{display: block;text-align: center;line-height: 100px;} </style> </head>
<body>
6、 <div id="form"> <div id="top"> <div id="logo"> <img src="img/logo.png" /> <h1>安徽励创网络科技有限责任公司<h3>AnHui LiChuang technology Limited Liability Company</h3></h1> </div> <nav> <ul> <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> <li><a href="#">成功案例</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">人才招聘</a></li> </ul> </nav>
</div> <div id="center"> <div id="bj"> <img src="img/bj.jpg"/> </div> <div id="jj"> <span class="span"><h3 class="h3">公司简介</h3></span> 等多久 梦多久 一百年 一千年 就算没有了黑夜白昼 我也追到三界的尽头 谁说神仙不重修 谁说仙魔世隔两头 今天我要带你走 三生三世 不放手等多久 梦多久 一百年 一千年 就算没有了黑夜白昼 . </div> <div id="xw"> <span class="span"><h3 class="h3">公司新闻</h3></span> <ul> <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 id="al"> <span class="span"><h3 class="h3">成功案例</h3></span> <img src="img/al.jpg"/> <h4><strong>项目名称：</strong>安徽励创网络科技有限责任公司</h4> </div> </div> <div id="bottom"> <h4>版权所有 安徽励创网络科技有限责任公司</h4> </div> </div> </body>
</html>
