前期H5+CSS3网易邮箱注册页面

最新推荐文章于 2023-05-26 19:17:14 发布
最新推荐文章于 2023-05-26 19:17:14 发布
阅读量4k 收藏 10
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gl1095689956/article/details/79562397
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易注册界面</title>
    <link rel="stylesheet" href="css/网易注册界面.css">

    <style>
        body,div,dl,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
            margin: 0px;
            padding: 0px;
        }
        .header,.content,.footer{
            margin:0 auto;
        }
        .header{
            width: 960px;
            height: 81px;
            /*background-color: red;*/
        }
        .header .logo{
            float: left;
            display: inline-block;
            /*background-color: aquamarine;*/
            width: 644px;
            height: 26px;
            margin-top:31px;
            box-sizing: border-box;
            background: url("images/wy.png")  no-repeat 0px 0px;
        }
        .header .logo a{
            display: inline-block;
            width: 130px;
            height: 26px;
            /*background-color: fuchsia;*/
        }
        .header .links{
            float: right;
            margin-top: 31px;
            width: 200px;
            height: 26px;
            /*background-color: yellowgreen;*/
            text-align: right;
        }
        .header .links a{
            font: 13px "黑体";
            text-decoration: none;
            color: #003398;
        }
        .content{
            width: 960px;
            height: 747px;
            /*background-color: blue;*/
        }
        .content .contentTop{
            width: 960px;
            height: 38px;
            border-radius: 3px 3px 0 0;
            background:url("images/line-content.png") repeat-x;
        }
        .contentTop .left{
            width: 960px;
            height: 38px;
            background: url("images/left.png") no-repeat left;
        }
        .contentTop .left .right{
            width: 960px;
            height: 38px;
            background: url("images/right.png") no-repeat right;
        }
        .content .contentTop span{
            display: block;
            width: 600px;
            line-height: 38px;
            padding-left:21px;
            box-sizing: border-box;
            color: white;
            font-size:14px;
            /*background-color: firebrick;*/

        }
        .content .contentBottom .article{
            float: left;
            width: 644px;
            height: 709px;
            background-color: #fdfdfe;
            padding-left:77px;
            box-sizing: border-box;
            background-color: #f8f8f8;
            border: 1px solid #cccccc;
            border-top:none;
        }
        .content .contentBottom .article .text{
            text-align: right;
        }
        .content .contentBottom .article .articleTop{
            width: 527px;
            height: 66px;
            padding-top: 50px;
            padding-left: 73px;
        }
        .content .contentBottom .article .articleTop ul{
            list-style: none;
            width: 335px;
            height: 34px;
            background: url("images/111.png") no-repeat;
        }
        .content .contentBottom .article .articleTop li{
            width: 167.5px;
            height: 34px;
            float: left;
            line-height: 34px;
            text-align: center;
        }
        .content .contentBottom .article .articleTop .Topfont{
            color: white;
        }
        .content .contentBottom .article .articleBottom{
            width: 565px;
            height: 546px;
            padding-left:27px;
            box-sizing: border-box;
            /*background-color: aquamarine;*/
        }
        .content .contentBottom .article .articleBottom .email{
            width: 422px;
            height: 69px;
            /*background-color: yellow;*/
        }
        .content .contentBottom .article .articleBottom .email .text{
            width: 67px;
            height: 27px;
            line-height: 27px;
            /*background-color: red;*/
            float: left;
            font-size:14px;
        }
        .content .contentBottom .article .articleBottom .email .put{
            width: 334px;
            height: 27px;
            /*background-color: red;*/
            float: right;
        }
        .content .contentBottom .article .articleBottom .email .put input,select,p{
            height: 24px;
            color: grey;
        }
        .content .contentBottom .article .articleBottom .email .put p{
            font-size:8px;
            margin-top: 10px;
        }
        .content .contentBottom .article .articleBottom .pw{
            width: 422px;
            height: 69px;
            /*background-color: yellow;*/
        }
        .content .contentBottom .article .articleBottom .pw .text{
            width: 67px;
            height: 27px;
            line-height: 27px;
            /*background-color: red;*/
            float: left;
            font-size:14px;
        }
        .content .contentBottom .article .articleBottom .pw .put{
            width: 334px;
            height: 27px;
            /*background-color: bisque;*/
            float: right;
        }
        .content .contentBottom .article .articleBottom .pw .put input,p{
            height: 24px;
            width: 270px;
            color: grey;
        }
        .content .contentBottom .article .articleBottom .pw .put p{
            font-size:8px;
            margin-top: 10px;
        }
        .content .contentBottom .article .articleBottom .Spw{
            width: 422px;
            height: 69px;
            /*background-color: yellow;*/
        }
        .content .contentBottom .article .articleBottom .Spw .text{
            width: 67px;
            height: 27px;
            line-height: 27px;
            /*background-color: red;*/
            float: left;
            font-size:14px;
        }
        .content .contentBottom .article .articleBottom .Spw .put{
            width: 334px;
            height: 27px;
            /*background-color: bisque;*/
            float: right;
        }
        .content .contentBottom .article .articleBottom .Spw .put input,p{
            height: 24px;
            width: 270px;
            color: grey;
        }
        .content .contentBottom .article .articleBottom .Spw .put p{
            font-size:8px;
            margin-top: 10px;
        }
        .content .contentBottom .article .articleBottom .PhoneNumber{
            width: 422px;
            height: 69px;
            /*background-color: yellow;*/
        }
        .content .contentBottom .article .articleBottom .PhoneNumber .text{
            width: 67px;
            height: 27px;
            line-height: 27px;
            /*background-color: red;*/
            float: left;
            font-size:14px;
        }
        .content .contentBottom .article .articleBottom .PhoneNumber .put{
            width: 334px;
            height: 27px;
            /*background-color: bisque;*/
            float: right;
        }
        .content .contentBottom .article .articleBottom .PhoneNumber .put input,p{
            height: 24px;
            width: 270px;
            color: grey;
        }
        .content .contentBottom .article .articleBottom .PhoneNumber .put p{
            font-size:8px;
            margin-top: 10px;
        }
        .content .contentBottom .article .articleBottom .GetCode{
            width: 422px;
            height: 100px;
            /*background-color: yellow;*/
        }
        .content .contentBottom .article .articleBottom .GetCode .text{
            width: 67px;
            height: 27px;
            line-height: 27px;
            /*background-color: red;*/
            float: left;
            font-size:14px;
        }
        .content .contentBottom .article .articleBottom .GetCode .put{
            width: 334px;
            height: 27px;
            /*background-color: red;*/
            float: right;
        }
        .content .contentBottom .article .articleBottom .GetCode .put input,p{
            height: 24px;
            color: grey;
        }
        .content .contentBottom .article .articleBottom .GetCode .put img{
            display: inline-block;
            width: 121px;
            height: 51px;
            float: right;
        }
        [type=submit]{
            width: 120px;
            height: 50px;
        }
        .content .contentBottom .article .articleBottom .GetCode .put p{
            font-size:8px;
            margin-top: 10px;
        }
        .content .contentBottom .article .articleBottom .code{
            width: 422px;
            height: 69px;
            /*background-color: yellow;*/
        }
        .content .contentBottom .article .articleBottom .code .text{
            width: 67px;
            height: 27px;
            line-height: 27px;
            /*background-color: red;*/
            float: left;
            font-size:14px;
        }
        .content .contentBottom .article .articleBottom .code .put{
            width: 334px;
            height: 27px;
            /*background-color: bisque;*/
            float: right;
        }
        .content .contentBottom .article .articleBottom .code .put input,p{
            height: 24px;
            width: 270px;
            color: grey;
        }
        .content .contentBottom .article .articleBottom .code .put p{
            font-size:8px;
            margin-top: 10px;
        }
        .content .contentBottom .article .articleBottom .check{
            padding-top: 10px;
            margin-left:88px;
            box-sizing: border-box;
        }
        .content .contentBottom .article .articleBottom .check a{
            text-decoration: none;
            color: #003398;
        }
        .content .contentBottom .article .articleBottom .ZhuCe{
            padding-top: 30px;
            padding-left: 83px;
            box-sizing: border-box;
        }
        .content .contentBottom .article .articleBottom .ZhuCe input[type=submit]{
            width: 119px;
            height: 37px;
            background: url("images/wy.png") no-repeat -144px -360px;
            color: white;
            font-size: 15px;
            border: none;
        }
        .content .contentBottom .aside{
            float: right;
            width: 316px;
            height: 709px;
            background-color: #f4f4f4;
            padding-top: 106px;
            padding-left: 45px;
            box-sizing: border-box;

        }
        .content .contentBottom .aside .asideImg{
            width: 241px;
            height: 326px;
            background: url("images/asideImg.png") no-repeat ;
        }
        .star{
            color: red;
        }
        .footer{
            width: 960px;
            height: 40px;
            /*background-color: green;*/
        }
        .footer .FooterText{
            margin-left:180px;
            padding-top: 5px;
            box-sizing: border-box;
        }
        .footer .FooterText,a{
            text-decoration: none;
            color: #989898;
            font-size:10px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">
            <a href="#" title="网易163免费邮"></a><a href="#" title="网易126免费邮"></a><a href="#" title="网易Yeah.net免费邮"></a>
        </div>
        <div class="links">
            <a href="#">了解更多</a>
            |
            <a href="#">反馈意见</a>
        </div>
    </div>
    <div class="content">
        <div class="contentTop">
            <div class="left">
                <div class="right">
                    <span>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</span>
                </div>
            </div>
        </div>
        <div class="contentBottom">
            <div class="article">
                <div class="articleTop">
                    <ul>
                        <li class="Topfont">注册字母邮箱</li>
                        <li>注册手机号码邮箱</li>
                    </ul>
                </div>
                <div class="articleBottom">
                    <div class="email">
                      <span class="text"><span class="star">*</span>邮件地址</span>
                      <div class="put">
                          <input type="text" value=""> @ <select>
                          <option value="163.com">163.com</option>
                          <option value="126.com">126.com</option>
                          <option value="qq.com">qq.com</option>
                      </select>
                          <p>6~18个字符 可用字母、数字，需以字母开头</p>
                      </div>
                     </div>
                    <div class="pw">
                        <span class="text"><span class="star">*</span>密码</span>
                        <div class="put">
                            <input type="password" value="">
                            <p>6~16个字符，区分大小写</p>
                        </div>
                    </div>
                    <div class="Spw">
                        <span class="text"><span class="star">*</span>确认密码</span>
                        <div class="put">
                            <input type="password" value="">
                            <p>请再次输入密码</p>
                        </div>
                    </div>
                    <div class="PhoneNumber">
                        <span class="text"><span class="star">*</span>手机号码</span>
                        <div class="put">
                            <input type="number" value="">
                            <p>忘记密码时，可通过该手机号码快速找回密码</p>
                        </div>
                    </div>
                    <div class="GetCode">
                        <span class="text"><span class="star">*</span>验证码</span>
                        <div class="put">
                            <input type="text" value=""><img src="images/code.png" alt="">
                            <p>请填写图中的字符，不区分大小写</p>
                            <input type="submit" value="免费获取验证码">
                        </div>
                    </div>
                    <div class="code">
                        <span class="text"><span class="star">*</span>短信验证</span>
                        <div class="put">
                            <input type="password" value="">
                            <p>请查收手机短信，并填写短信中的验证码</p>
                        </div>
                    </div>
                    <div class="check"><p >
                        <input type="checkbox" checked="checked">同意<a href="#">"服务条款"</a>和<a href="#">"隐私权相关政策"</a></p>
                    </div>
                    <div class="ZhuCe">
                        <input type="submit" value="立即注册">
                    </div>
                </div>
            </div>
            <div class="aside">
                <div class="asideImg"></div>
            </div>
        </div>
    </div>
    <div class="footer">
            <div class="FooterText">
            <a href="#">关于网易</a>
            <a href="#">关于网易免费邮</a>
            <a href="#">邮箱官方博客</a>
            <a href="#">客户服务</a>
            <a href="#">隐私政策</a>
            |  网易公司版权所有 © 1997-2017
            </div>
    </div>
</body>
</html>
 


                

        

        

    




    

      

        

            

              
                
                  gl1095689956
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    10
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
HTML练习---网易邮箱登陆

				
			

			

				

					gengzhi1293443962的博客
				

				

					10-12
					
					2万+
					
				

			

		

		

			
				
网易邮箱登录




	
		
		免费邮 企业邮 VIP邮箱 帮助
	



	
		
			
				
			
			
				
					163/126/yeah三大免费邮箱均默认开放
					全面支持iPhone/iPad及Android等系统
					客户端、手机与网页，实现发送、阅读邮件立即同步普通登录手机号登录
									
			
		
		 
		
			
				
	

			
		

	



                

              
                



	

		

			

				
					
CSS - 盒子模型

				
			

			

				

					曹振飞的博客
				

				

					07-02
					
					521
					
				

			

		

		

			
				
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。 
因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。内容：（content）盒子里面的东西；填充：(padding)怕盒子的内嵌泡沫；div{
   padding-top:20px;
   padding-rig

			
		

	



                


  
              

                


	

		

			

				
					
网易邮箱登陆页面HTML5

				
			

			

				

					qq_64960245的博客
				

				

					05-26
					
					1484
					
				

			

		

		

			
				
1.利用插入图片。2.利用和对免费邮到帮助进行超链接。

			
		

	





	

		

			

				
					
HTML，模仿网易登陆界面

				
			

			

				

					qq_51131331的博客
				

				

					01-09
					
					3598
					
				

			

		

		

			
				
1、展示效果：   



2、网页代码：


<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<metaname="viewport"content="width=device-widt...

			
		

	



		

			
		



	

		

			

				
					
HTML 网页制作 网易邮箱登录页面  关键代码

					
热门推荐

				
			

			

				

					qq_36074362的博客
				

				

					10-12
					
					4万+
					
				

			

		

		

			
				
网易邮箱登录


 
  
  免费邮 企业邮 VIP邮箱 帮助
 



 
  
   
    
   
   
    
     163/126/yeah三大免费邮箱均默认开放
     全面支持iPhone/iPad及Android等系统
     客户端、手机与网页，实现发送、阅读邮件立即同步普通登录手机号登录
         
   


			
		

	





	

		

			

				
					
Web前端-html页面-网易注册表单，美化及时验证效果

				
			

			

				

					ssqi's blog
				

				

					03-07
					
					4469
					
				

			

		

		

			
				
今天研究了网易用户注册的表单，以及其及时验证，本真人不得不说无论是它的布局结构还是其风骚的“弹出式加载验证”都是让人眼前一亮，居然还可以这样玩！… 
html代码：<!--logo位置-->
<div id="header"><img src="img/register_logo.png" alt="logo"/></div>
<div id="main">
<table width="100%"

			
		

	





	

		

			

				
					
H5+css3+js搭建带验证码的登录页面

				
			

			

				

					10-14
				

			

		

		

			
				
【H5+CSS3+JS搭建带验证码的登录页面】是一个综合性的前端开发主题，它涉及到HTML5、CSS3和JavaScript三个核心技术。在这个项目中，开发者将创建一个包含验证码功能的用户登录界面，以增强安全性并防止自动化机器人...

			
		

	





	

		

			

				
					
h5+css+jsQQ注册页面小实例

				
			

			

				

					07-18
				

			

		

		

			
				
h5+css+jsQQ注册页面小实例 h5+css+jsQQ注册页面小实例  h5+css+jsQQ注册页面小实例 h5+css+jsQQ注册页面小实例

			
		

	





	

		

			

				
					
H5+CSS3幻灯片图片切换代码.rar

					
最新发布

				
			

			

				

					06-23
				

			

		

		

			
				
H5+CSS3幻灯片图片切换代码.rar H5+CSS3幻灯片图片切换代码.rar H5+CSS3幻灯片图片切换代码.rar H5+CSS3幻灯片图片切换代码.rar H5+CSS3幻灯片图片切换代码.rar H5+CSS3幻灯片图片切换代码.rar H5+CSS3幻灯片图片...

			
		

	





	

		

			

				
					
h5+css+js音乐播放器

				
			

			

				

					08-21
				

			

		

		

			
				
本播放器功能主要有：  播放暂停，音乐进度，音乐进度计时，音量调节，快进退，重播，切换歌曲（本地歌曲）  拖拉进度条播放

			
		

	





	

		

			

				
					
HTML网页设计之仿注册网易免费邮箱界面

				
			

			

				

					09-22
				

			

		

		

			
				
应用HTML语言设计，简易设计，仿照网易163免费邮箱注册界面，添加用户名输入字符串控制长度以及匹配前后输入密码是否正确。

			
		

	





	

		

			

				
					
163邮箱html页面

				
			

			

				

					05-21
				

			

		

		

			
				
非常好的html页面模版

			
		

	





	

		

			

				
					
网易邮箱注册

				
			

			

				

					06-15
				

			

		

		

			
				
网易注册页面，连接数据库，实现增删改查，有提示框，验证码，有两个小问题，没来得及修改

			
		

	





	

		

			

				
					
网易163网站用户登录界面div+css+js

				
			

			

				

					03-06
				

			

		

		

			
				
网易163网站用户登录界面div+css+js

			
		

	





	

		

			

				
					
H5+CSS3+移动端，文章页面+轮播图+响应式

				
			

			

				

					07-12
				

			

		

		

			
				
H5+CSS3+移动端+文章内容页面+轮播图+响应式

			
		

	





	

		

			

				
					
实现写邮箱html页面,用html写的简单的邮箱登陆界面

				
			

			

				

					weixin_33519829的博客
				

				

					06-03
					
					2311
					
				

			

		

		

			
				
前一段总是要登陆邮箱收邮件，而且每次要打开不同的邮箱，很费劲，所以自己写了一个登陆163，新浪等邮箱的简单邮箱登陆页面1.[文件] login-mails.html~3KB 下载(132)qiqi.htmlfunction MyBlur(obj){if(document.all.mailcheck.value=="1"){var m_suffix1 = document.getElem...

			
		

	





	

		

			

				
					
HTML+CSS项目课2：利用table和表单制作“网易邮箱注册页面”

				
			

			

				

					王迪
				

				

					11-09
					
					4286
					
				

			

		

		

			
				
知识点：html文档基本结构、table标签布局、表单标签的使用、img标签、a标签、p标签等常见标签的使用。

制作网页效果：



 

网页制作思路：

1、将整个网页分成4部分：3个表格+底部段落文字（3个表格设置同样的宽度，水平居中，边框为0等属性）

2、表格1：一个1行2列的表格，左边单元格放logo图，右边单元格放“帮助”

3、表格2：一个1行1列的表格，单元格里放图片

4、表...

			
		

	





	

		

			

				
					
编写网易邮箱登陆界面

				
			

			

				

					qq_44651930的博客
				

				

					10-25
					
					2645
					
				

			

		

		

			
				
html+css编写网易邮箱登陆界面

			
		

	





	

		

			

				
					
H5 用户注册页面

				
			

			

				

					清流弯弯
				

				

					08-19
					
					1万+
					
				

			

		

		

			
				
td input[type="text"],td input[type="email"],td input[type="password"], td input[type="date"]{
            width:98%;
        }


    
    
        function checkLength(){
            var pwd=document

			
		

	





	

		

			

				
					
h5+css实现windows设置静态页面代码

				
			

			

				

					06-07
				

			

		

		

			
				
以下是一个简单的示例代码，使用HTML5和CSS实现Windows设置的静态页面：

```html
<!DOCTYPE html>
<html>
<head>
	<title>Windows设置</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #f2f2f2;
			margin: 0;
			padding: 0;
		}
		.container {
			max-width: 800px;
			margin: 0 auto;
			padding: 20px;
			background-color: #fff;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		}
		h1 {
			font-size: 32px;
			margin-top: 0;
			margin-bottom: 20px;
		}
		label {
			display: block;
			margin-bottom: 10px;
			font-weight: bold;
		}
		input[type="text"], input[type="password"], textarea {
			width: 100%;
			padding: 10px;
			border: 1px solid #ccc;
			border-radius: 3px;
			outline: none;
			font-size: 16px;
			margin-bottom: 20px;
		}
		button {
			background-color: #4CAF50;
			border: none;
			color: #fff;
			padding: 10px 20px;
			border-radius: 3px;
			font-size: 16px;
			cursor: pointer;
		}
		button:hover {
			background-color: #3e8e41;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>Windows设置</h1>
		<form>
			<label for="username">用户名</label>
			<input type="text" id="username" name="username" required>
			<label for="password">密码</label>
			<input type="password" id="password" name="password" required>
			<label for="email">电子邮件</label>
			<input type="text" id="email" name="email" required>
			<label for="phone">电话号码</label>
			<input type="text" id="phone" name="phone" required>
			<label for="address">地址</label>
			<textarea id="address" name="address" rows="5" required></textarea>
			<button type="submit">保存设置</button>
		</form>
	</div>
</body>
</html>
```

这段代码实现了一个简单的Windows设置页面，包括用户名、密码、电子邮件、电话号码和地址等输入项，以及一个保存设置的按钮。样式方面使用了简单的CSS，使页面看起来更加美观。注意，这只是一个静态页面，无法实现具体的Windows设置功能，您需要使用JavaScript和后端技术来实现。

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值