一个用CSS制作的表单样式

不细说，直接上图：

千言万语都在代码注释里，欢迎大家和我讨论：

<style type="text/css">

form{        /*定义表单标记form的样式*/
    border:1px dotted blue;        /*通过缩写的形式定义form的表框border样式，分别为border-width、border-style、border-color*/
    padding: 1px 6px;        /*定义填充padding的样式，缩写给出两个属性值时，前者为上下边距的宽度、后者为左右边距的宽度*/ 
    margin:  0px;    /*定义边界margin的样式，缩写给出一个属性值时，表示它四周的宽度相等*/
    font: 14px Arial;        /*设置表格内默认字体*/
}

input{        /*定义表达input标记的样式*/
    color: black;
}

input.txt{        /*后代选择器定义input标记下的一个类的样式，该类命名为txt，用来体现文本框输入，也就是说该后代选择器用来体现表单中的文本输入框部分的样式*/
    background-color: #ffeeee;        /*设置文本输入框的背景颜色*/
    border:none;        /*清除文本框的边框*/
    border-bottom: 1px solid #266980;        /*同样通过缩写定义文本框的下边框的宽度、样式和颜色*/
    color: green;        /*定义文本输入框内部内容的颜色*/
}

input.btn{        /*后代选择器，定义表单中的按钮部分的样式*/
    color: #00008B;        /*设置按钮上字的颜色*/
    background-color: #ADD8E6;    /*设置按钮的颜色*/
    border:1px outset #00008B;        /*设置按钮的边框属性，依次为宽度、样式、颜色*/
    padding: 1px 2px 1px 2px;        /*CSS缩写，给出四个属性值时，是按照“顺时针”的四个宽度，即：上、右、下、左的宽度*/
}

input.lik{        /*后代选择器，定义表单中的非重要的按钮样式*/
    color: #A9A9A9;        /*设置按钮上字的颜色*/
    background-color: white;    /*设置按钮的颜色*/
    border:none;        /*设置按钮的边框属性，依次为宽度、样式、颜色*/
    padding: 1px 2px 1px 1px;        /*CSS缩写，给出四个属性值时，是按照“顺时针”的四个宽度，即：上、右、下、左的宽度*/
    margin-left: 150px; /*基于用户体验的角度，按钮放在右侧，设置左边边界*/
}

select{        /*设置标记选择器，下拉框样式*/
    width:100px;        /*设置下拉框宽度*/
    color: #00008B;        /*设置下拉框颜色*/
    background-color: #ADD8E6;        /*设置背景填充颜色*/
    border:1px solid #00008B;        /*设置边框属性，依次为宽度、样式、颜色*/
}

textarea{        /*设置多行文本输入域*/
    width:250px;        /*多行文本输入域的宽度*/
    height: 40px;        /*高度*/
    color:#00008B;        /*内容的颜色*/
    background-color: yellow;        /*背景的颜色*/
    border:1px inset #00008B;        /*设置边框属性，依次为宽度、样式、颜色*/
}

</style>

<form name="myForm1" action=“2-2hn.html” method="post" enctype="multipart/form-date">        <!--以下进入html代码部分-->
    <p>姓 名：<input class="txt" type="text" name="comments" size=15/></p>        <!--第一段，用户名字段，然后在input标记下建立一个名为“txt”的类-->
    <p>密 码：<input class="txt" type="password" name="passwd" size=15/></p>        <!--密码字段-->
    <p>所在地：<select name="addr">         <!--以下为默认下拉列表框选项-->
            <option value="1">上海</option>1        <!--其中“上海“为缺省选项”-->
            <option value="2">江苏</option>
            <option value="3">山西</option>
            <option value="4">北京</option>
        </select></p>
    <p>今日心情：<br />        <!--以下为默认多行文本输入域选项-->
        <textarea name="sign" cols="20" rows="4"></textarea></p>
    <p><input class="lik" type="reset" name="submit2" value="重 置"><!--非首选按钮，引用了CSS中定义的类标记lik-->
        <input class="btn" type="submit" name="submit" value="登 录"><!--首选按钮，引用了CSS中定义的类标记btn-->
        </p>
</form>