后台页面布局

　一、fixed布局

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--对body标签执行CSS样式操作 -->

    <style>

        body{

            margin:;

        }

        .pg-header{

            height:48px;

            background-color:#2459a2;

            color:white;

        }

        .left{

            float:left;

        }

        .right{

            float:right;

        }

        .pg-content .menu{

            position:fixed;

            top:48px;

            left:;

            bottom:;

            width:200px;

            background-color:#dddddd;

        }

        .pg-content .content{

            position:fixed;

            top:48px;

            right:;

            bottom:;

            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;

            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>代码。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <table border="" width="300px">

        <tr><td></td><td></td><td></td></tr>

        <tr><td></td><td></td><td></td></tr>

        <tr><td></td><td></td><td></td></tr>

    </table>

    <script>

        var myTrs = document.getElementsByTagName('tr');

        var len =  myTrs.length;

        for(var i=;i<len;i++){

            myTrs[i].onmouseover = function(){

                this.style.backgroundColor = 'red';

            }

            myTrs[i].onmouseout = function(){

                this.style.backgroundColor = "";

            }

        }

    </script>

</body>

</html>

　　上面this是当执行那个函数的时候，就生效。通过JS来修改样式。

day--16页面布局的更多相关文章

  1. CSS3与页面布局学习总结（四）——页面布局大全

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  2. 【Android】纯代码创建页面布局（含异步加载图片）

    开发环境:macOS 10.12 + Android Studio 2.2,MinSDK Android 5.1 先看看总体效果 本示例是基于Fragment进行的,直接上代码: [界面结构] 在 F ...

  3. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  4. CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

  5. 无废话ExtJs 入门教程十六[页面布局：Layout]

    无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...

  6. Office 365 - SharePoint 2013 Online 之母版页和页面布局

    1.打开https://login.microsoftonline.com,登陆,点击SharePoint,如下图: 2.打开网站集,可以查看.添加.删除等管理操作: 3.打开一个站点,如下图: 4. ...

  7. APP界面设计之页面布局的22条基本原则

    移动 APP 页面布局(Layout)是我们设计 app 界面的时候,最主要的设计任务.一个 app 的好与不好,很大部分取决于移动 APP 页面布局的合理性. 下图为 APP 最原始的布局模型. 页 ...

  8. Swift - 使用TableView的静态单元格进行页面布局

    通过使用静态单元格的列表,我们可以很方便的进行页面布局.下面通过一个“添加任务页面”来进行演示. 效果图如下: 实现步骤: 1,在storyboard中拖入一个TableViewController, ...

  9. APP界面设计与页面布局的23条基本原则

    一个App的好与不好,很大部分取决于移动App页面布局的合理性,优秀的布局顾名思义就是对页面的文字.图形或表格等进行排版.设计. 优秀的布局,需要对页面信息进行完整的考虑,既要考虑用户需求.用户行为, ...

  10. 深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局

     1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. e ...

随机推荐

  1. 流媒体技术学习笔记之（十七）FFmpeg 3.3《希尔伯特》-新版本的亮点

    FFmpeg 3.3“Hilbert”,一个新的主要版本的一些亮点: 苹果Pixlet解码器 NewTek SpeedHQ解码器 QDMC音频解码器 PSD(Photoshop Document)解码 ...

  2. ThinkPHP 3.2 DEMO案例系列【phpmailer批量发送邮件】

    但是邮件和短信相比在一些场景依然有着重要的意义和优势: 1:零成本:发邮件没有费用: 2:内容丰富且量大:邮件可以长篇大论:图文并茂: 3:增加访问量:用户很容易通过邮件中的链接访问网站: 好了:下面 ...

  3. Debian/Ubuntu 下网易云音乐无法由图标/列表 打开的解决方案

    前言 本文为使用图标或快捷方式直接打开网易云音乐的一个从安装说起的到解决问题的简单教程 环境 debian 9.5 理论上使用apt包管理器的发行版均支持 源使用国内的源即可,无需特殊指定 安装网易云 ...

  4. Idea下安装Lombok插件

    参照:http://www.cnblogs.com/holten/p/5729226.html https://yq.aliyun.com/articles/59972 lombok是一个可以通过简单 ...

  5. LINQ to SQL 实现 CASE WHEN THEN 语句

    Ø  前言 没有什么特别的,只是觉得 LINQ 的功能其实还是蛮强大的,所以简单记录下,算是工作笔记吧,有可能还能帮助到其他同学呢^_^. Ø  下面主要使用了 C# 三元运算符实现实现 SQL 中的 ...

  6. （转）MFC界面风格

    以前在XP写的程序,现在系统换成了WIN7,现在对话框在编辑和预览的时候显示都如图一所示,可实际编译生成之后的显示却如图二所示,是什么问题?如何设置两者的显示风格使其保持一致? ----------- ...

  7. HKE和他的小朋友（矩乘快速幂）

    题面: 题目背景: HKE带着\(n\)个小朋友做游戏 题目描述: 现在有n个座位编号为\(1\)至\(n\),这些小朋友也编号\(1\)至\(n\).一开始所有小朋友都坐在相应的座位上.HKE的游戏 ...

  8. centOS6.4 extundelete工具恢复rm -rf 删除的目录[转]

    原文:http://www.cnblogs.com/patf/p/3368765.html PS:补充下,我在fedora 19上运行的时候遇到的一个问题: 1 [root@localhost ext ...

  9. linux内核中链表代码分析---list.h头文件分析（二）【转】

    转自:http://blog.chinaunix.net/uid-30254565-id-5637598.html linux内核中链表代码分析---list.h头文件分析(二) 16年2月28日16 ...

  10. CentOS如何设置终端显示字符界面区域的大小

    红框内的文字本应该在上一行后方,调了stty也不行, stty size的值变化,但显示还是没变化 后来参考http://www.jb51.net/os/RedHat/522217.html 修改 / ...