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. Python的平凡之路（4）
- 2. 平凡之路
- 3. 2015，平凡之路
- 4. 聽「平凡之路」有感
- 5. 重構構建的平凡之路
- 6. 樹莓派的平凡之路
- 7. 架構師的平凡之路
- 8. 笨鳥的平凡之路-FLUME
- 9. 《平凡的世界》--路遙
- 10. 《平凡的世界》造就不平凡的人生 --路遙