实验一：个人博客

一、要求：

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

二、效果

1、个人博客首页

2、新添加随笔页

3、博客列表页

4、个人信息页

三、代码：

1、个人博客首页

<?php
/**
 * Created by PhpStorm.
 * User: hp
 * Date: 2020/4/15
 * Time: 8:14
 */

?>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>个人博客主页</title>

<style type="text/css">
    div {
        font-size: 20px;
        font-family: 华文行楷;
    }

    a:hover {
        font-size: 40px;
    }

    a:link {
        color:#6495ED;
    }

    a:visited {
        color: #6495ED;
    }

    .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 li{
        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(img/banner1.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">
        <li>
            <a href="blog.html">首页</a>
        </li>
        <li>
            <a href="essays.html">新随笔</a>
        </li>
        <li>
            <a href="my.html">关于我</a>
        </li>
        <li>
            <a href="myBlog.html">我的博客</a>
        </li>
    </ul>
</div>
<div>
    <h1>欢迎进入王正帅的个人博客</h1>
</div>
<div class="bum">
    <span>
        石家庄铁道大学
        @2018-2020 xiaotian
    </span>
</div>

</body>

</html>

View Code

2、新添加随笔页

<!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:#6495ED;
    }
    a:visited {
        color: #6495ED;
    }

    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 li{
        position:relative;
        right:50%;
        float:left;
        margin:10px;
        padding:0 10px;
        line-height:60px;
        font-family: 华文行楷;
    }
    .button {
        width: 200px;
        padding:8px;
        background-color: #428bca;
        border-color: #357ebd;
        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%
    }
    .mp3{
        background-color: #ffffff;
    }
    body {
        background-repeat: no-repeat;
        background-size:cover;
        background-attachment: fixed;
        background-image: url(img/timg.jpg);
    }
</style>

<body>

<div id="nav" >
    <ul class="nav-skin">
        <li>
            <a href="blog.html">首页</a>
        </li>
        <li>
            <a href="essays.html">新随笔</a>
        </li>
        <li>
            <a href="my.html">关于我</a>
        </li>
        <li>
            <a href="myBlog.html">我的博客</a>
        </li>
    </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>
<audio controls="controls">
    <source src="mp4/time.mp3" type="audio/mpeg">
</audio>

</body>

</html>

View Code

3、博客列表页

<!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: #999999;
        border-collapse: collapse;
    }
    table.imagetable th {
        background: #5961d2;
        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:#6495ED;
    }
    .a:visited {
        color: #6495ED;
    }

    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 li{
        position:relative;
        right:50%;
        float:left;
        margin:10px;
        padding:0 10px;
        line-height:60px;
        font-family: 华文行楷;
    }
    .button {
        width: 200px;
        padding:8px;
        background-color: #428bca;
        border-color: #357ebd;
        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(img/case1.jpg);
    }
</style>

<body>

<div id="nav" >
    <ul class="nav-skin">
        <li>
            <a href="blog.html" class="a">首页</a>
        </li>
        <li>
            <a href="essays.html" class="a">新随笔</a>
        </li>
        <li>
            <a href="my.html" class="a">关于我</a>
        </li>
        <li>
            <a href="myBlog.html" class="a">我的博客</a>
        </li>
    </ul>
</div>
<div class="table">



<table class="imagetable">
    <tr>
        <th>标题</th>
        <th>摘要</th>
        <th>关键字</th>
    </tr>
    <tr>
        <td><a href="https://www.cnblogs.com/20183544-wangzhengshuai/p/12702137.html">顶会热词统计</a></td>
        <td>一、要求： 1、完成论文的题目、摘要、关键词、原文链接四项内容爬取......</td>
        <td>热词 词云 爬虫 数据库</td>
    </tr>
    <tr>
        <td><a href="https://www.cnblogs.com/20183544-wangzhengshuai/p/12702137.html">顶会热词统计</a></td>
        <td>一、要求： 1、完成论文的题目、摘要、关键词、原文链接四项内容爬取......</td>
        <td>热词 词云 爬虫 数据库</td>
    </tr>
    <tr>
        <td><a href="https://www.cnblogs.com/20183544-wangzhengshuai/p/12702137.html">顶会热词统计</a></td>
        <td>一、要求： 1、完成论文的题目、摘要、关键词、原文链接四项内容爬取......</td>
        <td>热词 词云 爬虫 数据库</td>
    </tr>
</table>
</div>
</body>

</html>

View Code

4、个人信息页

<!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:#6495ED;
    }

    a:visited {
        color: #6495ED;
    }

    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 li{
        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: #428bca;
        border-color: #357ebd;
        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-size:75%
    }

    .put{
        margin-top: 10px;
        border: 1px solid #ccc;
        padding: 7px 0px;
        border-radius: 3px; /*css3属性IE不支持*/
        padding-left:5px;
    }

    body {
        background-repeat: no-repeat;
        background-size:cover;
        background-attachment: fixed;
        background-image: url(img/banner1.jpg);
    }

</style>

<body>
<div id="nav" >
    <ul class="nav-skin">
        <li>
            <a href="blog.html">首页</a>
        </li>
        <li>
            <a href="essays.html">新随笔</a>
        </li>
        <li>
            <a href="my.html">关于我</a>
        </li>
        <li>
            <a href="myBlog.html">我的博客</a>
        </li>
    </ul>
</div>


<div>

    <form action="blog.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="text" class="put"><br>
        邮箱：<input type="text" class="put"><br>

        <input type="submit" value="提交" class="button">

        <button type="reset" class="button">重置</button>

    </form>

</div>

</body>

</html>

View Code

四、总结：

　　自己对css的掌握还不熟练，在实验过程中，div中元素的居中忘记了、背景图片铺满整个屏幕忘记了...总之就是在实验中的一些样式设置还要依靠查阅资料。经过这次实验我也深深体会到div+css的强大：是代码结构清晰，更好的控制页面布局。表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。

实验一：个人博客

一、要求：

二、效果

三、代码：

猜你喜欢