后台页面布局

　一、fixed布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <!--对body标签执行CSS样式操作 -->
  7.     <style>
  8.         body{
  9.             margin:;
  10.         }
  11.         .pg-header{
  12.             height:48px;
  13.             background-color:#2459a2;
  14.             color:white;
  15.         }
  16.         .left{
  17.             float:left;
  18.         }
  19.         .right{
  20.             float:right;
  21.         }
  22.         .pg-content .menu{
  23.             position:fixed;
  24.             top:48px;
  25.             left:;
  26.             bottom:;
  27.             width:200px;
  28.             background-color:#dddddd;
  29.         }
  30.         .pg-content .content{
  31.             position:fixed;
  32.             top:48px;
  33.             right:;
  34.             bottom:;
  35.             left:200px;
  36.             background-color:pink;
  37.             overflow:auto;
  38.         }
  39.     </style>
  40.     <!-- 上面overflow是滚动条，当内容超过页面的高度之后，定义overflow会出现滚动条，让能够拉动看到下面的内容 -->
  41.     <!-- 最小宽度，当比例小于最小宽度失效，执行最小宽度 -->
  42.     <!-- 另外一个移动的边框会受到影响，会出现什么情况 -->
  43. </head>
  44. <body>
  45.     <div class="pg-header"></div>
  46.     <div class="pg-content">
  47.         <div class="menu left">a</div>
  48.         <div class="content left">
  49.             <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>
  50.             <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>
  51.             <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>
  52.             <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>
  53.             <p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p><p>alex</p><p>sb</p>
  54.         </div>
  55.     </div>
  56.     <div class="pg-footer"></div>
  57. </body>
  58. </html>

     提交表单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <form id='f1' action="http://www.oldboyedu.com">
  9.         <input type="text"/>
  10.         <input type="submit" value="提交" />
  11.         <a onclick="submitForm();">提交吧</a>
  12.     </form>
  13.     <script>
  14.         function submitForm(){
  15.             document.getElementById('f1').submit()
  16.         }
  17.     </script>
  18. </body>
  19. </html>

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

js         CSS      HTML

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         #test {
  8.             background-color: red;
  9.             width: 300px;
  10.             height: 400px;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div id="test">
  16.         dasdfasdf
  17.     </div>
  18.     <script>
  19.         var mydiv = document.getElementById('test')
  20.         mydiv.onclick = function(){
  21.             console.log("adasfda")
  22.         }
  23.     </script>
  24. </body>
  25. </html>

写代码要规范，要把样式，行为分开，不能混淆，虽然功能是一样的，但是看起来很Low,上面代码实现了行为结构相分离的原则，行为在<script>标签中，样式在<style>中，结构是单独的<HTML>代码。

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <table border="" width="300px">
  9.         <tr><td></td><td></td><td></td></tr>
  10.         <tr><td></td><td></td><td></td></tr>
  11.         <tr><td></td><td></td><td></td></tr>
  12.     </table>
  13.     <script>
  14.         var myTrs = document.getElementsByTagName('tr');
  15.         var len =  myTrs.length;
  16.         for(var i=;i<len;i++){
  17.             myTrs[i].onmouseover = function(){
  18.                 this.style.backgroundColor = 'red';
  19.             }
  20.             myTrs[i].onmouseout = function(){
  21.                 this.style.backgroundColor = "";
  22.             }
  23.         }
  24.     </script>
  25. </body>
  26. </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. Linux命令（十）打包压缩、软件安装

  2. SQL——sql年龄段查询

    select * from 表 p where p.gender <> '男' ) ) select * ) ) 查询出所有年龄在15~49岁的非男性的信息

  3. Git Gui基本使用情况

    本教程将讲述:gitk的Git Gui的部分常用功能和使用方法,包括:建库.克隆(clone).上传(push).下载(pull - fetch).合并(pull - merge). ———————— ...

  4. Java SE之浅谈JDK SDK JRE

    JDK(Java Development Kit):   1.定义:编写Java程序的程序员使用的软件开发工具包,又被称为Java SDK (Java Software Development Kit ...

  5. Django学习手册 - ORM choice字段 如何在页面上显示值

    在module操作过程中使用choice字段: 核心: obj.get_字段名_display 定义module 数据结构: class msg(models.Model): choice = ( ( ...

  6. android greenDao使用

    github:https://github.com/greenrobot/greenDAO 基本使用:https://toutiao.io/posts/yg1kyu/preview https://b ...

  7. 蓝牙HID协议笔记【转】

    蓝牙HID协议笔记 转自:http://blog.sina.com.cn/s/blog_69b5d2a50101emll.html 1.概述     The Human Interface Devic ...

  8. MySQL5.7更改用户名密码

    更改用户名密码,官方推荐使用alter ALTER USER test@'%' IDENTIFIED BY '; 还有一种 update mysql.user set authentication_s ...

  9. ASP.NET Core Identity 实战（4）授权过程

    这篇文章我们将一起来学习 Asp.Net Core 中的(注:这样描述不准确,稍后你会明白)授权过程 前情提要 在之前的文章里,我们有提到认证和授权是两个分开的过程,而且认证过程不属于Identity ...

  10. windows环境变量PATH顺序的重要性

    PATH是路径的意思,PATH环境变量中存放的值,就是一连串的路径.不同的路径之间,用英文的分号间隔开.系统在执行用户命令时,若用户未给出绝对路径,则首先在当前目录下寻找相应的可执行文件.批处理文件等 ...