CSS布局与PHP初步
一、实验目的
(1) 掌握DIV布局；
(2) 掌握PHP配置环境与PHP基本语法。
二、实验内容
(1) 实验1：div布局：
(2) 实验2：网页设计：
(3) 实验3：部署PHP环境：
(4) 实验4：PHP字符串：
(5) 实验5：乘法口诀表：
尽量提供云平台网址：（可以做一个实验主网页）
实验1网址:http://1.yangduo.applinzi.com/exp3_1.html
实验2网址:http://1.yangduo.applinzi.com/exp3_2.html
实验3网址:http://1.yangduo.applinzi.com/test.php
实验4网址:http://1.yangduo.applinzi.com/exp3_4.php
实验5网址:http://1.yangduo.applinzi.com/exp3_5.php
三、实验结果与结论：
(1) 实验1
光标在菜单栏上，字体加大一号，颜色变为黑色。
(2) 实验2
(3) 实验3
(4) 实验4
加密：
(5) 实验5
附录：程序源程序（在此贴上网页源代码）
(1) 实验1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>exp3_1</title>
<style type="text/css">
*{
margin: 0px auto;
padding: 0px;
width: 920px;
font-size: 20px;
}
.clearfix {*zoom:1;}
.clearfix:after {
visibility: hidden;
display: block;
content: " ";
clear: both;
height: 0;
}
.u1{
color: blue;
list-style: none;
}
.u2{
color:darkgray;
list-style: none;
}
.d2 ul li{
width: 125px;
float: left;
text-align: center;
}
.d2 ul li a{
text-decoration: none;
}
.d2:hover{
font-size: 21px;
font-weight: 700;
}
ul li a:hover{
color: black;
}
.left{
background: green;
float:left;
width: 220px;
height: 300px;
}
.right{
float:left;
width:218px;
height: 250px;
}
.center{
background: orange;
float: left;
width:480px;
}
.left p{
width: 200px;
height: 280px;
text-indent: 2em;
overflow: auto;
padding: 10px;
}
.right p{
background: green;
width: 196px;
height:230px;
text-indent: 2em;
padding: 10px;
padding-right: 15px;
overflow: hidden;
}
.center p{
width: 460px;
text-indent: 2em;
padding: 10px;
}
.d4{
width: 920px;
height:70px;
background: skyblue;
text-align: center;
clear: both;
}
.p1{
position: relative;
top: 22.5px;
font-size: 15px;
}
.d3{
clear: both;
border:1px solid;
}
</style>
</head>
<body>
<div class="all">
<div class="d1">
<img src="../img/header.JPG"/>
</div>
<div class="d2">
<ul class="u1">
<li><a href="#">学校概况</a></li>
<li><a href="#">仲园新闻</a></li>
<li><a href="#">招生信息</a></li>
<li><a href="#">最新公告</a></li>
<li><a href="#">院系结构</a></li>
<li><a href="#">网络服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<br />
<ul class="u2">
<li>Survey</li>
<li>News</li>
<li>Recruit</li>
<li>Bulletin</li>
<li>Hiberarchy</li>
<li>Service</li>
<li>Contact</li>
</ul>
</div>
<div class="d3 clearfix">
<div class="left">
<p >
为争取社会各界支持办学，促进学校发展，1987年4月，根据国家副主
席王震提议，经*广东省委同意，成立了学校董事会，王震任名誉董
事长，广东省省长叶选平任第一届董事会董事长。1997年，广东省省长
卢瑞华任第二届董事会董事长。2008年，广东省省长黄华华任第三届董
事会董事长。2015年，广东省省长朱小丹任第四届董事会董事长。董事
会成员由国家*、省部级领导以及港澳知名人士担任。
</p>
</div>
<div class="center">
<p >
仲恺农业工程学院是一所以农、工学科为优势，农、工、理、经、管、
文协调发展的多科性省属本科大学。学校坐落在历史文化名城——广州，
校园集云山之神秀，汇珠水之灵气，是读书治学的理想园地。
</p>
<p >
学校前身为仲恺农工学校，是第一次国共合作时期，近代*革命著名的政治
活动家何香凝先生等提议、**为纪念廖仲恺先生爱护农工的意愿而决
定创办的。学校于1927年招生，何香凝先生首任校长15年。1984年，经教育
部、农牧渔业部批准，学校升格为本科院校，定名“仲恺农业技术学院”，国家
副主席王震同志题写校名。2008年3月，经教育部批准，更名“仲恺农业工程学
院”。
</p>
</div>
<div class="right" style="height: 362px;">
<p >
近年来，学校先后被评为全国暑期“三下乡”社会实践先进单位，广东省
回乡大学生开展农业科技下乡活动先进单位，广东省青年志愿服务优秀
集体，广东省教育系统纪检监察先进集体、广州地区建立侨捐监督管理
制度工作先进集体、广州市文明单位，在管理和社会服务方面得到了社
会广泛认可。
</p>
</div>
</div>
<div class="d4">
<p class="p1">
粤ICP备05008893号 Copyright ?2008 中国·广东·仲恺农业工程学院 邮编:
510225 Tel:+8620-89003114
</p>
</div>
</div>
</body>
</html>
(2) 实验2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>exp3_2</title>
<style type="text/css">
.all{
width: 600px;
margin:0px auto;
}
body{
font-size: 14px;
font-family:arial "微软雅黑";
}
.d1{
text-align: center;
background: gainsboro;
line-height:36px;
margin: 0px;
}
.d21 a img,.d31 a img,.d41 a img{
width: 213px;
height: 142px
}
.d2,.d3,.d4{
margin: 18px 0px 20px 0px;
}
.d21,.d22,.d31,.d32,.d41,.d42{
float: left;
}
.h1 a,.h2 a,.h3 a{
font-size: 18px;
font-weight: 700;
color: black;
text-decoration: none;
/*margin: 0px;*/
position: relative;
top:-21.5px;
}
.h2{
width: 378px;
height: 36px;
}
.d22,.d32,.d42{
padding-left: 9px;
height: 142px;
position: relative;
}
.tag span{
color: #333;
}
.time{
position: absolute;
width: 378px;
bottom:0px;
}
#hr1{
clear: both;
margin:10px 0px 10px 0px;
position: relative;
top: 10px;
}
</style>
</head>
<body>
<div class="all">
<div class="d1">
有11条消息，点击查看
</div>
<div class="d2">
<div class="d21">
<a href="exp3_1.html">
<img src="../img/b0.JPG" />
</a>
</div>
<div class="d22">
<h2 class="h1">
<a href="exp3_1.html">
共享单车的大迁徙：资本、梦想和不知疲倦的人
</a>
</h2>
<div class="tag">
<img src="../img/32.png"/>
<span>互联网</span>
</div>
<div class="time">
<span style="float: left;">16分钟前</span>
<div style="float: right;">
<span>评论</span>
<span>分享</span>
</div>
</div>
</div>
</div>
<hr id="hr1"/>
<div class="d3">
<div class="d31">
<a href="exp3_1.html">
<img src="../img/b1.JPG" />
</a>
</div>
<div class="d32">
<h2 class="h2">
<a href="exp3_1.html">
共享单车火了而共享汽车却被吐槽 背后逻辑发人深思
</a>
</h2>
<div class="tag">
<img src="../img/32.png"/>
<span>互联网</span>
</div>
<div class="time">
<span style="float: left;">23分钟前</span>
<div style="float: right;">
<span>评论</span>
<span>分享</span>
</div>
</div>
</div>
</div>
<hr id="hr1"/>
<div class="d4">
<div class="d41">
<a href="exp3_1.html">
<img src="../img/b2.JPG" />
</a>
</div>
<div class="d42">
<h2 class="h3">
<a href="exp3_1.html">
iPhone7频丢数据 苹果店员称每天好几例
</a>
</h2>
<div class="tag">
<img src="../img/32.png"/>
<span>电信</span>
</div>
<div class="time">
<span style="float: left;">25分钟前</span>
<div style="float: right;">
<span>评论(2)</span>
<span>分享</span>
</div>
</div>
</div>
</div>
<hr id="hr1"/>
</div>
</body>
</html>
实验3：
<?php
echo "hello word!";
phpinfo();
?>
实验4：
<?php
$x="The Quick Brown Fox.";
echo $x;
echo "<br/>";
$y=strtolower($x);
echo $y;
echo "<br/>";
for($i=0;$i<strlen($y);$i++)
{
if(ord(substr($y,$i,1)) <118 && ord(substr($y,$i,1))>97)
echo chr(ord(substr($y,$i,1))+5);
else if(ord(substr($y,$i,1))>118 && ord(substr($y,$i,1))<123)
echo chr(ord(substr($y,$i,1))-21);
else
echo substr($y,$i,1);
}
?>
实验5：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>exp3_5</title>
<style type="text/css">
table{
border-collapse:collapse;
width: 700px;
}
td{
width: 70px;
border-color: black;
}
table tr:first-child{
color: red;
font-weight: bold;
}
table tr td:first-child{
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<table border="1">
<caption>乘法口诀表</caption>
<?php
for($i=0;$i<10;$i++)
{
print('<tr align="center">');
for($j=0;$j<10;$j++)
{
$z=$i*$j;
if($i==0&&$j==0)
print("<td>X</td>");
else if($i==0&&$j!=0)
print("<td>$j</td>");
else if($i!=0&&$j==0)
print("<td>$i</td>");
else if($i>=$j)
print("<td>{$i}x{$j}=$z</td>");
else
print("<td> </td>");
}
print('</tr>');
}
?>
</table>
</body>
</html>