本文详细介绍了天野商城登陆界面的设计，包括用户名输入、密码输入、记住密码选项及登录按钮，采用简洁的HTML和CSS布局，同时整合了jQuery、Facebox等JavaScript库以提升用户体验。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>商城界面登陆</title>
<!-- CSS -->
<!-- Reset Stylesheet -->
<link rel="stylesheet" href="resources/css/reset.css" type="text/css" media="screen" />
<!-- Main Stylesheet -->
<link rel="stylesheet" href="resources/css/style.css" type="text/css" media="screen" />
<!-- Invalid Stylesheet. This makes stuff look pretty. Remove it if you want the CSS completely valid -->
<link rel="stylesheet" href="resources/css/invalid.css" type="text/css" media="screen" />
<!-- Javascripts -->
<!-- jQuery -->
<script type="text/javascript" src="resources/scripts/jquery-1.3.2.min.js"></script>
<!-- jQuery Configuration -->
<script type="text/javascript" src="resources/scripts/simpla.jquery.configuration.js"></script>
<!-- Facebox jQuery Plugin -->
<script type="text/javascript" src="resources/scripts/facebox.js"></script>
<!-- jQuery WYSIWYG Plugin -->
<script type="text/javascript" src="resources/scripts/jquery.wysiwyg.js"></script>
</head>
<body id="login">
<div id="login-wrapper" class="png_bg">
<div id="login-top">
<h1>天野商城登陆界面</h1>
<!-- Logo (221px width) -->
<a href="">天野商城登陆界面</a> </div>
<br/>
<!-- End #logn-top -->
<div id="login-content">
<form action="index.html">
<!--
<div class="notification information png_bg">
<div> Just click "Sign In". No password needed. </div>
</div>
-->
<p>
<label>用户名</label>
<input class="text-input" type="text" />
</p>
<div class="clear"></div>
<p>
<label>密 码</label>
<input class="text-input" type="password" />
</p>
<div class="clear"></div>
<p id="remember-password">
<input type="checkbox" />
记住我 </p>
<div class="clear"></div>
<p>
<input class="button" type="submit" value="登陆" />
</p>
</form>
</div>
<!-- End #login-content -->
</div>
<!-- End #login-wrapper -->
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>商城界面登陆</title>
<!-- CSS -->
<!-- Reset Stylesheet -->
<link rel="stylesheet" href="resources/css/reset.css" type="text/css" media="screen" />
<!-- Main Stylesheet -->
<link rel="stylesheet" href="resources/css/style.css" type="text/css" media="screen" />
<!-- Invalid Stylesheet. This makes stuff look pretty. Remove it if you want the CSS completely valid -->
<link rel="stylesheet" href="resources/css/invalid.css" type="text/css" media="screen" />
<!-- Javascripts -->
<!-- jQuery -->
<script type="text/javascript" src="resources/scripts/jquery-1.3.2.min.js"></script>
<!-- jQuery Configuration -->
<script type="text/javascript" src="resources/scripts/simpla.jquery.configuration.js"></script>
<!-- Facebox jQuery Plugin -->
<script type="text/javascript" src="resources/scripts/facebox.js"></script>
<!-- jQuery WYSIWYG Plugin -->
<script type="text/javascript" src="resources/scripts/jquery.wysiwyg.js"></script>
</head>
<body id="login">
<div id="login-wrapper" class="png_bg">
<div id="login-top">
<h1>天野商城登陆界面</h1>
<!-- Logo (221px width) -->
<a href="">天野商城登陆界面</a> </div>
<br/>
<!-- End #logn-top -->
<div id="login-content">
<form action="index.html">
<!--
<div class="notification information png_bg">
<div> Just click "Sign In". No password needed. </div>
</div>
-->
<p>
<label>用户名</label>
<input class="text-input" type="text" />
</p>
<div class="clear"></div>
<p>
<label>密 码</label>
<input class="text-input" type="password" />
</p>
<div class="clear"></div>
<p id="remember-password">
<input type="checkbox" />
记住我 </p>
<div class="clear"></div>
<p>
<input class="button" type="submit" value="登陆" />
</p>
</form>
</div>
<!-- End #login-content -->
</div>
<!-- End #login-wrapper -->
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
