一、css常用标签及页面布局

1、常用标签

  position(定位) 

  z-index(定位多层顺序) 

  background(背景)  

  margin(外边距)  

  padding(内边距)

  font-size(字体大小)  

  over-flow(修剪hidden,srcoll,auto)  

  :hover(设置对象在鼠标悬停时的样式)  

  opacity(页面透明度)  

  float(让标签浮动起来)  

  clear:both(让浮动标签沉下来) 

  text-align(针对字符自动左右居中) 

  line-height(上下居中)

  border(边框)  

  color(字体颜色)  

  display(设置或检索对象是否及如何显示)

2、两种页面布局

(1)主站

查看完整代码

  1. <div class='pg-header'>
  2. <div style='width:980px;margin:0 auto;'>
  3. 内容自动居中
  4. </div>
  5.  
  6. </div>
  7. <div class='pg-content'></div>
  8. <div class='pg-footer'></div>

(2)后台管理布局

  position:

      fiexd     --永远固定在窗口的某个位置

      relative   --单独无意义

      absolute  --第一次定位,可以在指定的位置;滚轮滚动时,就变了

  a、左侧菜单跟随滚动条

  b、左侧及以上不动

查看完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
  7. <style>
  8. body{
  9. margin: 0;
  10. }
  11. .left{
  12. float: left;
  13. }
  14. .right{
  15. float: right;
  16. }
  17. .pg-header{
  18. height: 48px;
  19. background-color: #2459a2;
  20. color: white;
  21. line-height: 48px;
  22. }
  23. .pg-header .logo{
  24. width: 200px;
  25. background-color: #204982;
  26. text-align: center;
  27. }
  28. .pg-header .icons{
  29. padding: 0 20px;
  30. }
  31. .pg-header .icons:hover{
  32. background-color: #204982;
  33. }
  34. .pg-header .user{
  35. margin-right: 60px;
  36. padding: 0 20px;
  37. color: white;
  38. height: 48px;
  39. }
  40. .pg-header .user:hover{
  41. background-color: #204982;
  42. }
  43. .pg-header .user .a img{
  44. height: 40px;width: 40px;margin-top: 4px;border-radius: 50%;
  45. }
  46. .pg-header .user .b{
  47. z-index: 20;
  48. position: absolute;
  49. top: 48px;
  50. right: 0;
  51. background-color: white;
  52. color: black;
  53. width: 160px;
  54. display: none;
  55. font-size: 14px;
  56. line-height: 30px;
  57.  
  58. }
  59. .pg-header .user .b a{
  60. padding: 5px;
  61. color: black;
  62. text-decoration: none;
  63. }
  64. .pg-header .user .b a:hover{
  65. background-color: #dddddd;
  66. }
  67. .pg-header .user:hover .b{
  68. display: block;
  69. }
  70. .pg-header .user .b a{
  71. display: block;
  72. }
  73. .pg-content .menu{
  74. position: absolute;
  75. top:48px;
  76. left: 0;
  77. bottom: 0;
  78. width: 200px;
  79. background-color: #dddddd;
  80. }
  81.  
  82. .pg-content .content{
  83. position: absolute;
  84. top: 48px;
  85. right: 0;
  86. bottom: 0;
  87. left: 200px;
  88. overflow: auto;
  89. z-index: 9;
  90.  
  91. }
  92. </style>
  93. </head>
  94. <body>
  95.  
  96. <div class="pg-header">
  97. <div class="logo left">
  98. 老男孩
  99. </div>
  100.  
  101. <div class="user right" style="position: relative">
  102. <a class="a" href="#">
  103. <img src="22.jpg">
  104. </a>
  105. <div class="b">
  106. <a href="#">我的资料</a>
  107. <a href="#">注销</a>
  108. </div>
  109. </div>
  110.  
  111. <div class="icons right">
  112. <i class="fa fa-commenting-o" aria-hidden="true"></i>
  113. <span>5 </span>
  114. </div>
  115. <div class="icons right">
  116. <i class="fa fa-bell-o" aria-hidden="true"></i>
  117. </div>
  118.  
  119. </div>
  120. <div class="pg-content">
  121. <div class="menu left">a</div>
  122. <div class="content left">
  123. <!--<div style="position: fixed;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>-->
  124. <!--<div style="position: absolute;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>-->
  125. <div style="background-color: purple">
  126. <p style="margin: 0;">asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
  127. <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
  128. <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
  129. <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
  130. <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
  131. <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
  132. <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
  133. <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
  134. <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
  135. <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
  136. <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
  137. <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
  138. <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
  139. <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
  140. <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
  141. <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
  142. <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
  143. <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
  144. <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
  145. </div>
  146. </div>
  147. </div>
  148. <div class="pg-footer"></div>
  149. </body>
  150. </html>

二、js回顾及补充

1、for循环的两种写法

查看完整代码

  1. for(var item in [11,22,33]){
  2. console.log(item);
  3. continue;
  4. }

for 1

  1. var arra = [11,22,32,3]
  2. for(var i=0;i<arra.lenght;i=i+1){
  3. break;
  4. }
  5.  
  6. while(条件){
  7.  
  8. }
  9.  
  10. for i

for 2

2、条件语句的写法

查看完整代码

  1. if(){
  2.  
  3. }else if(){
  4.  
  5. }else{
  6.  
  7. }
  1. name='3';
  2.  
  3. switch(name){
  4. case '1':
  5. age = 123;
  6. break;
  7. case '2':
  8. age = 456;
  9. break;
  10. default :
  11. age = 777;
  12. }

3、函数

(1)普通函数

查看完整代码

  1. function func(){
  2.  
  3. }
(2)匿名函数

查看完整代码

  1. function func(arg){
  2.  
  3. return arg+1
  4. }
  5.  
  6. setInterval("func()", 5000);
  7.  
  8. setInterval(function(){
  9. console.log(123);
  10.  
  11. },5000)
(3)自执行函数(创建函数并且自动执行)

查看完整代码

  1. function func(arg){
  2. console.log(arg);
  3. }
  4. // func(1)
  5.  
  6. (function(arg){
  7. console.log(arg);
  8. })(1)

4、序列化

  JSON.stringify()  将对象转换为字符串

  JSON.parse()    将字符串转换为对象类型 

5、转义

  客户端(cookie) ---> 服务器

  将数据经过转义后,保存在cookie

代码示例:

URL = "https://www.google.co.jp/search?q=理解"
"https://www.google.co.jp/search?q=理解"
URL
"https://www.google.co.jp/search?q=理解"
encodeURI(URL)
"https://www.google.co.jp/search?q=%E7%90%86%E8%A7%A3"
newurl=encodeURI(URL)
"https://www.google.co.jp/search?q=%E7%90%86%E8%A7%A3"
newurl
"https://www.google.co.jp/search?q=%E7%90%86%E8%A7%A3"
decodeURI(newurl)
"https://www.google.co.jp/search?q=理解"

6、eval

  python的eval:

        val = eval(表达式)

        val = exec(执行代码)

  JavaScript:

        eval包含上面的两种功能

7、时间

  Date类

  var d = new Date()

  d.getXXX  获取时间

  d.setXXX  设置时间

8、作用域

  (1)函数作为作用域
  a、其他语言:以代码块作为作用域        

      public void Func(){
        if(1==1){
          string name = 'Java';
          }
        console.writeline(name);
       }
       Func()
 // 报错 这里以{}为代码块,name在另一个{},里外面的console.writeline(name)调用不了

   b、Python:以函数作为作用域

    情况一:

       def func():
          if 1==1:
            name = 'alex'
          print(name) #这个name是在func函数里的
       func()
        // 成功

    情况二:        

         def func():
          if 1==1:
            name = 'alex'
        func()
        print(name) #这里的name是拿不到函数func里的name的
        // 报错

     c、JavaScript:默认是以函数作为作用域的       

        function func(){
           if(1==1){
              var name = 'alex';
           }
            console.log(name);
        }
        func()

  (2)函数的作用域在函数未被调用之前已经创建

查看完整代码

  1. function func(){
  2. if(1==1){
  3. var name = 'alex';
  4. }
  5. console.log(name);
  6. }
  (3)函数的作用域存在作用域链(函数嵌套关系),并且也是在未被调用前创建

示例一:

查看完整代码

  1. xo = "alex";
  2.  
  3. function func(){
  4. // var xo = 'eric';
  5. function inner(){
  6. // var xo = 'tony';
  7. console.log(xo);
  8. }
  9.  
  10. inner()
  11. }
  12.  
  13. func()

示例二:

查看完整代码

  1. xo = "alex";
  2.  
  3. function func(){
  4. var xo = 'eric';
  5. function inner(){
  6.  
  7. console.log(xo);
  8. }
  9.  
  10. return inner;
  11. }
  12.  
  13. var ret = func()
  14. ret()

示例三:

查看完整代码

  1. xo = "alex";
  2.  
  3. function func(){
  4. var xo = 'eric';
  5. function inner(){
  6.  
  7. console.log(xo);
  8. }
  9. var xo = 'tony';
  10.  
  11. return inner;
  12. }
  13.  
  14. var ret = func()
  15. ret()
  (4)函数内局部变量 声明提前

查看完整代码

  1. function func(){
  2. console.log(xxoo);
  3. }
  4.  
  5. func();
  6. // 程序直接报错
  7.  
  8. function func(){
  9. console.log(xxoo);
  10. var xxoo = 'alex';
  11. }
  12. 解释过程中:var xxoo;
  13.  
  14. func();
  15. // undefined

9、JavaScript面向对象

查看完整代码

  1. function foo(){
  2. var xo = 'alex';
  3. }
  4.  
  5. foo()
  6.  
  7. function Foo(n){
  8. this.name = n;
  9. this.sayName = function(){
  10. console.log(this.name);
  11. }
  12. }
  13.  
  14. var obj1 = new Foo('we');
  15. obj1.name
  16. obj1.sayName()
  17.  
  18. var obj2 = new Foo('wee');
  19. obj2.name
  20. obj2.sayName()
  21. ==============》
  22. a. this代指对象(python self)
  23. b. 创建对象时, new 函数()

原型:

查看完整代码

  1. function Foo(n){
  2. this.name = n;
  3. }
  4. # Foo的原型
  5. Foo.prototype = {
  6. 'sayName': function(){
  7. console.log(this.name)
  8. }
  9. }
  10.  
  11. obj1 = new Foo('we');
  12. obj1.sayName()
  13.  
  14. obj2 = new Foo('wee');

三、DOM

1、查找

  直接查找

    var obj = document.getElementById('i1')

  间接查找

    文件内容操作:

      innerText  仅文本

      innerHTML  全内容

      value

          input  value获取当前标签中的值

          select  获取选中的value值(selectIndex)

          textarea  value获取当前标签中的值

2、操作:

 (1)样式操作:

  className

  classList

       classList.add  classList.remove

  (2)属性操作:

    attributes  getAttibute  removeAttribute

Css、javascript、dom(二)的更多相关文章

  1. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  2. Python 15 html 基础 - CSS &javascript &DOM

    本节内容 CSS基础 javascript基础 DOM 前言,这边这块楼主已经很熟悉了,CSS天天用到,简单的一些javascript也是所以就挑点重点说了.然后就是dom不怎么用,但是其实也用不到, ...

  3. JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  4. 前端~HTML~CSS~JavaScript~JQuery~Vue

    HTML CSS JavaScript DOM文档操作 jQuery实例 Vue

  5. javascript系列之DOM(二)

    原文:javascript系列之DOM(二) 原生DOM扩展 我们接着第一部分来说,上文提到了两种常规的DOM操作:创建文档片段和遍历元素节点.我们知道那些雨后春笋般的库,有很大一部分工作就是提供了一 ...

  6. 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)

    通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...

  7. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  8. html css javascript 加载的顺序

    html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...

  9. 初探JavaScript(二)——JS如何动态操控HTML

    除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次 ...

  10. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

随机推荐

  1. 关于iPhone设备不同显示尺寸适配的一些方法

    关于iPhone设备不同显示尺寸适配的一些方法   ------关于适配的理解------ 1.什么是适配? 适配是对不同硬件和系统软件的适应,硬件包括屏幕显示,处理器,内存等等(目前主要是屏幕适配, ...

  2. .net web 小基累

    获取当前网站的根目录:HttpContext.Current.Request.PhysicalApplicationPath+“Content”

  3. Redis 3.2 Linux 环境集群搭建与java操作

    redis 采用 redis-3.2.4 版本. 安装过程 1. 下载并解压 cd /usr/local wget http://download.redis.io/releases/redis-3. ...

  4. IOS的MVC和MVVM模式简明介绍

    iOS中的MVC(Model-View-Controller)将软件系统分为Model.View.Controller三部分,结构图如下: Model: 你的应用本质上是什么(但不是它的展示方式) C ...

  5. if语句中的判断条件(nginx)

    if语句中的判断条件   正则表达式匹配:     ==:等值比较;     ~:与指定正则表达式模式匹配时返回"真",判断匹配与否时区分字符大小写:     ~*:与指定正则表达 ...

  6. SQL优化----百万数据查询优化

    百万数据查询优化 1.合理使用索引 索引是数据库中重要的数据结构,它的根本目的就是为了提高查询效率.现在大多数的数据库产品都采用IBM最先提出的ISAM索引结构.索引的使用要恰到好处,其使用原则如下: ...

  7. iOS 9后修改状态栏方法

    1.plist文件中添加View controller-based status bar appearance字段 值为NO 2.程序中添加 [UIApplication sharedApplicat ...

  8. python不是内部或外部命令

    原因是环境变量没有添加. 比如python安装再C:\Python27 环境变量path增加C:\Python27即可,不需重启. 但是之前报错的cmd窗口需要重新打开再执行python命令

  9. Leetcode: Encode String with Shortest Length && G面经

    Given a non-empty string, encode the string such that its encoded length is the shortest. The encodi ...

  10. chattr的常用参数详解

    chattr的常用参数详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在实际生产环境中,有的运维工程师不得不和开发和测试打交道,在我们公司最常见的就是部署接口.每天每个人部署的 ...