页面效果截图
{/tabs-pane}
{tabs-pane label="登录页"}
{/tabs-pane}
{tabs-pane label="注册页"}
{/tabs-pane}
代码记录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>主页</title>
</head>
<body>
<center><h1>您还没有登录</h1></center>
<center><h4><a href="./login.html">立即登录</a></h4></center>
</body>
</html>
{/tabs-pane}
{tabs-pane label="login.html"}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<title>登录</title>
</head>
<body>
<div id="left">
<img src="./img/login.png" width="80%">
</div>
<div id="right">
<h2 align="center">登录</h2>
<form action="" method="">
<p class="text">
<img src="./img/user.png" width="25px">
<input type="text" name="user" id="user" value="" placeholder="请输入您的账号"/>
</p>
<p class="text">
<img src="./img/pass.png" width="25px">
<input type="password" name="pass" id="pass" value="" placeholder="请输入您的密码"/>
</p>
<p>
<center><input type="submit" id="log" name="log" value="登 录" /></center>
</p>
</form>
<p style="margin-top: 135px;">
<a href="./reg.html" style="text-decoration: none; color: black; margin-left: 20px;">立即注册</a>
<a href="#" style="text-decoration: none; color: black; float: right; margin-right: 20px;">忘记密码</a>
</p>
</div>
</body>
</html>
{/tabs-pane}
{tabs-pane label="reg.html"}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<title>登录</title>
</head>
<body>
<div id="left">
<img src="./img/login.png" width="80%">
</div>
<div id="right">
<h2 align="center">注册</h2>
<form action="" method="">
<p class="text">
<img src="./img/user.png" width="25px">
<input type="text" name="user" id="user" value="" placeholder="请输入您的账号"/>
</p>
<p class="text">
<img src="./img/pass.png" width="25px">
<input type="password" name="pass" id="pass" value="" placeholder="请输入您的密码"/>
</p>
<p>
<center><input type="submit" id="log" name="log" value="注 册" /></center>
</p>
</form>
<p style="margin-top: 135px;">
<a href="./login.html" style="text-decoration: none; color: black; margin-left: 20px;">立即登录</a>
<a href="./index.html" style="text-decoration: none; color: black; float: right; margin-right: 20px;">返回首页</a>
</p>
</div>
</body>
</html>
{/tabs-pane}
{tabs-pane label="style.css"}
#left{width: 70%; float: left; text-align: center; margin-top: 90px;}
#right{width: 25%; float: left; margin: 30px; margin-top: 90px; background-color: #EFF1F9; border: 15px; border-radius: 10px;}
.text{height: 35px; background-color: #E9E5DF; border-radius: 5px; width: 80%; margin: auto; margin-bottom: 35px; border: 1px solid darkgray;}
.text img{margin: 5px; margin-bottom: 0px; float: left;}
#user{width: 80%; height: 33px; border: none; background-color: #E9E5DF; float: left;}
#pass{width: 80%; height: 33px; border: none; background-color: #E9E5DF; float: left;}
#user input:focus{border: none;}
#log{width: 50%; font-size: large; border: none; background-color: #A0A4C3; padding: 5px; color: white;}{/tabs-pane}
评论 (0)