6 

<html>
<head>
   <style type='text/css'>
       body{background:gray;
            text-align:center;
            margin:0;
            padding:0;}
       #wapper{background:white;
               width:800px;
               margin:0 auto;
               text-align:left;}
       #branding{background:#aaaaaa;
                 height:120px;                
                 text-align:center;
                 position:relative;}
       #branding div{font-size:2em;
                     line-height:100px;}
/******************************************/

       #branding ul{list-style:none;
                   margin:0;
                   padding:0;
                   position:absolute;
                   right:0;
                   bottom:0;}
       #branding ul li{float:left;}
       #branding ul a{text-decoration:none;
                     background:black;
                     color:white;
                     line-height:2em;
                     border-right:solid white 1px;
                     padding:0 2em;
                     float:left;
                     }
       #branding ul a:hover{background:#bbbbbb;
                           color:black;}

/******************************************/
       #footer{background:#aaaaaa;
               color:black;
               height:80;
               line-height:80px;
               font-size:1.5em;
               text-align:center;
               clear:both;}
       #content{background:yellow;
                width:519px;
                float:left;
                }

       #content2{
                 width:100px;
                 float:right;}
       img{height:100px;width:120px;float:right;           
             margin:0;
            padding:0;}
       table{float:right;background:white;}
       #mainNav{float:left;}
   </style>
   <script type='text/javascript'>
        function a(){alert('hello')}
   </script>
</head>
<body>

<div id='wapper'>
   <div id='branding'>
       <div>秦欣琪</div>
       <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='content2'>
 
   </div>
   <div id='content'>
         内容
         <table border='10'><tr><td><img src='Jellyfish.jpg'/></td></tr></table>
<br/>ascyrtdj<br/>drtjbvuj<br/>ertvhryu5<br/>rvyt4wevy<br/><br/><br/>
         <br/><br/><br/><br/><br/><br/><br/>fasebfgweru
ewxtbkugkghfhjgjhwdewxtbkugkghfhjgjhwdewxtbkugkghfhjgjhwd
ewfwrgyrtgythgewxtbkugkghfhjgjhwdewxtbkugkghfhjgjhwd
         
   </div>
   <div id='mainNav'>
       <input type='button'value='click'onclick='a()'/>
   </div>    
   <div id='footer'>
          Copyright@buu.edu.cn
   </div>
</body>
</html>

 

posted @ 2017-12-15 15:26  确定取消  阅读(93)  评论(0)    收藏  举报