div頁面佈局基本佈局知識

時間  2019-11-12
標籤 div 頁面 佈局 基本 知識 欄目 CSS 简体版
原文   原文鏈接

頁面代碼：javascript

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0" /> 
  <title>div佈局要點</title> 
  <script src="./qrcodejs/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
  <style>
    *{
        margin:0px;
        padding:0px;
    }
    </style> 
 </head> 
 <body> 
  <div id="wrapper"> 
   <div id="header" style="width:100%; background-color: #333333; float:left; position: relative;"> 
    <div id="left" style="width:70%; background-color:yellow; float:left;word-wrap:break-word;word-break:break-all;">
      頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div頭部左邊div
    </div> 
    <div style="clear:both;visibility:hidden;display:none"></div> 
    <div id="right" style="width:30%; background-color:green; float:right; position: absolute;  top: 0; bottom: 0; right: 0;"> 
     <table style="height:100%; width:100%;table-layout:fixed;"> 
      <tbody>
       <tr> 
        <td style="word-wrap:break-word; vertical-align: center; text-align: right;"> 頭部右邊div頭部右邊div頭部右邊div頭部右邊div</td> 
       </tr> 
      </tbody>
     </table> 
    </div> 
   </div> 
   <div style="clear:both;visibility:hidden;display:none"></div> 
   <div id="content" style="width:100%; background-color: red; float:left;word-wrap:break-word;word-break:break-all;text-align: left;">
     主體內容div主體內容div主體內容div主體內容div主體內容div主體內容div主體內容div主體內容div主體內容div主體內容div主體內容div主體內容div主體內容div主體內容div主體內容div主體內容div主體內容div主體內容div主體內容div
   </div> 
   <div style="clear:both;visibility:hidden;display:none"></div> 
   <div id="footer" style="width:100%; background-color: #989898; float:left;word-wrap:break-word;word-break:break-all;text-align: center;">
    頁腳頁腳頁腳頁腳頁腳頁腳頁腳
   </div>
  </div>  
 </body>
</html>

頁面效果：html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程