1, index.html code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>千峰首页</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<!--
版心的宽度 是需要开发人员自己定
以千锋页面为例。版心页面的宽为 1006px
-->
<div class="container">
<!--头部-->
<div class="bg_header">
<div class="header">
<div class="logo">
<img src="img/pic_03.jpg"/>
</div>
<div class="nav">
<ul class="clear">
<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="#">APP研发</a>
</li>
<li>
<a href="#">培训服务</a>
</li>
<li>
<a href="#">创业孵化</a>
</li>
</ul>
</div>
</div>
</div>
<!--banner-->
<div class="banner">
<img src="img/banner_1_bg.jpg"/>
</div>
<!--内容区-->
<div class="bg_intro">
<div class="intro">
<div class="intro1">
<img src="img/pic_14.jpg"/>
<h3>移动产业</h3>
<h5>国内最大移动互联网开发人员提供平台</h5>
<ul>
<li>精准高效的人才匹配</li>
<li>专业多样的招聘平台</li>
<li>覆盖全国的优质资源</li>
</ul>
</div>
<div class="intro2">
<img src="img/pic_17.jpg"/>
<h3>千锋教育</h3>
<h5>IOS、Android研发培训行业领导品牌</h5>
<ul>
<li>最专业的师资队伍</li>
<li>最权威的课程体系</li>
<li>最前沿的企业内训</li>
</ul>
</div>
<div class="intro3">
<img src="img/pic_20.jpg"/>
<h3>项目研发</h3>
<h5>知名移动互联网APP解决方案提供商</h5>
<ul>
<li>国内顶级的研发团队</li>
<li>高效优质的产品质量</li>
<li>全面完善的售后服务</li>
</ul>
</div>
<div class="intro4">
<img src="img/pic_22.jpg"/>
<h3>创业孵化</h3>
<h5>卓越的移动互联网孵化基地</h5>
<ul>
<li>行业知名的“天使投资”导师</li>
<li>国内配套的资源支持</li>
<li>助力实现创新idea</li>
</ul>
</div>
</div>
</div>
<!--新闻区-->
<div class="bg_news">
<div class="news">
<div class="news1">
<img src="img/pic_30.jpg"/>
</div>
<div class="news2">
<h4>动态新闻</h4>
<h5>千峰公开课IOS开篇之战 性感约会IOS7</h5>
<h6>iOS7正式推出距今已经将近两年时间，虽然苹果公司2014年9月29日正式宣布停止支持IOS7系统。</h6>
<p>--------------------------------------------------------------</p>
<ul>
<li>企业内训首选千峰教育 高级讲师再赴沃尔玛倾</li>
<li>企业内训首选千峰教育 高级讲师再赴沃尔玛倾</li>
<li>企业内训首选千峰教育 高级讲师再赴沃尔玛倾</li>
<li>企业内训首选千峰教育 高级讲师再赴沃尔玛倾</li>
</ul>
</div>
<div class="news3">
<h4>动态新闻</h4>
<img src="img/pic_33.jpg"/>
<ul>
<li class="phone">400-654-7778</li>
<li class="zx">培训咨询：010-82790226/7</li>
<li class="zx">招聘咨询：010-82790226/7-800</li>
<li class="zx">网站合作：010-82790226/7-815</li>
<li class="zx">企业洽谈：010-82790226/7-803</li>
</ul>
</div>
</div>
</div>
<!--地图区-->
<div class="bg_menu">
<div class="menu">
<div class="menu1">
<div class="part1">
<h6>走进千峰</h6>
<ul>
<li>行峰简介</li>
<li>行峰之路</li>
<li>联系我们</li>
</ul>
</div>
<div class="part2">
<h6>人才服务</h6>
<ul>
<li>行峰简介</li>
<li>行峰之路</li>
<li>联系我们</li>
</ul>
</div>
<div class="part3">
<h6>千峰教育</h6>
<ul>
<li>行峰简介</li>
<li>行峰之路</li>
<li>联系我们</li>
</ul>
</div>
<div class="part4">
<h6>APP外包</h6>
<ul>
<li>行峰简介</li>
<li>行峰之路</li>
<li>联系我们</li>
</ul>
</div>
<div class="part5">
<h6>培训服务</h6>
<ul>
<li>行峰简介</li>
<li>行峰之路</li>
<li>联系我们</li>
</ul>
</div>
</div>
<div class="menu2">
<img src="img/pic_41.jpg">
</div>
<div class="menu3">
<img src="img/pic_38.jpg">
<div class="code">
<h5>千峰教育微信号</h5>
<h6>扫描加好友</h6>
</div>
</div>
<div class="bg_footer">
<div class="footer">
<p>Copyright 2007-2014 北京千峰互联科技有限公司 京IPC备12003911号-3 京公网安备11010802011455 站长统计 百度统计</p>
</div>
</div>
</div>
</body>
</html>2, index.css code
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.clear:after{
content: "";
display: block;
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
}
.clear{
zoom: 1;
}
/*****************header*******************/
.bg_header{
height: 62px;
background: #232323;
}
.bg_header .header{
width: 1006px;
height: 62px;
background: #232323;
margin: 0 auto;
}
.bg_header .header .logo{
width: 229px;
height: 62px;
/*background: green;*/
float: left;
overflow: hidden;
}
.bg_header .header .logo img{
width: 159px;
height: 36px;
margin-top: 12px;
margin-left: 8px;
}
.bg_header .header .nav{
width: 777px;
height: 62px;
/*background: greenyellow;*/
float: left;
}
.bg_header .header .nav ul{
}
.bg_header .header .nav ul li{
width: 86px;
height: 62px;
float: left;
text-align: center;
line-height: 62px;
font-size: 12px;
background: url(../img/pic_06.jpg) no-repeat right center;
}
.bg_header .header .nav ul li:last-child{
background: none;
}
.bg_header .header .nav ul li:first-child{
text-indent: 25px;
}
.bg_header .header .nav ul li a{
color:#fff;
}
/*****************banner*******************/
.banner{
height: 421px;
background: skyblue;
}
.banner img{
width: 100%;
height: 421px;
}
/*****************内容区*******************/
.bg_intro{
height: 351px;
background: #f5f5f5;
border-top: 1px solid #a6a7ab;
}
.bg_intro .intro{
width: 1006px;
height: 351px;
background: #f5f5f5;
margin: 0 auto;
}
.bg_intro .intro .intro1{
width: 264px;
height: 351px;
/*background: pink;*/
float: left;
text-align: center;
overflow: hidden;
}
.bg_intro .intro .intro1 img{
width: 54px;
height: 90px;
margin-top: 56px;
}
.bg_intro .intro h3{
font-size: 22px;
font-weight: 500;
margin-top: 12px;
}
.bg_intro .intro h5{
font-size: 12px;
color:#517085;
margin-top: 12px;
margin-bottom: 12px;
}
.bg_intro .intro ul li{
font-size: 14px;
color:#a0b8da;
line-height: 19px;
}
.bg_intro .intro .intro2{
width: 256px;
height: 352px;
/*background: hotpink;*/
float: left;
text-align: center;
}
.bg_intro .intro .intro2 img{
width: 67px;
height: 92px;
margin-top: 56px;
}
/*.bg_intro .intro .intro2 h3{
font-size: 22px;
font-weight: 500;
margin-top: 12px;
}
.bg_intro .intro .intro2 h5{
font-size: 12px;
color:#517085;
margin-top: 12px;
margin-bottom: 12px;
}
.bg_intro .intro .intro2 ul li{
font-size: 14px;
color:#a0b8da;
line-height: 19px;
}*/
.bg_intro .intro .intro3{
width: 253px;
height: 352px;
/*background: pink;*/
float: left;
text-align: center;
}
.bg_intro .intro .intro3 img{
width: 136px;
height: 92px;
margin-top: 56px;
}
.bg_intro .intro .intro4{
width: 233px;
height: 352px;
/*background: hotpink;*/
float: left;
text-align: center;
}
.bg_intro .intro .intro4 img{
width: 106px;
height: 92px;
margin-top: 56px;
}
/*****************新闻区*******************/
.bg_news{
height: 307px;
background: white;
}
.bg_news .news{
width: 1006px;
height: 307px;
background: rgb(255,255,255);
margin: 0 auto;
}
.bg_news .news .news1{
width: 303px;
height: 307px;
background: rgb(255,255,255);
float: left;
overflow: hidden;
}
.bg_news .news .news1 img{
width: 297px;
height: 224px;
border:1px solid #d7e1e0;
padding:1px;
background: #fbfffc;
margin-top: 39px;
margin-left: 1px;
}
.bg_news .news .news2{
width: 350px;
height: 307px;
background: rgb(255,255,255);
float: left;
}
.bg_news .news .news2 h4{
margin-left: 13px;
margin-top: 39px;
color: rgb(21,32,78);
font-size: 18px;
}
.bg_news .news .news2 h5{
margin-left: 13px;
margin-top: 18px;
color:rgb(21,32,78) ;
font-size: 15px;
}
.bg_news .news .news2 h6{
margin-top: 16px;
margin-bottom: 16px;
color: rgb(187,153,170);
text-indent: 32px;
}
.bg_news .news .news2 ul li{
/*margin-top: 16px;*/
margin-left: 13px;
margin-bottom: 16px;
color: rgb(69,98,166);
font-size:12px ;
line-height: 12px;
}
.bg_news .news .news3{
width: 353px;
height: 307px;
background: #fff;
float: left;
}
.bg_news .news .news3 h4{
margin-left: 13px;
margin-top: 39px;
color: rgb(21,32,78);
font-size: 18px;
}
.bg_news .news .news3 img{
width: 143px;
height: 26px;
margin-top: 18px;
margin-bottom: 28px;
margin-left: 13px;
border: 1px solid;
}
.bg_news .news .news3 .phone{
font-size: 18px;
color: rgb(69,98,166);
margin-left: 15px;
}
.bg_news .news .news3 .zx{
font-size: 13px;
color: rgb(98,98,152);
line-height: 28px;
}
/*****************èœå•*******************/
.bg_menu{
height: 215px;
background: rgb(34,34,34);
}
.bg_menu .menu{
width: 1006px;
height: 215px;
background: #FFFFFF;
margin: 0 auto;
}
.bg_menu .menu .menu1{
width: 495px;
height: 215px;
background: rgb(34,34,34);
/*margin-top: 50px;
margin-left: 11px;*/
float: left;
}
.bg_menu .menu .menu1 h6{
font-size: 12px;
color: rgb(157,214,255);
}
.bg_menu .menu .menu1 ul li{
font-size: 12px;
color:rgb(153,153,153) ;
}
.bg_menu .menu .menu1 .part1{
margin-top: 50px;
float: left;
margin-left: 11px;
margin-bottom: 22px;
line-height: 12px;
}
.bg_menu .menu .menu1 .part2{
margin-top: 50px;
float: left;
margin-left: 11px;
margin-bottom: 22px;
line-height: 12px;
}
.bg_menu .menu .menu1 .part3{
float: left;
margin-top: 50px;
margin-left: 11px;
margin-bottom: 22px;
line-height: 12px;
}
.bg_menu .menu .menu1 .part4{
float: left;
margin-top: 50px;
margin-left: 11px;
margin-bottom: 22px;
line-height: 12px;
}
.bg_menu .menu .menu1 .part5{
float: left;
margin-top: 50px;
margin-left: 11px;
margin-bottom: 22px;
line-height: 12px;
}
.bg_menu .menu .menu2{
width: 310px;
height: 215px;
background:rgb(34,34,34);
float: left;
}
.bg_menu .menu .menu2 img{
width: 255px;
height: 171px;
margin-top: 29px;
margin-left: 15px;
float: left;
}
.bg_menu .menu .menu3{
width: 201px;
height: 215px;
background:rgb(34,34,34);
float: left;
}
.bg_menu .menu .menu3 img{
width: 147px;
height: 147px;
margin-top: 19px;
margin-left: 19px;
float: left;
}
.bg_menu .menu .menu3 .code{
margin-top: 173px;;
}
.bg_menu .menu .menu3 .code h5{
margin-top: 6px;
margin-left: 49px;
line-height: 11px;
color: rgb(44,41,48);
}
.bg_menu .menu .menu3 .code h6{
margin-top: 6px;
margin-left: 68px;
line-height: 11px;
color: rgb(44,41,48);
}
/*****************底部*******************/
.bg_footer{
height: 1006px;
height: 45px;
background: black;
}
.bg_footer .footer{
width: 1006px;
height: 45px;
background:rgb(16,16,16);
margin: 0 auto;
}
.bg_footer .footer p{
font-size: 12px;
color: rgb(154,154,154);
margin: 0 auto;
}3. Effect picture
Summary: When making a web page, the most important thing is to understand what you want to accomplish. You must have a structure before you can write an orderly code. In addition, the picture must understand its size, preferably with ps