登录注册主页面的实现

哥哥好棒棒

已于 2023-03-03 13:38:19 修改

阅读量1.8k

点赞数 2

分类专栏： html css 文章标签：前端 html css

于 2022-01-21 13:08:48 首次发布

本文链接：https://blog.csdn.net/xfhxdfg/article/details/122617818

版权

html 同时被 2 个专栏收录

5 篇文章

订阅专栏

css

2 篇文章

订阅专栏

简介：

HTML是制作前端页面的主要语言，CSS是将做好的HTML页面进行美化，最终呈现给我们一个很完美的页面。

软件：HBuilder Webstorm 谷歌火狐 IE三选一（浏览器不一样，最终的界面布局也会有所差异）。

视自己情况而定，能用的软件很多，这里我只介绍了我自己用的软件，其中HBuilder的运行还需要下载tomcat，Webstorm可能需要破解，可以网上百度序列号，一般都可以用。

这里给大家提供一个很好的在线编写网站，不需要下载任何软件就可以运行代码。里面的介绍很全面，告诉我们各个标签的作用以及用法，只要认真地看，自己写一个登录主页主页面完全不在话下。

HTML 标签https://www.w3school.com.cn/tags/tag_html.asp

可以自己修改其中的内容然后运行看效果。

大家在学习过后就可以直接上手写了，别怕错，多练就好了。可以参考我的代码对自己的进行修改，当然了，我的并不是最好的，只是向大家提供一个模板。如果没有这方面的基础那就先耐心学，或者说去那个W3 school上一边学一边练，就像我前面发的那篇ps实操—基础篇一样，我也是个小白，我同样是跟着一边学一边操作的，知识那么多，一味的学很难有深刻的了解，练得多了自然就熟练了。废话不多说，直接上代码。

文件大体结构

先创建一个文件夹，在这里面继续创建三个同级的文件夹，一个放html的代码，一个放css的代码，一个放所应用的图片。

当然了，也可以把css的内容直接放入到html中， <style type="text/css"></style>放入其中即可，然后css放入<style>标签中。

我直接放在一起了，觉得这样不美观的话就按照我的那个文件结构来，把我下面的代码中css的部分直接拿出来，放在.css中就可以了。

login页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
	    <style type="text/css">
			body,ul,h2{
			    margin: 0;
			    padding: 0;
			}
			
			.top{
			    width:100%;
			    height: 100px;
			    line-height: 100px;
			}
			
			.top img{
			    position: relative;
			    left: 50px;
			    top: 20px;
			}
			
			.top h2{
			    font-size: 22px;
			    font-weight: 200;
			    display: inline-block;
			    margin-left: 150px;
			
			}
			
			
			.main{
			    width: 100%;
			    height: 500px;
			    background-image: url("../img/b1.jpg")
			}
			
			.main .login-wrap{
			    float: left;
			    margin-left: 280px;
			    margin-top: 70px;
			    width: 347px;
			    height: 340px;
			    background-color: white;
			    border-radius: 5px;
			    /*opacity: 0.7;    变透明 */
			
			}
			
			.main .login-wrap h2{
			    font-size: 22px;
			    font-weight: bold;
			    text-align: center;
			    margin-top: 20px;
			    color: #4670b5;
			}
			
			
			.main .login-wrap form{
			    width: 80%;
			    height: 80%;
			    margin: 20px auto;
			    /* border: 1px solid crimson;*/
			
			}
			.main .login-wrap form div{
			    width: 100%;
			    height: 38px;
			    border: 1px solid #b4b4b4;
			    margin-bottom: 30px;
			}
			.login-wrap .tubiao1{
			    display: block;
			    margin-top: 10px;
			    margin-left: 5px;
			    width:20px ;
			    height: 20px;
			    float: left;
			    background-image: url("../img/yonghu.png");
			
			}
			.login-wrap .tubiao2{
			    display: block;
			    margin-top: 10px;
			    margin-left: 5px;
			    width:20px ;
			    height: 20px;
			    float: left;
			    background-image: url("../img/mima.png");
			
			}
			.main .login-wrap form label{
			    display: inline-block;
			    width: 60px;
			    height: 36px;
			    line-height: 30px;
			    font-size: 12px;
			    color: #6e6e6e;
			    border-right: 1px solid #b4b4b4;
			    text-align: center;
			
			
			}
			
			.login-wrap form input[type=text],.login-wrap form input[type=password]{
			
			    height: 30px;
			    border: none;/*输入文本框，鼠标没有聚焦时候，本身是有边框的，去除边框*/
			    outline: none;/*输入文本框，鼠标点击进去时候的外边框去除*/
			    padding: 2px;
			}
			
			
			
			.login-wrap form input[type=submit]{
			    width: 100%;
			    height: 40px;
			    background-color: #4670b5;
			    border: none;
			    color: white;
			    margin-top: 10px ;
			
			}
		</style>	
    <link href="css/login.css" rel="stylesheet">
</head>
<body>
<div class="top">
	<img src="../img/旅游.png"height="50px" width="50px">
    <h2>欢迎登录</h2>
</div>
<div class="main">
    <div class="login-wrap">
        <h2>账户登录</h2>
		<form action="menu.html">
            <div>
                <span class="tubiao1"></span>
                <label>用户名</label><input type="text">
            </div>
            <div>
                <span class="tubiao2"></span>
                <label>密码</label><input type="password">
            </div>
            <input type="submit" value="登录">
        </form>
    </div>
</div>
</body>
</html>

registe页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
		    <style type="text/css">
				.d0{
				    width: 380px;
				    margin: 0 auto;
				    line-height: 1.5;
				}
				
				.d01{
				    font-size: 14px;
				    line-height: 17px;
				    padding-left: 2px;
				    margin-bottom: 17px;
				    text-decoration: none;
				    color: #333333;
				}
				
				.d1{
				    width: 378px;
				    height: 38px;
				    border: 1px solid #ccc;
				    margin-bottom: 25px;
				    color: #222;
				    font: 12px "Microsoft Yahei",tahoma,arial,"Hiragino Sans GB";
				}
				
				.d11{
				    float: left;
				    width: 76px;
				    padding-left: 11px;
				    line-height: 38px;
				}
				
				.d12{
				    margin:0;
				    width: 200px;
				    height: 100%;
				    position: relative;
				    float: left;
				    line-height: 40px;
				}
				
				.d121{
				    border: none;
				    color: #cacaca;
				}
				
				.d13{
				    width:142px;
				    position: relative;
				    float: left;
				    height: 100%;
				    line-height: 38px;
				}
				
				.d14{
				    float: left;
				    width: 148px;
				    height: 100%;
				    line-height: 38px;
				    text-align: center;
				    background: #f5f5f5;
				    border: 1px solid #bbb;
				    font-size: 14px;
				    margin: -1px -1px 0 0;
				    text-decoration: none;
				    color: #222222;
				}
				
				.d1 a:hover{
				    color: #ff6600;
				}
				
				.d2{
				    background: #f50;
				    width: 100%;
				    line-height: 40px;
				    font-size: 20px;
				    color: #fff;
				    margin: 24px 0 5px;
				    display: block;
				    border-radius: 2px;
				    text-align: center;
				    text-decoration: none;
				}
			</style>

        </head>

<body>
<div class="d0">
    <img src="../img/libao-hover.png" width="20 ">
    <a href="" class="d01">注册领199元大礼包</a>
    <div class="d1">
        <lable class="d11">手机号码</lable>
        <div class="d12">
            <input class="d121" type="text"placeholder="请输入手机号"/>
        </div>
    </div>

    <div class="d1">
        <lable class="d11">手机验证码</lable>
        <div class="d13">
            <input class="d121" type="text"placeholder="请输入手机验证码"/>
        </div>
        <a href="" class="d14">获取短信验证码</a>
    </div>

    <div class="d1">
        <lable class="d11">设置密码</lable>
        <div class="d12">
            <input class="d121" type="password"placeholder="请输入密码"/>
        </div>
    </div>

    <div class="d2">
        <a href="registe-success.html" class="d2">注册</a>
    </div>
</div>


</body>
</html>

成品：