HTML佈局與框架

時間 2019-12-04

標籤 html 佈局框架欄目 HTML 简体版

原文原文鏈接

HTML塊

HTML塊元素css

塊元素在顯示時，一般會以新行開始html

如：<h1>、<p>、<ul>程序員

<!DOCTYPE html>
<html>
    <head>
        <title>塊</title>
        <meta charset = "utf-8">
    </head>
    <body>
        <h1>這裏我演示是塊元素</h1>
        <p>這裏我演示是塊元素</p>
        <ul>這裏我演示是塊元素</ul>
    </body>
</html>

HTML內聯元素瀏覽器

內聯元素一般不會以新行開始，通常都會在一行框架

如：<b>、<a>、<img>佈局

<!DOCTYPE html>
<html>
    <head>
        <title>塊</title>
        <meta charset = "utf-8">
    </head>
    <body>
        <b>這裏我演示是塊元素</b>
        <a>這裏我演示是塊元素</a>
        <img src="pika.png"></img>
    </body>
</html>

HTML <div> 元素spa

<div>元素也被稱爲塊元素，其主要是組合HTML元素的容器，其實<div>這個元素，將一大堆元素框起來，而後用CSS來改變<div>，就能夠將那一大堆的元素一塊兒改變，節省了程序員不少時間。若是沒有<div>標籤的話，就要一個一個的去定義style，很是無聊的工做，並且效率還特別低設計

<!DOCTYPE html>
<html>
    <head>
        <title>div樣式</title>
        <meta charset = "utf-8">
        <!-- 使用CSS樣式來改變div的屬性 -->
        <style type="text/css">
            div#test_div{
                color: red;
            }
        </style>
    </head>
    <body>
        <!-- 只要是在div中的屬性，所有都被改了 -->
        <div id="test_div">
            <p>我是小P</p>
            <ol>
                <li>我是li，我和個人兄弟們表明列表</li>
                <li>我是li，我和個人兄弟們表明列表</li>
                <li>我是li，我和個人兄弟們表明列表</li>
            </ol>
            <h3>我是h3，說h1太大了，讓我來充數</h3>
        </div>
        
    </body>
</html>

HTML <span> 元素code

<span>元素是內聯元素，可做爲文本的容器，只有在<span>標籤中的文字，纔會被修改CSS樣式htm

<!DOCTYPE html>
<html>
    <head>
        <title>div樣式</title>
        <meta charset = "utf-8">
        <!-- 使用CSS樣式來改變span的屬性 -->
        <style type="text/css">
            span{
                color: red;
            }
        </style>
    </head>
    <body>
        <!-- 只有span中文字，纔會被修改屬性 -->
            <p>我是小p，<span>我在span中，只有我這一段被更改了，</span>看到了嘛？</p>
    </body>
</html>

HTML佈局

<div>佈局

知道<div>是定義一個塊的了，那麼就能夠用<div>來頁面佈局了。能夠分別將<div>定義成頭部，左邊菜單，中間正文，底部標籤這幾欄。只有修改這些定義過ID的<div>那一塊的內容就會跟着被修改，是否是很炫酷？

<!DOCTYPE html>
<html>
    <head>
        <title>div樣式</title>
        <meta charset = "utf-8">
        <!-- 使用CSS樣式來控制div佈局 -->
        <style type="text/css">
            /*定義全局的div佈局*/
            div#global{
                /*設置寬度，設置百分比能夠根據瀏覽器自適應寬度*/
                width: 100%;
                /*設置高度，950px是設置是實體高度，不能自適應的*/
                height: 800px;
                /*設置背景顏色，方便區分佈局*/
                background-color: silver; 
            }
            /*定義頭部佈局，前面的div能夠不用寫，#號前面默認有個id，凡事定義了id的標籤，均可以用#號來表示*/
            #heading{
                width: 100%;
                height: 100px;
                background-color: #BB80F7;
            }
            #content_menu{
                width: 20%;
                height: 700px;
                background-color: #C5E9F3;
                /*定義浮動，不定義的話，界面會亂*/
                float: left;
            }
            #content_body{
                width: 80%;
                height: 700px;
                background-color: #F7575d;
                float: right;
            }
            #floor{
                /*刪除浮動，否則會被其餘的浮動給遮住*/
                clear: both;
                height: 100px;
                background-color: #8080FF
            }
        </style>
    </head>
    <body>
        <!-- 在這裏控制全局的頁面，定義div的id是"global" -->
        <div id="global">
            <div id="heading">我是頭部的佈局</div>
            <div id="content_menu">我是正文部分，我想去左邊的菜單呆着</div>
            <div id="content_body">我是正文部分</div>
            <div id="floor">我在最下面，搶不到沙發，坐個地板能夠吧</div>
        </div>
    </body>
</html>

HTML框架

框架就是在主頁上，調用其餘的html來定義它的位置，使它能夠重複使用，就像Java裏面的class同樣。能夠互相調用。能夠先建3個不顏色的html

<!-- frame1.html -->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body bgcolor="#FF7373">
        
    </body>
</html>

<!-- frame2.html -->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body bgcolor="#7171FF">
        
    </body>
</html>

<!-- frame3.html -->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body bgcolor="#376084">
        
    </body>
</html>

框架 frame：

框架對於頁面的設計有着很大的做用

框架集標籤 <frameset>：

框架集標籤訂義如何將窗口分割爲框架

每個frameset定義一些列行或列

rows/cols的值規定了每行或者沒咧佔據屏幕的面積

cols：列

rows：行

（注：frameset要寫在head中）

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <frameset cols="20%, 30%, 50%">
            <frame src="frame1.html"></frame>
            <frame src="frame2.html"></frame>
            <frame src="frame3.html"></frame>
        </frameset>
    </head>
    <body>
    </body>
</html>

內聯框架：

iframe

iframe能夠設置一個框架嵌套一個框架。

<!-- Frame_index.html -->
<!-- 主頁面 -->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <!-- frameborder是框架的邊框 -->
    <iframe src="frame1.html" frameborder="0" width="500" height="500"></iframe>
</html>

<!-- frame1.html -->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body bgcolor="#FF7373">
        <iframe src="frame2.html" frameborder="0" width="400" height="400"></iframe>
    </body>
</html>

<!-- frame2.html -->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body bgcolor="#7171FF">
        <iframe src="frame3.html" frameborder="0" width="300" height="300"></iframe>
    </body>
</html>

<!-- frame3.html -->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <body bgcolor="#376084">
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。