本节主要介绍了什么是B/S架构的软件,什么是动态网站,重点介绍了开发一个网站所需要的技术,包括HTML、CSS,JavaScript、PHP、MySQL、Apache还有浏览器等各个Web构件的详细应用介绍。并通过编写一个网页选项卡使用到各个构件,让你了解每种技术的功能各自独立又要相互配合才能完成一个动态网站的建立。如果你是一个初学者,会对你后期的学习大有帮助,所以请不要跳过本节。
HTML代码:
<html>
<head>
<title>网页选项卡</title>
<link rel="stylesheet" type="text/css" href="card.css">
<script src="jquery.js"></script>
<script src="card.js"></script>
</head>
<body>
<div id="main">
<div id="tit">
<h3 class="titin"><a href="card.php?cid=1">第一页</a></h3>
<h3><a href="card.php?cid=2">第二页</a></h3>
<h3><a href="card.php?cid=3">第三页</a></h3>
</div>
<div id="content">
</div>
</div>
</body>
</html>
CSS:
body {
font-size:12px;
}
#main {
width:300px;
height:200px;
}
#main h3 {
width:80px;
height:25px;
background:#ddd;
float:left;
margin:0px;
padding:0px;
text-align:center;
line-height:25px;
font-size:12px;
margin-right:2px;
border:2px solid white;
}
a {
color:white;
}
#main #content {
background:#888;
width:300px;
height:175px;
float:left;
}
#tit .titin {
border:2px solid #888;
background:#888;
}
SQL代码:
create table card(
id int,
cid int,
title varchar(60)
);
insert into card(id, cid, title) values(1, 1, '1111111111111111111');
insert into card(id, cid, title) values(2, 1, '2222222222222222222');
insert into card(id, cid, title) values(3, 1, '3333333333333333333');
insert into card(id, cid, title) values(4, 2, '444444444444444444');
insert into card(id, cid, title) values(5, 2, '555555555555555555');
insert into card(id, cid, title) values(6, 2, '666666666666666666');
insert into card(id, cid, title) values(7, 3, '7777777777777777');
insert into card(id, cid, title) values(8, 3, '888888888888888888');
insert into card(id, cid, title) values(9, 3, '9999999999999999999999');
JS代码:
$(function(){
$("#content").load("card.php?cid=1");
var dt=null;
$("#main #tit h3").mouseover(function(){
var obj=$(this);
dt=setTimeout(function(){
obj.addClass("titin").siblings("h3").removeClass("titin");
$("#content").load(obj.children("a").eq(0).attr("href"));
}, 300)
}).mouseout(function(){
clearTimeout(dt);
});
});
PHP代码:
<?php
$cid=$_GET["cid"];
$mysqli=new mysqli("localhost", "root", "123456", "card");
$result=$mysqli->query("select id, title from card where cid={$cid}");
while($row=$result->fetch_assoc()){
echo '<ul>';
echo '<li><a href="con.php?id='.$row["id"].'">'.$row["title"].'</a></li>';
echo '</ul>';
}
web开发所需的构建:
源码下载:
资料编辑:
衡水网站建设