HTML布局

1.基礎(chǔ)

1.1布局方式

布局方式 解釋
自然布局 無任何修飾，自動向左
響應(yīng)布局 流動布局，采用浮動方法
定位布局 相對于div標簽定位

1.2布局結(jié)構(gòu)

HTML5有三種典型布局結(jié)構(gòu)

布局結(jié)構(gòu) 應(yīng)用場景
div-ul-li 分類導(dǎo)航或菜單
table-tr-td 圖文布局或顯示數(shù)據(jù)
frameset-frame 一個瀏覽器串口顯示多個網(wǎng)頁

1.3布局屬性

無論采用何種布局方式和結(jié)構(gòu)，都會用到CSS常用的布局屬性功能，包括對象尺寸、邊距、顏色背景、字體等

1.4布局工具

布局工具有div、table、frameset、HTML5新元素和Bootstrap，Bootstrap是一個web前端框架


2.div-ul-li布局

根據(jù)設(shè)計需求可以設(shè)計框的尺寸

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>DSP課程實驗</title>
    <style type="text/css">
        div.layout {border:2px solid #ffffff;padding:3px;width:528px;height:396px;margin:auto;background-color:#e5dfdf}
        ul.hreflist {padding:0px;margin:auto;width:528px;overflow:hidden}
        ul.hreflist li{list-style-type:none;float:left;padding:4px 8px;width:160px;text-decoration-style:none}
        ul.hreflist li img{display:block;width:160px;height:160px;border:none}
        ul.hreflist li span{display:block;width:100%;height:30px;line-height:30px;background:#ffffff;text-align:center;text-decoration-style:none}
        a:link {text-decoration:none;color:black}
        a:hover{text-decoration:underline;color:red}
    </style>
</head>
<body>
    <div class="layout">
        <ul class="hreflist">
            <li>
                <a href="實驗一.pdf">
                    <img src="5a22349010586bb1-8478480ac02d3810-8069f1de41b401f7fbf61fd08384accd.jpg" alt="" />
                    <span>實驗一</span>
                </a>
            </li>
            <li>
                <a href="實驗二.pdf">
                    <img src="5a22349010586bb1-873f74c49cdd8d90-642b56a90fbd5f90484d0a61c2164937.jpg" alt="" />
                    <span>實驗二</span>
                </a>
            </li>
            <li>
                <a href="實驗三.pdf">
                    <img src="b37d57d0bbfab194-9429aa682b55e7aa-19c5cec3537e8bc9d09acabc6629652a.jpg" alt="" />
                    <span>實驗三</span>
                </a>
            </li>
            <li>
                <a href="dsp-exp-basic-lab1.pdf">
                    <img src="5a22349010586bb1-8478480ac02d3810-8069f1de41b401f7fbf61fd08384accd.jpg" alt="" />
                    <span>實驗一要求</span>
                </a>
            </li>
            <li>
                <a href="dsp-exp-basic-lab2.pdf">
                    <img src="5a22349010586bb1-873f74c49cdd8d90-642b56a90fbd5f90484d0a61c2164937.jpg" alt="" />
                    <span>實驗二要求</span>
                </a>
            </li>
            <li>
                <a href="dsp-exp-basic-lab3.pdf">
                    <img src="b37d57d0bbfab194-9429aa682b55e7aa-19c5cec3537e8bc9d09acabc6629652a.jpg" alt="" />
                    <span>實驗三要求</span>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

3.table-tr-td布局

table-tr-td布局的分區(qū)基于表進行，一級分區(qū)指直接隸屬于body元素的table，被稱為主表。二級分區(qū)指隸屬于主表內(nèi)的一個td的表。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>中科大信院二班</title>
    <style type="text/css">
        table{
            width:100%;
        }
        #school {
            font-family: 'Microsoft YaHei';
            font-size: 20px;
            font-weight: 400;
            color: #3257a2;
            line-height: 22px;
            letter-spacing: .5em;
        }
        #name {
        font-family:'Microsoft YaHei';font-size:30px;font-weight:700;
        color:#3257a2;
        line-height:40px;
        letter-spacing:1em;
        }
        .navtext {
            font-family: 'Microsoft YaHei';
            font-size: 20px;
            font-weight: 400;
        }
        #navigation td {border-bottom:1px solid #808080}
        #navigation a {
            font-family: 'Microsoft YaHei';
            font-size: 20px;
            font-weight: 500;
            color:black;
            line-height:16px;
            letter-spacing:.1em;
            text-decoration:none;
            display:block;
            padding:8px 6px 8px 22px;
        }
            #navigation a:hover {
            color:#3257a2;
            font-weight:bold;
            background-color:white;
            }
    </style>

</head>
<body>
    <table cellpadding="0" cellspacing="0">
        <tr style="background-color:#70e4e8">
            <td width="150" rowspan="2" colspan="2">
                <img src="logo1702.png" alt="班徽" width="150" height="150" border="0"/>
            </td>
            <td width="350" colspan="2" height="50"  nowrap="nowrap" valign="bottom">
                <pre id="school">中國科學(xué)技術(shù)大學(xué)</pre>
            </td>
            <td width="200">
                <img src="sistlogo_w.png" alt="中科大信院" width="200" height="50"/>
            </td>
        </tr>
        <tr style="background-color:#70e4e8">
            <td height="100" colspan="2" nowrap="nowrap"  valign="top">
                <pre id="name">信息學(xué)院本科1702班</pre>
            </td>
            <td>
            </td>
        </tr>
        <tr style="background-color:#e1ebeb">
            <td colspan="5" style="height:10px"></td>
        </tr>
        <tr>
            <td width=" 120" height="700" valign="top">
                <br/>
                <table border="0" cellpadding="0" cellspacing="0" width="125" id="navigation">
                    <tr><td width="120"><pre class="navtext">班級信息</pre></td></tr>
                    <tr><td width="120"><pre class="navtext">班級活動</pre></td></tr>
                    <tr><td width="120"><pre class="navtext">班級公告</pre></td></tr>
                    <tr><td width="120"><pre class="navtext">新聞稿</pre></td></tr>
                </table>
            </td>
            <td width="30"></td>
            <td width="100%" colspan="3"valign="top">
                <br/><br/><br/>
                <h1 style="text-align:center">舌尖上的2020</h1>
                <p>2019年12月31日，信息學(xué)院本科17級2班
                        于科技實驗樓會議室舉辦了“舌尖上的2020”主題晚會。
                        本次晚會由楊昊、盧志穎同學(xué)進行主持，準備了吃貨飛花令、生死時速、小說家、
                        演技炸裂、材猜菜等五個游戲環(huán)節(jié)，以及《二零三》、《一路向北》、《我懷念的》、
                        《同桌的你》等歌曲節(jié)目，以及作為主題的美食自制環(huán)節(jié)。同學(xué)們來到這里，
                        在2019年的最后一晚，共享一場游戲與美食的盛宴，迎接嶄新的2020年。
                </p>
            </td>
        </tr>
    </table>
</body>
</html>

4.frameset布局

使用框架可以在同一個瀏覽器窗口中顯示多個頁面，每份HTML文檔稱為一個框架，并且每個框架獨立于其他框架。但使用框架的缺點時開發(fā)人員必須同時跟蹤更多HTML文檔，而且很難打印整張頁面。在frameset中使用ifame實現(xiàn)常規(guī)的一些分欄布局。

<!--frameset.html-->
<html>
<frameset cols="25%,75%">
    <frame name="left" src="left.html">
    <frame name="right" src="right.html">
</frameset>
</html>

<!--left.html-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>frameset-left</title>
</head>
<body>
    <p>這是左半部分</p>
    <a target="right" href="right_2.html">切換右半部分</a>
</body>
</html>

<!--right.html-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>frameset-right</title>
</head>
<body>
    <p>這里是右半部分</p>
</body>
</html>

<!--right_2html-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>framset-right_2</title>
</head>
<body>
    <p>這是切換后的右半部分<p>
</body>
</html>

5.Bootstrap布局

bootstrap是一個快速開發(fā)web的應(yīng)用程序和網(wǎng)站的前端框架。其提供了基本結(jié)構(gòu)、CSS特性、組件和插件。在編寫html文件時使用bootstrap庫中的樣式或組件可以降低代碼量提高效率。
可以參考https://v3.bootcss.com/getting-started/#download和https://www.runoob.com/bootstrap/bootstrap-tutorial.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link  rel="stylesheet">
    <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：通過 file:// 協(xié)議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
     <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>        
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#" onclick="ActiveXObject();">SVN</a></li>
        <li><a href="#">iOS</a></li>
        <li><a href="#">VB.Net</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>

6.HTML5新元素布局

標簽 描述
header 定義文檔或節(jié)的頁眉
nav 定義導(dǎo)航鏈接的容器
section 定義文檔中的節(jié)
article 定義獨立的自包含文章
asiide 定義內(nèi)容之外的內(nèi)容(側(cè)欄)
footer 定義文檔或節(jié)的頁腳
details 定義額外細節(jié)
summary 定義detail元素的標題 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        header,footer{
            background-color: black;
            color: white;
            clear:both;
            text-align: center;
            padding:5px;
        }
        nav {
            background-color: #eeeeee;
            height: 300px;
            width: 100px;
            float: left;
            line-height: 30px;
            padding: 5px
        }
        ul{
            padding-left:0px;
            margin-left:6px;
        }
        ul>li{
            list-style-type:none;
        }
    </style>
</head>
<body>
    <header><h1>Hello World！</h1></header>
    <nav>
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </nav>
    <section>
        hhhhhhhh
    </section>
    <footer>copyright</footer>
</body>
</html>

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 聲明：本欄目所使用的素材都是凱哥學(xué)堂VIP學(xué)員所寫，學(xué)員有權(quán)匿名，對文章有最終解釋權(quán)；凱哥學(xué)堂旨在促進VIP學(xué)員互...
    凱哥學(xué)堂閱讀 1,364評論 0贊 1
  • HTML5< !--...--> 標簽 comment 注釋標簽用于在源文檔中插入注釋。注釋內(nèi)容不會被瀏覽器顯示。...
    野小寶閱讀 1,412評論 0贊 10
  • HTML5 標簽comment 注釋標簽用于在源文檔中插入注釋。注釋內(nèi)容不會被瀏覽器顯示。為代碼編寫注釋的好處是...
    才気莮孒閱讀 4,252評論 1贊 25
  • 創(chuàng)作一個網(wǎng)頁，第一步要先設(shè)計好網(wǎng)頁的布局，這樣能夠更好地把控整個頁面。過去比較常用的是div布局，也可以用tabl...
    呆弱雞閱讀 663評論 0贊 0
  • 1、網(wǎng)站布局 大多數(shù)網(wǎng)站會把內(nèi)容安排到多個列中（就像雜志或報紙那樣）。大多數(shù)網(wǎng)站可以使用 或者 元素來創(chuàng)建...
    maskerII閱讀 396評論 0贊 0

友情鏈接更多精彩內(nèi)容