小菜鸡的第八篇博客
本系列文章仅仅是对基础的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 属性我相信你在这个链接里面会感受到快乐的
display: none;
关于这个,其实我也不知道我又没有讲过,但是这个的话就是用于隐藏元素
CSS display 属性 依旧是一个代码实现的链接,可以看看
emmm(考虑了下,这个emmm我就没加粗了)好像没啥东西,,,,早知道我就在上半部分加了(不过上半部分东西确实太多了,再加就看哭掉了)所以主要还是看前面的那半部分叭,那才是主要的部分。