ayyue

编程小白菜

团队项目冲刺第三天

今天是团队项目冲刺的第三天,今天完成的任务是,进行PHP上机实验和MATLAB上机实验。以及对于as页面的简单认识

PHP实验要求

***个人博客网页

参考Internet网上的博客网站,设计自己的个人网页,主要包括:图像背景、表格布局,插入图像,flash或者影片播放,插入超级链接(至少3个),例如点击“关于我”,将链接到表单设计的网页,进行个人信息的填写。点击提交后,回到主页。

代码截图

 

心得体会

在这次的html网页编写中,学习PHPstorm编写html文件,以及div+css的运用,给我很大的帮助。对今后php web等的学习提供了方便。

 

 

 源码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人首页</title>
</head>
<style type="text/css">
    div
    {
        font-size: 15px;
        font-family: 华文隶书;
    }
    a:hover
    {
        font-size: 40px;
    }
    a:link
    {
        color:#DA70D6;
    }
    a:visited
    {
        color:#DA70D6;
    }
    form
    {
        clear: both;
        font-family: 华文隶书;
        font-size: 30px;
        margin-left: 43%;
        margin-top: 40px;
    }
    #nav
    {
        position:relative;
        width:100%;
        height:80px;
        text-align:center;
        overflow:hidden
    }
    #nav .nav-skin
    {
        float:left;
        position:relative;
        left:50%;
    }
    #nav .nav-skin in
    {
        font-size: 20px;
        position:relative;
        right:50%;
        float:left;
        margin:10px;
        padding:0 10px;
        line-height:60px;
    }
    .button
    {
        margin-top: 10px;
        width: 110px;
        padding:8px;
        background-color:#DA70D6;
        border-color:#AAFF11;
        color:#DA70D6;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px; /* future proofing */
        -khtml-border-radius: 10px; /* for old Konqueror browsers */
        text-align: center;
        vertical-align: middle;
        border: 1px solid transparent;
        font-size:75%
    }
    .put
    {
        margin-top: 10px;
        border: 1px solid #DA70D6;
        padding: 7px 0px;
        border-radius: 3px;
        padding-left:5px;
    }
    body
    {
        background-repeat: no-repeat;
        background-size:cover;
        background-attachment: fixed;
        background-image: url(imge/2girl.jpg);
    }
</style>
<body>
<div id="nav" >
    <ul class="nav-skin">
        <in>
            <a href="index.html">首页</a>
        </in>
        <in>
            <a href="newblog.html">新随笔</a>
        </in>
        <in>
            <a href="me.html">关于我</a>
        </in>
        <in>
            <a href="myblogs.html">我的博客</a>
        </in>
    </ul>
</div>
<div>
    <form action="index.html" method="post">
        姓名:<input type="text" class="put"><br>
        密码:<input type="password" class="put"><br>
        性别:<input name="sex" type="radio" value="男"><input name="sex" type="radio" value="女"><br>
        民族:<input type="text" class="put"><br>
        <input type="submit" value="提交" class="button">
        <button type="reset" class="button">重置</button>
    </form>
</div>
</body>
</html>
me.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的博客</title>
</head>
<style type="text/css">
    .table
    {
        text-align: center;
    }
    table
    {
        margin:auto;
        width:70%;
    }
    table.imagetable
    {
        font-family: verdana,arial,sans-serif;
        font-size:11px;
        color:#333333;
        border-width: 1px;
        border-color:#ffffff;
        border-collapse: collapse;
    }
    table.imagetable th
    {
        background:#DA70D6;
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
    }
    table.imagetable td
    {
        background: #e2e4e8;
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
    }
    div
    {
        font-size: 15px;
    }
    .a:hover
    {
        font-size: 40px;
    }
    .a:link
    {
        color:#DA70D6;
    }
    .a:visited
    {
        color:#DA70D6;
    }
    textarea
    {
        clear: both;
        font-family: 华文隶书;
        color: #778899;
        margin-left: 15%;
        height: 500px;
        width: 70%;
    }
    .input
    {
        margin-left: 35%;
    }
    input
    {
        clear: both;
        font-family: 华文行楷;
    }
    #nav
    {
        font-size: 20px;
        position:relative;
        width:100%;
        height:80px;
        text-align:center;
        overflow:hidden
    }
    #nav .nav-skin
    {
        float:left;
        position:relative;
        left:50%;
    }
    #nav .nav-skin in
    {
        position:relative;
        right:50%;
        float:left;
        margin:10px;
        padding:0 10px;
        line-height:60px;
        font-family: 华文隶书;
    }
    .button
    {
        width: 200px;
        padding:8px;
        background-color:#DA70D6;
        border-color:#DA70D6;
        color:#DA70D6;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        -khtml-border-radius: 10px;
        text-align: center;
        vertical-align: middle;
        border: 1px solid transparent;
        font-weight: 900;
        font-size:125%
    }
    body
    {
        background-repeat:no-repeat;
        background-size:cover;
        background-attachment: fixed;
        background-image: url(imge/leimu.jpg);
    }
</style>
<body>
<div id="nav">
    <ul class="nav-skin">
        <in>
            <a href="index.html" class="a">首页</a>
        </in>
        <in>
            <a href="newblog.html" class="a">新随笔</a>
        </in>
        <in>
            <a href="me.html" class="a">关于我</a>
        </in>
        <in>
            <a href="myblogs.html" class="a">我的博客</a>
        </in>
    </ul>
</div>
<div class="table">
    <table class="imagetable">
        <tr>
            <th>标题</th>
            <th>摘要</th>
            <th>关键字</th>
        </tr>
        <tr>
            <td><a href="https://www.cnblogs.com/aiyyue/p/12708230.html">团队项目冲刺第一天</a></td>
            <td>这个月,为软件工程专业团队项目开发冲刺。。。</td>
            <td>冲刺 开发</td>
        </tr>
        <tr>
            <td><a href="https://www.cnblogs.com/aiyyue/p/12714207.html">团队项目冲刺第二天</a></td>
            <td>今天是团队项目冲刺的第二天,今天的目标是。。。</td>
            <td>冲刺 开发</td>
        </tr>
        <tr>
            <td><a href="https://www.cnblogs.com/aiyyue/p/12721965.html">团队项目冲刺第三天</a></td>
            <td>今天是团队项目冲刺的第三天。。。</td>
            <td>冲刺 开发</td>
        </tr>
    </table>
</div>
</body>
</html>
myblogs.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随笔</title>
</head>
<style type="text/css">
    div
    {
        font-size: 15px;
    }

    a:hover
    {
        font-size: 40px;
    }
    a:link
    {
        color:#DA70D6;
    }
    a:visited
    {
        color:#DA70D6;
    }
    textarea
    {
        clear: both;
        font-family: 华文行楷;
        color: #778899;
        margin-left: 15%;
        height: 500px;
        width: 70%;
    }
    .input
    {
        margin-left: 35%;
    }
    input
    {
        clear: both;
        font-family: 华文行楷;
    }
    #nav
    {
        font-size: 20px;
        position:relative;
        width:100%;
        height:80px;
        text-align:center;
        overflow:hidden
    }
    #nav .nav-skin
    {
        float:left;
        position:relative;
        left:50%;
    }
    #nav .nav-skin in
    {
        position:relative;
        right:50%;
        float:left;
        margin:10px;
        padding:0 10px;
        line-height:60px;
        font-family: 华文行楷;
    }
    .button
    {
        width: 200px;
        padding:8px;
        background-color:#DA70D6;
        border-color:#DA70D6;
        color: #fff;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px; /* future proofing */
        -khtml-border-radius: 10px; /* for old Konqueror browsers */
        text-align: center;
        vertical-align: middle;
        border: 1px solid transparent;
        font-weight: 900;
        font-size:125%
    }
    body
    {
        background-repeat: no-repeat;
        background-size:cover;
        background-attachment: fixed;
        background-image: url(imge/leimu.jpg);
    }
</style>
<body>
<div id="nav" >
    <ul class="nav-skin">
        <in>
            <a href="index.html">首页</a>
        </in>
        <in>
            <a href="newblog.html">新随笔</a>
        </in>
        <in>
            <a href="me.html">关于我</a>
        </in>
        <in>
            <a href="myblogs.html">我的博客</a>
        </in>
    </ul>
</div>
<div>
<textarea  cols="30" rows="10">
    写下你的文字
</textarea>
</div>
<div class="input">
    <input type="button" value="发布" class="button">
    <input type="button" value="存为草稿"  class="button">
</div>
</body>
</html>
newblog.html
<!DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人博客主页</title>
<style type="text/css">
    div
    {
        font-size: 25px;
        font-family: 华文隶书;
    }
    a:hover
    {
        font-size:40px;
    }
    a:link
    {
        color:#DA70D6;
    }
    a:visited
    {
        color:#DA70D6;
    }
    .td
    {
        width: 50px;
        height: 150px;
    }
    table
    {
        clear: both;
    }
    #nav
    {
        position:relative;
        width:100%;
        height:80px;
        text-align:center;
        overflow:hidden
    }
    #nav.nav-skin
    {
        float:left;
        position:relative;
        left:50%;
    }
    #nav.nav-skin in
    {
        position:relative;
        right:50%;
        float:left;
        margin:10px;
        padding:0 10px;
        line-height:60px;
    }
    body
    {
        background-repeat: no-repeat;
        background-size:cover;
        background-attachment: fixed;
        background-image: url(imge/a.jpg);
        background-position: 0px -80px;
    }
    h1
    {
        margin-top: 200px;
        text-align:center;
    }
    .bum
    {
        margin-top: 340px;
        margin-left: 600px ;
    }
</style>
</head>
<body>
<div id="nav">
    <ul class="nav-skin">
        <in>
            <a href="index.html">首页</a>
        </in>
        <in>
            <a href="newblog.html">新随笔</a>
        </in>
        <in>
            <a href="me.html">关于我</a>
        </in>
        <in>
            <a href="myblogs.html">我的博客</a>
        </in>
    </ul>
</div>
<div>
    <h1>我的个人博客</h1>
</div>
</body>
</html>
index.html

 

posted on 2020-04-17 19:09  ayyue  阅读(136)  评论(0编辑  收藏  举报

导航