CSDN博客源地址 https://blog.csdn.net/Eastmount/article/details/56685372
WAMP(Windows+Apache+MySQL+PHP)开发网站,HTML布局首页,PHP连接数据库以及XAMPP操作数据库的基础文章,更是一篇教学文章。文章比较基础,做个入门介绍。
一. HTML简单布局首页
首先是页面布局,这里采用我以前给同学做的火车票的简单网站模板。
主要是中间那部分DIV需要设计成模拟的跳转界面。代码如下:
<!DOCTYPE>
<html>
<head>
<title>火车票订票系统管理系统</title>
<style type="text/css">
#middle {
margin:0 auto; /* 水平居中 */
margin-top: 10px;
width: 80%;
height: 60%;
background-color: #E6E6FA;
}
#left {
float: left;
margin-left: 20px;
margin-top: 5px;
width: 25%;
height: 95%;
background-color: #9ACD32;
}
#right {
float: left;
margin-left: 20px;
margin-top: 5px;
width: 70%;
height: 95%;
background-color: #BFEFFF;
}
</style>
</head>
<body>
<div align="center">
<div class="trainCSS">
<table width="1024" height="150" cellpadding="0" cellspacing="0">
<tr><td colspan="2">
<img src="./image/logo.jpg" alt="logo" width="1024" height="149">
</td></tr>
<tr><td width="205" bgcolor="#b7d7ec">
<p align="center">
<script language=JavaScript>
today=new Date();
function initArray(){
this.length=initArray.arguments.length;
for(var i=0;i<this.length;i++)
this[i+1]=initArray.arguments[i]; }
var d=new initArray(
"星期日","星期一","星期二","星期三","星期四", "星期五","星期六");
document.write("<font color=##ff0000 style='font-size:12pt;font-family: 宋体'> ",
today.getYear()+1900,"年",today.getMonth()+1,"月",today.getDate(),"日 ",d[today.getDay()+1],
"</font>" );
</script>
</p>
</td>
<td width="819" bgcolor="#b7d7ec">
<marquee direction="left" οnmοuseοver=this.stop() οnmοuseοut=this.start() scrollAmount=3 scrollDelay=100>
<FONT style="FONT-SIZE: 18px"color=blue>欢迎使用火车票订票系统管理系统 ,如有不足,敬请指导!</FONT>
</marquee>
</td>
</tr>
<tr><td height="12"></td></tr>
</table>
</div>
</div>
<!-- 中部内容查询设计 -->
<div id="middle">
<div id="left">
</div>
<div id="right">
</div>
</div>
<div class="div">
<!-- 底部版权所有界面 -->
<TABLE class=wrapper border=0 cellSpacing=0 cellPadding=0 width="100%" align=center>
<TBODY>
<TR><TD style="LINE-HEIGHT: 100%" align="center">
<HR style="WIDTH: 96%; HEIGHT: 4px; COLOR: #02457c">
<font size="2"> <SCRIPT language=javascript src=""></SCRIPT>
<!-- target=_blank开启新的网页 -->
<BR><A href="aboutme.jsp">关于我们</A> | <A href="wzsm.jsp"
>网站声明</A> <BR>版权所有©2014-2015 贵州财经大学 Eastmount <BR>
信息学院10006号 </font>
</TD></TR>
</TBODY>
</TABLE>
</div>
</body>
</html>