html1.0+css+photoshop实例
天天生鲜首页：
天天生鲜登录页：
前端页面开发流程
1、创建页面项目目录
2、使用Photoshop对效果图切图，切出网页制作中需要的小图片
3、将装饰类图像合并，制作成雪碧图
4、结合Photoshop和代码编辑器，参照效果图，进行html和css代码书写，制作页面
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!--快捷键html:xt--> 3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 6 <title>天天生鲜-首页</title> 7 8 <link rel="stylesheet" type="text/css" href="css/reset.css"> 9 <link rel="stylesheet" type="text/css" href="css/main.css"> 10 </head> 11 <body> 12 <!--顶部状态条样式 --> 13 <div class="header_con"> 14 <div class="header"> 15 <div class="welcome fl">欢迎来到天天生鲜！</div> 16 <div class="user_info fr"> 17 18 <div class="user_login_link fl" style="display:block"> 19 <a href="">登录</a> 20 <span>|</span> 21 <a href="">注册</a> 22 </div> 23 24 <div class="user_welcome fl" style="display:none"> 25 欢迎您:<em>张三</em> 26 </div> 27 28 <div class="user_shopping fl"> 29 <span>|</span> 30 <a href="">我的购物车</a> 31 <span>|</span> 32 <a href="">我的订单</a> 33 </div> 34 35 </div> 36 </div> 37 </div> 38 39 40 <!--logo、搜索、购物车样式--> 41 <div class="logo_bar"> 42 <div class="logo fl"> 43 <a href="#"><img src="images/logo.png" alt="logo"/></a> 44 </div> 45 <div class="search fl"> 46 <input type="text" name="search" placeholder="搜索" class="input_text fl"> <!-- placeholder给默认提示语--> 47 <input type="button" name="" value="搜索" class="input_btn fr"> 48 </div> 49 <div class="chart fr"> 50 <a href="#" class="fl">我的购物车</a> <!-- 有浮动可以将a自动转为行内块元素，可以设置高宽--> 51 <span class="fr">0</span> 52 </div> 53 </div> 54 55 56 <!--商品横向菜单栏--> 57 <div class="sub_menu_con"> 58 <div class="sub_menu"> 59 <h1 class="fl">全部商品分类</h1> 60 <ul class="fl"> 61 <li><a href="">首页</a></li> 62 <li><a href="">手机生鲜</a></li> 63 <li><a href="">抽奖</a></li> 64 </ul> 65 </div> 66 </div> 67 68 69 <!--商品纵向菜单栏--> 70 <div class="center_con"> 71 <ul class="main_menu fl"> 72 <li><a href="" class="fruit">新鲜水果</a></li> 73 <li><a href="" class="seafood">海鲜水产</a></li> 74 <li><a href="" class="meat">猪牛羊肉</a></li> 75 <li><a href="" class="egg">禽类蛋品</a></li> 76 <li><a href="" class="vegetable">新鲜蔬菜</a></li> 77 <li><a href="" class="ice">速冻食品</a></li> 78 </ul> 79 80 <!--幻灯片--> 81 <div class="slide_con fl"> 82 <ul class="slide"> 83 <li><a href=""><img src="images/slide.jpg" alt="幻灯片" /></a></li> 84 </ul> 85 86 <div class="prev"></div> 87 <div class="next"></div> 88 89 <ul class="points"> 90 <li class="active"></li> 91 <li></li> 92 <li></li> 93 <li></li> 94 <li></li> 95 <li></li> 96 </ul> 97 </div> 98 99 <!--广告栏--> 100 <div class="adv fl"> 101 <a href=""><img src="images/adv01.jpg" alt="广告"/></a> 102 <a href=""><img src="images/adv02.jpg" alt="广告"/></a> 103 </div> 104 </div> 105 106 107 <!--商品图片--> 108 <div class="common_model"> 109 <div class="common_title"> 110 <h3 class="fl">新鲜水果 </h3> 111 <ul class="fl"> 112 <li>|</li> 113 <li><a href="">鲜芒</a></li> 114 <li><a href="">加州提子</a></li> 115 <li><a href="">亚马逊牛油果</a></li> 116 </ul> 117 <a href="" class="more fr">查看更多 ></a> 118 </div> 119 120 <div class="common_goods_list"> 121 <div class="goods_banner fl"><img src="images/banner01.jpg" alt="商品banner"/></div> 122 <ul class="goods_list fl"> 123 <li> 124 <h4>草莓</h4> 125 <a href="#"><img src="images/goods_pic.jpg" alt="商品图片"/></a> 126 <p>¥ 38.00</p> 127 </li> 128 <li> 129 <h4>草莓</h4> 130 <a href="#"><img src="images/goods_pic.jpg" alt="商品图片"/></a> 131 <p>¥ 38.00</p> 132 </li> 133 <li> 134 <h4>草莓</h4> 135 <a href="#"><img src="images/goods_pic.jpg" alt="商品图片"/></a> 136 <p>¥ 38.00</p> 137 </li> 138 <li> 139 <h4>草莓</h4> 140 <a href="#"><img src="images/goods_pic.jpg" alt="商品图片"/></a> 141 <p>¥ 38.00</p> 142 </li> 143 </ul> 144 </div> 145 </div> 146 147 <div class="common_model"> 148 <div class="common_title"> 149 <h3 class="fl">海鲜水产 </h3> 150 <ul class="fl"> 151 <li>|</li> 152 <li><a href="">鲜芒</a></li> 153 <li><a href="">加州提子</a></li> 154 <li><a href="">亚马逊牛油果</a></li> 155 </ul> 156 <a href="" class="more fr">查看更多 ></a> 157 </div> 158 159 <div class="common_goods_list"> 160 <div class="goods_banner fl"><img src="images/banner02.jpg" alt="商品banner"/></div> 161 <ul class="goods_list fl"> 162 <li> 163 <h4>草莓</h4> 164 <a href="#"><img src="images/goods_pic.jpg" alt="商品图片"/></a> 165 <p>¥ 38.00</p> 166 </li> 167 <li> 168 <h4>草莓</h4> 169 <a href="#"><img src="images/goods_pic.jpg" alt="商品图片"/></a> 170 <p>¥ 38.00</p> 171 </li> 172 <li> 173 <h4>草莓</h4> 174 <a href="#"><img src="images/goods_pic.jpg" alt="商品图片"/></a> 175 <p>¥ 38.00</p> 176 </li> 177 <li> 178 <h4>草莓</h4> 179 <a href="#"><img src="images/goods_pic.jpg" alt="商品图片"/></a> 180 <p>¥ 38.00</p> 181 </li> 182 </ul> 183 </div> 184 </div> 185 186 <div class="common_model"> 187 <div class="common_title"> 188 <h3 class="fl">猪牛羊肉 </h3> 189 <ul class="fl"> 190 <li>|</li> 191 <li><a href="">鲜芒</a></li> 192 <li><a href="">加州提子</a></li> 193 <li><a href="">亚马逊牛油果</a></li> 194 </ul> 195 <a href="" class="more fr">查看更多 ></a> 196 </div> 197 198 <div class="common_goods_list"> 199 <div class="goods_banner fl"><img src="images/banner03.jpg" alt="商品banner"/></div> 200 <ul class="goods_list fl"> 201 <li> 202 <h4>草莓</h4> 203 <a href="#"><img src="images/goods_pic.jpg" alt="商品图片"/></a> 204 <p>¥ 38.00</p> 205 </li> 206 <li> 207 <h4>草莓</h4> 208 <a href="#"><img src="images/goods_pic.jpg" alt="商品图片"/></a> 209 <p>¥ 38.00</p> 210 </li> 211 <li> 212 <h4>草莓</h4> 213 <a href="#"><img src="images/goods_pic.jpg" alt="商品图片"/></a> 214 <p>¥ 38.00</p> 215 </li> 216 <li> 217 <h4>草莓</h4> 218 <a href="#"><img src="images/goods_pic.jpg" alt="商品图片"/></a> 219 <p>¥ 38.00</p> 220 </li> 221 </ul> 222 </div> 223 </div> 224 225 226 <!--底部文字--> 227 <div class="footer"> 228 <div class="links"> 229 <a href="">关于我们</a> 230 <span>|</span> 231 <a href="">联系我们</a> 232 <span>|</span> 233 <a href="">招聘人才</a> 234 <span>|</span> 235 <a href="">友情链接</a> 236 237 <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved<br /> 238 电话：010-****888 京ICP备*******8号</p> 239 </div> 240 </div> 241 242 </body> 243 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!--快捷键html:xt--> 3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 6 <title>天天生鲜-登录页</title> 7 8 <link rel="stylesheet" type="text/css" href="css/reset.css"> 9 <link rel="stylesheet" type="text/css" href="css/main.css"> 10 </head> 11 <body> 12 13 <!--顶部条--> 14 <div class="login_header clearfix"> <!--这里的clearfix为了清除logo_login.png设置margin-top而造成的塌陷--> 15 <a href="#"><img src="images/logo_login.png" alt="logo"/></a> 16 </div> 17 18 19 <!--中间部分--> 20 <div class="login_form_con"> 21 <div class="login_form"> 22 <img src="images/banner_login.png" alt="imag1" class="login_banner fl"> 23 24 <p class="slogan fl">日夜兼程·急速送达</p> 25 26 <!--登录表单--> 27 <div class="form_input_con fr"> 28 <div class="form_title"> 29 <h1>会员登录</h1> 30 <a href="#">立即注册</a> 31 </div> 32 33 <form> 34 <div class="form_group"> 35 <input type="text" name="username" class="input_txt" placeholder="请输入用户名"> 36 <span class="error">文字提示</span> 37 </div> 38 39 <div class="form_group"> 40 <input type="password" name="pwd" class="input_pwd" placeholder="请输入用户名"> 41 <span class="error">文字提示</span> 42 </div> 43 44 <div class="form_group1"> 45 <input type="checkbox" name="remember" id="remember" class="input_check fl"> 46 <label for="remember" class="fl">记住用户名</label> <!-- for和id联合使用，点击“记住用户名”这几个字的位置，可以将选择框置为勾选状态--> 47 <a href="#" class="find_pass fr">忘记密码</a> 48 </div> 49 50 <input type="submit" name="" value="登 录" class="input_sub"> 51 </form> 52 53 </div> 54 </div> 55 </div> 56 57 58 <!--底部文字--> 59 <div class="footer"> 60 <div class="links"> 61 <a href="">关于我们</a> 62 <span>|</span> 63 <a href="">联系我们</a> 64 <span>|</span> 65 <a href="">招聘人才</a> 66 <span>|</span> 67 <a href="">友情链接</a> 68 69 <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved<br /> 70 电话：010-****888 京ICP备*******8号</p> 71 </div> 72 </div> 73 74 </body> 75 </html>
1 /* 将标签默认的间距设置为0 */ 2 body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,input,select,form{ 3 margin:0; 4 padding:0; 5 } 6 7 /* 让h标签继承body内设置的字体大小 */ 8 h1,h2,h3,h4,h5,h6{ 9 font-size:100%; 10 } 11 12 /* 去掉默认的项目图标 */ 13 ul{ 14 list-style:none; 15 } 16 17 a{ 18 text-decoration:none; 19 } 20 21 em{ 22 font-style:normal; 23 } 24 25 /* 去掉IE下，图片做链接时产生的边框 */ 26 img{ 27 border:none; 28 } 29 30 /* 清除margin-top塌陷和清除浮动 */ 31 .clearfix:before,.clearfix:after{ 32 content:""; 33 display:table; 34 } 35 .clearfix:after{ 36 clear:both; 37 } 38 .clearfix{ 39 zoom:1; 40 } 41 42 /* 浮动 */ 43 .fl{ 44 float:left; 45 } 46 47 .fr{ 48 float:right; 49 }
1 body{ 2 font-family:"微软雅黑"; 3 font-size:11px; 4 color:#666; 5 } 6 7 /* ------------------------首页样式----------------------------- */ 8 9 /* 顶部状态条样式 */ 10 .header_con{ 11 height:29px; 12 border-bottom:1px solid #ddd; 13 background-color:#f7f7f7; 14 } 15 16 .header{ 17 width:1200px; 18 height:29px; 19 margin:0px auto; 20 } 21 22 .welcome{ 23 font:11px/29px "微软雅黑"; /* 居中 */ 24 } 25 26 .user_login_link,.user_welcome,.user_shopping{ 27 line-height:29px; /* 居中 */ 28 } 29 30 .user_login_link span,.user_shopping span{ 31 margin:0 15px; 32 color:#cecece; 33 } 34 35 .user_login_link a:hover,.user_shopping a:hover{ 36 color:#f80; 37 } 38 39 .user_welcome em{ 40 color:#f80; 41 } 42 43 .user_welcome{ 44 display:none; 45 } 46 47 48 /* logo、搜索、购物车样式 */ 49 .logo_bar{ 50 width:1200px; 51 height:115px; 52 margin:0 auto; 53 /*background-color:gold;*/ 54 } 55 56 .logo{ 57 width:151px; 58 height:59px; 59 margin:29px 0 0 17px; 60 } 61 62 .search{ 63 width:616px; 64 height:38px; 65 border:1px solid #37ab40; 66 margin:34px 0 0 123px; 67 background:url(../images/icons.png) 8px 9px no-repeat; 68 } 69 70 .search .input_text{ 71 width:470px; 72 height:38px; 73 margin-left:37px; 74 border:0px; /* 将输入框自带的border设置为0 */ 75 outline:none; /* 将输入框自带的边框样式设置为none */ 76 } 77 78 .search .input_btn{ 79 width:100px; 80 height:38px; 81 background-color:#37ab40; 82 border:0px; /* 将输入框自带的border设置为0 */ 83 font:14px/38px "微软雅黑"; 84 color:#fff; 85 cursor:pointer; /* 将鼠标变为手 */ 86 } 87 88 .chart{ 89 width:200px; 90 height:40px; 91 margin-top:34px; 92 /*background-color:gold;*/ 93 } 94 95 .chart a{ 96 width:158px; 97 height:38px; 98 /*background-color:#f7f7f7;*/ 99 border:1px solid #ddd; 100 background:url(../images/icons.png) 17px -42px no-repeat #f7f7f7; /* 单独写background-color不生效，需要将背景颜色写在这里 */ 101 font:14px/38px "微软雅黑"; 102 color:#37ab40; 103 text-indent:56px; /* 将字前面空56个像素，为了避免背景图和字叠加在一起 */ 104 } 105 106 .chart span{ 107 width:40px; 108 height:40px; 109 background-color:#f80; 110 font:bold 14px/40px "微软雅黑"; /*字体加粗，纵向居中*/ 111 color:#fff; 112 text-align:center; /*横向居中*/ 113 } 114 115 116 /*商品横向菜单栏*/ 117 .sub_menu_con{ 118 height:40px; 119 /*background-color:gold;*/ 120 border-bottom:2px solid #37ab40; 121 } 122 123 .sub_menu{ 124 width:1200px; 125 height:40px; 126 /*background-color:gold;*/ 127 margin:0 auto; 128 } 129 130 .sub_menu h1{ 131 width:200px; 132 height:40px; 133 background-color:#37ab40; 134 font:14px/40px "微软雅黑"; 135 color:#fff; 136 text-align:center; /*横向居中*/ 137 } 138 139 .sub_menu ul{ 140 overflow:hidden; 141 } 142 143 .sub_menu li{ 144 float:left; /*左浮动，li自动转为行内块元素*/ 145 /*background-color:gold;*/ 146 padding:0 25px; 147 height:14px; /*这里高设置这么矮是为了加上|这条线用，|这条线和字体的高度是一样的*/ 148 margin-top:13px; /*和height结合使用，为了将li行内块纵向居中*/ 149 border-left:1px solid #666; /*border方式加上|这条线*/ 150 margin-left:-1px; /*为了去掉“首页”左边那条|，和overflow结合使用，裁剪多余的*/ 151 } 152 153 .sub_menu li a{ 154 font:14px/14px "微软雅黑"; 155 color:#666; 156 } 157 158 .sub_menu li a:hover{ 159 color:#f80; 160 } 161 162 163 /*商品纵向菜单栏*/ 164 .center_con{ 165 width:1200px; 166 height:270px; 167 /*background-color:gold;*/ 168 margin:0 auto; 169 } 170 171 .center_con .main_menu{ 172 width:200px; 173 height:270px; 174 margin:0 auto; 175 overflow:hidden; /*和margin-top:-1px结合使用，裁剪“新鲜水果”上面那条线*/ 176 } 177 178 .center_con .main_menu li{ 179 width:198px; 180 height:44px; 181 border:1px solid #eee; 182 margin-top:-1px; /*去掉每个li块元素重合*/ 183 background:url(../images/icons.png) 166px -385px no-repeat; 184 } 185 186 .center_con .main_menu li a{ /*将a转为块元素，将a的宽和高设置成li一样的，是为了增加除了点击字体，点击其他地方也可以触发链接的效果*/ 187 display:block; 188 width:198px; 189 height:44px; 190 font:14px/44px "微软雅黑"; 191 color:#666; 192 text-indent:71px; /* 将字前面空71个像素，为了避免背景图和字叠加在一起 */ 193 background:url(../images/icons.png) 31px 0px no-repeat; 194 } 195 196 .center_con .main_menu li .fruit{ 197 background-position:33px -90px; 198 } 199 200 .center_con .main_menu li .seafood{ 201 background-position:33px -140px; 202 } 203 204 .center_con .main_menu li .meat{ 205 background-position:33px -190px; 206 } 207 208 .center_con .main_menu li .egg{ 209 background-position:33px -240px; 210 } 211 212 .center_con .main_menu li .vegetable{ 213 background-position:33px -290px; 214 } 215 216 .center_con .main_menu li .ice{ 217 background-position:33px -340px; 218 } 219 220 221 /*幻灯片*/ 222 .slide_con{ 223 width:760px; 224 height:270px; 225 position:relative; 226 } 227 228 .prev,.next{ 229 width:15px; 230 height:23px; 231 position:absolute; /*使用相对定位，将左右箭头放在幻灯片外面*/ 232 left:11px; 233 top:122px; 234 background:url(../images/icons.png) -1px -451px no-repeat; 235 cursor:pointer; /* 将鼠标变为手 */ 236 } 237 238 .next{ 239 left:732px; 240 background:url(../images/icons.png) -1px -501px no-repeat; 241 } 242 243 .points{ 244 position:absolute; /*相对定位将ul块元素转为了行内块元素，如果没有设置宽高，宽高由内容决定。所以width和height必须要设置，否则看不到这块*/ 245 width:100%; /*继承了父元素的宽度 */ 246 height:11px; 247 left:0; 248 bottom:9px; 249 text-align:center; /*子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式*/ 250 font-size:0px; /*将行内块元素之间的空隙去掉*/ 251 /*background-color:gold;*/ 252 } 253 254 .points li{ 255 width:11px; 256 height:11px; 257 display:inline-block; /*将li设置为行内块元素*/ 258 background-color:#9f9f9f; 259 margin:0 5px; 260 border-radius:50%; /*将方块变为圆形*/ 261 } 262 263 .points .active{ 264 background-color:#cecece; 265 } 266 267 268 /*广告栏*/ 269 .adv{ 270 width:240px; 271 height:270px; 272 } 273 274 .adv a{ 275 float:left; 276 width:240px; 277 height:135px; 278 } 279 280 .adv a img{ 281 display:block; /* 解决图片下方可能出现3像素空白的bug */ 282 } 283 284 285 /*商品图片*/ 286 .common_model{ 287 width:1200px; 288 height:340px; 289 margin:18px auto 0; 290 } 291 292 .common_model .common_title{ 293 height:38px; 294 border-bottom:2px solid #42ad46; 295 /*background-color:gold;*/ 296 } 297 298 .common_model .common_title h3{ 299 font:bold 16px/38px "微软雅黑"; 300 color:#37ab40; 301 } 302 303 .common_model .common_title ul{ 304 height:12px; 305 margin:12px 0 0 20px; 306 } 307 308 .common_model .common_title li{ 309 float:left; 310 margin:0 10px; 311 } 312 313 .common_model .common_title li a{ 314 color:#666; 315 font-size:12px; 316 } 317 318 .common_model .common_title li a:hover,.common_model .common_title .more:hover{ /*字变颜色动态效果*/ 319 color:#f80; 320 } 321 322 .common_model .common_title .more{ 323 height:38px; 324 line-height:38px; /*纵向居中*/ 325 } 326 327 .common_model .common_goods_list{ 328 height:300px; 329 } 330 331 .common_model .common_goods_list .goods_banner{ 332 width:200px; 333 height:300px; 334 } 335 336 .common_model .common_goods_list .goods_list{ 337 width:1000px; 338 height:300px; 339 } 340 341 .common_model .common_goods_list .goods_list li{ 342 float:left; 343 width:249px; 344 height:299px; 345 border-right:1px solid #ededed; 346 border-bottom:1px solid #ededed; 347 } 348 349 .common_model .common_goods_list .goods_list li:hover{ /*模块变化动态效果*/ 350 width:248px; 351 height:298px; 352 border:1px solid #ff0; 353 } 354 355 .common_model .common_goods_list .goods_list li h4{ 356 height:52px; 357 font:14px/52px "微软雅黑"; 358 color:#666; 359 text-align:center; 360 } 361 362 .common_model .common_goods_list .goods_list li a{ 363 display:block; 364 width:180px; 365 height:180px; 366 margin:0 auto; 367 } 368 369 .common_model .common_goods_list .goods_list li p{ 370 height:52px; 371 font:bold 14px/52px "微软雅黑"; 372 color:#c40000; 373 text-align:center; 374 } 375 376 /*底部文字*/ 377 .footer{ 378 height:145px; 379 border-top:2px solid #4ab14e; 380 margin-top:30px; 381 } 382 383 .footer .links{ 384 margin-top:40px; 385 text-align:center; 386 } 387 388 .footer .links a{ 389 color:#4e4e4e; 390 } 391 392 .footer .links a:hover{ 393 color:#f80; 394 } 395 396 .footer .links span{ 397 color:#4e4e4e; 398 margin:0px 10px; /*内联元素支持部分样式（不支持宽、高、margin上下、padding上下）。支持margin左右，所以这里没有转为块元素*/ 399 } 400 401 .footer p{ 402 line-height:27px; 403 margin-top:10px; 404 color:#4e4e4e; 405 /*background-color:gold;*/ 406 } 407 408 409 /* ------------------------登录页样式----------------------------- */ 410 411 /*顶部条*/ 412 .login_header{ 413 width:956px; 414 height:133px; 415 margin:0px auto; 416 /*background-color:gold;*/ 417 } 418 419 .login_header a{ 420 display:block; 421 width:194px; 422 height:79px; 423 margin-top:29px; 424 /*background-color:red;*/ 425 } 426 427 /*中间部分*/ 428 .login_form_con{ 429 height:482px; 430 background-color:#518e17; 431 border-top:1px solid #79a652; 432 border-bottom:1px solid #79a652; 433 } 434 435 .login_form_con .login_form{ 436 width:956px; 437 height:482px; 438 margin:0 auto; 439 } 440 441 .login_form .login_banner{ 442 margin-top:88px; 443 } 444 445 .login_form .slogan{ 446 width:30px; 447 height:307px; 448 margin:87px 0 0 85px; 449 font:30px/36px "微软雅黑"; 450 color:#ffffff; 451 text-align:center; /*字体居中*/ 452 } 453 454 .login_form .form_input_con{ 455 width:370px; 456 height:382px; 457 background-color:#ffffff; 458 margin-top:50px; 459 border:1px solid #c6c6c5; 460 } 461 462 .form_input_con .form_title{ 463 width:308px; 464 height:77px; 465 border-bottom:1px solid #e0e0e0; 466 margin:0px auto 0; 467 } 468 469 .form_input_con .form_title h1{ 470 float:left; 471 font:bold 24px/77px "微软雅黑"; 472 color:#a8a8a8; 473 margin-left:34px; 474 /*background-color:gold;*/ 475 } 476 477 .form_input_con .form_title a{ 478 float:left; 479 width:94px; 480 height:17px; 481 font:bold 17px/17px "微软雅黑"; 482 color:#5fb42a; 483 margin:35px 0 0 61px; 484 text-indent:25px; 485 background:url(../images/icons.png) -1px -551px no-repeat; 486 /*background-color:gold;*/ 487 } 488 489 /*登录表单*/ 490 .form_input_con form{ 491 width:309px; 492 height:218px; 493 margin:19px auto 0; 494 /*background-color:gold;*/ 495 } 496 497 .form_input_con form .form_group{ 498 width:309px; 499 height:65px; 500 } 501 502 .form_input_con form .form_group1{ 503 width:309px; 504 height:40px; 505 } 506 507 .form_group .input_txt,.form_group .input_pwd{ 508 width:307px; 509 height:38px; 510 border:1px solid #e0e0e0; 511 background:url(../images/icons.png) 275px -592px no-repeat #f8f8f8; 512 outline:none; /*去掉input自带的输入框选择效果*/ 513 text-indent:10px; /*首行缩进10px*/ 514 } 515 516 .form_group .input_pwd{ 517 background-position:275px -642px; 518 } 519 520 .form_group .error{ 521 font:12px/25px "微软雅黑"; 522 color:#ff5400; 523 display:none; /*先隐藏提示文字*/ 524 } 525 526 .form_group1 .input_check{ 527 margin:2px 10px 0 0; 528 } 529 530 .form_group1 .find_pass{ 531 color:#4b4b4b; 532 } 533 534 .form_group1 .find_pass:hover{ 535 color:#f80; 536 } 537 538 .input_sub{ 539 width:309px; 540 height:40px; 541 border:0px; 542 background-color:#47aa34; 543 font:24px/40px 'Microsoft Yahei'; 544 color:#fff; 545 cursor:pointer; 546 } 547 548 /*底部文字*/ 549 .footer{ 550 margin-top:0px; 551 border-top:0px; 552 }
posted on 2019-11-24 09:19 cherry_ning 阅读(191) 评论(0) 收藏 举报
浙公网安备 33010602011771号