5.1 元素分類
常用的塊狀元素有:
<div>、<
p>、<
h1>~<
h6>、<
ol>、<
ul>、<
li>、<
dl>、<
dt>、<
table
>、<
form
>
常用的內聯元素有
<a>、<
span
>、<
i>、<
em>、<
strong
>、<
label
>
常見的內聯塊狀元素有
<input
>、<
img>
標籤分類的特點是對現有的html常用標籤進行分類,那麼這些特點在後面的學習過程中我們還可以通過display屬性進行強制修改規則。
5.2 盒模型的常用屬性
/*乙個200px*200px範圍的div盒子,背景顏色是紅色的。*/doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>內容的寬高
title
>
<
style
type
="text/css"
>
.box
style
>
head
>
<
body
>
<
div
class
="box"
>
div>
body
>
html
>
.box
padding有四個方向,分別描述四個方向的padding。
padding-top:10px;padding-right:3px;
padding-bottom:50px;
padding-left:70px;
/*上 右 下 左 四個方向*/padding: 20px 30px 40px 50px ;
/*上 左右 下*/
padding: 20px 30px 40px;
/* 上下 左右*/
padding: 20px 30px;
/*上下左右*/
padding: 20px;
邊框
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>border的使用
title
>
<
style
type
="text/css"
>
.box
style
>
head
>
<
body
>
<
div
class
="box"
>
div>
body
>
html
>
border-width:3px;border-style:solid;
border-color:red;
/*上面三句**相當於一句**:border:3px solid red;*/
/*同樣,也可以分別設定邊框四個方向的粗細 線性樣式 顏色,跟padding的四個方向一樣。*/
/*上下5px 左右10px*/
border-width:5px 10px;
/*上:實現 右:點狀 下:雙線 左:虛線*/
border-style: solid dotted double dashed;
/*上:紅色 左右:綠色 下:黃色*/
border-color: red green yellow;
border-top-width: 10px;border-top-color: red;
border-top-style: solid;
border-right-width: 10px;
border-right-color: red;
border-right-style: solid;
border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;
border-left-width: 10px;
border-left-color: red;
border-left-style:solid;
上面12條語句,相當於 bordr: 10px solid red;
還可以簡寫成:
border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10pxb solid red;
清除預設邊框
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>border預設清除
title
>
<
style
type
="text/css"
>
input
style
>
head
>
<
body
>
<
input
type
="text"
name
="">
body
>
html
>
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>水平方向外邊距
title
>
<
style
type
="text/css"
>
.box_l
.box_r
style
>
head
>
<
body
>
<
span
class
="box_l"
>左盒子
span
><
span
class
="box_r"
>右盒子
span
>
body
>
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>垂直方向上外邊距合併
title
>
<
style
type
="text/css"
>
.father
.box1
.box2
style
>
head
>
<
body
>
<
div
class
="father"
>
<
div
class
="box1"
>
div>
<
div
class
="box2"
>
div>
div>
body
>
html
>
python第五章 Python學習(第五章)
記錄所有的名片字典 card list defshow menu 顯示資訊 print 50 print 歡迎使用 名片管理系統 v1.0 print print 1.新增名片 print 2.顯示全部 print 3.搜尋名片 print print 0.退出系統 print 50 defnew ...
第五章 雜湊
雜湊表adt,只支援二叉樹查詢所允許的一部分操作。比如插入,刪除,查詢等。那些需要元素間排序資訊的操作將不會得到支援。比如findmin,findmax和線性時間按排序順序列印整個表的操作時不支援的。雜湊函式在理想狀態是能將任何兩個不同的關鍵字對映到不同的單元,但是這是不可能,因為關鍵字是無窮的,但...
第五章 函式
第五章 函式 1 函式的定義 shell函式定義可以放在 bash profile 檔案中,也可以在使用該函式的指令碼中,還可以在命令列中 通過 source 或 執行bash profile檔案,使修改能夠立即生效 function 函式名 declare f 顯示定義的函式清單 export f...