CSS案例--网站用户注册

最新推荐文章于 2021-11-29 20:15:02 发布
最新推荐文章于 2021-11-29 20:15:02 发布
阅读量212 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46893497/article/details/112300268
版权

网站用户注册

1、案例需求

在这里插入图片描述

2、案例分析

  • 需求：使用盒子模型修改注册页面
    • 1、给body添加背景图片 regist_bg.jpg
    • 2、用一个div包裹form表单，设置div宽度30%、高度500px，背景为白色，边框实线 5px 颜色：#ccc
    • 3、设置外边距上下100px，左右auto
    • 4、设置内边距padding-left=150px ，padding-top=75px;
    • 5、设置行高30px；

3、案例代码

  • 参考代码：
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <!--

        1、给body添加背景图片 regist_bg.jpg

        2、用一个div包裹form表单，设置div宽度30%、高度500px，背景为白色，边框实线 5px 颜色：#ccc

        3、设置外边距上下100px，左右auto

        4、设置内边距padding-left=150px,padding-top=75px;

        5、设置行高30px；

        -->

        <style type="text/css">

            body {

                background-image: url(img/regist_bg.jpg);

            }

            #formDiv {

                width: 30%;

                height: 500px;

                background-color: white;

                border: 5px solid #ccc;

                margin: 100px auto;

                padding-left: 150px;

                padding-top: 75px;

                line-height: 30px;

            }

        </style>

    </head>

    <body>

        <div id="formDiv">

            <form action="#" method="get">

                <!--此处的内容可能被提交到服务器-->

                <table>

                    <tr>

                        <td align="right">用户名：</td>

                        <td align="left"><input type="text" name="username"></td>

                    </tr>

                    <tr>

                        <td align="right">密 码：</td>

                        <td align="left"><input type="password" name="password">

                        </td>

                    </tr>

                    <tr>

                        <td align="right">确认密码：</td>

                        <td align="left"><input type="password" name="repassword">

                        </td>

                    </tr>

                    <tr>

                        <td align="right">性 别：</td>

                        <td align="left">

                            <input type="radio" name="sex" value="男">男

                            <input type="radio" name="sex" value="女">女

                        </td>

                    </tr>

                    <tr>

                        <td align="right">头 像：</td>

                        <td align="left"><input type="file" name="upload"></td>

                    </tr>

                    <tr>

                        <td align="right">爱 好：</td>

                        <td align="left">

                            <input type="checkbox" name="hobby" value="编程" />编程

                            <input type="checkbox" name="hobby" value="把妹" />把妹

                            <input type="checkbox" name="hobby" value="装逼" />装逼

                        </td>

                    </tr>

                    <tr>

                        <td align="right">所在城市：</td>

                        <td align="left">

                            <select name="city">

                                <option>上海</option>

                                <option>广州</option>

                                <option>北京</option>

                            </select>

                        </td>

                    </tr>

                    <tr>

                        <td align="right">自我描述：</td>

                        <td align="left">

                            <textarea re rows="3" cols="15" name="desc"></textarea>

                        </td>

                    </tr>

                    <tr>

                        <td align="right"></td>

                        <td align="left">

                            <input type="submit" value="提交">

                            <input type="reset" value="重置">

                        </td>

                    </tr>

                </table>

            </form>

        </div>

    </body>

</html>
韩家小志
关注
专栏目录
使用html+css实现-静态开源案例-品优购
SHoadgnaw的博客
03-01 7165
使用html+css实现-静态开源案例-品优购设计目标css制作图标规范seo优化网页标题 titledescription 网站说明 显示在搜索引擎后方的解释Keywords关键词字体图标引入方法注意搭建整个页面时的路径问题html代码首页(index.html)商品列表页(list.html)商品详情页(detail.html)注册页面(register.html)CSS代码通用css(base.css)公用css(common.css)首页css(index.css)商品列表页css(list.css
CSS3 html5用户注册进度条提示代码.zip
07-11
html5用户注册进度条提示代码是一款html5实现的用户填写注册信息的时候，显示表单填写进度提示效果，电脑手机端通用。 js代码 [removed][removed] [removed] solid(); [removed]
基于HTML CSS 网站注册实例
weixin_42230478的博客
07-11 222
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;style type="text/css"&gt; .logo{ height: 60px;
CSS综合案例（注册页面案例）
Willing卡卡的博客
04-11 517
综合案例之注册案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册案例</title> <style> html{ height: 100%; } body{ height: 100%; ...
CSS-注册页面代码实例
30+开始学JAVA
02-01 857
这是一个注册页面的代码实例，里是CSS部分的内容，里是html部分的内容，呈现的效果是这样的： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> *{ margin: 0px; padding: 0px; box-sizi
CSS3用户登录注册页面模板.zip
05-23
CSS3用户登录注册页面模板，全屏背景图片，有用户登录、用户注册功能，动画效果。
Python代码源码-实操案例-框架案例-音乐网.zip
最新发布
02-22
1. 用户认证与授权：用户注册、登录、权限管理等功能，可能涉及OAuth2、JWT等技术。 2. 音乐资源管理：存储、分类和检索音乐文件，可能利用数据库（如MySQL或MongoDB）来存储元数据，云存储服务（如AWS S3或阿里云...
Python代码源码-实操案例-框架案例-商城源码.zip
02-22
6. **用户认证与授权**：商城系统会有用户登录、注册、权限管理等功能，这涉及到用户认证和授权机制。Python框架通常有内置的支持，如Django的Authentication和Authorization模块。 7. **支付集成**：商城源码可能...
HTML+CSS+JavaScript原生购物网站首页案例
04-14
在这个购物网站案例中，JavaScript可能用于处理用户事件（如点击按钮、填写表单），动态更新页面内容，或者与服务器进行异步通信（AJAX）。例如，可以使用`addEventListener`来监听事件，`document.querySelector`或...
网页设计期末大作业（html、css静态网页）-音乐网站
07-03
在音乐网站的首页，轮播图可能展示热门歌手、新专辑封面或者推荐MV，通过这种交互方式吸引用户的注意力，增强网站的吸引力。 每个页面的设计都需要考虑到用户体验和易用性。登录和注册页面应简洁明了，提供清晰的...
CSS/HTML 一个漂亮的用户注册（用户登录）页面 动态效果
qq_38959715的博客
06-26 10万+
先上效果图吧平面泡沫立体泡沫之前想做动态泡泡的效果，在网上没有搜到类似的样式。所以自己做了一个发上来，给有需要的人参考参考。代码部分有疑问或者有错请在评论指出，尽量快点回复。代码部分：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&am
登录注册HTML页面代码
zhaochongsi的博客
01-06 8万+
一、注册 创建register.html文件，录入如下代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> form { width:100%;
HTML+CSS做登录注册界面
热门推荐
风从北方来的博客
05-29 14万+
在登录界面点注册会进入注册界面登录界面代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&am
43-css案例-注册界面
shwjakak的博客
11-29 1524
html的tr和td标签 两姐妹双飞 2019-01-30 19:58:16 13489 收藏 33 版权 tr 标签——代表HTML表格中的一行 1） tr 标签是成对出现的,以<tr>开始,</tr>结束 2）属性 ——Common -- 一般属性 1》align ：代表行的水平对齐方式(left(左对齐) | center(居中对齐) |right(右对齐) | justify)(此属性应该使用CSS实现) 2》v...
通过CSS设置样式，实现注册页面的网页
cymx66688的博客
10-13 1537
HTML代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;注册页面&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &amp
使用CSS完成用户注册页面；
Syntacticsugar's blog
09-19 6544
    使用CSS完成用户注册页面； 做成这样一个页面； ①设置body的background-image背景图【该背景图是全铺方式，个别网页注册采用指定位置background-position定位背景图在真个页面的位置】； ②分成一个div,分装left ，mid，right 这三部分，mid中使用一个div来装table（以便于调节table在页面的布局或者定位） ， 最外部...
CSS网站注册页面的优化
mqingo的博客
11-05 437
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="../css/
HTML CSS 个人注册界面 实现边框上加文字
m0_51393229的博客
11-25 2843
实例:制作个人注册界面 效果: HTML CSS 代码实现: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type
html与css制作表单注册页面个人理解
不小努力的小龙
09-14 2057
常用的表单注册页面 1. 第一个注册页面 我的分析思路： 整个内容时居中的，所以需要有一个版心，根据ps测量，内容宽度是1200px，所以我设置版心（.w）为1200px(一般的内容的版心为1200px),再设置居中的属性margin: 100px auto; 整个框架如上图所示，这样就很容易写出代码 接下来，我们来研究h3里面的内容 一般样式： *号一般设置（margin,padding）取消标签与标签的间隙 a标签一帮设置(color:#666, text-decoration:n
前端表单验证实现 - jQuery用户注册案例分析
资源摘要信息:"jQuery用户注册表单验证代码.zip" 知识点一：jQuery简介 jQuery是一个快速、小巧、功能丰富的JavaScript库，它通过减少HTML文档遍历、事件处理、动画和Ajax交互的代码量，极大地简化了JavaScript编程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值