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

  • 相关阅读:
    9IDEA常见的快捷键
    8Java类与对象
    5Java运算符
    10Java面向对象中级
    3Java基础
    4Java基础变量
    6Java控制结构
    7Java数组
    11Java面向对象高级
    缓存事件过期监听机制
  • 原文地址:https://www.cnblogs.com/gengcx/p/7631304.html
Copyright © 2020-2023  润新知