移动应用开发（1）--简易淘宝网首页

最新推荐文章于 2021-08-10 16:19:33 发布

xyxNJFU

最新推荐文章于 2021-08-10 16:19:33 发布

阅读量309

点赞数 2

分类专栏：移动应用开发

本文链接：https://blog.csdn.net/x_____yx/article/details/81085540

版权

移动应用开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这是一个十分简易的淘宝网首页，布局分为上中下三列，上方是滚动广告栏和搜索栏（此处用的是截图，以后会补充），中间是登录框（为此次学习重点），下方是网站底部（包括友情链接之类）。

为以后修改方便，我们将三个部分写成三个html文档（top.html login.html buttom.html），并在首页将其用内联框架连接。

1.top.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网站头页面</title>
<style type="text/css">
	#d1{
		margin:0px auto;
		width:1309px;
		height:135px;
	}#d2{
		margin:0px auto;
		width:1176px;
		height:132px;
	}
	html,body{margin:0px;padding:0px;}
</style>
</head>
<body>
	<div id="d1"><img src="../image/导航1.png"></div>
    <div id="d2"><img src="../image/导航2.png"></div>
    <hr>
</body>
</html>

2.buttom.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>底部</title>
<style>
	div{
		text-align:center;
	}
	a{
		text-decoration:none;
		color:#06F
	}
</style>
</head>

<body>
	<hr>
    <div>
    	<b>
        	友情链接:&nbsp;&nbsp;
            <a href="#">百度</a>|
            <a href="#">百度</a>|
            <a href="#">百度</a>|
            <a href="#">百度</a>|
            <a href="#">百度</a>|
            <a href="#">百度</a>|
            <a href="#">百度</a>|
            <br/> <br/>
            COPYRIGHT &copy;2017-2018 <a href="#">ZTE软件技术有限公司</a>ALL RIGHT RESERVER<br/><br/>
            热线：4008208820 Email：service@zte.com<br/><br/>
            ICP:<a href="#">宁IPC备1234567890</a><br/><br/>
        </b>
    </div>
</body>
</html>

3.用内联框架iframe将头部和底部连接，并在网页中间写登录框。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登录</title>
<script type="text/javascript">
	function test(){
			var name = document.getElementById("name").value;
			var pwd = document.getElementById("pwd").value;
			var isflag = false;
			if(name=="123"&&pwd=="123"){
				isflag = true;
			}
			return isflag;
		}
</script>
<style type="text/css">
	#d1{
		width:500px;
		height:278px;
		background:url(../image/tanwan.jpg) no-repeat;
		margin:0px auto;
		padding-top:49px;
	}
	form{
		width:200px;
		background:rgba(255,255,255,0.7);
		height:150px;
		margin:0px auto;
		padding-top:20px;
		text-align:center;
	}
</style>
</head>

<body>
	<div id="d1">
        <form action="../userinfo" method="post" onsubmit="return test()">
            <p> <input type ="text" id="name" size="20"/></p>
            <p> <input type = "password" id="pwd" size="20"/></p>
            <input type="submit" value="登录"/>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <input type="button" value="注册" />
        </form>
    </div>
</body>
</html>