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请求的生命周期 武彦涛: 路由系统 -> 视图函数(获取模板+数据=>渲染) -> 字符串返回给用户 二.路由 ...
随机推荐
- 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方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...