Python的平凡之路（16）
1、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>
一、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>
二、position：规定元素的定位类型
h2
{ left:100px; top:150px; } position:absolute;
可能的值
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位之外的第一个父元素进行定位。css 元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。html |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。python 元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。浏览器 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。服务器 所以，"left:20" 会向元素的 LEFT 位置添加 20 像素。cookie |
| 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>
三、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>
四、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>
五、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>
六、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>
七、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>
八、over-flow:(略）
九、: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>
十、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>
十一、line-height:设置行间的距离（行高）。
十二、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>
1三、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>
1四、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>
1五、页面布局
主站—
<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.
左侧以及上不不动 ******
2、JavaScript补充
一、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(条件){
}
二、条件语句
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)
四、序列化
JSON.stringify() 将对象转换为字符串
JSON.parse() 将字符串转换为对象类型
五、转义
客户端（cookie） =》 服务器端
将数据通过转义后，保存在cookie
六、eval
python:
val = eval(表达式)
exec(执行代码)
JavaScript:
eval
七、时间
Date类
var d = new Date()
d.getXXX 获取
d.setXXX 设置
八、做用域
(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
九、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');
3、DOM补充
一、查找
直接查找
var obj = document.getElementById('i1')
间接查找
文件内容操做：
innerText 仅文本
innerHTML 全内容
value
input value获取当前标签中的值
select 获取选中的value值（selectedIndex）
textarea value获取当前标签中的值
搜索框的示例
二、操做：
样式操做：
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);
三、事件：
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"; }; }
相关文章
- 1. Python的平凡之路（4）
- 2. 平凡之路
- 3. 2015，平凡之路
- 4. 听“平凡之路”有感
- 5. 重构构建的平凡之路
- 6. 树莓派的平凡之路
- 7. 架构师的平凡之路
- 8. 笨鸟的平凡之路-FLUME
- 9. 《平凡的世界》--路遥
- 10. 《平凡的世界》造就不平凡的人生 --路遥
- 更多相关文章...
- • SQLite - Python - SQLite教程
- • Docker 安装 Python - Docker教程
- • 互联网组织的未来：剖析GitHub员工的任性之源
- • 适用于PHP初学者的学习线路和建议
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 跳槽面试的几个实用小技巧，不妨看看！
- 2. Mac实用技巧 |如何使用Mac系统中自带的预览工具将图片变成黑白色?
- 3. Mac实用技巧 |如何使用Mac系统中自带的预览工具将图片变成黑白色?
- 4. 如何使用Mac系统中自带的预览工具将图片变成黑白色?
- 5. Mac OS非兼容Windows软件运行解决方案——“以VMware & Microsoft Access为例“
- 6. 封装 pyinstaller -F -i b.ico excel.py
- 7. 数据库作业三ER图待完善
- 8. nvm安装使用低版本node.js(非命令安装)
- 9. 如何快速转换图片格式
- 10. 将表格内容分条转换为若干文档
欢迎关注本站公众号,获取更多信息
相关文章
- 1. Python的平凡之路（4）
- 2. 平凡之路
- 3. 2015，平凡之路
- 4. 听“平凡之路”有感
- 5. 重构构建的平凡之路
- 6. 树莓派的平凡之路
- 7. 架构师的平凡之路
- 8. 笨鸟的平凡之路-FLUME
- 9. 《平凡的世界》--路遥
- 10. 《平凡的世界》造就不平凡的人生 --路遥