程序博客网 > 淘宝可以直邮韩国么

div+css3纯手工制作登录页

来源：互联网发布：淘宝可以直邮韩国么编辑：程序博客网时间：2024/04/27 03:12

上午闲的没事干，手工制作了个登录，看图

重点是这个地方的制作！

好吧！第一次在这里编辑，不太顺手！不多说，上代码，页面部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>

</head>
<body>
<div class="login">
<div class="name">
<div class="nameLeft">
<div style=" width:100%; height:40%;">
<div class="nameLeftTop" ></div>
</div>
<div style=" width:100%; height:60%;">
<div class="nameLeftBoot"></div>
</div>
</div>
<input type="text" value="用户名" style="color:#CCCCCC"/>
</div>
<div class="pwd">
<div class="pwdLeft">
<div style=" width:100%; height:40%;">
<div class="pwdLeftTop" ></div>
</div>
<div style=" width:100%; height:60%;">
<div class="pwdLeftBoot"></div>
</div>
</div>
<input type="password" value="123456"></input>
</div>
</div>
</body>
</html>

css部分

<style type="text/css">
.login{width:300px;height:200px;
border:1px solid #CCCCFF;
margin:200px auto;
}
.name,.pwd{width:200px;height:28px; border:1px solid #FF6633;
margin:20px auto;
}
.nameLeft,.pwdLeft{ width:30px; height:100%;float:left;
background:#FF6633;
}
.name input,.pwd input{width:164px; height:26px; float:left; border-style:none; line-height:26px; padding-left:4px}
*:focus { outline: none; }

.pwdLeftTop{width:10px; height:8px; background:#FFFFFF;border-radius:4px 4px 2px 2px; margin:2px auto; z-index:1}
.pwdLeftTop:before{
width:6px;height:6px;
margin:2px 2px;
background:#FF6633;
border-radius:3px 3px 0px 0px;
z-index: 2;
position: absolute;
content: "";
}
.pwdLeftBoot{width:16px; height:14px; background:#FFFFFF; margin:-2px auto;border-radius:1px 1px 6px 6px ;}
.pwdLeftBoot:before{
z-index: 2;
position: absolute;
content: "";
width:4px; height:4px;
border-radius:2px;
background:#FF6633;
margin:2px 6px;
}
.pwdLeftBoot:after{
z-index: 2;
position: absolute;
content: "";
width:2px; height:4px;
border-radius:2px;
background:#FF6633;
margin:6px 7px;
}
.nameLeftTop{width:8px; height:8px; background:#FFFFFF;margin:3px auto; border-radius:5px}
.nameLeftBoot{width:16px; height:12px; background:#FFFFFF;margin:-1px auto; border-radius:14px 14px 1px 1px}
</style>

新人制作，写错的地方还请大牛指出！

0 0

淘宝可以直邮韩国么

淘宝可以直邮韩国么

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子悟空西游斗萌西游怎么确定婴儿斜颈图片怎么判断宝宝是不是斜颈如何自己排除宝宝斜颈斜风细雨细雨斜风作晓寒斜风斜风细雨不须归无处可逃汽车挡风玻璃为什么是斜的吊斜风症状斜风细雨不须归全诗风吹嘴歪眼斜斜风细雨的意思斜风细雨不须归的上一句吊斜风是怎么引起的吊斜风多长时间能恢复柳宣岳风赛风青箬笠绿蓑衣斜风细雨不须归斜齿轮齿条斜齿蜗轮蜗杆减速机斜齿斜齿轮硬齿面减速机单级斜齿圆柱齿轮减速器斝斝怎么读斝是什么意思斟不斟斟鄩斟怎么读低唱浅斟浅斟低酌斟读音斟怎么读音斟句酌的四字成语斟怎么读拼音什么斟句酌的四字成语斟海白扇隐藏如何触发斟酒