Python的平凡之路(16)
一、HTML+CSS补充
0、常用页面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*设置body样式*/
body{
margin: 0;
}
/*设置left样式*/
.left{
float: left;
}
/*设置right样式*/
.right{
float: right;
}
/*设置header样式*/
.pg-header{
height: 48px;
background-color: #2459a2;
color: white;
line-height: 48px;
}
.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: 44px;
background-color: white;
color: black;
width: 160px;
display: none;
}
.pg-header .user:hover .b{
display: block;
}
.pg-header .user .b a{
display: block;
}
.pg-header .logo{
width: 200px;
background-color: burlywood;
text-align: center;
}
/*设置内容部分左边菜单样式*/
.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; }
</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="2.jpg">
</a>
<div class="b">
<a>我的资料</a>
<a>注销</a>
</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>-->
<!--设置右边content的背景色-->
<div style="background-color: purple">
<!--p标签有间距,要设置margin:0-->
<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>
1、float,clear:both,margin,padding
float:定义元素在哪个方向上浮动
clear:both定义了元素的哪边上不允许出现浮动元素
<html>
<head>
margin:简写属性在一个声明中设置所有外边距属性。四个值:上、右、下、左,两个值的时候:上下、左右<html>
<head>
padding:简写属性在一个声明中设置所有内边距属性。四个值:上、右、下、左,两个值的时候:上下、左右
<html>
</html>
一个列子:
<html>
<head>
2、position:规定元素的定位类型
h2
{
position:absolute;
left:100px;
top:150px;
}
可能的值
值 | 描述 |
---|---|
absolute |
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed |
生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative |
生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
<html>
</html>
3、left: 规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
<html>
<head>
4、background:简写属性在一个声明中设置所有的背景属性。
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
<html>
5、text-align:属性规定元素中的文本的水平对齐方式。
<html>
<head>
<style type="text/css">
6、font-size:属性可设置字体的尺寸。
<html>
7、z-index:设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
<html>
</html>
8、over-flow:(略)
9、:hover:选择器用于选择鼠标指针浮动在上面的元素。
<!DOCTYPE html>
10、opacity:设置元素的不透明级别。
div
{
opacity:0.5;
}
<!DOCTYPE html>
11、line-height:设置行间的距离(行高)。
12、border:简写属性在一个声明设置所有的边框属性。
<html>
13、color:规定文本的颜色。
<html>
</html>
14、display:规定元素应该生成的框的类型
<html>
</html>
<html>
</html>
15、页面布局
主站—
<div class='pg-header'>
<div style='width:980px;margin:0 auto;'>
内容自动居中
</div> </div>
<div class='pg-content'></div>
<div class='pg-footer'></div>
后台管理布局:
position:
fiexd -- 永远固定在窗口的某个位置
relative -- 单独无意义
absolute -- 第一次定位,可以在指定位置,滚轮滚动时,不在了。。。。 a.
左侧菜单跟随滚动条
b.
左侧以及上不不动 ******
二、JavaScript补充
1、for循环 for(var item in [11,22,33]){
console.log(item);
continue;
} var arra = [11,22,32,3]
for(var i=0;i<arra.lenght;i=i+1){
break;
} while(条件){ }
2、条件语句 if(){ }else if(){ }else{ } ==
=== name='3'; switch(name){
case '1':
age = 123;
break;
case '2':
age = 456;
break;
default :
age = 777;
} 3. 函数
function func(arg){ return arg+1
}
var result = func(1)
console.log(result); 普通函数:
function func(){ }
匿名函数: function func(arg){ return arg+1
} setInterval("func()", 5000); setInterval(function(){
console.log(123); },5000) 自执行函数(创建函数并且自动执行):
function func(arg){
console.log(arg);
}
// func(1) (function(arg){
console.log(arg);
})(1)
4、序列化
JSON.stringify() 将对象转换为字符串
JSON.parse() 将字符串转换为对象类型
5、转义
客户端(cookie) =》 服务器端
将数据经过转义后,保存在cookie
6、eval
python:
val = eval(表达式)
exec(执行代码)
JavaScript:
eval
7、时间
Date类
var d = new Date() d.getXXX 获取
d.setXXX 设置
8、作用域
(1). 以函数作为作用域 (let) 其他语言: 以代码块作为作用域
public void Func(){
if(1==1){
string name = 'Java'; }
console.writeline(name); }
Func()
// 报错 Python: 以函数作为作用域
情况一:
def func():
if 1==1:
name = 'alex'
print(name) func()
// 成功
情况二:
def func():
if 1==1:
name = 'alex'
print(name) func()
print(name)
// 报错 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面向对象 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 函数() Python的面向对象:
class Foo:
def __init__(self,name):
self.name = name def sayName(self):
print(self.name) obj1 = Foo('we') obj2 = Foo('wee') 原型: 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值(selectedIndex)
textarea value获取当前标签中的值
搜索框的示例
2、操作:
样式操作:
className
classList
classList.add
classList.remove
obj.style.fontSize = '16px';
obj.style.backgroundColor = 'red';
obj.style.color = "red"
属性操作:
attributes
getAttribute
removeAttribute 创建标签,并添加到HTML中:
a. 字符串形式
b. 对象的方式
document.createElement('div') 提交表单
任何标签通过DOM都可提交表单
document.geElementById('form').submit()
其他:
console.log()
alert
var v = confirm(信息) v:true false
location.href
location.href = "" # 重定向,跳转
location.reload() # 页面刷新
location.href = location.href < === > location.reload()
var o1 = setInterval(function(){}, 5000)
clearInterval(o1);
var o2 = setTimeout(function(){}, 50000);
clearTimeout(o2);
var obj = setInterval(function(){
}, 5000)
clearInterval(obj);
3、事件:
onclick,onblur,onfocus 行为 样式 结构 相分离的页面?
js css html 绑定事件两种方式:
a. 直接标签绑定 onclick='xxx()' onfocus
b. 先获取Dom对象,然后进行绑定
document.getElementById('xx').onclick
document.getElementById('xx').onfocus this,当前触发事件的标签
a. 第一种绑定方式
<input id='i1' type='button' onclick='ClickOn(this)'> function ClickOn(self){
// self 当前点击的标签 }
b. 第二种绑定方式
<input id='i1' type='button' >
document.getElementById('i1').onclick = function(){ // this 代指当前点击的标签
}
作用域示例:
var myTrs = document.getElementsByTagName("tr");
var len = myTrs.length;
for(var i=0;i<len;i++){
// i=0,i=1,i=2
myTrs[i].onmouseover = function(){
this.style.backgroundColor = "red";
}; }
Python的平凡之路(16)的更多相关文章
- Python的平凡之路(8)
(本文是对平凡之路(7)的补充等) 一.动态导入模块 import importlib __import__('import_lib.metaclass') #这是解释器自己内部用的 #importl ...
- Python的平凡之路(18)
一.JS 正则部分 test - 判断字符串是否符合规定的正则rep = /\d+/;rep.test("asdfoiklfasdf89asdfasdf")# truerep ...
- Python的平凡之路(13)
一.Python的paramiko模块介绍 Python 的paramiko模块,该模块和SSH用于连接远程服务器并执行相关操作 SSH client 用于连接远程服务器并执行基本命令 基于用户名和密 ...
- Python的平凡之路(12)
一.数据库介绍 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据.我们也可以将数据存储在文件中,但 ...
- Python的平凡之路(11)
一. rabbitmq 1 进程Queue: 父进程与子进程进行交互,或者同属于同一父进程下多个子进程进行交互 2 队列通信: send1.py #!/usr/bin/env python#Au ...
- Python的平凡之路(9)
一.Paramiko模块练习 1. Paramiko模块介绍 Paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接 2 .SSHclie ...
- Python的平凡之路(5)
一.模块介绍 定义: 模块--用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能),本质就是.py结尾的python文件(文件名test.py,模块名test) 包—用来从逻辑上组织 ...
- Python的平凡之路(3)
一.函数基本语法及特性 面向对象:(华山派)—类 —class 面向过程:(少林派)—过程 —df 函数式编程:逍遥派 —函数— df 一般的,在一个变化过程中,如果有两个变量x和y,并且对于 ...
- Python的平凡之路(20)
(提问复习为主) 一.Django请求的生命周期 武彦涛: 路由系统 -> 视图函数(获取模板+数据=>渲染) -> 字符串返回给用户 二.路由 ...
随机推荐
- Tomcat7.0安装配置
很久没有通过博客对学习所得进行记录了. 现在将使用Tomcat的一些经验和心得写到这里,作为记录和备忘.如果有朋友看到,也请不吝赐教. 首先,我个人使用的是apache-tomcat-7.0.27你可 ...
- .net 导出Excel功能
将DataSet对象导出成Excel文档 一.不带格式控制 void btnExport_Click(object sender, EventArgs e) { IList<string> ...
- 正则表达式抓取文件内容中的http链接地址
import java.io.BufferedReader; import java.io.FileInputStream; import java.io.FileNotFoundException; ...
- MySQL 警告WARN: Establishing SSL connection without server's identity verification is not recommended.解决办法
Fri Jun 17 13:46:54 CST 2016 WARN: Establishing SSL connection without server's identity verificatio ...
- ES6 标准部分应用
1.多行字符串 字符串换行时,不再使用\n,而是使用倒引号`..`,例如: alert(`这是一个 多行 字符串`); 2.模版字符串 不再使用"+"来拼接字符串与变量,而是使用倒 ...
- 简述linux的发行版,并描述不同发行版之间的联系与区别
bash命令行返回值和展开 标签(空格分隔): bash,命令,状态,展开 1.命令状态结果和执行结果 (1)命令执行的状态返回值,命令执行完成之后,其执行状态结果值保存于bash的特殊状态变量$?中 ...
- Webstorm 下的Angular2.0开发之路
人一旦上了年纪,记忆力就变得越来越不好. 最近写了许多的博文,倒不是为了给谁看,而是方便自己来搜索,不然一下子又忘记了. 如果恰巧帮助到了你,也是我的荣幸~~~~~~~~~~~~ 废话不多说,看正题~ ...
- marquee标签实现页面内容的滚动效果
页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...
- merge,join,concat
merge交集 join并集 concat axis=0 竖着连 axis=1 横着连
- 【转】js插件zClip实现复制到剪贴板功能
相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...