页面布局样式代码
<style type="text/css">
body{text-align:center}
*{
margin:0;
}
.box{
margin:0 auto;
width:100%;
border:1px solid red;
}
.test{
position:relative;
left:25%;
text-align:center;
width:775px;
border:1px solid black;
}
ul{
display:block;
float:left;
padding:0;
margin:0;
}
li{
text-decoration: none; /*去掉前面的圆点*/
list-style: none;
float: left;
}
a{
text-decoration: none;
margin:0px;
display: block
}
.header{
width:775px;
height:74px;
border:1px solid black;
}
.menu{
width:775px;
height:42px;
}
.home{
width:102px;
height:42px;
background:url(image/home-page.jpg);
}
.home:hover{
background:url(image/home-page-over.jpg);
}
.about{
width:123px;
height:42px;
background:url(image/about-us.jpg);
}
.about:hover{
background:url(image/about-us-over.jpg);
}
.service{
width:92px;
height:42px;
background:url(image/services.jpg);
}
.service:hover{
background:url(image/services-over.jpg);
}
.support{
width:86px;
height:42px;
background:url(image/support.jpg);
}
.support:hover{
background:url(image/support-over.jpg);
}
.contact{
width:86px;
height:42px;
background:url(image/contacts.jpg);
}
.contact:hover{
background:url(image/contacts-over.jpg);
}
.picture{
margin-left:-140px;
border:1px solid gold;
}
.container1{
width:775px;
height:216px;
}
.container1_L {
width:489px;
height:174px;
float: left;
background:url(image/welcome.jpg);
}
.container1_R{
position:relative;
top:-42px;
width:286px;
height:216px;
float: right;
}
.container2{
width:775px;
height:256px;
}
.container2_L {
float: left;
width:327px;
height:256px;
}
.container2_R{
float: right;
width:420px;
height:256px;
}
</style>
body代码
<div class="box">
<div class="test">
<form id="form1" runat="server">
<%--头部开始--%>
<div class="header">
<img src="image/main.jpg" alt=" " />
</div>
<%-- /*头部结束*/--%>
<%-- /*菜单开始*/--%>
<div class="menu">
<ul>
<li>
<a class="home"></a>
</li>
<li>
<a class="about"></a>
</li>
<li>
<a class="service"></a>
</li>
<li>
<a class="support"></a>
</li>
<li>
<a class="contact"></a>
</li>
</ul>
</div>
<%-- /*菜单结束*/--%>
<%-- /*container1开始*/--%>
<div class="container1">
<div>
<img src="image/b_wel.jpg" alt="" class="container1_L"/>
</div>
<div >
<img src="image/main-12.jpg" alt="" class="container1_R" />
</div>
</div>
<%-- /*container1结束*/--%>
<%--/*container2开始*/--%>
<div class="container2">
<div class=" container2_L">
<img src="image/feat.jpg" alt="" />
<img src="image/feat-19.jpg" alt="" class="picture "/>
<p>welcome to here</p>
</div>
<div class=" container2_R">
<img src="image/why.jpg" alt="" />
<img src="image/services-20.jpg" alt="" />
</div>
</div>
<%--/*container2结束*/--%>
<%-- /*footer开始*/--%>
<div class="footer">
</div>
<%-- /*footer结束*/--%>
</form>
</div>
</div>