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>

posted @ 2022-03-17 22:54  椅念琼  阅读(115)  评论(0编辑  收藏  举报