【HTML+CSS】注册案例详解优化

效果图

（尽力了，太难了~~~~）

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{background: url("复古.jpg") no-repeat center ;background-size: 100% 100%;}.div0{width: 800px;height: 400px;/*margin: auto;*//*上右下左*/margin: 100px 100px 100px 250px;padding: 20px;/*margin-top: 20px;*/border: 4px #cccccc solid;background-color: #fcfcfc;}*{margin: 0px;padding: 0px;box-sizing: border-box;}.div1{/*border: 1px solid;*/float: left;margin-top: 5px;}.div2{/*margin: 125px;*//* margin: 100px 100px 100px 100px;*/width: 500px;height: 350px;/*border: 2px solid;*//*margin: auto;*/}.div3{margin-bottom: 200px;float: right;}.td_left{width: 200px;height: 15px;text-align: right;}.td_right{text-align: left;padding-left: 40px;}.div3 p >a{color: red;}.div1 #left1{font-size: 20px;color: yellow;}.div1 #left2{font-size: 20px;color: #b3b3b3;}#username,#phone,#describe,#birthday,#password,#checkphoto,#place{border-radius: 10px;width: 150px;height: 25px;}#checkimg{height: 25px;vertical-align:middle;}</style>
</head>
<body>
<div class="div0"><div class="div1" ><p id="left1">新用户注册</p><p id="left2">USE REGISTER</p></div><div class="div2"><form ><table  align="center"><tr><td class="td_left"><label for="username" >用户名</label></td><td class="td_right"><input type="text" id="username" name="username" placeholder="请输入用户名"></td></tr><tr><td class="td_left"><label for="password" >密码</label></td><td class="td_right"><input type="password" id="password" ></td></tr><tr><td class="td_left">性别</td><!--        单选--><td class="td_right"><input type="radio" name="gender" value="male">男<input type="radio" id="gender" value="female" id="gender">女</td></tr><tr><td class="td_left">兴趣</td><!--        多选--><td class="td_right"><input type="checkbox" id="hobby">吃饭<input type="checkbox" name="hobby">睡觉<input type="checkbox" name="hobby">运动</td></tr><tr><td class="td_left">选择头像</td><td class="td_right"><input id="img" type="file"></td></tr><tr><td class="td_left">手机号</td><td class="td_right" ><input id="phone" type="text" name="phonenum"></td></tr><tr><td class="td_left">生日</td><td class="td_right" ><input type="datetime-local" id="birthday"></td></tr><tr><td class="td_left">出生地</td><td class="td_right" ><select name="province" id="place"><option value="1">北京</option><option value="2">上海</option><option value="3">深圳</option></select></td></tr><td class="td_left">自我描述</td><td class="td_right" ><textarea id="describe" name="describe" cols="20" rows="5"></textarea></td></tr><tr><td class="td_left">验证码</td><td class="td_right" ><input id="checkphoto" type="text"><img src="../material/验证码.jpg" width="70" height="30" id="checkimg"></td></tr><tr><td colspan="2" align="center"><input type="submit" values="登录"></td></tr></table></form></div><div class="div3"><p>已有账号？<a href="#">直接登录</a></p></div>
</div></body>
</html>

总结

个人觉得前端这部分就是要练，标签属性都很多，一个标签可以实现很多功能，一个功能也能有很多标签来实现；除了熟能生巧，实在不知道还有什么办法记住这么多标签。

【HTML+CSS】注册案例详解优化相关推荐

html css主题,HTML+CSS＝无限可能——案例详解：我的POI主题作品
原标题:HTML+CSS＝无限可能--案例详解:我的POI主题作品在微博发了这个作业,收到很多好评,实在太开心! 斌叔让我来投稿,那今天就以这个网页为案例,把制作过程中我的方法和经验分享给大家. 作 ...
python代码案例详解-我用Python抓取了7000 多本电子书案例详解
安装安装很简单,只要执行: pip install requests-html 就可以了. 分析页面结构通过浏览器审查元素可以发现这个电子书网站是用 WordPress 搭建的,首页列表元素很简单 ...
Ajax基本案例详解之$.getjson的实现
Ajax的$.gethson实现: 看这篇之前建议大家去看看前面两篇文章: 1.Ajax基本案例详解之$.ajax的实现 2.Ajax基本案例详解之$.get的实现现在写一下$.getjson里面的 ...
Ajax基本案例详解之$.get的实现
前面我已经写过一篇ajax的$.ajax的实现了,其中html,css,doindex.jsp里面已经详细列出来了,这篇主要写的是$.get()的实现,其中html,css,doindex.jsp都和 ...
数据湖架构Hudi（五）Hudi集成Flink案例详解
五.Hudi集成Flink案例详解 5.1 hudi集成flink flink的下载地址: https://archive.apache.org/dist/flink/ Hudi Supported ...
【Spring AOP】@Aspect结合案例详解（二）: @Pointcut使用@within和within（已附源码）
文章目录前言 @within 完善打印日志案例 @within深入说明 within 匹配指定类匹配指定包(package) 源码下载总结前言在微服务流行的当下,在使用Spring Clou ...
html右侧浮动菜单,HTML+CSS：css元素浮动详解，使用浮动制作导航栏菜单
原标题:HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单今天这篇文章我们来说一下css的浮动属性(float),给块状元素添加float属性可以使其转变为行内元素,也就是我们所说标签对象 ...
【MATLAB图像处理实用案例详解】目录
未来一个月的任务主要是GAN生成对抗网络理论部分+代码实战和MATLAB图像处理实用案例详解. 做生成对抗网络主要是因为我的研究方向涉及到这个部分,因此将其作为主要研究内容,但由于研究方向的私密性问题 ...
css input 内容换行显示,CSS文本换行详解
还记不记得昨天发表的<table表格那点事儿>最后的一个问题不?先撇开问题,我们从头说起. 在网页排版中,有些时候是需要文本自动换行的,对于中文来讲,无需设置属性即可自动实现换行,但是对于 ...

【HTML+CSS】注册案例详解优化

效果图

代码

总结

【HTML+CSS】注册案例详解优化相关推荐

最新文章

热门文章