day--16頁面佈局

時間 2019-12-09

標籤 day 頁面佈局简体版

原文原文鏈接

後臺頁面佈局html

　1、fixed佈局函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--對body標籤執行CSS樣式操做 -->
    <style>
        body{
            margin:0;
        }
        .pg-header{
            height:48px;
            background-color:#2459a2;
            color:white;
        }
        .left{
            float:left;
        }
        .right{
            float:right;
        }
        .pg-content .menu{
            position:fixed;
            top:48px;
            left:0;
            bottom:0;
            width:200px;
            background-color:#dddddd;
        }
        .pg-content .content{
            position:fixed;
            top:48px;
            right:0;
            bottom:0;
            left:200px;
            background-color:pink;
            overflow:auto;
        }
    </style>
    <!-- 上面overflow是滾動條，當內容超過頁面的高度以後，定義overflow會出現滾動條，讓可以拉動看到下面的內容 -->
    <!-- 最小寬度，當比例小於最小寬度失效，執行最小寬度 -->
    <!-- 另一個移動的邊框會受到影響，會出現什麼狀況 -->
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-content">
        <div class="menu left">a</div>
        <div class="content left">
            <p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p>
            <p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p>
            <p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p>
            <p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p>
            <p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p>
        </div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>

提交表單佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id='f1' action="http://www.oldboyedu.com">
        <input type="text"/>
        <input type="submit" value="提交" />
        <a onclick="submitForm();">提交吧</a>
    </form>
    <script>
        function submitForm(){
            document.getElementById('f1').submit()
        }
    </script>
</body>
</html>

行爲樣式結構相分離的頁面this

js CSS HTMLspa

　行爲即讓頁面動起來，JavaScript來實現的，樣式是CSS，結構是HTML代碼，以下：code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #test {
            background-color: red;
            width: 300px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="test">
        dasdfasdf
    </div>
    <script>
        var mydiv = document.getElementById('test')
        mydiv.onclick = function(){
            console.log("adasfda")
        }
    </script>
</body>
</html>

寫代碼要規範，要把樣式，行爲分開，不能混淆，雖然功能是同樣的，可是看起來很Low,上面代碼實現了行爲結構相分離的原則，行爲在<script>標籤中，樣式在<style>中，結構是單獨的<HTML>代碼。orm

樣式行爲結構相分離的鼠標放上去變色狀況htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1" width="300px">
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>
    <script>
        var myTrs = document.getElementsByTagName('tr');
        var len =  myTrs.length;
        for(var i=0;i<len;i++){
            myTrs[i].onmouseover = function(){
                this.style.backgroundColor = 'red';
            }
            myTrs[i].onmouseout = function(){
                this.style.backgroundColor = "";
            }
        }
    </script>
</body>
</html>

　　上面this是當執行那個函數的時候，就生效。經過JS來修改樣式。blog

相關標籤/搜索

每日一句

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