css-9.仿京东注册页面

来源：互联网发布：淘宝网连衣裙图片编辑：程序博客网时间：2024/06/05 19:00

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link href="css/new_file.css" rel="stylesheet" type="text/css" /></head><body><div id="navi">导航</div><div id="header"><div class="bg"></div><span class="welcom">欢迎注册</span></div><div id="tabs">tab部分</div><div id="content"><div class="bg_position"><div class="bg_text">企业用户注册</div><div class="bg"></div></div><div class="line"><span class="text"><b>*</b>用户名：</span><span class="ipt"><input class="kuang1 user"> </input></span><span class="dsp">4-20位数字和字母组成</span></div><div class="line"><span class="text"><b>*</b>密码：</span><span class="ipt"><input class="kuang1 pwd" type="password"> </input></span><span class="dsp">4-20位数字和字母组成</span></div><div class="line"><span class="text"><b>*</b>密码：</span><span class="ipt"><input class="kuang1 pwd" type="password"> </input></span><span class="dsp">4-20位数字和字母组成</span></div><div class="line"><span class="text"><b>*</b>密码：</span><span class="ipt"><input class="kuang1 pwd" type="password"> </input></span><span class="dsp">4-20位数字和字母组成</span></div><div class="line"><span class="text"><b>*</b>短信验证码：</span><span class="ipt"><input class="kuang1 yanzhengma"> </input></span><span class="dsp yzm">获取短信验证码</span></div><div class="xieye"><span class="text"><input type="checkbox"  />我已经同意<span class="texieyi">用户注册协议</span></span></div><div class="divzhuce"><input class="zhuce" type="button" value="立即注册" /></div></div><div id="footer">底部</div></body></html>

css

body {font-size: 12px;color: #666;background: #f2f2f2;font-family: arial, sans-serif;}* {margin: 0;padding: 0;list-style: none;}#navi {width: 100%;height: 30px;border-bottom: 1px solid #eee;background: #fafafa;line-height: 30px;}#tabs,#header,#content,#footer {width: 990px;margin: 0 auto;/*居中*/}#tabs {height: 33px;line-height: 33px;}#header {padding: 10px 0;}#header .bg {background: url(../img/icon.png);width: 150px;height: 50px;background-repeat: no-repeat;float: left;}#header .welcom {font-size: 25px;border-left: 1px solid #ddd;margin-top: 15px;float: left;}#tabs {clear: both;}#content {background: #fff;padding-top: 40px;padding-bottom: 20px;border: 1px solid #ddd;border-top: none;/*顶部边框没有*/height: 400px;}#content .bg {background: url(../img/icon.png) no-repeat 770px 0px;width: 35px;height: 38px;background-repeat: no-repeat;background-position: 0px -45px;float: right;}#content .bg_text {margin: 10px;float: right;}.line {width: 750px;height: 60px;padding-top: 9px;}.line span {float: left;/*行内元素不能定宽高，设置这个让他可以设置*/height: 34px;line-height: 34px;}.text {width: 190px;/*撑开，距离左边*/text-align: right;/*位置靠右*/font-size: 14px;color: #999;padding-right: 10px;}.kuang1 {width: 238px;height: 16px;color: #999;padding: 10px 25px 10px 5px;/*大小撑开了*/border: 1px solid #ddd;background-position: 238px center;/*背景图的位置*/background-repeat: no-repeat;}.user {background-image: url(../img/head2.png);background-size: 25px 25px;background-repeat: no-repeat;}.kuang1:focus {/*:focus选择器用于选择具有焦点的元素。*/border-color: #7abd54;/*设置编辑框的颜色*/outline: none;/*把默认的边框去掉。outline（轮廓）是绘制于元素周围的*/}.divzhuce input:focus  {/*:focus选择器用于选择具有焦点的元素。*/border-color: #7abd54;/*设置编辑框的颜色*/outline: none;/*把默认的边框去掉。outline（轮廓）是绘制于元素周围yzm的*/}.dsp {background: #f7f7f7;border: 1px solid #ddd;width: 238px;height: 34px;padding: 1px 5px;margin-left: 5px;}.text b {color: red;margin-right: 2px;}.pwd {background-image: url(../img/head2.png);background-size: 25px 25px;background-repeat: no-repeat;}.yanzhengma {width: 100px;}.yzm {width: 100px;color: #ddd;text-align: center;}.texieyi {color: royalblue;}.xieye {width: 200px;margin: 0 auto;}.zhuce {height: 24px;/*输入框高度*/width: 200px;/*输入框宽度*/border: 1px solid #CDC28D;/* 输入框表框颜色*/background-color: #F2F9FD;/* 输入框背景颜色*//*输入框里的文字和输入框左边之间的距离*/margin-top: 10px;}.divzhuce {margin: 0 auto;width: 200px;}

阅读全文

0 0