php作业
共设计了4个界面,分别为主界面,联系博主界面,个人信息填写界面,随笔界面。主界面有着其余三个界面的超链接,其余三个界面分别有主页面的超链接。
点击主界面的关于我,将跳到个人信息填写界面
在个人信息填写界面填写完信息后,点击提交,会跳转到主界面。
在主界面点击联系博主,跳转到联系博主界面
在联系博主界面填完后,点击发送跳转回主界面
在主界面点击新随笔,跳转到随笔界面
点击右上角的博主姓名,回到主界面
代码:
主界面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style tylie="text/css">
body{background-repeat:no-repeat;
background-size: 100%;
background-image:url(images/主背景.gif);
margin: 0px auto}
.biao{
color: #00FFFF;
font-size:50px;
font-family:华文行楷;
list-style:none;
text-align:center;
}
.di{
color: #00FFFF;
font-size: 25px;
list-style: none;
}
#wei{
margin:100px 370px;
color: #00FFFF;
font-family: 华文彩云;
}
</style>
</head>
<body>
<li class="biao">庄树琦的园子</li>
<div id="wei">
<li class="di"><a href="C:\Users\user\Documents\个人信息填写.html" class="di">关于我</a></li>
<li class="di"> </li>
<li class="di"><a href="C:\Users\user\Documents\联系博主.html" class="di">联系博主</a></li>
<li class="di"> </li>
<li class="di"><a href="#" class="di">订阅</a></li>
<li class="di"> </li>
<li class="di"><a href="#" class="di">新随笔</a></li>
</div>
</body>
</html>
联系博主界面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style tyile="text/css">
body{background-repeat:no-repeat;
background-size: 100%;
background-image:url(images/联系背景.gif);
margin: 0px auto}
.biao{
color: #00FFFF;
font-size:50px;
font-family:华文行楷;
list-style:none;
text-align:center;
}
.bke{
width: 230px;
height: 100px;
float: right;
}
.write{
color: #3399FF;
list-style:none;
font-family: 华文彩云;
margin: 40px 370px;
font-size: 25px;
}
li input{
border-radius: 50px 50px 50px 50px;
}
.color1{
font-family: 方正舒体;
color:#00FFFF;
background: url(images/格子背景2.jpeg);
font-size: 25px;
}
li button{
background-color:yellow;
border-radius:10px;
height:30px;
width:50px;
margin: 5px 370px;
}
li button:hover{
background-color:red;
}
</style>
</head>
<body>
<li class="biao">To博主“庄”的问题</li>
<img src="C:\Users\user\Documents\images\无标题-1.gif" class="bke">
<li class="write">发件人:<input type="text" ></li>
<li class="write">标题: <input type="text"></li>
<li class="write">联系方式:<input type="text"></li>
<li class="write">Writr:<textarea name="wuhu" cols="60" rows="12" class="color1"></textarea></li>
<li><a href = "C:\Users\user\Documents\庄树琦-网页设计.html" >
<button type="submit">发送</button ></a></li>
</body>
</html>
个人信息填写界面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style tylie="text/css">
body{background-repeat:no-repeat;
background-size:100%;
background-image:url(images/个人信息背景.jpg);
margin: 0px auto;
}
#wei{
margin:150px 370px;
}
.biao{
color: #3399FF;
list-style:none;
font-family: 华文彩云;
}
.biankuang{
border-radius: 50px 50px 50px 50px;
}
.color1{
font-family: 方正舒体;
color:pink;
background: url(images/格子背景2.jpeg);
font-size: 25px;
}
</style>
</head>
<body>
<div id="wei">
<li class="biao">姓名:<input type="text" class="biankuang"></li>
<li class="biao"> </li>
<li class="biao">年龄:<input type="text" class="biankuang"></li>
<li class="biao"> </li>
<li class="biao">爱好:<input type="text" class="biankuang"></li>
<li class="biao"> </li>
<li class="biao">QQ:<input type="text" class="biankuang"></li>
<li class="biao"> </li>
<li class="biao">微信:<input type="text" class="biankuang"></li>
<li class="biao"> </li>
<li class="biao">邮箱:<input type="text" class="biankuang"></li>
<li class="biao"> </li>
<li class="biao">个人简介:</li>
<li class="biao"> </li>
<li class="biao"><textarea name="textarea" cols="50" rows="5" class="color1">
是一个帅气无比,幽默细胞浓厚,待人宽和的家伙
</textarea></li>
<li class="biao"> </li>
<li class="biao"><a href = "C:\Users\user\Documents\庄树琦-网页设计.html" >
<button type="submit">提交</button ></a> <input type="reset" value="重填"></li>
</div>
</body>
</html>
随笔界面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style tylie="text/css">
body{
background-color: pink;
}
.d{
margin: 60px 0px;
font-size: 30px;
list-style: none;
color: blue;
font-family: 华文行楷;
float: right;
}
li{
text-align:center;
list-style: none;
font-size: 25px;
color: #00FFFF;
clear: right;
}
.text{
color:blue;
background-color: yellow;
font-size: 20px;
}
.bke{
margin: 10px 100px;
width: 230px;
height: 100px;
}
button{
background-color:yellow;
border-radius:10px;
border:0;
height:30px;
width:50px;
padding:5px 10px;
}
button:hover{
background-color:red;
}
</style>
</head>
<body>
<li class="d"><a href = "C:\Users\user\Documents\庄树琦-网页设计.html" >庄树琦</a></li>
<img src="C:\Users\user\Documents\images\无标题-1.gif" class="bke">
<li>标题:</li>
<li><textarea name="textarea"cols="130" rows="5" class="text"></textarea></li>
<li>正文:</li>
<li><textarea name="textarea"cols="130" rows="11" class="text"></textarea></li>
<li><button type="sumbit">提交</button></li>
</body>
</html>