day--16页面布局

后台页面布局

　一、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;
            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>

行为样式结构相分离的页面

js CSS HTML

　行为即让页面动起来，JavaScript来实现的，样式是CSS，结构是HTML代码，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #test {
            background-color: red;
             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>代码。

样式行为结构相分离的鼠标放上去变色情况

<!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来修改样式。