HTML5第五章至第八章

2021-09-10 19:19:18 字數 4195 閱讀 3492

第五章

1.編輯網頁文字

字型樣式

屬性名 含義 舉例

font-family 設定字型型別 font-family:「隸書」;

font-size 設定字型大小 font-size:12px;

font-style 設定字型風格 font-style:italic;

font-weight 設定字型的粗細 font-weight:bold;

font 在乙個宣告中設定所有字型屬性 font:italic bold 36px 「宋體」;

文字屬性

屬性 含義 舉例

color 設定文字顏色 color:#00c;

text-align 設定元素水平對齊方式 text-align:right;

text-indent 設定首行文字的縮排 text-indent:20px;

line-height 設定文字的行高 line-height:25px;

text-decoration 設定文字的裝飾 text-decoration:underline;

vertical-align 設定垂直對齊方式 vertical-align:middle;

text-shadow 設定文字陰影 text-shadow : color x-offset y-offset blur-radius;

2.使用css的超連結樣式設定偽類超連結在不同狀態下的樣式

語法:a:hover

//標籤名:偽類名

偽類名稱 含義 示例

a:link 未單擊訪問時超連結樣式 a:link

a:visited 單擊訪問後超連結樣式 a:visited

a:hover 滑鼠懸浮其上的超連結樣式 a:hover

a:active 滑鼠單擊未釋放的超連結樣式 a:active

設定偽類的順序:a:link->a:visited->a:hover->a:active

3.列表樣式list-style屬性

值 說明 語法示例

none 無標記符號 list-style:none;

disc 實心圓,預設型別 list-style:disc;

circle 空心圓 list-style:circle;

square 實心正方形 list-style:square;

decimal 數字 list-style:decimal

4.背景樣式

背景屬性

背景顏色(background-color)

背景影象(background-image)

背景定位(background-position)

背景重複方式(background-repeat)

第六章1.盒子模型的使用

邊框border-color

border-width

border-style

內邊距padding

外邊距margin

盒子總尺寸

border+padding+margin+內容寬/高

2.圓角邊框

border-radius語法

border-radius: 20px 10px 50px 30px;

四個屬性值按順時針從左上角開始排列

3.盒子陰影

語法box-shadow:inset x-offset y-offset blur-radius color;

inset 陰影型別內陰影

x-offset x軸位移,指定陰影水平位移量

y-offset y軸位移,用來指定陰影垂直位移量

blur-radius 陰影模糊半徑陰影向外模糊的模糊範圍

color 陰影顏色,定義繪製陰影時所使用的顏色

第七章1.網頁布局

標準文件流

指元素根據塊元素或行內元素的特性按從上到下,從左到右的方式自然排列。這也是元素預設的排列方式

標準文件流組成

塊級元素(block)

、、列表 內聯元素(inline)

、、、...

2.display屬性

值 說明

block 塊級元素的預設值,元素會被顯示為塊級元素,該元素前後會帶有換行符

inline 內聯元素的預設值。元素會被顯示為內聯元素,該元素前後沒有換行符

inline-block 行內塊元素,元素既具有內聯元素的特性,也具有塊元素的特性

none 設定元素不會被顯示

3.浮動(float)屬性

值 說明

left 左浮動

right 右浮動

none 不浮動

4.清除浮動

clear屬性

值 說明

left 在左側不允許浮動元素

right 在右側不允許浮動元素

both 在左、右兩側不允許浮動元素

none 預設值。允許浮動元素出現在兩側

解決父級邊框塌陷的方法

浮動元素後面加空div

浮動的盒子……

.clear

設定父元素的高度

浮動的盒子……

#father

父級新增overflow屬性

浮動的盒子……

#father

overflow屬性

屬性值 說明

visible 預設值。內容不會被修剪,會呈現在盒子之外

hidden 內容會被修剪,並且其餘內容是不可見的

scroll 內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘內容

auto 如果內容被修剪,則瀏覽器會顯示滾動條以便檢視其餘的內容

父級新增偽類after

浮動的盒子……

.clear:after

解決父級邊框塌陷的方法的優缺點

浮動元素後面加空div

簡單,空div會造成html**冗餘

設定父元素的高度

簡單,元素固定高會降低擴充套件性

父級新增overflow屬性

簡單,下拉列表框的場景不能用

父級新增偽類after

寫法比上面稍微複雜一點,但是沒有***,推薦使用

5.inline-block和float的區別

display:inline-block

可以讓元素排在一行,並且支援寬度和高度,**實現起來方便

位置方向不可控制,會解析空格

ie 6、ie 7上不支援

float

可以讓元素排在一行並且支援寬度和高度,可以決定排列方向

float 浮動以後元素脫離文件流,會對周圍元素產生影響,必須在它的父級上新增清除浮動的樣式

第八章1.定位屬性

position屬性

static:預設值,沒有定位

沒有定位,以標準流方式顯示

relative:相對定位

相對自身原來位置進行偏移 偏移設定:top、left、right、bottom

設定相對定位的盒子會相對它原來的位置,通過指定偏移,到達新的位置

設定相對定位的盒子仍在標準文件流中,它對父級盒子和相鄰的盒子都沒有任何影響

設定相對定位的盒子原來的位置會被保留下來

absolute:絕對定位

偏移設定: left、right、top、bottom

使用了絕對定位的元素以它最近的乙個「已經定位」的「祖先元素」 為基準進行偏移

如果沒有已經定位的祖先元素,會以瀏覽器視窗為基準進行定位

絕對定位的元素從標準文件流中脫離,這意味著它們對其他元素的定位不會造成影響

元素位置發生偏移後,它原來的位置不會被保留下來

fixed:固定定位

偏移設定: left、right、top、bottom

類似絕對定位,不過區別在於定位的基準不是祖先元素,而是瀏覽器視窗

2.z-index屬性設定定位元素的堆疊順序

調整元素定位時重疊層的上下位置

z-index屬性值:整數,預設值為0

設定了positon屬性時,z-index屬性可以設定各元素之間的重疊高低關係

z-index值大的層位於其值小的層上方

3.opacity:x或filter:alpha(opacity=x)方式設定網頁元素的透明度

屬性 說明 舉例

opacity:x x值為0~1,值越小越透明 opacity:0.4;

filter:alpha(opacity=x) x值為0~100,值越小越透明 filter:alpha(opacity=40);

第八章 指標 第八章 指標

1 什麼是位址 include using namespace std int main 11 在堆中建立對像 我們既然可以在堆中儲存變數,那麼也就可以儲存對像,我們可以將對像儲存堆中,然後通過指標來訪問它 include using namespace std class human 14 在建構...

第八章(筆記)

能在 中進行記憶體單元的定址的暫存器只有4個,分別是bx si di bp 其中bx bp 是基址,bx對應的段位址是ds,bp對應的段位址是ss si di 是變址,單獨使用時段位址是ds,組合使用段位址是跟隨組合的基址對應的段位址 中進行記憶體單元定址彙總 si di bx bp 常量 si 常...

第八章 字典

d 空字典 d 這就是字典 d dict.fromkeys a b d dict zip keyslist,valslist d dict name bob age 22 建立字典的函式 d name 通過索引key獲取對應的value d.keys 返回d字典物件所有key,返回乙個列表 d.va...