一、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)主站

查看完整代码

<div class='pg-header'>
<div style='width:980px;margin:0 auto;'>
内容自动居中
</div> </div>
<div class='pg-content'></div>
<div class='pg-footer'></div>

(2)后台管理布局

  position:

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

      relative   --单独无意义

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

  a、左侧菜单跟随滚动条

  b、左侧及以上不动

查看完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
<style>
body{
margin: 0;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-header{
height: 48px;
background-color: #2459a2;
color: white;
line-height: 48px;
}
.pg-header .logo{
width: 200px;
background-color: #204982;
text-align: center;
}
.pg-header .icons{
padding: 0 20px;
}
.pg-header .icons:hover{
background-color: #204982;
}
.pg-header .user{
margin-right: 60px;
padding: 0 20px;
color: white;
height: 48px;
}
.pg-header .user:hover{
background-color: #204982;
}
.pg-header .user .a img{
height: 40px;width: 40px;margin-top: 4px;border-radius: 50%;
}
.pg-header .user .b{
z-index: 20;
position: absolute;
top: 48px;
right: 0;
background-color: white;
color: black;
width: 160px;
display: none;
font-size: 14px;
line-height: 30px; }
.pg-header .user .b a{
padding: 5px;
color: black;
text-decoration: none;
}
.pg-header .user .b a:hover{
background-color: #dddddd;
}
.pg-header .user:hover .b{
display: block;
}
.pg-header .user .b a{
display: block;
}
.pg-content .menu{
position: absolute;
top:48px;
left: 0;
bottom: 0;
width: 200px;
background-color: #dddddd;
} .pg-content .content{
position: absolute;
top: 48px;
right: 0;
bottom: 0;
left: 200px;
overflow: auto;
z-index: 9; }
</style>
</head>
<body> <div class="pg-header">
<div class="logo left">
老男孩
</div> <div class="user right" style="position: relative">
<a class="a" href="#">
<img src="22.jpg">
</a>
<div class="b">
<a href="#">我的资料</a>
<a href="#">注销</a>
</div>
</div> <div class="icons right">
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<span>5 </span>
</div>
<div class="icons right">
<i class="fa fa-bell-o" aria-hidden="true"></i>
</div> </div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">
<!--<div style="position: fixed;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>-->
<!--<div style="position: absolute;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>-->
<div style="background-color: purple">
<p style="margin: 0;">asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</div>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>

二、js回顾及补充

1、for循环的两种写法

查看完整代码

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

for 1

var arra = [11,22,32,3]
for(var i=0;i<arra.lenght;i=i+1){
break;
} while(条件){ } for i

for 2

2、条件语句的写法

查看完整代码

if(){

        }else if(){

        }else{

        }
name='3';

        switch(name){
case '1':
age = 123;
break;
case '2':
age = 456;
break;
default :
age = 777;
}

3、函数

(1)普通函数

查看完整代码

            function func(){

            }
(2)匿名函数

查看完整代码

function func(arg){

                return arg+1
} setInterval("func()", 5000); setInterval(function(){
console.log(123); },5000)
(3)自执行函数(创建函数并且自动执行)

查看完整代码

function func(arg){
console.log(arg);
}
// func(1) (function(arg){
console.log(arg);
})(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)函数的作用域在函数未被调用之前已经创建

查看完整代码

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

示例一:

查看完整代码

xo = "alex";

            function func(){
// var xo = 'eric';
function inner(){
// var xo = 'tony';
console.log(xo);
} inner()
} func()

示例二:

查看完整代码

xo = "alex";

            function func(){
var xo = 'eric';
function inner(){ console.log(xo);
} return inner;
} var ret = func()
ret()

示例三:

查看完整代码

xo = "alex";

            function func(){
var xo = 'eric';
function inner(){ console.log(xo);
}
var xo = 'tony'; return inner;
} var ret = func()
ret()
  (4)函数内局部变量 声明提前

查看完整代码

function func(){
console.log(xxoo);
} func();
// 程序直接报错 function func(){
console.log(xxoo);
var xxoo = 'alex';
}
解释过程中:var xxoo; func();
// undefined

9、JavaScript面向对象

查看完整代码

function foo(){
var xo = 'alex';
} foo() function Foo(n){
this.name = n;
this.sayName = function(){
console.log(this.name);
}
} var obj1 = new Foo('we');
obj1.name
obj1.sayName() var obj2 = new Foo('wee');
obj2.name
obj2.sayName()
==============》
a. this代指对象(python self)
b. 创建对象时, new 函数()

原型:

查看完整代码

function Foo(n){
this.name = n;
}
# Foo的原型
Foo.prototype = {
'sayName': function(){
console.log(this.name)
}
} obj1 = new Foo('we');
obj1.sayName() 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. 配置Office 365单点登录摘要

    O365: 如果O365账号之前做过测试,则停用同步,强制删除已有用户涉及命令:Remove-MsolUser -UserPrincipalName zhang_san@company.cn (-Re ...

  2. 青蛙跳100级台阶算法,完整可运行,php版本

    /* 算法题目 * 2016年4月11日16:11:08 * 一只青蛙,一次可以跳1步,或者2步,或者3步,现在要跳100级台阶,请问青蛙有多少种上100级台阶的跳法 * 1步的有$n 2步的有$m ...

  3. js获取cookie 和 模仿php的&_GET方法

    //获取get参数 function _get(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)( ...

  4. 如何安装并使用hibernate tools

    参考资料:http://radiumwong.iteye.com/blog/358585 http://linjia880714.iteye.com/blog/859334 Hibernate Too ...

  5. Resharper 8.2 注册码

    用户名:ronle注册码:ZoJzmeVBoAv9Sskw76emgksMMFiLn4NM

  6. 本地代码如何通过TortoiserGit提交到GitHub

    昨天博文给大家讲解了一下如何本地安装TortoiseGit http://www.cnblogs.com/xinlj/p/5978730.html,今天为大家讲一下如何通过TortoiseGit将本地 ...

  7. 如何消除MyEclipse导入jQuery库后出现的错误标记

    由于MyEclipse提供比较严谨的js校验功能,因此jQuery等前端框架导入到MyEclipse后均会提示错误,比较难看,如果要将校验去掉可以遵循下面步骤:1.点击菜单“MyEclipse”-&g ...

  8. utils.js

    /** * //2.0检测方式(目测,测量,专用仪器测试等) function GetCheckType() { $.ajax({ url: '@Url.Action("GetCheckTy ...

  9. DataTables样式

    Styling 官方链接 AdminLTE HTML代码 <div class="row"> <div class="col-xs-12"&g ...

  10. goim 及时消息 集成

    https://github.com/roamdy/goim-oc-sdk goim 及时消息 集成