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>
<style type="text/css">
img
{
float:left;
clear:both;
}
</style>
</head>
<body>
<img src="/i/eg_smile.gif" />
<img src="/i/eg_smile.gif" />
</body>
</html>
margin:简写属性在一个声明中设置所有外边距属性。四个值：上、右、下、左，两个值的时候：上下、左右<html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>
<p>这个段落没有指定外边距。</p>
</body>
</html>
padding:简写属性在一个声明中设置所有内边距属性。四个值：上、右、下、左，两个值的时候：上下、左右
<html>
<head>
<style type="text/css">
td.test1 {padding: 1.5cm}
td.test2 {padding: 0.5cm 2.5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test1">
这个表格单元的每个边拥有相等的内边距。
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test2">
这个表格单元的上和下内边距是 0.5cm，左和右内边距是 2.5cm。
</td>
</tr>
</table>
</body>
</html>
一个列子：
<html>
<head>
<style type="text/css">
div
{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
</style>
</head>
<body>
<div>
<img src="/i/eg_cute.gif" /><br />
CSS is fun!
</div>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<p>
在上面的段落中，div 元素的宽度是 120 像素，它其中包含图像。div 元素浮动到右侧。我们向 div 元素添加了外边距，这样就可以把 div 推离文本。同时，我们还向 div 添加了边框和内边距。
</p>
</body>
</html>
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>
<head>
<style type="text/css">
h2.pos_abs
{
/*决定定位，还以为是relative和fixed*/
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>
</html>
3、left: 规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:20%
}
</style>
</head>
<body>
<h1>这是标题</h1>
<img class="normal" src="/i/eg_smile.gif" />
<p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p>
</body>
</html>
4、background:简写属性在一个声明中设置所有的背景属性。
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
<html>
<head>
<style type="text/css">
body
{
/*背景属性*/
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
}
</style>
</head>
<body>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
</body>
</html>
5、text-align:属性规定元素中的文本的水平对齐方式。
<html>
<head>
<style type="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
</body>
</html>
6、font-size:属性可设置字体的尺寸。
<html>
<head>
<style type="text/css">
h1 {font-size: 300%}
h2 {font-size: 200%}
p {font-size: 100%}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
7、z-index:设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<img class="x" src="/i/eg_mouse.jpg" />
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body>
</html>
8、over-flow:(略）
9、:hover:选择器用于选择鼠标指针浮动在上面的元素。
<!DOCTYPE html>
<html>
<head>
<style>
/*悬浮hover和活动链接active的结合*/
a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-size:150%;}
a.ex3:hover,a.ex3:active {background:red;}
a.ex4:hover,a.ex4:active {font-family:'微软雅黑';}
a.ex5:visited,a.ex5:link {text-decoration:none;}
a.ex5:hover,a.ex5:active {text-decoration:underline;}
</style>
</head>
<body>
<p>请把鼠标指针移动到这些链接上。</p>
<p><a class="ex1" href="/index.html">这个链接改变颜色。</a></p>
<p><a class="ex2" href="/index.html">这个链接改变字体大小。</a></p>
<p><a class="ex3" href="/index.html">这个链接改变背景色。</a></p>
<p><a class="ex4" href="/index.html">这个链接改变字体。</a></p>
<p><a class="ex5" href="/index.html">这个链接会出现下划线。</a></p>
</body>
</html>
10、opacity:设置元素的不透明级别。
div
{
opacity:0.5;
}
<!DOCTYPE html>
<html>
<head>
<script>
function ChangeOpacity(x)
{
// 返回被选选项的文本
var opacity=x.options[x.selectedIndex].text;
var el=document.getElementById("p1");
if (el.style.opacity!==undefined)
{el.style.opacity=opacity;}
else
{alert("Your browser doesn't support this example!");}
}
</script>
</head>
<body>
<p id="p1">请从下面的例子中选择一个值，以改变此元素的不透明度。</p>
<select onchange="ChangeOpacity(this);" size="5">
<option />0
<option />0.2
<option />0.5
<option />0.8
<option selected="selected" />1
</select>
</body>
</html>
11、line-height:设置行间的距离（行高）。
12、border:简写属性在一个声明设置所有的边框属性。
<html>
<head>
<style type="text/css">
p
{
/*border属性*/
border: medium double rgb(250,0,255)
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
13、color:规定文本的颜色。
<html>
<head>
<style type="text/css">
body {color:red}
h1 {color:#00ff00}
p.ex {color:rgb(0,0,255)}
</style>
</head>
<body>
<h1>这是 heading 1</h1>
<p>这是一段普通的段落。请注意，该段落的文本是红色的。在 body 选择器中定义了本页面中的默认文本颜色。</p>
<p class="ex">该段落定义了 class="ex"。该段落中的文本是蓝色的。</p>
</body>
</html>
14、display:规定元素应该生成的框的类型
<html>
<head>
<style type="text/css">
span
{
display: block
}
</style>
</head>
<body>
<span>本例中的样式表把 span 元素设置为块级元素。</span>
<span>两个 span 元素之间产生了一个换行行为。</span>
</body>
</html>
<html>
<head>
<style type="text/css">
p {display: inline}
div {display: none}
</style>
</head>
<body>
<p>本例中的样式表把段落元素设置为内联元素。</p>
<p>而 div 元素不会显示出来！</p>
<div>div 元素的内容不会显示出来！</div>
</body>
</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请求的生命周期 武彦涛: 路由系统 -> 视图函数(获取模板+数据=>渲染) -> 字符串返回给用户 二.路由 ...
随机推荐
- Deep Learning 25：读论文“Network in Network”——ICLR 2014
论文Network in network (ICLR 2014)是对传统CNN的改进,传统的CNN就交替的卷积层和池化层的叠加,其中卷积层就是把上一层的输出与卷积核(即滤波器)卷积,是线性变换,然后再 ...
- 【java基础】面向对象的三大基本特征之-------继承
面向对象的三大特征:封装,继承,多态 java通过extends关键字来实现继承,而且是单继承,一个子类只可以有一个直接父类,但是父类还可以有父类... java.long.Object是所有类的父类 ...
- js组合继承和寄生组合式继承比较
本文是原创文章,如需转载,请注明文章出处 1.js中实现组合继承(B继承A): function A(name){ this.name = name; this.ary = ["AA&quo ...
- java selenium针对多种情况的多窗口切换
一.通过按钮点击打开的新页面,不涉及到打开多窗口,只要在已有打开的窗口实现切换操作即可 Set<String> winHandels = driver.getWindowHandles() ...
- JAV07接口与继承之动手动脑问题解决
动手动脑:请自行编写代码测试以下特性:在子类中,若要调用父类中被覆盖的方法,可以使用super关键字. 1.源代码: package Work; class A{ public A(){ System ...
- SQL Server中Text和varchar(max)数据类型区别
SQL Server中Text和varchar(max)数据类型区别 以前只知道text和image是可能被SQL Server淘汰的数据类型,但具体原因不太清楚,今天读书的时候发现了text与v ...
- std::map用法
STL是标准C++系统的一组模板类,使用STL模板类最大的好处就是在各种C++编译器上都通用. 在STL模板类中,用于线性数据存储管理的类主要有vector, list, map 等等.本文主要 ...
- Windows Store App JavaScript 开发：获取文件和文件夹列表
在应用程序中有时可能需要获取用户库中的内容,以便执行相关的操作.如果要获取某个用户库中的内容,需要先获取到这个用户库,获得用户库可以通过Windows.Storage命名空间中的KnownFolder ...
- ubuntu下部署SVN
sudo apt-get install subversion 创建库文件夹 sudo mkdir svn sudo chown -R 777 svn 设置为所有用户配置777权限 sudo chmo ...
- PHP制作验证码
session_start();$a = array('a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r',' ...