入門筆記 Day five

時間 2019-12-12

標籤入門筆記 day 简体版

原文原文鏈接

表格

合併單元格

xxx （橫向合併兩個單元格） xxx (豎向合併兩個單元格)

表單form 表單元素lable

text文本、password密碼、dadio單選框、checkbox複選框、submit提交、reset重置、button按鈕、file上傳、hidden隱藏html

默認選中checked <input type="radio" name="sex" value="men" checked="checked"/>男html5

禁用元素disabled <input type="text"name="user_name" value="輸入框" id="q" disabled="disabled"/>瀏覽器

<form action="轉到的連接">
    <p>
        <lable for="q">用戶名：</lable>
        <input type="text"name="user_name" value="輸入框" id="q" disabled="disabled"/>
    </p>
    <p>
        <lable for="w">密碼：</lable>
        <input type="password" name="password" value="" id="w"/>
    </p>
    <p>
        <lable for="">性別：</lable>
        <input type="radio" name="sex" value="men" checked="checked"/>男
        <input type="radio" name="sex" value="women"/>女
    </p>
    <p>
        <lable for="">興趣：</lable>
        <input type="checkbox" name="xingqu" value="chi" />吃
        <input type="checkbox" name="xingqu" value="he"/>喝
    </p>
    <input type="submit" value="提交按鈕文字"/>
    <input type="reset"  value="重置按鈕文字"/>
    <input type="button" value="自定義按鈕"/>
    <input type="file"/>
    <input type="hidden" value="yicang"/>
</form>
複製代碼

下拉框

<select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
</select>
複製代碼

文本域

<style>
        textarea{
            width: 400px;
            height:300px;
        }
</style>
<body>
        <textarea></textarea>
</body>
複製代碼

兼容性

用js插件

<script src="js/html5shiv.js"></script>bash

浮動兼容性用浮動解決ui
不要讓子元素的寬高超過父級spa
h、p、td 不能嵌套塊元素標籤插件
display： inline-block； IE兼容解決方案：code

加上：
*display：inline; *zoom： 1；orm

IE6最小高度是19px，解決方案是加上 overflow： hidden；
當元素浮動後再設置margin那麼就會產生雙倍邊距：針對IE6.7要加上 display：inline;
li裏元素都浮動會產生4px間隙問題，針對IE六、7添加 vertical-align： top;
文字溢出BUG：兩個浮動元素中間避免出現內聯元素或者註釋，或與父級寬度相差3px或以上
IE6 7父級元素的overflow：hidden 包不住子級的relative ：給父級元素加上相對定位
要避免絕對定位元素父級寬高是奇數
浮動元素和絕對元素是同級的話定位元素就會消失，只要讓他們不處於同一級就能夠避免這個BUG
IE6下 input空隙：給input元素添加浮動

CSS Hack

CSS Hack：針對不一樣的瀏覽器寫不一樣的CSS樣式的過程htm

\9 :IE10及IE10如下版本
- :IE7及IE7如下版本
_ :IE6及IE6如下版本

PNG24兼容性問題

JS插件（問題：不能處理body上的png24）

<script src="js/DD_belatedPNG_0.0.8a.js"></script>
<style>
    DD_belatedPNG.fix("目標元素")；
</style>
複製代碼

原生濾鏡

<body>
    background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoadere(src="XX.png",sizingMethod="crop");
</body>

複製代碼

樣式優先級

默認<類型<class<id<style（行間）<！important

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。