表单CSS样式表分析

最新推荐文章于 2024-07-29 22:33:33 发布

屿岸

最新推荐文章于 2024-07-29 22:33:33 发布

阅读量1.7k

点赞数 1

分类专栏： html 文章标签： css 表单

本文链接：https://blog.csdn.net/qq_37290134/article/details/78649145

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS：
1.

body {
color:  #333;/*设置网页文本的颜色*/
background:url(../images/bg2.gif) repeat;/* 设置网页背景包括颜色背景图等属性*/
padding:0px;/*边框大小*/
font-size:12px;/*文本字体大小*/
font-family:Helvetica, sans-serif;/*字体设置，根据不同浏览器一次选择兼容的，靠前优先*/
}/*标签css*/

.form_content{/* 最外层的div块级属性设计*/
width:575px;/*此模块所占屏幕尺寸的宽度*/
margin:30px auto;/*外边距*/
padding:50px;/**/
background:#fff url(images/form_top_bg.gif) repeat-x top ;/*此块级元素的背景图*/
}

如，白色边框的宽度即为width；
margin与padding区别为：
这里写图片描述
padding：400px；
如图，大片白边框
————————————————————————————————

margin：400px；
网页的内容与屏幕之间边距较大

fieldset{/* html中的一个标签，将具有共同特点的文本聚到一起，用边框包围起来*/
border:10px #ebebeb solid;/*边界粗细程度10px 颜色 */
padding:15px 10px 15px 10px;
margin:0 0 10px 0;
}

如上图灰色的边框即为border

legend.one{/*legend中使用的class样式 .legend与标签fieldset结合使用，fieldset中的标题*/
color:#FFFFFF;/*标题的字体颜色*/
background-color:#0fcdf6;/*标题的背景颜色*/
padding:2px 5 px 2px 5px;/*边框*/
}
legend.two{/*legend中使用的样式，标题style，两个样式属性 此处为第二个标题的style设置*/
color:#FFFFFF;
background-color:#50c150;
padding:2px 5px 2px 5px;
}

标题一：蓝色

标题二：绿色

.form-row {/*用在div中了，div嵌套使用的外层*/
clear:both;/*此属性值表示此模块左右两侧不能有东西*/
float:left;/*此属性值表示此模块浮动在在左侧*/
padding:5px 5px 5px 5px;
}

.field-A {/*用在div中，此处使用时，已经是div嵌套，用在内层'*/
width:100px;/*表示宽度为100px*/
float:left;
line-height:25px;/*此属性值表示行间距25px*/
}/*class属性，在标签内填class=“field-lable”*/

.form-row-select {
clear: both;
float:left; 
padding:10px 5px 5px 5px;
}

外层的div模块对应的form-row，整体

内层div1中对应的field-A style
这里写图片描述
内层div2对应的dield-A style（是一个div模块，输入框的css在input的optional样式中设定）

/*label {
float:left;
color:#666666;
}对于lable标签的style定义*/
label.left{
padding:0 20px 0 5px;
float:left;
color:#666666;
} 

input.required{/*在input的标签内填class=“required，此标签只对input能使用输入框一的属性”*/
width:300px;
height:22px;
border: 1px solid #95E0EF;
background-color:#f3fcfe;
border-left-width:2px;
padding:5px 0 0 2px;
float:left;
}
input.optional{/*input标签内使用输入框二的属性*/
width:300px;
height:22px;
border: 1px solid #adedad;
background-color:#f3fef3;
border-left-width:2px;/*左边界宽度（加粗2px）*/
padding:5px 0 0 2px;
}
input.submit{/*input的submit专属样式*/
color:#FFFFFF;
background-color:#0fcdf6;
padding:2px 5px 2px 5px;
cursor:pointer;/*cursor属性为鼠标移动到此的，光标的样式，pointer为小手的样式*/
border:none;/*表示无边界，可以设置边界宽度和颜色，弧度等 如 border:1px solid #000000 ;*/
}
input.reset{/*input中的reset专属样式*/
color:#FFFFFF;
background-color:#50c150;
cursor:pointer;
padding:2px 5px 2px 5px;
border:none;
}

这里写图片描述

border如图

html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">

<link title="style1" rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>

    <div class="form_content">
    <form id="test" action="#" method="get">
    <fieldset><!--框一-->
        <legend class="one">标题</legend><!--标题-->
        <!-- 标题下面的输入框模块div，一个输入模块内包含输入题目div和输入内容div-->
        <div class="form-row">
            <div class="field-A"><label for="field4">Username</label>:</div>
            <div class="field-A"><input name="field4" id="field4" class="required" title="Enter your name" /></div>
        </div>

        <div class="form-row">
            <div class="field-A"><label for="field5">Email</label>:</div>
            <div class="field-A"><input name="field5" id="field5" class="required" title="Enter your name" /></div>
        </div> 
        <div class="form-row">
            <div class="field-A"><label for="field7">Password</label>:</div>
            <div class="field-A"><input type="password" name="field7" id="field7" class="required" title="Enter a password greater than 6 characters" /></div>
        </div>
        <div class="form-row">
            <div class="field-A"><label for="field9">Confirm Password</label>:</div>
            <div class="field-A"><input type="password" name="field8" id="field8" class="required" title="Enter the same password for confirmation" /></div>
        </div> 
    </fieldset>  



    <fieldset>
        <legend class="two">OPTIONAL INFORMATIONS</legend>
        <div class="form-row">
            <div class="field-A"><label for="field9">City</label>:</div>
            <div class="field-A">
                <input name="field3" id="field9" class="optional" title="Enter your employee number, please use only alphanumeric characters" />        
            </div>
        </div>

        <div class="form-row">
            <div class="field-A"><label for="field10">Phone</label>:</div>
            <div class="field-A"><input name="field10" id="field10" class="optional" title="Optional: Enter your age" /></div>
        </div>
        <div class="form-row-select">

            <fieldset>
                <legend class="two">Ocupation</legend>
                <label class="left">
                <input type="radio" class="radio_input" name="field11" id="field11-male" value="1" />Artist <br />
                <input type="radio" class="radio_input" name="field11" id="field11-female" value="2"/>Businessperson<br />
                <input type="radio" class="radio_input" name="field11" id="field11-female" value="2"/>Factory worker<br />
                <input type="radio" class="radio_input" name="field11" id="field11-female" value="2"/>Engineer<br />    
                <input type="radio" class="radio_input" name="field11" id="field11-female" value="2"/>Journalist<br />

                </label>
                <label class="left">
                 <input type="radio" class="radio_input" name="field11" id="field11-female" value="2"/>Medical Worker<br />
                <input type="radio" class="radio_input" name="field11" id="field11-female" value="2"/>Military person<br />
                <input type="radio" class="radio_input" name="field11" id="field11-female" value="2"/>Political figure<br />
                <input type="radio" class="radio_input" name="field11" id="field11-female" value="2"/>Scientist<br />
                <input type="radio" class="radio_input" name="field11" id="field11-female" value="2"/>Undertaker
                </label>

                <label class="left">
                <input type="radio" class="radio_input" name="field11" id="field11-male" value="1" />Artist <br />
                <input type="radio" class="radio_input" name="field11" id="field11-female" value="2"/>Businessperson<br />
                <input type="radio" class="radio_input" name="field11" id="field11-female" value="2"/>Founder or administrator <br />
                <input type="radio" class="radio_input" name="field11" id="field11-female" value="2"/>Engineer<br />    
                <input type="radio" class="radio_input" name="field11" id="field11-female" value="2"/>Journalist<br />

                </label> 



            </fieldset> 

        </div>

    </fieldset>
    <input type="submit" class="submit" value="Submit" /> <input class="reset" type="button" value="Reset" onclick="valid.reset(); return false" />
    </form>
    </div>


</body>
</html>

表单登录页面，用户名输入框提示

<form method="get" action="">
        <p>username<input type="text" name="username" value="请输入名字" onfocus="if(this.value=='请输入名字'){this.value=''}" onblur="if(this.value==''){this.value='请输入名字'}"></p>

        <p>password<input type="password" name="password" ></p>
        <input type="submit">   
</form>