精华内容
下载资源
问答
  • div+css注册页面案例

    2020-09-24 18:12:04
    div+css注册页面案例 所有的html标签中,表单标签是最重要的。在实际开发中,最经典的实例就是⽤户注册,覆盖了表单标签的所有的元素。效果图如下: <!DOCTYPE html> <html> <head> <...

    div+css注册页面案例

    所有的html标签中,表单标签是最重要的。在实际开发中,最经典的实例就是⽤户注册,覆盖了表单标签的所有的元素。效果图如下:
    <!DOCTYPE html>
    <html>
         <head>
             <meta charset="utf-8">
             <title></title>
             <style type="text/css">
                 /* 设置表单的div样式 */
                 .form {
                     width: 550px;
                     height: 400px;
                     border: 1px #333333 solid;
                     background-color: white;
                     margin: 100px auto;
                 }
     
                 div span {
                     margin-left: 100px;
                     color: #0000FF;
                     font-size: 22px;
                 }
     
                 body {
                    background-image: url(img/bg.jpg);
                 }
             </style>
         </head>
         <body>
             <div class="form">
             <br />
             <br />
             <br />
             <span>⽤户注册</span>
             <b>USERREGISTER</b>
             <form action="#" method="get">
                 <table align="center">
                     <tr>
                         <td>⽤户名:</td>
                         <td><input type="text" name="user" placeholder="请输⼊⽤户名"/></td>
                         <td></td>
                     </tr>
                     <tr>
                         <td>密 码:</td>
                         <td><input type="password" name="pass" placeholder="请输⼊密码"/></td>
                         <td></td>
                     </tr>
                     <tr>
                         <td>性 别:</td>
                         <td><input type="radio" name="gender" value="男" checked="checked"/>男
                         <input type="radio" name="gender" value="⼥"/>⼥ </td>
                         <td></td>
                     </tr>
                     <tr>
                         <td>验证码:</td>
                         <td><input type="text"/></td>
                         <td><img src="img/checkcode.jpg" ></td>
                     </tr>
                     <tr align="center">
                         <td colspan="3"><input type="image"
                            src="img/btn.jpg" /></td>
                     </tr>
                 </table>
             </form>
             </div>
         </body>
    </html>

    展开全文
  • 使用纯css+html完成制作。有需要的可以来拿,原理是盒子阴影,定位,和一些简单的css修饰
  • // An highlighted block var foo = 'bar';
  • 静态html+css注册页面

    千次阅读 2018-09-08 15:39:11
    纯静态登陆注册页面代码块(无API接口) &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; 登陆注册 &lt;/title&gt; &lt;meta charset="utf-...

    纯静态登陆注册页面代码块(无API接口)

    <!DOCTYPE html>
    <html>
    <head>
        <title>
                登陆注册
        </title>
        <meta charset="utf-8" name="viewport" content="width=device-width" >
        <script type="text/javascript">
            function getFileUrl(sourceId) {
                var url;
                if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
                    url = document.getElementById(sourceId).value;
                } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
                    url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
                } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
                    url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
                }
                return url;
            }
            function preImg(sourceId, targetId) {
                var url = getFileUrl(sourceId);
                var imgPre = document.getElementById(targetId);
                imgPre.src = url;
            }
        </script>
    </head>
    <body bgcolor="#708090">
    
    <div class="text" style="text-align: center;">
                <h1>用户登录</h1>
            </div>
            <div class="text" style="text-align: center;">
                <p>注册页面</p>
            </div>
    <table border="4" align="center">
        <tr>
            <td>姓名</td>
            <td><input type="" name=""></td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex">man
                <input type="radio" name="sex">women
            </td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name=""></td>
        </tr>
        <tr>
            <td>兴趣爱好</td>
            <td>
                <input type="checkbox" name=""><input type="checkbox" name="">求求
                <input type="checkbox" name="">邱秋秋
            </td>
        </tr>
        <tr>
            <td>出生年月</td>
            <td>
                <select name="year">
                    <option >1991</option>
                    <option>1992</option>
                    <option>1993</option>
                    <option>1994</option>
                    <option>1995</option>
                    <option>1996</option>
                    <option selected="selected">1997</option>
                    <option>1998</option>
                    <option>1999</option>
                    <option>2000</option>
                </select>
                <select name="month">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>图片</td>
            <td>
                <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'photo');" />
                <img id="photo" src="https://avatar.csdn.net/8/6/F/3_qq_42275455.jpg" width="200px" height="30px" style="display: block;" alt="" />
    
            </td>
        </tr>
        <tr>
            <td>个人简介</td>
            <td><textarea></textarea></td>
        </tr>
        <tr>
            <td align="center"><button>提交</button></td>
            <td align="center"><button>重置</button></td>
        </tr>
    </table>
    </body>
    </html>

    展开全文
  • CSS概述、CSS选择器、CSS属性、CSS案例-注册页面
    1. HTML/CSS学习笔记01【概念介绍、基本标签、表单标签】【day01】
    2. HTML/CSS学习笔记02【表单标签】【day02】
    3. HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】【day02】

    目录

    第4节 CSS概述

    CSS_概述

    CSS_与html结合方式

    第5节 CSS_选择器

    CSS_语法格式

    选择器_扩展选择器 (1)

    选择器_扩展选择器 (2)

    第6节 CSS属性

    CSS_属性1

    CSS_属性2_盒子模型

    第7节 CSS_案例-注册页面

    CSS_案例-注册页面

    CSS_案例-注册页面1

    CSS_案例-注册页面2


    第4节 CSS概述

    CSS_概述

    1. 概念:Cascading Style Sheets 层叠样式表
        * 层叠:多个样式可以作用在同一个html的元素上,同时生效

    2. 好处:
        1. 功能强大
        2. 将内容展示和样式控制分离
            * 降低耦合度。解耦
            * 让分工协作更容易
            * 提高开发效率

    CSS_与html结合方式

    3. CSS的使用:CSS与html结合方式
        1. 内联样式
             * 在标签内使用style属性指定css代码
             * 如:<div style="color:red;">hello css</div>
        2. 内部样式
            * 在head标签内,定义style标签,style标签的标签体内容就是css代码
            * 如:
                <style>
                    div{
                        color:blue;
                    }
                </style>
                <div>hello css</div>
        3. 外部样式
            1. 定义css资源文件。
            2. 在head标签内,定义link标签,引入外部的资源文件
            * 如:
                * a.css文件:
                    div{
                        color:green;
                    }
                <link rel="stylesheet" href="css/a.css">
                <div>hello css</div>
                <div>hello css</div>

        * 注意:
            * 1、2、3种方式,css作用范围越来越大
            * 1方式不常用,后期常用2,3
            * 第3种格式可以写为:
                <style>
                    @import "css/a.css";
                </style>

      

    第5节 CSS_选择器

    CSS_语法格式

    4. css语法:
        * 格式:
            选择器 {
                属性名1:属性值1;
                属性名2:属性值2;
                ...
            }
        * 选择器:筛选具有相似特征的元素
        * 注意:
            * 每一对属性需要使用;隔开,最后一对属性可以不加“;”。

    选择器_扩展选择器 (1)

    5. 选择器:筛选具有相似特征的元素
        * 分类:
            1. 基础选择器
                1. id选择器:选择具体的id属性值的元素。建议在一个html页面中id值唯一。
                    * 语法:#id属性值{}
                2. 元素选择器:选择具有相同标签名称的元素。
                    * 语法: 标签名称{}
                    * 注意:id选择器优先级 高于 元素选择器
                3. 类选择器:选择具有相同的class属性值的元素。
                    * 语法:.class属性值{}
                    * 注意:类选择器选择器优先级 高于 元素选择器。

    1. 内联样式,优先级1000
    2. id选择器,优先级100
    3. 类和伪类,优先级10
    4. 元素选择器,优先级1

    选择器_扩展选择器 (2)

    5. 选择器:筛选具有相似特征的元素。
        * 分类:
            1. 基础选择器
                1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
                    * 语法:#id属性值{}
                2. 元素选择器:选择具有相同标签名称的元素
                    * 语法: 标签名称{}
                    * 注意:id选择器优先级高于元素选择器
                3. 类选择器:选择具有相同的class属性值的元素。
                    * 语法:.class属性值{}
                    * 注意:类选择器选择器优先级高于元素选择器
            2. 扩展选择器:
                1. 选择所有元素:
                    * 语法: *{}
                2. 并集选择器:
                    * 选择器1,选择器2{}
                3. 子选择器:筛选选择器1元素下的选择器2元素
                    * 语法:  选择器1 选择器2{}
                4. 父选择器:筛选选择器2的父元素选择器1
                    * 语法:  选择器1 > 选择器2{}

                5. 属性选择器:选择元素名称,属性名=属性值的元素
                    * 语法:  元素名称[属性名="属性值"]{}

                6. 伪类选择器:选择一些元素具有的状态
                    * 语法: 元素:状态{}
                    * 如: <a>
                        * 状态:
                            * link:初始化的状态
                            * visited:被访问过的状态
                            * active:正在访问状态
                            * hover:鼠标悬浮状态

    1. 内联样式,优先级1000
    2. id选择器,优先级100
    3. 类和伪类,优先级10
    4. 元素选择器,优先级1
    5. 通配选择器,优先级0

    第6节 CSS属性

    CSS_属性1

    6. 属性
        1. 字体、文本
            * font-size:字体大小
            * color:文本颜色
            * text-align:对其方式
            * line-height:行高 
        2. 背景
            * background:
        3. 边框
            * border:设置边框,符合属性
        4. 尺寸
            * width:宽度
            * height:高度
        5. 盒子模型

    CSS_属性2_盒子模型

    6. 属性
        1. 字体、文本
            * font-size:字体大小
            * color:文本颜色
            * text-align:对其方式
            * line-height:行高 
        2. 背景
            * background:
        3. 边框
            * border:设置边框,符合属性
        4. 尺寸
            * width:宽度
            * height:高度
        5. 盒子模型:控制布局
            * margin:外边距
            * padding:内边距
                * 默认情况下,内边距会影响整个盒子的大小。
                * box-sizing: border-box;  设置盒子的属性,令width和height就是最终盒子的大小。

            * float:浮动
                * left
                * right

    CSS:页面美化和布局控制

    第7节 CSS_案例-注册页面

    CSS_案例-注册页面

    CSS_案例-注册页面1

      

    CSS_案例-注册页面2

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>注册页面</title>
    		<style>
    			* {
    			margin: 0px;
    			padding: 0px;
    			box-sizing: border-box;
    		}
    
    		body {
    			background: url("img/register_bg.png") no-repeat center;
    			padding-top: 25px;
    		}
    
    		.rg_layout {
    			width: 900px;
    			height: 500px;
    			border: 8px solid #EEEEEE;
    			background-color: white;
    			/*让div水平居中*/
    			margin: auto;
    		}
    
    		.rg_left {
    			/* border: 1px solid red; */
    			float: left;
    			margin: 15px;
    		}
    
    		.rg_left>p:first-child {
    			color: #FFD026;
    			font-size: 20px;
    		}
    
    		.rg_left>p:last-child {
    			color: #A6A6A6;
    			font-size: 20px;
    		}
    
    		.rg_center {
    			float: left;
    			/* border: 1px solid red; */
    		}
    
    		.rg_right {
    			/* border: 1px solid red; */
    			float: right;
    			margin: 15px;
    		}
    
    		.rg_right>p:first-child {
    			font-size: 15px;
    		}
    
    		.rg_right p a {
    			color: pink;
    		}
    
    		.td_left {
    			width: 100px;
    			text-align: right;
    			height: 45px;
    		}
    
    		.td_right {
    			padding-left: 50px;
    		}
    
    		#username,
    		#password,
    		#email,
    		#name,
    		#tel,
    		#birthday,
    		#checkcode {
    			width: 251px;
    			height: 32px;
    			border: 1px solid #A6A6A6;
    			/*设置边框圆角*/
    			border-radius: 5px;
    			padding-left: 10px;
    		}
    
    		#checkcode {
    			width: 110px;
    		}
    
    		#img_check {
    			height: 32px;
    			vertical-align: middle;
    		}
    
    		#btn_sub {
    			width: 150px;
    			height: 40px;
    			background-color: #FFD026;
    			border: 1px solid #FFD026;
    		}
    	</style>
    	</head>
    	<body>
    		<div class="rg_layout">
    			<div class="rg_left">
    				<p>新用户注册</p>
    				<p>USER REGISTER</p>
    			</div>
    			<div class="rg_center">
    				<div class="rg_form">
    					<!--定义表单 form-->
    					<form action="#" method="post">
    						<table>
    							<tr>
    								<td class="td_left"><label for="username">用户名</label></td>
    								<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名">
    								</td>
    							</tr>
    							<tr>
    								<td class="td_left"><label for="password">密码</label></td>
    								<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
    							</tr>
    							<tr>
    								<td class="td_left"><label for="email">Email</label></td>
    								<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
    							</tr>
    							<tr>
    								<td class="td_left"><label for="name">姓名</label></td>
    								<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
    							</tr>
    							<tr>
    								<td class="td_left"><label for="tel">手机号</label></td>
    								<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
    							</tr>
    							<tr>
    								<td class="td_left"><label>性别</label></td>
    								<td class="td_right">
    									<input type="radio" name="gender" value="male"> 男
    									<input type="radio" name="gender" value="female"> 女
    								</td>
    							</tr>
    							<tr>
    								<td class="td_left"><label for="birthday">出生日期</label></td>
    								<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">
    								</td>
    							</tr>
    							<tr>
    								<td class="td_left"><label for="checkcode">验证码</label></td>
    								<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
    									<img id="img_check" src="img/verify_code.jpg">
    								</td>
    							</tr>
    							<tr>
    								<td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
    							</tr>
    						</table>
    					</form>
    				</div>
    			</div>
    			<div class="rg_right">
    				<p>已有账号?<a href="#">立即登录</a></p>
    			</div>
    		</div>
    	</body>
    </html>

    加油~~~   开始学习JavaWeb咯~~~

    展开全文
  • HTML&CSS实现经典登录注册页面

    万次阅读 多人点赞 2018-10-09 20:43:50
    提要:本篇文章说的是一个简单的登录、注册页面用HTML结合css如何实现,包括两个页面的相互跳转,不包括对输入数据的处理,适合刚入门的新手小白。 1、首先看一下最后的实现效果:首先是一个登录界面,点击“立即...

    提要:本篇文章说的是一个简单的登录、注册页面用HTML结合css如何实现,包括两个页面的相互跳转,不包括对输入数据的处理,适合刚入门的新手小白。

    1、首先看一下最后的实现效果:首先是一个登录界面,点击“立即注册”会跳转到第二张图片,也就是注册界面,点击注册界面的“请登录”又会跳转回到第一个登录界面。

    2、下面看一下具体的代码实现(使用的开发工具是HBuilder,有非常强大的提示功能,推荐)

    首先是登录界面,我命名为login.html(这在代码的跳转中有作用),有几个我认为比较重要的地方我直接用//来注释了,但是小伙伴复制粘贴的时候需要把注释去掉,因为HTML注释语法不是这样的:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                form
                {
                    width:100%;
                    height:700px;
                     margin-top: 0px;
                    background:#008B8B;
                }
                div
                {
                    display:inline-block;
                    padding-top: 80px;
                    padding-right: 20px;
                    
                }
                h2
                {
                    font-family: "微软雅黑";
                font-size: 40px;
                    color:black;
                }
                #log
                {
                    color:blue;
                }
            </style>
        </head>
        <body>
            <form name="login">
                <center>
                <div>
                <h2>
                        Hedy西点店欢迎您!
                </h2>
                <p>
                    用户名:<input type="text"/>
                </p>
                <p>
                    密&emsp;码:<input type="password"/>     //注意:&emsp是全角空格符,占一个中文字的长度,加上可以保证用户名                                                                                         和密码对齐,小伙伴可以试着 先不加这个运行一下看一下结果 
                </p>
                <p>
                    <input id=log type="submit" value="登录" />
                </p>
                <p>
                    还没有账号?<a href="register.html">立即注册</a>
                </p>
                </div>
                </center>
            </form>
        </body>
    </html>

    然后是注册页面,我把它命名为register.html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                form
                {
                    width:100%;
                    height:700px;
                     margin-top: 0px;
                    background:#008B8B;
                }
                div
                {
                    display:inline-block;
                    padding-top: 40px;
                    padding-left: 0px;
                    
                }
                h2
                {
                    font-family: "微软雅黑";
                font-size: 40px;
                    color:black;
                }
                #reg
                {
                    color:blue;
                }
            </style>
        </head>
        <body>
            <form>
                <div>
                <h3>
                注册
            </h3>
            <p>
                    用户名:<input type="text"/>
                </p>
                <p>
                    密&emsp;码:<input type="password"/>
                </p>
                <p>
                    手机号:<input type="text"/>
                </p>
                <p>
                    <input id=reg type="submit" value="立即注册" />
                </p>
                <p>
                    已有账号?<a href="login.html">请登录</a>
                </p>    
            </form>    
                </div>
            
            
        </body>
    </html>

    3、总结:这两个页面很相似,涉及到的元素都差不多,不同的只是对页面的布局,很多地方的布局都可以进行修改得到你最满意的页面效果,也有很多元素的属性可以进一步设置,比如限制用户名和 密码的长度,加入背景图片等等,都非常简单,只要修改上面相应的一行代码即可 ,今天的分享就是这样啦~~

    展开全文
  • html css jquery简约登陆注册页面
  • js css 实现的登录注册页面(达内老师写的)
  • 使用CSS完成用户注册页面

    千次阅读 2018-09-19 15:45:13
    使用CSS完成用户注册页面; 做成这样一个页面; ①设置body的background-image背景图【该背景图是全铺方式,个别网页注册采用指定位置background-position定位背景图在真个页面的位置】; ②分成一个div,分装...
  • HTML加CSS实现注册页面

    2020-02-21 22:54:55
    (跟着视频学到了用css完善上一个页面,继续在这里更新一下代码。) ~HTML单独完成表单的代码可以看我上一篇文章HTML标签实现简单注册界面 ——————————————————————————————————...
  • h5+css+jsQQ注册页面小实例 h5+css+jsQQ注册页面小实例 h5+css+jsQQ注册页面小实例 h5+css+jsQQ注册页面小实例
  • CSS+JS注册页面+显示当前时间 用css和js编写的看看吧
  • H5注册页面源码 单页源码 CSS页面 完整登录界面
  • CSS3用户登录注册页面模板,全屏背景图片,有用户登录、用户注册功能,动画效果。
  • 注册页面html和css结合

    2020-04-28 20:29:06
    注册页面html和css结合 分析 使用css控制 最外侧设置body背景图片 弄一个框框用div框起来 大的div里分了3块小的div来控制使用浮动 程序代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...
  • js+css注册界面

    2021-01-15 17:56:52
    通过js判断用户名,密码不能为空。不勾选已阅读注册协议不能注册,以及设置页面背景图等
  • 【实例简介】基于HTML5+css+JS的精美登陆注册界面-------------------------------【实例截图】【核心代码】login4├── index.html├── resources│ ├── images│ │ ├── arrow.png│ │ ├── arrow-p....
  • 自己练习html和css时做的一个高仿B站注册页面,没有用到js,单纯是静态页面,仅供大家学习参考!禁止商用!
  • CSS3响应式注册登录切换页面模板,响应式设计,自适应分辨率,兼容PC端和移动端,点击切换注册、登录页面显示。
  • 包含基础html布局,ifream,css等技术
  • 注册页面 验证 密码 JavaScript HTML CSS

    热门讨论 2011-06-09 11:37:19
    一个实现注册页面的详细代码!功能基本实现!
  • 注册界面 html+css+javascript(简单的输入信息验证),没有连接服务器的和存储的操作
  • JavaScript、CSS、HTML 实现用户注册页面与信息校验

    万次阅读 多人点赞 2015-12-12 19:44:04
    需求:实现用户注册页面并作出逻辑校验。要求:  (1)完成注册页面样式如下:  (2)页面提交,用户注册信息不符合规范,要显示红色提示框,如下:  (3)页面提交,用户注册信息不符合规范,要显示...
  • HTML/CSS写的简单的注册页面

    万次阅读 多人点赞 2018-03-26 14:37:42
    有任何问题加群讨论 群号:733899823 加群时请备注CSDN~ ...代码如下:(其实CSS代码可以简化很多) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t...
  • HTML+CSS实现注册页面

    千次阅读 2018-01-11 09:25:51
    注册title> head> form action=""> fieldset> legend>信息注册:legend> 用户名: input type="text" name="user">br>br> 密 码: &nbsp; input type=&...
  • HTML+CSS实现静态注册页面

    千次阅读 2017-10-05 19:28:31
    注册页 * { padding: 0; margin: 0; font-size: 15px; } .red { margin: 0 auto; width: 650px; color: #D22; } .blue { font-weight: bold; color: #22F;
  • HTML 和 CSS 简单实现注册页面

    千次阅读 2020-02-17 23:45:01
    文章目录一、效果页面二、代码1. 页面样式代码2. 页面内容代码 一、效果页面 二、代码 1. 页面样式代码 *{ margin: 0px;/*所有的外边距为0*/ padding: 0px;/*所有的内边距为0*/ box-sizing: border-box;/*规定两...
  • html和css制作注册页面

    千次阅读 2019-05-13 18:53:32
    代码 基本按钮 样式 效果图
  • 实训第二天,主要学习CSS 运用div进行框架搭建,主要做了两个实例 一为彩色拼图,主要是根据div的嵌套,以及float浮动来控制位置 控制位置的还有绝对位置法和相对位置法 彩色拼图 以下为彩色拼图的代码 <html>...
  • jquery css3带背景透明登录注册表单提交代码,登录注册页面的特效,使用jquery验证表单,一般我们的企业网站或者商城网站的后台都会用到登录的效果,像注册和登录在一起,常用于商城网站,利润注册会员了,然后会员...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 128,105
精华内容 51,242
关键字:

css注册页面