盒子模型之免费体验登录页面

最新推荐文章于 2022-10-27 19:58:36 发布

qq_33151859

最新推荐文章于 2022-10-27 19:58:36 发布

阅读量3.8k

点赞数 1

分类专栏： HTML基础编程题

本文链接：https://blog.csdn.net/qq_33151859/article/details/78214253

版权

HTML基础编程题专栏收录该内容

32 篇文章 13 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>免费体验登录页面</title>
<link href="css/Page_215_5.css" rel="stylesheet" type="text/css"  />
</head>
<body>
<div id="login">
<ul>
<li>
<span class="list">*</span>
<span>姓名:</span>
<input type="text" name="username"  />
</li>
<li>
<span class="list">*</span>
<span>邮箱:</span>
<input type="email" name="email"  />
</li>
<li>
<span class="list">*</span>
<span>电话:</span>
<input type="text" name="telphone"  />
</li>
<li>
<span>性别:</span>
<select >
<option selected="selected"><span>请选择</span></option>
<option>男</option>
<option>女</option>
</select>
</li>
<li>
<span>年龄:</span>
<select>
<option selected="selected"><span>请选择</span></option>
<option>20</option>
<option>21</option>
</select>
</li>
</ul>
<div id="button"></div>
</div>
</body>
</html>

//cssy样式
#login{
width:300px;
background: url(../img1/bg.jpg) 0px 0px no-repeat;;
margin: 0px auto;
border-radius: 5px;
}
ul{
list-style: none;
padding-top: 80px;
}
li{
height: 30px;
line-height: 30px;
}
span{

color: white;
font-size: 12px;
}
.list{

color: red;
}
ul li input,select{
border-radius: 5px;
}


select{
border-radius: 5px;
}


#button{
height: 40px;
width: 150px;
background: url(../img1/btn.jpg) 0px 0px no-repeat;
margin: 0px auto;
padding-bottom: 50px;
}
//效果图

qq_33151859

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
盒子模型之免费体验登录页面

免费体验登录页面*姓名:*邮箱:*电话:性别:请选择男女年龄:请选择2021//cssy样式#login{width:300px;background: url(../img1/bg.jpg) 0px 0px n
复制链接

扫一扫