前端學習日記07

2021-10-12 07:18:56 字數 3091 閱讀 6359

常用表單標籤

1、form 表單標籤

表單標籤定義乙個包含表單元素的區域

用於收集使用者輸入的不同型別的資料

常見的表單型別:文字域、下拉列表、單選框、核取方塊…

2、input標籤

表單元素就是指不同型別的input元素,input標籤根據不同的type屬性,有很多形態。

文字輸入:定義文字輸入的單行輸入字段

密碼輸入:定義密碼字段,該字段將被隱藏

單選按鈕:

多選框

籃球

足球羽毛球

普通按鈕:

提交按鈕

`
重置按鈕

檔案上傳按鈕

下拉框

多行文字框:

屬性:

cols='列數'

rows='行數'

1、action 屬性

定義在表單提交時執行的動作,表單提交到的位置,通常提交到web伺服器上,如果不寫,則設定為當前頁面

2、method 屬性

定義表單在提交時所用的http方法(get或post)

預設值:get

3、name 屬性

表單元素的名字,表單提交時必須的字段

4、value 屬性

定義表單元素的值

5、checked 屬性

定義在頁面載入時被預先選定的單選按鈕和核取方塊

6、selected 屬性

定義在頁面載入時預先選定的下拉框所選中的選項

7、readonly 屬性

定義輸入欄位為唯讀

8、disabled 屬性

定義表單元素為禁用狀態

9、maxlength 屬性

定義輸入字段允許的最大長度

10、 size 屬性

定義下拉列表中可見選項的數目

1、實現三角形:

元素寬高設定為0,

根據需要的三角形的大小設定邊框的大小,

確定好三角形的形狀,將其他三個方向邊框顏色變成透明(transparent)

div
2, 實現小箭頭:

兩個三角形重疊在一起,上面的三角形有乙個錯位,並且顏色和背景色一致

div

.box1

2、ie8以下瀏覽器中背景復合屬性寫法的問題

正常:background:url("")no-repeat center; ie中這樣寫會顯示異常

解決:background:url("") no-repeat center;

其他ie低版本相容性問題

1、在ie6中定義小高度的容器 ie6及更早瀏覽器中,預設最小高度19px,小於19px顯示為19px

解決: p

2、ie6及更早瀏覽器,浮動時產生雙邊距的bug

解決: p

3、ie7,子標籤相對定位時父標籤overflow屬性的auto | hidden失效的問題

解決:給父標籤也設定相對定位

4、ie7中,塊轉行內不在一行顯示問題

解決: div

5、ie7及更早瀏覽器中,當li**現2個或兩個以上浮動時,li之間產生空白間隙

解決:將垂直對齊方式設定為top | middle | bottom。

使用css hack 可以控制不同瀏覽器及版本之間的顯示差異,某些特殊情況下使用事半功倍,但是濫用會影響頁面效能,後期維護困難,儘量減少使用

條件hack :用於選擇ie瀏覽器及ie的不同版本 if條件hack是html級別(不但是css的hack,也可以選擇html**塊)

if條件包含6種選擇方式:

是否大於(gt)

大於或等於(gte)

小於(lt)

小於或等於(lte)

非指定版本(!)

【注意】:ie 條件注釋判斷語句是 ie 特有的功能,通過 html 注釋中的條件語句能讓不同的 ie 版本識別注釋中的內容

屬性hack 在css樣式前或值後加上一些只有特定瀏覽器才可以識別的hack字首或字尾

(1)_ :下劃線:選擇ie6及以下;

(2)-:減號,選擇ie6及以下;

(3)+:ie6,7;

(4)\0:選擇ie8以上;值後;

(5)\9: ie6及以上;

(6)\9\0: ie9,10;

選擇符hack(控制選擇器設定的樣式是否生效)

*html : ie6

*+html : ie7

前端學習日記10

新增模組 1 選擇器模組 2 邊框和背景 3 使用者介面 4 漸變 5 動畫 6 2d和3d 瀏覽器私有字首 瀏覽器廠商使用一種方式提前把屬性納為自己的標準,按時該屬性還沒有成為標準 字首 ie ms ms border radius chrome和safari webkit webkit bord...

前端學習日記11

transition transition propertype transition duration transiton timing function transition delay 過渡的復合屬性 其中,過渡的持續時間不可以省略 參與過渡的屬性省略 預設是all 過渡的速度變換曲線省略 預...

前端學習日記12

1 lumn count 3 分欄的數量 2 column gap 50px 欄目和欄目之間的間距 3 column width 500px 欄目的寬度 4 column rule 5px dotted yellow 欄目和欄目之間的邊線 邊框一樣 5 column span all 標題橫跨的列數...