通过CSS设置样式，实现注册页面的网页

最新推荐文章于 2024-04-30 10:00:00 发布
最新推荐文章于 2024-04-30 10:00:00 发布
阅读量1.5k 收藏 6
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cymx66688/article/details/83039833
版权

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
    <table align="center">
        <tr><td><img src="../image/head.jpg"></td></tr>
        <tr>
            <td><form>
                <table class="body">
                    <tr>
                        <td id="item" colspan="3">以下均为必填项</td>
                    </tr>
                    <tr>
                        <td class="left">请填写您的Email地址:</td>
                        <td><input type="email" class="center"></td>
                        <td class="right">此项为必填项，请输入您的Email地址</td>
                    </tr>
                    <tr>
                        <td class="left">设置您在当当网的昵称:</td>
                        <td><input type="text" class="center"></td>
                        <td class="right">此项为必填项，请输入您的昵称</td>
                    </tr>
                    <tr>
                        <td class="left">设置密码:</td>
                        <td><input type="password" class="center"></td>
                        <td class="right">此项为必填项，请设置您的密码</td>
                    </tr>
                    <tr>
                        <td class="left">再次输入您设置的密码:</td>
                        <td><input type="password" class="center"></td>
                        <td class="right">此项为必填项，请再次输入您的密码</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="2">
                            <input type="checkbox">我已阅读并同意<a href="#">《当当网交易条款》</a>和<a href="#">《当当网用户使用条款》</a>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input type="reset" class="picButton "value="重&ensp;置"></td>
                        <td><input type="submit" class="picButton" value="注&ensp;册"></td>
                    </tr>
                </table></form>
            </td>
        </tr>
        <tr><td>
            <img src="../image/foot.jpg">
        </td></tr>
    </table>
</body>
</html>

 

CSS代码：

css代码一般放置在head标签里。由于浏览器代码解析是顺序执行的，如果把css放在底部，HTML代码加载完毕而css没加载完时，会导致页面没有样式而难以阅读。

<style type="text/css">
        .body {
            margin: 0;
            padding: 0;
            font-size: 14px;
            border: 1px solid #999999;
        }
        tr {
            line-height: 50px;
        }
        .picButton {
            background-image: url("../image/register_submit.gif");
            border: 0;
            width: 128px;
            height: 28px;
            color: #FFFFFF;
            font-weight: bold;
        }
        .left {
            text-align: right;
            background-color: rgb(232, 251, 255);
            width: 186px;
        }
        .center {
            border: 1px solid #000000;
            width: 173px;
            margin: 0 31px;
        }
        .right {
            color: red;
            width: 333px;
        }
        a {
            color: #0033FF;
        }
        a:hover {
            color: #FF0000;
            text-decoration: none;
        }
        #item {
            color: red;
            font-size: 16px;
            font-weight: bold;
            line-height: 50px;
        }
    </style>

 

cymx66688
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML+CSS+JavaScript实现登录注册源码
05-31
不同的界面设计会用到不同的CSS样式来实现独特的视觉体验。 最后，JavaScript是实现动态交互的关键。在登录注册系统中，JavaScript可以处理用户输入的验证（如检查用户名和密码是否为空，密码是否符合复杂性要求等...
html实现注册页面html实现注册页面
12-07
在这个注册页面中，我们可以通过选择器（如类选择器`.form-group`或ID选择器`#username`）来控制各个元素的样式。例如，我们可以设定输入框的宽度、边框、内边距，以及按钮的背景色、文字颜色和 hover 效果。 `...
CSS笔记
qq_41156186的博客
09-10 238
今日内容： 1. HTML标签：表单标签 2. CSS： HTML标签：表单标签 * 表单： * 概念：用于采集用户输入的数据的。用于和服务器进行交互。 * form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 * 属性： * action：指定提交数据的URL * method:指定提交方式 ...
oauth2自定义登录和授权页面
一个正在崛起的小码农
12-26 2万+
文章目录介绍实现功能系统环境配置开发步骤引入jar包定义登录和授权页面定义一个关于登录和授权的控制器配置页面授权测试项目源码 介绍 在上一章节中，https://blog.csdn.net/baidu_34389984/article/details/85249733。我们是实现了简单的oauth2服务提供商。但还不能满足现实需要，在现实中，我们需要定制特质的登录和授权页面。下面将讲解如何自定义。...
QQ注册页（纯静态页面）适合刚学完html和css的小伙伴练手
最新发布
DL_dldlhhj的博客
04-30 1129
QQ注册页（纯静态页面）适合刚学完html和css的小伙伴练手
CSS(四)_注册页面样式设计
qq_37388518的博客
08-12 3223
效果图： 外部CSS文件： .cont{ margin: 50px auto; } * { margin: 0px; padding: 0px; box-sizing: border-box; } body { background: url("../img1/register_bg.png") no-repeat center; p...
用 CSS 做一个注册页面
Regino的博客
04-05 2516
本文介绍了 CSS 简述和用 CSS 做一个注册页面的相关内容。。。
HTML+CSS实现注册页面
好吗好的~的技术博客
01-11 6565
html> head> title>注册title> head> form action=""> fieldset> legend>信息注册:legend> 用户名: input type="text" name="user">br>br> 密 码: &nbsp; input type="password" name="password&q
CSS3用户登陆注册页面代码.rar
10-01
【标题】"CSS3用户登陆注册页面代码"是关于网页设计和开发的一个资源，它利用了CSS3的新特性来创建吸引人的登录和注册界面。CSS3是层叠样式表的第三版，它引入了许多增强的视觉效果和布局功能，使得网页设计更为灵活...
网页注册页面 html+css+js
03-27
通过CSS，我们可以设置字体、颜色、边距、填充等样式属性，使注册页面看起来更加美观和用户友好。例如，我们可以使用CSS选择器选择特定的HTML元素并应用样式，如`.input-field`用于设置输入框的样式，`.button`用于...
html css jquery简约登陆注册页面.zip
05-08
在"html css jquery简约登陆注册页面.zip"这个压缩包中，我们可以预见到一个基于这三个技术实现的简单登录和注册页面。 HTML（HyperText Markup Language）是网页的基础，用于创建网页的结构。在这个项目中，`index...
HTML+CSS+JS实现十款好看的登录注册界面模板，赶紧收藏起来吧！
热门推荐
道阻且长，行则将至。
04-20 26万+
推荐十款好看的登录注册界面，赶紧收藏起来吧！ 界面一：简约版 界面二 界面三 界面四 界面五 界面六 界面七 界面八 界面九 界面十
用户注册页面的设计与实现（html+css）
ZYCRY的博客
11-03 2万+
用户注册页面的设计与实现（html+css） 文章目录用户注册页面的设计与实现（html+css）1.目的2.内容3.步骤4.代码实现5.页面展示6.最后 1.目的 熟悉HTML+CSS 及表单知识的应用 2.内容 使用 HTML5 表单技术实现用户注册页面，要求用户可以输入用户名、密码、真实姓名和电子邮箱等信息进行注册。 具体功能如下： 界面设计 表单设计 使用 input 标签的 email 类型实现电子邮箱验证 使用 input 标签的 autocomplete 属性实现内容自动记
CSS之 使用CSS控制页面的四种方式
冯浩月
02-21 1万+
前言  CSS在制作网页中，是大量使用的一种语言，多参考一些网站的源代码可以帮助我们快速掌握各种技巧并运用到实际制作中，下面小编就如何在网页中引入CSS样式表做一下简单的介绍。CSS控制页面  使用CSS制作网页时，一个基础的要求是主流的浏览器之间的显示效果要基本一致，通常的做法是一边编写HTML和CSS代码，一边在两个不同的浏览器上进行预览，及时地进行调整，这有利于深入掌握CSS。  通过大致地...
html+css学习day3（输入框、密码框、复选框、单选框、上传文件、提交和重置按钮、多行文本框、下拉菜单）
m0_71576598的博客
08-16 1769
第三天打卡
Day4_HTML+CSS+JS——单选按钮、复选框、下拉列表、文件表单项和隐藏表单项
Android_la的博客
08-10 242
一. 储备知识 radio单选按钮： 由于用户不能输入内容，所以必须设置value值 多个单选按钮如果希望是一组之间有互斥关系，name属性值必须相同 checked=“checked”可以设置单选按钮选中状态 例子： 性别：男<input type="radio" name="gender" value="man"> 女<input type="radio"...
用Html5和csss3做出漂亮的登录注册界面
z767327552的专栏
02-06 5万+
用html5和css3切换登录注册界面 首先我们先创造两个HTML5 forms，那样我们可以利用css3进行设置，使用icon font，这个案例就是来展示如何连接两个form之间的切换。 HTML代码 <div id="container_demo" > <!-- hidden anchor to stop jump http://www.css3crea...
Html+Css打造一个精美的注册页面
weixin_43919497的博客
05-02 1万+
效果图 代码 <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>用户注册</title> <style> *{ margin: 0px; ...
用HTML+css实现华为商城注册页面
04-17
华为商城注册页面的HTML和CSS实现，可以通过以下步骤进行： 1. 首先创建一个HTML文件，可以命名为register.html。在文件中添加页面的基本结构，包括头部（head）、页面主体（body）等。 2. 在页面主体中，添加注册...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值