- Html部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmls="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>首页header区域实战</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="./CSS/reset.css" type="text/css" /> <!-------- css初始化 -------->
<link rel="stylesheet" href="./CSS/ind.css" type="text/css" /> <!-------- 首页宽高背景等设置 -------->
</head>
<body>
<div id="container">
<div id="header"> <!-------- header区 -------->
<img src="./images/logo.jpg" alt="logo" />
<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>
</ul>
</div>
<div id="banner"> <!-------- banner区 -------->
<img src="./images/about_banner.jpg" alt="banner" />
</div>
<div id="main">
<div id="mleft">
<div class="yewu"></div>
<div class="yewu"></div>
<div class="yewu"></div>
<div class="yewu"></div>
</div>
<div id="mrig">
<div id="view"></div>
<div id="contact"></div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
- css初始化文件(见前面笔记)
- ind.css
img {
display: block;
}
/******** container ********/
#container {
width: 1002px;
margin: 0 auto;
}
/******** container header ********/
#header {
width: 1002px;
height: 128px;
background: green url(../images/top_bg.jpg);
}
#nav li {
list-style: none;
float: left;
width: 90px;
height: 37px;
margin-right: 2px;
}
#nav li a:link {
display: block;
width: 90px;
height: 37px;
background: url(../images/nav_bg.gif);
text-align: center;
font: 15px/37px simhei; /* font: 必须加字体, 否则可能解析错误 */
color: #363636;
}
#nav li a:visited {
background: url(../images/nav_on.gif);
color: #FFF;
}
/******** container banner ********/
#banner {
width: 1000px;
height: 237px;
margin: 8px 0;
padding: 0 1px;
}
/******** container main********/
#main {
width: 1002px;
height: 464px;
background: pink;
}
/******** container main mleft ********/
#mleft {
width: 694px;
height: 464px;
background: purple;
float: left;
}
.yewu {
width: 337px;
height: 222px;
margin: 5px;
float: left;
background: orange;
}
/******** container main mrig ********/
#mrig {
width: 294px;
height: 464px;
background: silver;
float: right;
}
#view {
width: 294px;
height: 227px;
margin-bottom: 10px;
background: purple;
}
#contact {
width: 294px;
height: 227px;
background: #CCC;
}
/******** container footer ********/
#footer {
margin-top: 10px;
width: 1002px;
height: 53px;
background: yellow;
}
-
效果预览图
2012_d1_①_022 026
