用户信息表单封装
最近写了一个小项目，学校的实验，主要是售卖书籍的发布信息页。
内容是封装了一个用户信息的表单，包含：
a.书籍名称
b.所属标签
c.所属栏目
d.联系人
e.联系方式
f.图片上传
g.价格
h.备注
最后是两个button：发布和取消 。
写了一个select选项框，比较基础，没有用太多的样式类型，毕竟less is more
select {
border: solid 1px #000;
width: 100%;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
padding-right: 14px;
}
最终的效果如下：
具体html代码如下：
1 <div class="demo"> 2 <div class="plus-tag-add"> 3 <form action="" class="login" method="post"> 4 <ul class="Form FancyForm"> 5 <li> 6 <span class="label">书籍名称：</span> 7 <input name="" type="text" class="stext" maxlength="20" /> 8 <span class="form-control-feedback required" style="margin-top: 15px;">*</span> 9 </li> 10 <li> 11 <span class="label">所属标签：</span> 12 <fieldset> 13 <select class="selectbox" > 14 <option value="数学">数学</option> 15 <option value="教辅资料">教辅资料</option> 16 <option value="Javascript">Javascript</option> 17 <option value="Ruby">Ruby</option> 18 <option value="Python">Python</option> 19 <option value="C++">C++</option> 20 <option value="计算机">计算机</option> 21 <option value="C语言">C语言</option> 22 <option value="游戏">游戏</option> 23 <option value="开发">开发</option> 24 <option value="软件">软件</option> 25 <option value="物理">物理</option> 26 <option value="其他">其他</option> 27 </select> 28 </fieldset> 29 </li> 30 <li> 31 <span class="label">所属栏目：</span> 32 <fieldset> 33 <select class="selectbox" > 34 <option value="教科书">教科书</option> 35 <option value="教辅资料">教辅资料</option> 36 <option value="其他">其他</option> 37 </select> 38 </fieldset> 39 </li> 40 <li> 41 <span class="label">联系人：</span> 42 <input name="" type="text" class="stext" placeholder="昵称" maxlength="20" /> 43 <span class="form-control-feedback required" style="margin-top: 15px;">*</span> 44 </li> 45 <li> 46 <span class="label">联系方式：</span> 47 <input name="" type="text" class="stext" placeholder="电话／邮箱" maxlength="20" /> 48 <span class="form-control-feedback required" style="margin-top: 15px;">*</span> 49 </li> 50 <li> 51 <span class="label">图片资料：</span> 52 <input type="file" accept="image/gif,image/png,image/jpeg" /> 53 </li> 54 <li> 55 <span class="label">价格：</span> 56 <input name="" type="text" class="stext" maxlength="20" /> 57 <span class="form-control-feedback required" style="margin-top: 15px;">*</span> 58 </li> 59 <li> 60 <span class="label">详细内容：</span> 61 <textarea type="text" rows="6" cols="40"> 62 </textarea> 63 </ul> 64 <input type="submit" value="发布" class="Button RedButton Button18" style="font-size:22px;margin-left: 500px ;"> 65 <input type="submit" value="取消" class="Button RedButton Button18" style="font-size:22px;margin-left:590px ;margin-top:-43px ;"> 66 </form> 67 </div> 68 </div>
具体css代码：
1 .demo{ 2 width:450px;margin:40px auto;position:relative; 3 } 4 .Form{ 5 margin: 50px 0 ; 6 } 7 .Form li{ 8 font-size:21px; 9 } 10 .Form input[type=text],.Form input[type=password],.Form textarea{ 11 display:inline-block;padding:15px 12px;font-size:18px; 12 font-weight:300;line-height:1.4; 13 background:#fff; 14 border:1px solid #a4a2a2; 15 box-sizing:border-box; 16 -moz-box-sizing:border-box; 17 -ms-box-sizing:border-box; 18 -webkit-box-sizing:border-box; 19 20 border-radius:6px; 21 -moz-border-radius:6px; 22 -webkit-border-radius:6px; 23 24 box-shadow:inset 0 1px rgba(34,25,25,.15),0 1px rgba(255,255,255,.8); 25 -moz-box-shadow:inset 0 1px rgba(34,25,25,.15),0 1px rgba(255,255,255,.8); 26 -webkit-box-shadow:inset 0 1px rgba(34,25,25,.15),0 1px rgba(255,255,255,.8); 27 28 -webkit-transition:all .08s ease-in-out; 29 -moz-transition:all .08s ease-in-out; 30 } 31 .Form label{display:inline-block;line-height:1.4em;font-size:18px} 32 .Form input[type=text]:focus,.Form input[type=password]:focus,.Form textarea:focus{ 33 border-color:#006499; 34 box-shadow:0 1px rgba(34, 25, 25, 0.15) inset, 0 1px rgba(255, 255, 255, 0.8), 0 0 14px rgba(82, 162, 235, 0.35); 35 -moz-box-shadow:0 1px rgba(34, 25, 25, 0.15) inset, 0 1px rgba(255, 255, 255, 0.8), 0 0 14px rgba(82, 162, 235, 0.35); 36 -webkit-box-shadow:0 1px rgba(34, 25, 25, 0.15) inset, 0 1px rgba(255, 255, 255, 0.8), 0 0 14px rgba(82, 162, 235, 0.35); 37 } 38 .FancyForm li,.FancyForm li .input{position:relative} 39 .FancyForm input[type=text],.FancyForm input[type=password],.FancyForm textarea{ 40 position:relative;z-index:3;display:block;width:100%;background:transparent;border:1px solid #a4a2a2; 41 42 border-radius:6px; 43 -moz-border-radius:6px; 44 -webkit-border-radius:6px; 45 46 box-shadow:inset 0 1px rgba(34,25,25,.15),0 1px rgba(255,255,255,.8); 47 -moz-box-shadow:inset 0 1px rgba(34,25,25,.15),0 1px rgba(255,255,255,.8); 48 -webkit-box-shadow:inset 0 1px rgba(34,25,25,.15),0 1px rgba(255,255,255,.8); 49 50 -webkit-transition:all .08s ease-in-out; 51 -moz-transition:all .08s ease-in-out; 52 } 53 .FancyForm textarea{min-height:3.95em;line-height:1.3} 54 .FancyForm label{ 55 position:absolute;z-index:2;top:7px;left:13px;display:block;color:#BCBCBC;cursor:text; 56 57 -moz-user-select:none; 58 -webkit-user-select:none; 59 60 -moz-transition:all .16s ease-in-out; 61 -webkit-transition:all .16s ease-in-out; 62 } 63 .FancyForm .fff{ 64 position:absolute;z-index:1;top:0;right:0;left:3px;bottom:0;background-color:#fff; 65 66 border-radius:8px; 67 -moz-border-radius:8px; 68 -webkit-border-radius:8px; 69 } 70 .FancyForm input[type=text]:focus+label,.FancyForm input[type=password]:focus+label,.FancyForm textarea:focus+label{opacity:.5;filter:alpha(opacity="50");} 71 .FancyForm .val label{left:-9999px;opacity:0!important;filter:alpha(opacity="0")!important;} 72 73 .Button{ 74 position:relative; 75 display:inline-block; 76 padding:.45em .825em .45em; 77 text-align:center; 78 line-height:1em; 79 border:1px solid transparent; 80 cursor:pointer; 81 82 border-radius:.3em; 83 -moz-border-radius:.3em; 84 -webkit-border-radius:.3em; 85 86 -moz-transition-property:color, -moz-box-shadow, text-shadow; 87 -moz-transition-duration:.05s; 88 -moz-transition-timing-function:ease-in-out; 89 -webkit-transition-property:color, -webkit-box-shadow, text-shadow; 90 -webkit-transition-duration:.05s; 91 -webkit-transition-timing-function:ease-in-out; 92 93 box-shadow:0 1px rgba(255,255,255,0.8), inset 0 1px rgba(255,255,255,0.35); 94 -moz-box-shadow:0 1px rgba(255,255,255,0.8), inset 0 1px rgba(255,255,255,0.35); 95 -webkit-box-shadow:0 1px rgba(255,255,255,0.8), inset 0 1px rgba(255,255,255,0.35); 96 } 97 98 .Button:hover {text-decoration:none;} 99 .Button strong {position:relative; z-index:2;} 100 101 .Button{ 102 display:block;border:1px solid;opacity:1; 103 104 border-radius:.3em; 105 -moz-border-radius:.3em; 106 -webkit-border-radius:.3em; 107 108 box-shadow:inset 0 1px rgba(255,255,255,0.35); 109 -moz-box-shadow:inset 0 1px rgba(255,255,255,0.35); 110 -webkit-box-shadow:inset 0 1px rgba(255,255,255,0.35); 111 112 -moz-transition-property:opacity; 113 -moz-transition-duration:0.5s; 114 -moz-transition-timing-function:ease-in-out; 115 -webkit-transition-property:opacity; 116 -webkit-transition-duration:0.5s; 117 -webkit-transition-timing-function:ease-in-out; 118 } 119 120 .Button:hover span{ 121 -moz-transition-property:opacity; 122 -moz-transition-duration:0.05s; 123 -moz-transition-timing-function:linear; 124 -webkit-transition-property:opacity; 125 -webkit-transition-duration:0.05s; 126 -webkit-transition-timing-function:linear; 127 } 128 .Button:active span{ 129 -moz-transition:none; 130 -webkit-transition:none; 131 } 132 133 .RedButton{color:#fcf9f9; text-shadow:0 -1px rgba(34,25,25,0.5);} 134 .RedButton:hover {color:#fff; text-shadow:0 -1px rgba(34,25,25,0.3);} 135 .RedButton:active {color:#f2f0f0; text-shadow:0 -1px rgba(34,25,25,0.6);} 136 137 .RedButton{ 138 border-color:#015E91; 139 background-color:#3693D5; 140 background:-moz-linear-gradient(center top , #54B1EB, #47A0E0 50%, #419FE1 50%, #3683D5); 141 background:-o-linear-gradient(top left, #54B1EB, #47A0E0 50%, #419FE1 50%, #3683D5); 142 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#54B1EB), to(#47A0E0), color-stop(.5,#419FE1),color-stop(.5,#3683D5)); 143 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#54B1EB', endColorstr='#3683D5'); 144 } 145 146 .RedButton:hover{ 147 border-color:#0366AD; 148 background-color:#3EA1D6; 149 background:-moz-linear-gradient(center top, #5EB4EA, #61A1EE 50%, #59A5EB 50%, #3691E6); 150 background:-o-linear-gradient(top left, #5EB4EA, #61A1EE 50%, #59A5EB 50%, #3691E6); 151 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#5EB4EA), to(#61A1EE), color-stop(.5,#59A5EB),color-stop(.5,#3691E6)); 152 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5EB4EA', endColorstr='#3691E6'); 153 } 154 155 .RedButton:active{ 156 border-color:#013B6A; 157 background-color:#3089C8; 158 background:-moz-linear-gradient(center top, #4B9CDD, #4189D5 50%, #3D8BD3 50%, #3093C8); 159 background:-o-linear-gradient(top left, #4B9CDD, #4189D5 50%, #3D8BD3 50%, #3093C8); 160 background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4B9CDD), to(#4189D5), color-stop(.5,#3D8BD3),color-stop(.5,#3093C8)); 161 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B9CDD', endColorstr='#3093C8'); 162 } 163 164 .RedButton.Button18:hover{ 165 box-shadow:0 1px rgba(255, 255, 255, 0.8), 0 1px rgba(255, 255, 255, 0.35) inset, 0 0 10px rgba(82, 162, 235, 0.25); 166 -moz-box-shadow:0 1px rgba(255, 255, 255, 0.8), 0 1px rgba(255, 255, 255, 0.35) inset, 0 0 10px rgba(82, 162, 235, 0.25); 167 -webkit-box-shadow:0 1px rgba(255, 255, 255, 0.8), 0 1px rgba(255, 255, 255, 0.35) inset, 0 0 10px rgba(82, 162, 235, 0.25); 168 } 169 .RedButton.Button18:active{ 170 box-shadow:0 1px 2px rgba(34, 25, 25, 0.25) inset, 0 0 3px rgba(82, 202, 235, 0.35); 171 -moz-box-shadow:0 1px 2px rgba(34, 25, 25, 0.25) inset, 0 0 3px rgba(82, 202, 235, 0.35); 172 -webkit-box-shadow:0 1px 2px rgba(34, 25, 25, 0.25) inset, 0 0 3px rgba(82, 202, 235, 0.35); 173 } 174 .login .stext{padding:6px 12px;width:380px;border:1px solid #a4a2a2;} 175 176 177 .default-tag a,.default-tag a span,.plus-tag a,.plus-tag a em,.plus-tag-add a{background:url(images/tagbg.png) no-repeat;} 178 .tagbtn a{color:#333333;display:block;float:left;height:22px;line-height:22px;overflow:hidden;margin:0 10px 10px 0;padding:0 10px 0 5px;white-space:nowrap;} 179 180 .default-tag{padding:16px 0 0 0;} 181 .default-tag a{background-position:100% 0;} 182 .default-tag a:hover{background-position:100% -22px;} 183 .default-tag a span{padding:0 0 0 11px;background-position:0 -60px;} 184 .default-tag a:hover span{background-position:0 -98px;} 185 .default-tag a.selected{opacity:0.6;filter:alpha(opacity=60);} 186 .default-tag a.selected:hover{background-position:100% 0;cursor:default;} 187 .default-tag a.selected:hover span{background-position:0 -60px;} 188 189 .plus-tag{padding:0 0 10px 0;} 190 .plus-tag a{background-position:100% -22px;} 191 .plus-tag a span{float:left;} 192 .plus-tag a em{display:block;float:left;margin:5px 0 0 8px;width:13px;height:13px;overflow:hidden;background-position:-165px -100px;cursor:pointer;} 193 .plus-tag a:hover em{background-position:-168px -64px;} 194 195 .plus-tag-add li{height:70px;position:relative;margin: 40px 0 196 } 197 .plus-tag-add li .label{ 198 position:absolute; 199 left:-110px;top:7px;display:block; 200 color: gray; 201 } 202 .plus-tag-add button{float:left;} 203 .plus-tag-add a{float:left;margin:12px 0 0 20px;display:inline;font-size:18px;background-position:-289px -59px;padding:0 0 0 16px;} 204 .plus-tag-add a.plus{background-position:-289px -96px;}
写得比较简单，前端才入门，希望各位大佬多加指点。
