入门笔记 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