天學會html+css，第九天固定定位。

Redmi手機電視筆記本。

今天的學習目標是右側懸浮工具欄用固定定位實現，它是相對于瀏覽器窗口的定位方式。

·盒子里的內容用a標簽，一個圖片加一行文字，此時它的位置在最底部。

·然后給它寫上固定定位樣式，右側距離0，下面距離70像素，加上背景顏色，看下效果。

·開始給a標簽寫樣式，固定寬高，text-renderin默認下劃線去掉，里面內容居中，看下效果。

·圖片寫樣式之前也要加上這行代碼，然后讓它的尺寸變小一點，并且左右居中，看下效果。

·文字的顏色、大小也調整一下。

·最后給a標簽加上邊框、內邊距，讓里面內容往下挪一挪。

到此，今天的學習完成。

、HTML標簽：表單標簽

1.1 表單概念：用于采集用戶輸入的數據的。用于和服務器進行交互。

1.2 語法：

form：用于定義表單的，可以定義一個范圍，范圍代表采集用戶數據的范圍

屬性：

action：指定提交數據的URL

method：指定提交方式

method分類：一共7種，2種比較常用

get：

1. 請求參數會在地址欄中顯示。會封裝到請求行中(HTTP協議后講解)。

2. 請求參數大小是有限制的。

3. 不太安全。

post：

1. 請求參數不會再地址欄中顯示。會封裝在請求體中(HTTP協議后講解)

2. 請求參數的大小沒有限制。

3. 較為安全。

注意：表單項中的數據要想被提交：必須指定其name屬性

二、表單項標簽：

2.1 input：可以通過type屬性值，改變元素展示的樣式

2.1.1 type屬性：

text：文本輸入框，默認值

placeholder：指定輸入框的提示信息，當輸入框的內容發生變化，會自動清空提示信息

password：密碼輸入框

radio:單選框

注意：

1. 要想讓多個單選框實現單選的效果，則多個單選框的name屬性值必須一樣。

2. 一般會給每一個單選框提供value屬性，指定其被選中后提交的值

3. checked屬性，可以指定默認值

checkbox：復選框

注意：

1. 一般會給每一個單選框提供value屬性，指定其被選中后提交的值

2. checked屬性，可以指定默認值

file：文件選擇框

hidden：隱藏域，用于提交一些信息。

按鈕：

submit：提交按鈕。可以提交表單

button：普通按鈕

image：圖片提交按鈕

src屬性指定圖片的路徑

label：指定輸入項的文字描述信息

注意：

label的for屬性一般會和 input 的id屬性值對應。如果對應了，則點擊label區域，會讓input輸入框獲取焦點。

select: 下拉列表，子元素option，指定列表項

textarea：文本域，cols指定列數，每一行有多少個字符，rows默認多少行。

三、CSS：頁面美化和布局控制

3.1 概念： Cascading Style Sheets 層疊樣式表

層疊：多個樣式可以作用在同一個html的元素上，同時生效

3.2 好處：

1. 功能強大

2. 將內容展示和樣式控制分離

3. 降低耦合度。解耦

4. 讓分工協作更容易

5. 提高開發效率

3.3 CSS的使用：CSS與html結合方式

3.3.1 內聯樣式：在標簽內使用style屬性指定css代碼

如：<div style="color:red;">hello css</div>

3.3.2 內部樣式：在head標簽內，定義style標簽，style標簽的標簽體內容就是css代碼

如：

<style>

div{

color:blue;

}

</style>

<div>hello css</div>

3.3.3 外部樣式

1. 定義css資源文件。

2. 在head標簽內，定義link標簽，引入外部的資源文件

如：

a.css文件：

div{

color:green;

}

html文件：

<link rel="stylesheet" href="css/a.css">

<div>hello css</div>

注意：

1,2,3種方式 css作用范圍越來越大

1方式不常用，后期常用2,3

3.4 css語法：

3.4.1 格式：

選擇器 {

屬性名1:屬性值1;

屬性名2:屬性值2;

...

}

* 選擇器:篩選具有相似特征的元素

* 注意：

* 每一對屬性需要使用；隔開，最后一對屬性可以不加；

3.5 css選擇器：篩選具有相似特征的元素

3.5.1 分類：

1. 基礎選擇器：

1. id選擇器：選擇具體的id屬性值的元素.建議在一個html頁面中id值唯一

* 語法：#id屬性值{}

2. 元素選擇器：選擇具有相同標簽名稱的元素

* 語法： 標簽名稱{}

* 注意：id選擇器優先級高于元素選擇器

3. 類選擇器：選擇具有相同的class屬性值的元素。

* 語法：.class屬性值{}

* 注意：類選擇器選擇器優先級高于元素選擇器

2. 擴展選擇器：

1. 選擇所有元素：

* 語法： *{}

2. 并集選擇器：

* 選擇器1,選擇器2{}

3. 子選擇器：篩選選擇器1元素下的選擇器2元素

* 語法： 選擇器1 選擇器2{}

4. 父選擇器：篩選選擇器2的父元素選擇器1

* 語法： 選擇器1 > 選擇器2{}

5. 屬性選擇器：選擇元素名稱，屬性名=屬性值的元素

* 語法： 元素名稱[屬性名="屬性值"]{}

6. 偽類選擇器：選擇一些元素具有的狀態

* 語法： 元素:狀態{}

* 如： <a>

* 狀態：

* link：初始化的狀態

* visited：被訪問過的狀態

* active：正在訪問狀態

* hover：鼠標懸浮狀態

3.6 css屬性：

1. 字體、文本

* font-size：字體大小

* color：文本顏色

* text-align：對其方式

* line-height：行高

2. 背景

* background：

3. 邊框

* border：設置邊框，符合屬性

4. 尺寸

* width：寬度

* height：高度

5. 盒子模型：控制布局

* margin：外邊距

* padding：內邊距

* 默認情況下內邊距會影響整個盒子的大小

* box-sizing: border-box; 設置盒子的屬性，讓width和height就是最終盒子的大小

* float：浮動

* left

* right