Python程序员

表单、clearfix、图片在ie6修复

2018-07-12  本文已影响14人  叫我老村长

完善clearfix

.clearfix:before,
        .clearfix:after{
            content: "";
            display: table;
            clear: both;
        }
        .clearfix{
            zoom: 1;
        }

表单

input
type属性可选值:
text:文本框
password:密码框
submit:提交按钮
radio:单选按钮
checkbox:多选框
reset :重置按钮
select、option
select用于创建一个下拉列表。
option表示下拉列表中的列表项。
optgroup用于为列表项分组。
textarea
textarea用来创建一个文本域,实际效果和 文本框类似,只是可以输入多行数据。
可用属性:
cols:文本域的列数
rows:文本域的行数
fieldset、legend、label
fieldset用来为表单项进行分组。
legend用于指定每组的名字。
label标签用来为表单项定义描述文字。

<form action="xxx.html">提交的服务器
        <fieldset>  外框
            <label for="um">用户名</label>  外框的标题
            <input id="um" type="text" name="username" value="value">   提交username   name用于服务器分辨。value对应for  name服务器调用
            <label for="pwd">密码</label>
            <input id="pwd" type="password" name="password"><br><br>    
        </fieldset>

单选

性别<input type="radio" name="gender" value="male" id="male">
    <label for="male">男</label>
    <input type="radio" name="gender" value="female" checked="checked" id="female">   checked默认值
    <label for="female">女</label>

多选

爱好<input type="checkbox" name="hobby" value="zq">zq
    <input type="checkbox" name="hobby" value="lq">lq
    <input type="checkbox" name="hobby" value="ymq" checked="checked">umq
    <input type="checkbox" name="hobby" value="ppq" checked="checked">ppq

下拉

<select name="start">
            <optgroup label="女明星">
                <option value="fbb">ss</option>
                <option value="lxr">aa</option>
            </optgroup>
            <optgroup label="男明星">
                <option value="zbs" selected="selected">xx</option>
                <option value="ldh">ldh</option>
            </optgroup>
        </select>
        

文本域

自我介绍<textarea name="info"></textarea>

图片在ie6修复
IE6png24的修复。(透明效果不好)
png24 改png8. 清晰度下降。

条件hack 为特殊浏览器特殊设置。只对ie6有效。
属性hack
选择符hack

<!--[if IE 6]>
    <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
    <script type="text/javascript">
        DD_belatedPNG.fix("div,img");
    </script>
<![endif]-->
上一篇下一篇

猜你喜欢

热点阅读