小菜鸡的html初步教程（第十六章表单（下））

<>小菜鸡的第八篇博客

本系列文章仅仅是对基础的HTML5以及CSS进行讲解，更加详细的内容均会附上链接，以便查阅和版权保护。
这一个是接着上面的，所以就直入正题
@charset "utf-8"; /* CSS Document */ body { font-size: 100%; font-family:
arial, sans-serif; padding-bottom: 1em; } .wrapper { width: 600px; } h2 {
background-color: #dedede; border-bottom: 1px solid #d4d4d4; border-top: 1px
solid #d4d4d4; border-radius: 5px; box-shadow: 3px 3px 3px #ccc; color: #fff;
font-size: 1.1em; margin: 12px; padding: 0.3em 1em; text-shadow: #9FBEB9 1px
1px 1px; text-transform: uppercase; } .hdr-account { background-color: #0B5586;
} .hdr-address { background-color: #4494C9; } .hdr-public-profile {
background-color: #377D87; } .hdr-emails { background-color: #717F88; }
fieldset { background-color: #f1f1f1; border: none; border-radius: 2px;
margin-bottom: 12px; overflow: hidden; padding: 0 .625em; /* 10px/16px */ }
.fields { background-color: #fff; border: 1px solid #eaeaea; margin: .75em;
padding: .75em; } .fields .row { margin: 0.5em 0; } label { cursor: pointer;
display: inline-block; padding: 3px 6px; text-align: right; width: 150px;
vertical-align: top; } .required { /* the asterisk */ color: red; display:
none; } input, select, button { font: inherit; } .field-small { width: 75px; }
.field-medium { width: 150px; } .field-large { width: 250px; } select {
padding-right: 1em; } textarea { font: inherit; padding: 2px; } .instructions {
font-size: .75em; padding-left: 167px; font-style: italic; margin: .5em 0
1.2em; } .instructions kbd { font-size: 1.23em; font-style: normal; } .btn {
background-color: #da820a; border: none; border-radius: 4px; box-shadow: 2px
2px 2px #333; color: #fff; margin: 12px 0 0 26px; padding: 8px; text-shadow:
1px 1px 0px #777; } .btn-reset { background-color: #8e5303; color: #eee;
margin-left: 35px; } /* :::: Radio Buttons :::: */ .radios { background-color:
transparent; position: relative; margin-bottom: 0; } .radios .row { margin: 0 0
0 150px; } .radios legend { left: 0; padding: 0 6px; position: absolute;
text-align: right; top: 2px; width: 148px; *width: 143px; /* a hack for IE7 */
} .radios label { padding-left: 2px; margin-right: 5px; vertical-align: middle;
width: auto; } /* :::: Checkboxes :::: */ .checkboxes label { text-align: left;
width: 475px; } button * { vertical-align: middle; }
因为这个代码里面含有大量冗杂的修饰成分，故我只将本章节新添加的元素拿出来讲解，如果未讲解的部分有不清楚的可以看看我之前的博客
cursor: pointer;
关于这个，CSS cursor 属性 <http://www.w3school.com.cn/tiy/t.asp?f=csse_cursor>
我相信你在这个链接里面会感受到快乐的
display: none;
关于这个，其实我也不知道我又没有讲过，但是这个的话就是用于隐藏元素
CSS display 属性 <http://www.w3school.com.cn/tiy/t.asp?f=csse_display>
依旧是一个代码实现的链接，可以看看

emmm（考虑了下，这个emmm我就没加粗了）好像没啥东西，，，，早知道我就在上半部分加了（不过上半部分东西确实太多了，再加就看哭掉了）所以主要还是看前面的那半部分叭，那才是主要的部分。

热门工具换一换

小菜鸡的html初步教程（第十六章 表单（下））