43-css案例-注册界面

已于 2022-03-04 21:06:37 修改
阅读量1.4k 收藏 12
点赞数
分类专栏： JavaWeb 文章标签： java mysql 数据库
于 2021-11-29 20:15:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shwjakak/article/details/121616086
版权

html的tr和td标签
 tr 标签——代表HTML表格中的一行
1） tr 标签是成对出现的,以<tr>开始,</tr>结束

2）属性

 ——Common -- 一般属性

 1》align ：代表行的水平对齐方式(left(左对齐) | center(居中对齐) |right(右对齐) | justify)(此属性应该使用CSS实现)

 2》valign ：代表行的垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)

tr是table row的缩写

 
    td 标签——代表HTML表格中的一个单元格 

      1）td 标签是成对出现的,以<td>开始,</td>结束 
      2）属性 
           1》Common -- 一般属性 
           2》abbr -- 代表表头的简写 
    　　3》axis -- 对单元格在概念上分类 
           4》colspan -- 一行跨越多列 
           5》headers -- 连接表格的数据与表头 
           6》rowspan -- 一列跨越多行 
           7》scope -- 定义行或列的表头 
           8》align -- 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify)(此属性应该使用CSS实现) 
           9》valign -- 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)
td是table data cell的缩写
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例——注册界面</title>
    <style>
        /*
         *是通配符表示所有元素所有元素的margin=0 padding=0
         box-sizing:border-box  框的大小不改变
         */
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        /*
        设置body 背景图片 不重复 居中
        */
        body{
            background: url("img/register_bg.png") no-repeat center;
        }
        /*
        设置左中右三个div
         */
        .re_layout{
            width: 900px;
            height: 500px;
            border: 5px solid red  ;
            background: white;
            /*
            让div水平居中  margin: auto;
             */
            margin: auto;
            margin-top: 15px;
        }
        .rg_left{
            /*border:1px solid blue; 取消框框*/
            float:left ;
            margin: 15px;
        }
        /*
        这里设置最左边框框里面的内容
         */
        .p_1{
            color: yellow;
            font-size: 20px;
        }
        .p_2{
            font-size: 20px;
            color: green;
        }


        .rg_center{
            border:1px solid pink;
            float: left;
            width: 450px;
        }
        .td_left{ /*可以使用这种方法同时设置多个类属性*/
            width :100px;
            text-align: right;/*右对齐 */
            height: 45px;
        }
        .td_right{
            padding-left: 50px;/*左内边距50px  这里注意td是一个框 然后写的input是一个框*/
        }


        .rg_right{
           /* border:1px solid green;*/
            float: right;  /*这个右对齐的意思是  好比姓名三个字两个字都有 左对齐是姓对其着  右对齐是名字最后一个字对其着*/
            margin: 15px; /*边距*/
        }
        #username,#checkcode,#password,#birthday,#email,#tele/*注意这里都设置了id   这里使用并集选择器*/{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6 ;
            /*设置边框圆角*/
            border-radius: 5px;
            padding-left: 15px; /*这里就是里面的字请输入用户名离左边15px */
        }
        #checkcode{
            width: 110px;

        }
        #img_check{
            height: 32px;
            vertical-align: middle;  /*垂直居中*/
        }
        #btn_sub{
            width: 150px;
            height: 40px;
            background-color: yellow;
            border: 1px solid yellow;
        }
        .rg_right>p:first-child{/*re_right 里面的标签  表示为.rg_right>p:first-child*/
            color: #A6A6A6;
            font-size: 15px;
        }
        /*
        rg_right 下面有个p p下面有个a超链接
        */
        .rg_right p a {
            color: pink;
        }



    </style>
</head>
<body>
<div class="re_layout">
    <div class="rg_left">
        <p class="p_1">新用户注册</p>
        <p class="p_2">USER REGISTER</p>
    </div>

    <div class="rg_center">

            <form action="#" method="post">
                <!--table表 border有边框 align居中 width宽度500-->
                <table>
                    <tr>    <!--第一行 有两列内容-->
                        <td class="td_left"><label for="username">用户名:</label></td>
                        <td class="td_right"><input type="text" name="username" placeholder="请输入用户名" id="username"></td>
                    </tr>

                    <tr>    <!--第二行 有两列内容-->
                        <td class="td_left"><label for="password">密码:</label></td>
                        <td class="td_right"><input type="password" name="password" placeholder="请输入用户名" id="password"></td>
                    </tr>

                    <tr>    <!--第三行 有两列内容-->
                        <td class="td_left"><label for="email">Email:</label></td>
                        <td class="td_right"><input type="email" name="email" placeholder="请输入邮箱" id="email"></td>
                    </tr>

                    <tr>    <!--第四行 有两列内容-->
                        <td class="td_left"><label for="tele">手机号:</label></td>
                        <td class="td_right"><input type="text" name="tele" placeholder="请输入手机号" id="tele"></td>
                    </tr>

                    <tr>    <!--第五行 有两列内容-->
                        <td class="td_left"><label>性别:</label></td>  <!--两个name一样才能单选-->
                        <td class="td_right"><input type="radio" name="gender" value="male" checked>男
                            <input type="radio" name="gender" value="famale">女 </td>
                    </tr>

                    <tr>    <!--第六行 有两列内容-->
                        <td class="td_left"><label for="birthday">出生日期:</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday"></td>
                    </tr>

                    <tr>    <!--第七行 有两列内容-->
                        <td class="td_left"><label for="checkcode">验证码:</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode">
                            <img id="img_check" src="img/verify_code.jpg">
                        </td>
                    </tr>

                    <tr>
                        <td  colspan="2" align="center"><input type="submit" value="注册" id="btn_sub"></td>><!--clispan="2"合并两列-->
                    </tr>

                </table>
            </form>
    </div>

    <div class="rg_right">
        <p>已有帐号<a href="#">立即登录</a></p>
</div>
</div>>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例2</title>
    <style>
        *{/*这个的作用是字都挨得近一点*/
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        body{
            background: url("img/register_bg.png")  no-repeat center;
        }

        .rg_layout{
            width: 1000px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            /*让div水平居中 margin:auto */
            margin:auto ;
            margin-top: 150px;
        }
        .rg_left{
            border: 1px solid red;
            float: left;
            margin :15px;
        }
        .y01{
            color: #FFD026;
            font-size: 20px;

        }
        .y02{
            color: #A6A6A6;
            font-size: 20px;
        }
        .rg_center{
            border: 1px solid red;
            float: left;
            width: 540px;
        }
        .rg_right{
            border: 1px solid red;
            float: right;
            margin: 15px;
        }
        .y03{
            color: #A6A6A6;
            font-size: 15px;
        }
        .rg_right p a{
            color: pink;
            font-size: 15px;
        }

      .td_left{
          width: 100px;
          height: 45px;
          text-align: right;
      }
        .td_right{
            border: 1px blue solid;
           padding-left:50px  ;  /*看看这个位置 类标签所指的块是td标签 任何是想让input标签离着td远一点*/
        }
      #username,#password{
          height:32px ;
          width: 251px;
          border: 1px red solid;
          /*
          设置边框圆角 border-radius:
           */
          border-radius: 5px;
          /*
          边框里的提示字离着边框远一点
           */
          padding-left: 15px;
      }
        #yanzhengma{
            height:32px ;
            width: 100px;
            border: 1px red solid;
            /*
            设置边框圆角 border-radius:
             */
            border-radius: 5px;
            /*
            边框里的提示字离着边框远一点
             */
            padding-left: 15px;
        }
        .y04{
            margin-right: 10px;
        }

    </style>
</head>
<body>

<div class="rg_layout">
    <div class="rg_left">
        <p class="y01">新用户注册</p>
        <p class="y02">USER REGISTER</p>

    </div>

    <div class="rg_center">
       <div class="rg_form">
           <form action="#" method="get" class="y05" >
               <table>
                   <tr>
                       <td class="td_left"><label for="username">用户名</label></td>
                       <td class="td_right"><input name="username" type="text" placeholder="请输入用户名" id="username" ></td>
                   </tr>
                   <tr>
                       <td class="td_left"><label for="password">密码</label></td>
                       <td class="td_right"><input name="password" type="password" placeholder="请输入密码名" id="password"></td>
                   </tr>
                   <tr>
                       <td class="td_left"><label for="email">Email</label></td>
                       <td class="td_right"><input name="email" type="email" placeholder="请输入邮箱" id="email"></td>
                   </tr>
                   <tr>
                       <td class="td_left"><label for="name">姓名</label></td>
                       <td class="td_right"><input name="name" type="text" placeholder="请输入姓名" id="name"></td>
                   </tr>
                   <tr>
                       <td class="td_left"><label for="telephonenumber">手机号</label></td>
                       <td class="td_right"><input name="telephonenumber" type="text" placeholder="请输入手机号" id="telephonenumber"></td>
                   </tr>
                   <tr>
                       <td class="td_left">性别</td>
                       <td >
                           <input type="radio" name="gender" value="male" checked>男
                           <input type="radio" name="gender" value="female" >女
                       </td>
                   </tr>
                   <tr>
                       <td class="td_left">出生日期</td>
                       <td class="td_right"><input name="date" type="date" ></td>
                   </tr>
                   <tr>
                       <td class="td_left" ><label for="yanzhengma">验证码</label></td>
                       <td class="td_right"><input type="text" name="yanzhengma" placeholder="请输入验证码" id="yanzhengma"><img src="img/logo.jpg" class="y04"> </td>
                   </tr>
                   <tr>
                       <td colspan="2" align="center"><input type="submit" value="注册"></td>
                   </tr>
               </table>
           </form>
       </div>

    </div>

    <div class="rg_right">
    <p class="y03">已有帐号?<a href="#">立即登录</a></p>

    </div>
</div>
</body>
</html>

山东大葱
关注
  • 0
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 入门指南（二）CSS 常用样式及注册页面案例
墨鸦的博客
03-11 6205
CSS 入门指南（二）CSS 常用样式及注册页面案例
html之div注册页面
qq_36943809的博客
12-14 540
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> *{ margin: 0px; padding...
[HTML+CSS+JS] 实现注册登录页面
最新发布
peixiancccc的博客
04-20 1683
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
CSS-注册页面代码实例
30+开始学JAVA
02-01 814
这是一个注册页面的代码实例，里是CSS部分的内容，里是html部分的内容，呈现的效果是这样的： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> *{ margin: 0px; padding: 0px; box-sizi
用css写一个登录注册页面
weixin_42610010的博客
02-07 333
如果你想用CSS来创建一个登录注册页面，那么你需要先学习一些CSS的基础知识。首先，你需要了解HTML的布局方式，然后再学习如何使用CSS来设计页面的样式。 接下来，你可以使用CSS的各种样式属性来设计登录注册页面的布局。例如，你可以使用CSS的定位属性来设置元素的位置，使用CSS的颜色属性来设置元素的颜色，使用CSS的字体属性来设置元素的字体等。 最后，你可以使用CSS的媒体查询来设计登录注册页...
基于HTML5+css+JS的精美登陆注册界面
03-18
基于HTML5+css+JS的精美登陆注册界面
Css-Demo:css练习案例
05-14
桌游精灵3——一个完整的webApp，以bootstrap为基础满足更多不同的需求响应式的企业网站--demo展示1 响应式的企业网站--demo展示2 响应式的企业网站--demo展示351包装——一个常见的表单页面修真院免费提供css、js等...
css媒体查询案例-汽车主题网页
10-13
资源是汽车主体的静态网页，展示了css媒体查询的案例，网页在720px时样式会改变。 简单的案例，用于实践，默认样式是页面大于720px，媒体查询分界点是720px。 运用弹性盒子，调节盒子的宽，宽改变的时候，弹性盒子...
综合案例CSS注册页面.html
01-12
综合案例CSS注册页面.html
十个静态页面展示-练习 HTML-CSS
12-12
适合前端刚入门的小白，对前端感兴趣的小伙伴
html+css+js酷炫全屏的后台登录注册界面模板
04-10
html+css+jshtml+css+js酷炫全屏的后台登录注册界面模板，带背景图片自动切换登录注册模板代码，适用于网页设计的登录页面个性化制作。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，...
简单登录注册界面模板（HTML+CSS+JavaScript）
12-28
简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。
CSS3用户登录注册页面模板.zip
05-23
CSS3用户登录注册页面模板，全屏背景图片，有用户登录、用户注册功能，动画效果。
纯CSS3用户登录界面设计
04-24
纯CSS3用户登录界面设计
js css 实现的登录注册页面
08-13
js css 实现的登录注册页面（达内老师写的）
HTML/CSS写的简单的注册页面
热门推荐
笑笑是一个码农
03-26 4万+
有任何问题加群讨论 群号：733899823 加群时请备注CSDN~ 还可以关注我的个人微信公众号，免费领取前端全栈学习资料呦~ 效果如图： 代码如下：(其实CSS代码可以简化很多) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t...
css注册表单案例
Protagonist
06-21 2344
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
CSS编写静态网易注册界面
shwanglp的专栏
12-11 5547
注册网易免费邮箱 body{ font-size:12px; font-family:"宋体"; color: #333; } /*清除内边距和外边距*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
background-image案例
04-01
以下是一个background-image的案例： HTML代码： ``` <!DOCTYPE html> <title>Background Image Example body { background-image: url('...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值