HTML+CSS

時間  2019-11-29
標籤 html+css html css 欄目 CSS 简体版
原文   原文鏈接

目錄

HTML

CSS

HTML

一、標籤分類css

  • link：設置網頁標題圖標html

  • div：塊級標籤，自佔一行；前端

  • span：內聯標籤，有多少內容佔多少地方python

  • <小於，>大於， 空格；注意分號不要少；web

  • p表示段落，<br/>換行瀏覽器

  • H1-H5標題大小默認遞減，也能夠自定製app

  • a標籤表示跳轉，target='_blank'：表示在新的頁面打開跳轉；a標籤內部若是有img標籤，記得去掉邊框（邊框只在IE瀏覽器中顯示），border:0;框架

  • 錨點：href="#1"，連接到ID等於1的標題；ssh

  • 常見的塊級元素有 div、form、table、p、pre、h1～h五、dl、ol、ul 等。ide

  • 常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等

<!DOCTYPE html>
<html lang="en">
    <head>
        <!--自閉和標籤-->
        <meta charset="UTF-8">
        <!--2秒後刷新，並跳轉-->
        <!--<meta http-equiv="Refresh" Content="2;Url=http://weibo.com"/>-->
        <title>Charlie語錄</title>
        <!--設置網頁標題圖標-->
        <link rel="shortcut icon" href="images/02.jpg">
    </head>
    <body>
        <!--div：塊級標籤，自佔一行；span：行內標籤，有多少內容佔多少地方-->
        <div style="background-color: chocolate">123</div>
        <span style="background-color: aqua">123</span>
        <!--<小於，>大於， 空格-->
        <a b>
        <!--p表示段落，<br/>換行-->
        <p>charlie,<br/>have a nice day!</p>
        <!--H1-H5標題大小默認遞減，也能夠自定製-->
        <H1>H1</H1>
        <H2>H2</H2>
        <H3 style="font-size: 40px;">H3</H3>
        <!--a標籤表示跳轉，_blank表示在新的頁面打開跳轉-->
        <a href="http://www.baidu.com">百度1</a>
        <a href="http://www.baidu.com" target="_blank">百度2</a>
        <!--錨點-->
        <a href="#1">第一章</a>
        <a href="#2">第二章</a>
        <div id="1" style="height: 300px">第一章內容</div>
        <div id="2" style="height: 300px">第二章內容</div>
    </body>
</html>

二、菜單樣式

  • border：添加邊框，如下全部內容都在框內

  • input：輸入標籤，type類型：

    • text：輸入文本，

    • password：輸入密文,

    • email：輸入郵箱，瀏覽器會自動檢測輸入是否正確；

    • radio：圓形框，默承認以多選，name屬性相同表示不能同時選擇；加上checked='checked'，表示默認被選中；

    • checkbox複選框，方形框，name相同，value不一樣；加上checked='checked'，表示默認被選中；

    • file：選擇文件

    • button：普通按鈕

    • submit：提交當前表單

    • reset：重置當前表單；

    • <input value='123'/>：文本框內默認就有一個123

  • select：下拉菜單；

    • 基本使用：<option>中國</option>

    • <option selected='selected'>廣州</option>：表示默認顯示；

    • 屬性multiple：顯示下拉菜單的內容，size指定顯示個數，這裏能夠按住Ctrl多選；

    • 下拉菜單指定分組：<optgroup label="河北省"></optgroup>

  • textarea：多行文本輸入，<textarea>123</textarea>，默認值123；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>選擇菜單</title>
    <link rel="shortcut icon" href="images/02.jpg">
</head>
<body>
    <form><!--form表單，只提交表單內部的內容-->
        <!--border添加綠色框，如下全部內容都在框內-->
        <div style="border: 1px solid green">
            <!--text輸入文本，password輸入密文,email輸入郵箱-->
            <p> 用戶名：<input type="text" /> </p>
            <p> 密碼：<input type="password" /> </p>
            <p> 郵箱：<input type="email" /> </p>
            <!--radio添加選項,默承認以多選，name屬性相同表示不能同時選擇-->
            <p> 性別（單選框）：
                <br/>男<input type="radio" name="aa"/>
                <br/>女<input type="radio" name="aa"/>
            </p>
            <p>愛好（複選框）：<!--checkbox複選框，方形框-->
                <br/>籃球<input type="checkbox" />
                <br/>足球<input type="checkbox" />
                <br/>網球<input type="checkbox" />
            </p>
            <!--選擇文件標籤-->
            <p>選擇文件：<input type="file"/></p>
            <p>城市（下拉菜單）：
                <select>
                    <option>中國</option>
                    <option>美國</option>
                </select>
                <select>
                    <option>北京</option>
                    <option>上海</option>
                </select>
                <!--multiple,顯示下拉菜單，size指定個數，能夠多選-->
                <select multiple size="2">
                    <option>北京</option>
                    <option>上海</option>
                    <option>杭州</option>
                    <option>寧波</option>
                </select>
                <!--下拉菜單指定分組-->
                <select>
                    <optgroup label="河北省"></optgroup>
                    <option>石家莊</option>
                    <option>滄州</option>
                    <optgroup label="河南省"></optgroup>
                    <option>鄭州</option>
                    <option>洛陽</option>
                </select>
            </p>
            <!--多行文本輸入-->
            <p>備註：<textarea></textarea></p>
            <p><!--提交-->
                <input type="submit" value="提交"/>
                <!--普通按鈕，默認沒有任何功能-->
                <input type="button" value="按鈕"/>
                <!--重置當前表單內的內容-->
                <input type="reset" value="重置"/>
            </p>
        </div>
    </form>
</body>
</html>

三、表單form

  • action：設置提交URL

  • method：提交方式，post--發送，get--獲取；

  • enctype：發送文件方式，例如：enctype="multipart/form-data"

  • <hr style="background-color: green" size="20px"/>--生成一條橫線

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表單</title>
        <link rel="shortcut icon" href="images/02.jpg">
    </head>
    <body><!--form action設置提交網址-->
        <form action="http://www.baidu.com/s"><!--百度-->
            <!--name=wd設置提交內容-->
            <input type="text" name="wd"/>
            <!--value設置單選框提交內容-->
            男<input type="radio" name="gender" value="1"/>
            女<input type="radio" name="gender" value="0"/>
            <br /><input type="submit" value="提交"/>
        </form>
        <form action="http://www.sogou.com/web"><!--搜狗-->
            <input type="text" name="query"/>
            <br /><input type="submit" value="提交"/>
        </form>
        <hr style="background-color: green" size="20px"/><!--生成一條橫線-->
        <!--Django自定製，method指定發送方式，enctype發送文件方式-->
        <form action="http://127.0.0.1:8000/" method="post" enctype="multipart/form-data">
            <!--name=wd設置提交內容-->
            用戶名：<input type="text" name="user"/>
            <br/>密 碼：<input type="password" name="pwd"/>
            <p>
                <!--value設置提交內容-->
                男<input type="radio" name="gender" value="1"/>
                女<input type="radio" name="gender" value="0"/>
            </p>
            <p>愛好：
                籃球<input type="checkbox" name="favor" value="1"/>
                足球<input type="checkbox" name="favor" value="0"/>
            </p>
            <p>上傳文件：<input type="file" name="fff"/></p>
            <p>下拉菜單：
                <select name="city"><!--指定一個數字value，節省流量-->
                    <option value="1">北京</option>
                    <option value="2">上海</option>
                </select>
            </p>
            <p>備註：<textarea name="extra"></textarea></p>
            <br /><input type="submit" value="提交"/>
        </form>
    </body>
</html>

四、表格table

  • <table border="2">--建立表格，邊框寬度2；
  • colspan：左右合併單元格；
  • rowspan：上下合併單元格；
<body>
    <table border="2"><!--建立表格，完整的寫法-->
        <thead><!--標題-->
            <tr><!--行-->
                <th>標題一</th><!--th標題列，字體加粗-->
                <th>標題二</th>
                <th>標題三</th>
            </tr>
        </thead>
        <tbody><!--內容-->
            <tr>
                <td>第一列</td><!--td內容列-->
                <td>第二列</td>
                <td>第三列</td>
            </tr>
            <tr>
                <td>第一列</td><!--td內容列-->
                <td>第二列</td>
                <td>第三列</td>
            </tr>
        </tbody>
    </table>
    <table border="2"><!--建立表格，簡單的寫法-->
        <tr><!--colspan左右合併單元格-->
            <th colspan="2">標題一</th>
            <th colspan="2">標題二</th>
        </tr>
        <tr><!--rowspan上下合併單元格-->
            <td rowspan="2">內容一</td>
            <td>內容二</td>
            <td>內容三</td>
            <td>內容四</td>
        </tr>
        <tr>
            <td>內容二</td>
            <td>內容三</td>
            <td>內容四</td>
        </tr>
    </table>
</body>

五、其餘標籤

  • label：點擊文本，自動觸發input框，<label for="name">指定觸發的框；

  • ul標籤：自動在文本前添加點；子標籤爲：li

  • ol標籤：自動在文本前添加數字；子標籤：li

  • dl標籤：在文本前添加標題；子標籤：dt大標題，dd小標題；

  • fieldset：自定義字段集，全部內容都在一個框內

  • iframe：設置一個框架，裏面顯示鏈接的網站內容；

<body><!--label點擊文本，自動觸發input框-->
    <label for="name">
        姓名：
    <input id="name" type="text"/>
    </label>
    <label for="marry">
        婚否：
    <input id="marry" type="checkbox"/>
    </label>
    <ul><!--在文本前加上點-->
        <li>Charlie</li>
        <li>james</li>
        <li>paul</li>
    </ul>
    <ol><!--在文本前加上數字-->
        <li>Charlie</li>
        <li>james</li>
        <li>paul</li>
    </ol>
    <dl><!--在文本前加上標題-->
        <dt>第一章</dt>
        <dd>James</dd>
        <dt>第二章</dt>
        <dd>科比</dd>
    </dl>
    <fieldset><!--自定義字段集，全部內容都在一個框內-->
        <legend>登錄</legend>
        <p>用戶名：<input type="text"/></p>
        <p>密碼：<input type="password"/></p>
    </fieldset>
    <h1>微博</h1><!--設置一個框架，裏面顯示鏈接的網站內容-->
    <iframe style="width: 100%;height: 2000px" src="http://weibo.com"></iframe>
</body>

CSS

一、基本樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .c1{
            color: blueviolet;
            /*background-color: chartreuse;*/
            /*background-color: #00EE00;!*十六進制RGB顏色碼*!*/
            background-color: rgb(20,250,150);/*RGB方式*/
            font-size: 50px;
            height: 100px;/*沒有100%高度*/
            width: 100%;/*有100%寬度，不一樣瀏覽器寬度不一樣*/
        }
    </style>
</head>
<body>
    <div class="c1">基本樣式</div>
</body>
</html>

二、選擇器

  • css存放位置：單獨的css文件，html頭部，標籤屬性；

  • 三個位置優先級：沒有重複，就繼承；重複的優先級由高到低順序爲：標籤屬性、頭部、文件；頭部的優先級又分爲：#id>.class>div

# 樣式表中的特殊性描述了不一樣規則的相對權重，它的基本規則是：
      1 內聯樣式表的權值最高       style=""-------------------1000；
　　 2 統計選擇符中的ID屬性個數。    #id    －－－－－－－－－－－－－100
　　3 統計選擇符中的CLASS屬性個數。 .class  －－－－－－－－－－－－－10
     4 統計選擇符中的HTML標籤名個數。     p     －－－－－－－－－－－－－-1

  • 若是樣式中加上!important，這個樣式就沒法被覆蓋，例如：color=‘red’ !important；前提是這個樣式沒有優先級之分，必須是同級的，例如：display就不適用；

選擇器分類：

  • div：標籤選擇器

  • i1：id選擇器，不能是純數字，ID不能重複

  • .c2：class選擇器，class能夠重複

  • .c1 p .c2：層級選擇器，c2也能夠用標籤代替，背景色重疊，c1,c2的背景色都有；

  • .c3,.c4,.c5：組合選擇器，逗號隔開；

  • .div[charlie="a"]：屬性選擇器；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--css文件：優先級最低-->
    <link rel="stylesheet" href="style.css"/>
    <!--頭部：優先級中間-->
    <style>
        /*標籤選擇器*/
        div{
            color: blue;
        }
        /*id選擇器：不能是純數字，ID不能重複*/
        #i1{
            font-size: 50px;
            background-color: purple;
        }
        /*class選擇器，class能夠重複*/
        .c1{
            font-size: 30px;
            background-color: aqua;
        }
        /*層級選擇器，c2也能夠用標籤代替，背景色重疊，c1,c2的背景色都有*/
        .c1 p .c2{
            font-size: 50px;
            background-color: deeppink;
        }
        /*組合選擇器，逗號隔開*/
        .c3,.c4,.c5{
            font-size: 30px;
            background-color: chartreuse;
        }
        /*屬性選擇器*/
        .c1[charlie='a']{
            color: orangered;
        }
    </style>
</head>
<body><!--標籤屬性：優先級最高-->
    <div style="background-color: palegreen;color: orangered">01</div>
    <div >02</div>
    <p id="i1">charlie</p>
    <a class="c1">a標籤</a>
    <p class="c1" charlie="a">p標籤</p>
    <span class="c1">span標籤</span>
    <div class="c1">
        <p>
            <a class="c2">層級選擇器</a>
        </p>
    </div>
    <div class="c3">c3組合</div>
    <div class="c4">c4組合</div>
    <div class="c5">c5組合</div>
</body>
</html>

三、圖片樣式

  • img標籤：頁面中直接顯示圖片，能夠拉伸顯示，例如：<img src="01.gif" style="height: 500px;width: 500px;">

  • alt屬性：若是圖片不存在就顯示alt的值；例如：alt="圖片"，若是圖片不存在就顯示「圖片」兩個字；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .img{  /*只有圖片沒有寬度和高度，是沒法顯示的*/
            background-image: url("02.gif");
            height: 400px;
            width: 100%;
            background-repeat: no-repeat;/*不重複顯示同一張圖*/
        }
        .jpg{
            background-image: url("01.jpg");
            height: 100px;
            width: 100px;
            background-repeat: no-repeat;
            /*調整顯示位置,注意jpg格式顯示窗口會固定大小的移動位置，GIF大小會變化*/
            background-position: -1134px -316px;
        }
    </style>
</head>
<body>
    <div class="img"></div>
    <div class="jpg"></div>
    <!--頁面中顯示圖片，能夠拉伸顯示-->
    <img src="01.gif" style="height: 500px;width: 500px;">
</body>
</html>

四、位置position

  • fixed:固定在窗口某一位置；

  • absolute:位置固定,隨着屏幕滾動；絕對定位，相對於relative的位置；

  • absolute會到父級中尋找relative，固定在relative所在父級的邊框中；

<body>
    <div style="height: 1000px;background-color: #dddddd;"></div>
    <!--fixed:固定在窗口某一位置-->
    <div style="position: fixed;right: 10px;bottom: 0;font-size: 20px;">返回頂部</div>
    <!--absolute:位置固定,隨着屏幕滾動-->
    <div style="position: absolute;left: 10px;bottom: 0;font-size: 20px;">屏幕滾動</div>
    <!--absolute會到父級中尋找relative，固定在relative所在父級的邊框中-->
    <div style="border: 2px solid orangered;height: 200px;width: 200px;position: relative;">
        <div style="position: absolute;right: 10px;bottom: 0;font-size: 20px;">固定窗口</div>
    </div>
</body>

五、邊框border

  • border-top上、right右、bottom下、left左，可設置只有一邊有邊框；若是兩個都有，就會重疊顯示，能夠建立一個四邊顏色都不同的邊框；

  • solid-實線

  • dotted-點狀虛線

  • dashed-線狀虛線

<style>
        .c1{
            /*border邊框：solid-實線*/
            border: 10px solid lightgreen;
            /*border-top上、right右、bottom下、left左，可設置只有一邊有邊框*/
            /*若是兩個都有，就會重疊顯示，能夠建立一個四邊顏色都不同的邊框*/
            border-bottom: 10px solid deeppink;
            height: 100px;
        }
        .c2{
            /*dotted-點狀虛線，*/
            border: 10px dotted blueviolet;
            height: 100px;
        }
        .c3{
            /*dashed-線狀虛線，*/
            border: 10px dashed orangered;
            height: 100px;
        }
 </style>

六、display

  • none：隱藏內容和位置

  • visibility:hidden：隱藏內容，位置還在

  • inline：塊級標籤變爲行內標籤

  • block：行內標籤變爲塊級標籤

  • inline-block同時具備有行內和塊級標籤的屬性，默認只佔用自身大小，也能夠設置寬度，高度；

  • display:inline-block的時候都會有額外的三像素，因此要加上:float：left
<body>
     <!--display: none;隱藏內容和位置-->
    <div style="background-color: blue;height: 30px;display: none;">charlie</div>
    <!--visibility: hidden隱藏內容，位置還在-->
    <div style="background-color: blue;height: 30px;visibility: hidden;">charlie</div>
    <!--display: inline塊級標籤變爲行內標籤-->
    <div style="display: inline;background-color: deepskyblue">好好學習</div>
    <!--display: block行內標籤變爲塊級標籤-->
    <span style="display: block;background-color: gold">好好學習</span>
    <!--純正的行內標籤沒法設置寬度高度，自身多大就佔多大-->
    <!--display: inline-block同時具備有行內和塊級標籤的屬性，默認只佔用自身大小，也能夠設置寬度，高度-->
    <span style="display: inline-block;background-color: aqua;width: 400px">好好學習</span>
</body>

七、外邊距和內邊距

  • margin:外邊距，-left左邊距，-right右邊距，-top上邊距，-bottom下邊距；

  • padding:內邊距，本身會變大，-left左邊距，-right右邊距，-top上邊距，-bottom下邊距；

  • 塊級標籤按百分比顯示width，float表示靠左或靠右；

  • width使用百分比顯示時，要在外部定義一個寬度框架，這樣縮放頁面時就不會亂；
<body>
    <!--margin:外邊距，-left左邊距，-right右邊距，-top上邊距，-bottom下邊距-->
    <!--默認上下左右各加10px-->
    <div style="border: 3px solid lawngreen;height: 70px;">
        <div style="background-color: deepskyblue;height:30px;margin: 10px;"></div>
    </div>
    <!--padding:內邊距，本身會變大，-left左邊距，-right右邊距，-top上邊距，-bottom下邊距-->
    <!--默認上下左右各加10px-->
    <div style="border: 3px solid orangered;height: 70px;">
        <div style="background-color: deepskyblue;height:30px;padding: 10px;"></div>
    </div>
    <div style="border: 2px solid orangered;width: 500px;"> <!--塊級標籤按百分比顯示，float表示靠左或靠右-->
        <div style="width:20%;background-color: chocolate;float: left">大兒子</div>
        <div style="width:80%;background-color: aqua;float: left">小兒子</div>
        <!--加上這句表示子標籤在飄起來以後仍然在父標籤內,這裏只適用於沒有高度的邊框-->
        <div style="clear: both;"></div>
    </div>
</body>

八、cursor鼠標樣式

<!--cursor給不一樣的標籤設置鼠標接觸時的樣式-->
    <a style="cursor: pointer" href="http://www.baidu.com">連接</a>
    <span style="cursor: help">幫助</span>
    <span style="cursor: wait">等待</span>
    <span style="cursor: move">移動</span>
    <span style="cursor: crosshair">座標</span>

九、CSS補充

  • 十六進制RGB顏色對照表：https://www.114la.com/other/rgb.htm

  • 圖標字體庫和CSS網站：http://www.fontawesome.com.cn/faicons/

  • opacity：透明度0-1，要和background-color結合使用；

  • background-color:rgba(0,0,0,0.6)同時設置顏色和透明度，單獨使用；

  • z-index：優先級，數值越大越靠上；

  • 去除a標籤下面的下劃線：a{text-decoration:none}

  • text-align:center：標籤內部文本水平居中；

  • line-height：30px;表示按30px高度的中心線上下居中；
<div style="text-align: center;height: 100px;width: 100px;border: 1px solid red;line-height: 100px;">ndddd</div>

十、前端文件夾模板Program

  • app：HTML文件，若是少的話，能夠放在最外邊；

  • images：圖片

  • css：css文件

  • js：js文件

  • plugins：插件

十一、鼠標觸碰時的樣式

  • .c1:hovor{backgound-color:背景色；color：字體顏色；}

  • .c1:before{content: '999';}:在塊內容前面加上一些內容；

  • .c1:after{content: '999';}:在塊內容後面加上一些內容；

十二、HTML中快速寫想同類型標籤的方法（代碼寫標籤）

# div   tab
<div></div>

# div.main>ul>li.c*4    tab
<div class="main">
    <ul>
        <li class="c"></li>
        <li class="c"></li>
        <li class="c"></li>
        <li class="c"></li>
    </ul>
</div>

1三、清除浮動

  • 在非IE瀏覽器（如Firefox）下，當容器的高度爲auto，且容器的內容中有浮動（float爲left或right）的元素，在這種狀況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）佈局的現象。這個現象叫浮動溢出，爲了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。

#clear語法：
clear : none | left | right | both

#取值：
none : 默認值。容許兩邊均可以有浮動對象
left : 不容許左邊有浮動對象
right : 不容許右邊有浮動對象
both : 不容許有浮動對象

#可是須要注意的是：clear屬性只會對自身起做用，而不會影響其餘元素。
若是一個元素的右側有一浮動對象，而這個元素設置了不容許右邊有浮動對象，
即clear：right，則這個元素會自動下移一格，達到本元素右邊沒有浮動對象的目的。

方式1(推薦):clearfix

  • 若是網頁有背景色，裏面的每個塊基本都有float，因爲頁面沒有絕對高度，因此就須要一個clearfix樣式，可以讓背景色一直顯示出來；整段代碼就至關於在浮動元素後面跟了個寬高爲0的空div，而後設定它clear:both來達到清除浮動的效果。之因此用它，是由於，你沒必要在html文件中寫入大量無心義的空標籤，又能清除浮動。只要寫一個.clearfix就好了，而後在須要清浮動的元素中 添加clearfix類名就行了。 　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .left{
            float: left;
        }
        .clearfix{
            background-color: #0a9a13;
        }
        .clearfix:after{
            /*默認after添加的內容是一個span標籤*/
            content: '.';
            /*因此須要改爲塊級標籤*/
            display: block;
            clear: both;
            /*!*隱藏後面添加的內容*!*/
            visibility: hidden;
            /*!*去掉多餘的高度*!*/
            height: 0;
        }
    </style>
</head>
<body>
    <!--若是網頁有背景色，裏面的每個塊基本都有float，
    因爲頁面沒有絕對高度，因此就須要一個clearfix樣式，
    可以讓背景色一直顯示出來；-->
    <div class="clearfix">
        <div class="left">大兒子</div>
        <div class="left">小兒子</div>
    </div>
</body>
</html>

方式2：

overflow:hidden;

overflow：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，可是他是浮動在普通流之上的，能夠把普通流元素+浮動元素想象成一個立方體。若是沒有明確設定包含容器高度的狀況下，它要計算內容的所有高度才能肯定在什麼位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。

1三、插件

  • font-awesome.min.css：一行顯示，上傳時使用；寫代碼就用不帶min的格式；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="plugins/font-awesome-4.7.0/css/font-awesome.css"/>
</head>
<body>
    <i class="fa fa-camera" aria-hidden="true"></i>
</body>
</html>

1四、尖角樣式

/*邊框四邊顏色不同，會變成四個三角形*/
/*其餘三邊變爲透明，只顯示一個三角形*/
.c1{
     display: inline-block;
     border-top: 15px solid red;
    /*transparent表示透明*/
     border-bottom: 15px solid transparent;
     border-left: 15px solid transparent;
     border-right: 15px solid transparent;
  }

1五、後臺管理頁面佈局的兩種樣式

  • 第一種後臺佈局，有多少內容就顯示多少高度，頁面內容框架沒有設置bottom=0
<!DOCTYPE html>
<html lang="en">
<head><!--第一種後臺佈局，有多少內容就顯示多少高度，頁面內容框架沒有設置bottom=0-->
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
        }
        .pg-header{
            background-color: green;
            height: 50px;
        }

        .pg-body .pg-menu{
            width: 300px;
            position: absolute;
            top: 60px;
            left: 0;
            bottom: 0;
            background-color: orange;
        }
        .pg-body .pg-content{
            position: absolute;
            left: 310px;
            top: 60px;
            right: 10px;
            background-color: lawngreen;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-body">
        <div class="pg-menu"></div>
        <div class="pg-content">
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
        </div>
    </div>
</body>
</html>
View Code
  • 第二種後臺佈局，頭部和左側菜單固定不動，右側出現滾動條
<!DOCTYPE html>
<html lang="en">
<head><!--第二種後臺佈局，頭部和左側菜單固定不動，右側出現滾動條，-->
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
        }
        .pg-header{
            background-color: green;
            height: 50px;
        }

        .pg-body .pg-menu{
            width: 300px;
            position: absolute;
            top: 60px;
            left: 0;
            bottom: 0;
            background-color: orange;
        }
        .pg-body .pg-content{
            position: absolute;
            left: 310px;
            top: 60px;
            right: 10px;
            bottom: 0;/*頁面內容框架設置bottom=0*/
            background-color: lawngreen;
            /*若是超出了長度，頁面右側出現滾動條*/
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-body">
        <div class="pg-menu"></div>
        <div class="pg-content">
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
            Python從入門到入墳<br/>Python從入門到放棄<br/>
        </div>
    </div>
</body>
</html>
View Code
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程