.net学习笔记1--网页页面布局

页面布局样式代码

 <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>