简单个人网站

来源：互联网发布：奥尼尔在骑士数据编辑：程序博客网时间：2024/06/04 00:41

注：参考书《网页开发手记》

代码结构图

这里写图片描述

1.index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <link rel="stylesheet" href="../css/index.css" /></head><body>    <div id="top">        <div id="top_txt">            <a href="javascript:addFav('个人网站示例')" title="添加本页到收藏夹">收藏本页</a>            |            <a href="mailto:zhanzhang@qq.com" title="给站长发邮件">联系站长</a>        </div>    </div>    <div id="vi">        <div id="tt">            成功没有早晚<br />            努力就有收获        </div>    </div>    <div id="nav">        <ul>            <li><a href="index.html" target="_self">首页</a></li>            <li><a class="bar">|</a></li>            <li><a href="article.html" target="_self">日志</a></li>            <li><a class="bar">|</a></li>            <li><a href="photo.html" target="_self">照片</a></li>            <li><a class="bar">|</a></li>            <li><a href="message.html" target="_self">留言</a></li>        </ul>    </div>    <div id="main">        <div id="left">            <h4>|最新留言</h4>            <ul>                <li>多拍点照片啊，大家分享一下</li>                <li>相片很好看，真的，不骗你</li>                <li>能否放一点北京奥运会的内容啊</li>                <li>还行了，虽然简单了一点</li>                <li>恩，不错，看来学习网站制作并不困难</li>                <li>网站主体颜色我不太喜欢，你能否用酷一点的颜色啊</li>                <li>恭喜啊，个人网站终于开张了，下次记得请我们吃饭啊</li>            </ul>        </div>        <div id="right">            <h4>|最新日志</h4>            <h5>Internet技术的应用</h5>            <span class="date">2017/07/30</span><br />            <p>在信息技术发达的今天，读者每天都可以感受到Internet技术在生活中的巨大作用。通过Internet，读者可以每天浏览到最新的新闻，可以参与论坛各种话题火热的讨论，可以和世界各地的朋友一起玩游戏等。            </p>            <hr />            <h5>网页技术学前班</h5>            <span class="date">2017/07/28</span><br />            <p>Internet，中文成为国际互联网。众所周知，Internet起源于1969年，由美国国防部授权APPANET（高级研究规划署）进行的互联网的试验。当初没有人会预料到，在几十年后的今天，互联网成了全球互通的主要方式。网页是Internet最主要的组成部分，在本章读者可以学到很多Internet及网页制作方面的基础知识。TCP/IP协议使用客户端/服务器模式进行通信，TCP/IP通信是点对点的，即通信是网络中的一台主机与另一台主机之间的。读者要了解的是，当前Internet上的数据都是通过TCP/IP在网络上进行控制、转发的。</p>        </div>        <div id="photo">            <h4>|最新照片</h4>            <div id="photo_img">                <img src="../images/01.jpg" />                <img src="../images/02.jpg" />                <img src="../images/03.jpg" />                <img src="../images/04.jpg" />                <img src="../images/05.jpg" />                <h5>雏菊</h5>                <h5>茉莉</h5>                <h5>蝴蝶兰</h5>                <h5>郁金香</h5>                <h5>玫瑰</h5>            </div>        </div>    </div>    <div id="bt">本网站版权为Lin所有<br />        <span id="sysmsg"></span>    </div></body></html>

2.index.css

/* * @Author: Lin* @Date:   2017-07-29 17:21:14* @Last Modified by:   Lin* @Last Modified time: 2017-07-30 19:03:27*/* {    margin:0px;    padding:0px;}html, body {    scrollbar-face-color:#98a363;    scrollbar-highlight-color:#e3e69d;    scrollbar-shadow-color:#999;    scrollbar-3dlight-color:#000;    scrollbar-arrow-color:#000;    scrollbar-track-color:#f4f4f0;    scrollbar-darkshadow-color:#666;}/*注：上面关于滚动条的设置在chrome中不可以显示但是在ie中可以*/body {    /*关于背景的设置*/    background:#d9d7cd;    background-image: url("../images/back.jpg");    background-repeat: no-repeat;    background-size: 150%;}ul {    list-style:none;    font-size:12px;}#top,#vi,#nav,#main,#bt {    width: 779px;    margin: 0px auto;}#top,#bt {    background-color:#000;}#top {    margin-top: 20px;    height:18px;    padding-top:5px;    text-align:right;    color:#fff;}#top_txt {    margin-right: 5px;}#top_txt a {    color:lightblue;    text-decoration: none;}#top_txt a:visited {    color:lightblue;}#top_txt a:hover {    color:#fff;}#vi {    height:85px;    background:#98a363;    background-image: url("../images/vii.jpg");}#tt {    margin-left:120px;    padding-top:8px;    text-indent:-40px;    line-height:1.8em;    font-size:20px;    font-weight:bold;}#nav {    height:35px;    background:#e6e4db;}#nav ul {    margin-left: 30px;}#nav ul li {    float:left;}#nav ul a {    display: block;    width: 85px;    height:25px;    padding-top: 10px;    text-decoration: none;    letter-spacing: 15px;    text-align: center;    color: #000;    font-size: 15px;    font-weight: bold;}#nav ul a:visited {    color: #000;}#nav ul a:hover {    color: #98a363;    background: #fff;}#nav ul li.bar {    width: 6px;    padding-top: 12px;}#main {    height: 560px;    background:#fff;}#bt {    height: 46px;    padding-top: 34px;    text-align: center;    color: #fff;}#left {    width: 180px;    height: 350px;    border: 1px solid #d9d7cd;    margin: 10px;    float: left;    clear: left;  /*what is clear mean*/}h4 {    letter-spacing: 1em;    font-size: 15px;    background: #e6e4db;    height:24px;    border-bottom: 1px solid #d9d7cd;    padding-top: 5px;    margin-top: 2px;    padding-left: 10px;}#left h4 {    width: 170px;}#left ul {    margin: 16px;    line-height: 3em;}#left li {    width: 150px;    white-space: nowrap;  /*what is this mean*/    overflow: hidden;    text-overflow: ellipsis;}#right {    width: 563px;    height: 350px;    border: 1px solid #d9d7cd;    margin-top: 10px;    float:left;}#right h4 {    width: 554px;}#right h5, #right .date, #right p {    margin-left: 30px;}#right h5 {    margin-top: 10px;    font-size: 13px;}#right .date {    font-style: italic;}#right p {    font-family: Georgia;    font-size: 15px;    width: 500px;    height: 90px;    background: #f4f4f0;    border: 1px solid #999;    text-indent: 2em;    line-height: 1.5em;    overflow: hidden;}hr {    margin-top: 20px;}#photo {    width: 756px;    height: 176px;    border: 1px solid #d9d7cd;    margin-left: 10px;    float: left;}#photo h4 {    width: 746px;}#photo_img {    width: 700px;    margin-left: 60px;    margin-top: 10px;    text-align: center;}#photo img {    display: block;    width: 100px;    height: 100px;    float: left;    margin-right: 30px;    border: 1px solid #d9d7cd;}#photo h5 {    width: 100px;    margin-right: 30px;    margin-top: 5px;    font-size: 12px;    float: left;}

这里写图片描述

3.article.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <link rel="stylesheet" href="../css/article.css" />    <script src="../js/article.js"></script></head><body>    <div id="top">        <div id="top_txt">            <a href="javascript:addFav('个人网站示例')" title="添加本页到收藏夹">收藏本页</a>            |            <a href="mailto:zhanzhang@qq.com" title="给站长发邮件">联系站长</a>        </div>    </div>    <div id="vi">        <div id="tt">            成功没有早晚<br />            努力就有收获        </div>    </div>    <div id="nav">        <ul>            <li><a href="index.html" target="_self">首页</a></li>            <li><a class="bar">|</a></li>            <li><a href="article.html" target="_self">日志</a></li>            <li><a class="bar">|</a></li>            <li><a href="photo.html" target="_self">照片</a></li>            <li><a class="bar">|</a></li>            <li><a href="message.html" target="_self">留言</a></li>        </ul>    </div>    <div id="main">        <div id="right">            <h4>|最新日志</h4>            <h5><a onclick="openContent(0)">Internet技术的应用</a></h5>            <span class="date">2017/07/30</span><br />            <p>在信息技术发达的今天，读者每天都可以感受到Internet技术在生活中的巨大作用。通过Internet，读者可以每天浏览到最新的新闻，可以参与论坛各种话题火热的讨论，可以和世界各地的朋友一起玩游戏等。            </p>            <hr />            <h5><a onclick="openContent(1)">网页技术学前班</a></h5>            <span class="date">2017/07/28</span><br />            <p>Internet，中文成为国际互联网。众所周知，Internet起源于1969年，由美国国防部授权APPANET（高级研究规划署）进行的互联网的试验。当初没有人会预料到，在几十年后的今天，互联网成了全球互通的主要方式。网页是Internet最主要的组成部分，在本章读者可以学到很多Internet及网页制作方面的基础知识。TCP/IP协议使用客户端/服务器模式进行通信，TCP/IP通信是点对点的，即通信是网络中的一台主机与另一台主机之间的。读者要了解的是，当前Internet上的数据都是通过TCP/IP在网络上进行控制、转发的。</p>            <hr />            <h5><a onclick="openContent(2)">css技术学前班</a></h5>            <span class="date">2017/07/27</span>            <br />            <p>css技术应用的具体内容</p>            <hr />            <h5><a onclick="openContent(3)">HTML技术应用</a></h5>            <span class="date">2017/07/28</span>            <br />            <p>HTML技术应用的具体内容</p>            <hr />            <h5><a onclick="openContent(4)">Javascript技术应用</a></h5>            <span class="date">2017/07/29</span>            <br />            <p>javascript技术应用的具体内容</p>            <hr />            <a href="#">下一页</a>        </div>    </div>    <div id="bt">本网站版权为Lin所有<br />        <span id="sysmsg"></span>    </div>    <div id="content">        <h5 id="content_h5"></h5>        <span class="date" id="content_span"></span>        <br />        <p id="content_p"></p>        <button onclick="closeContent(this)">关闭窗口</button>    </div></body></html>

4.article.css

/* * @Author: Lin* @Date:   2017-07-29 21:02:21* @Last Modified by:   Lin* @Last Modified time: 2017-07-30 19:03:15*/* {    margin:0px;    padding:0px;}html, body {    scrollbar-face-color:#98a363;    scrollbar-highlight-color:#e3e69d;    scrollbar-shadow-color:#999;    scrollbar-3dlight-color:#000;    scrollbar-arrow-color:#000;    scrollbar-track-color:#f4f4f0;    scrollbar-darkshadow-color:#666;}/*注：上面关于滚动条的设置在chrome中不可以显示但是在ie中可以*/body {    /*关于背景的设置*/    background:#d9d7cd;    background-image: url("../images/back.jpg");    background-repeat: no-repeat;    background-size:150%;}ul {    list-style:none;    font-size:12px;}#top,#vi,#nav,#main,#bt {    width: 779px;    margin: 0px auto;}#top,#bt {    background-color:#000;}#top {    margin-top: 20px;    height:18px;    padding-top:5px;    text-align:right;    color:#fff;}#top_txt {    margin-right: 5px;}#top_txt a {    color:lightblue;    text-decoration: none;}#top_txt a:visited {    color:#lightblue;}#top_txt a:hover {    color:#fff;}#vi {    height:85px;    background:#98a363;    background-image: url("../images/vii.jpg");}#tt {    margin-left:120px;    padding-top:10px;    text-indent:-40px;    line-height:1.8em;    font-size:20px;    font-weight:bold;}#nav {    height:35px;    background:#e6e4db;}#nav ul {    margin-left: 30px;}#nav ul li {    float:left;}#nav ul a {    display: block;    width: 85px;    height:25px;    padding-top: 10px;    text-decoration: none;    letter-spacing: 15px;    text-align: center;    color: #000;    font-size: 15px;    font-weight: bold;}#nav ul a:visited {    color: #000;}#nav ul a:hover {    color: #98a363;    background: #fff;}#nav ul li.bar {    width: 6px;    padding-top: 12px;}#main {    height: 560px;    background:#fff;}#bt {    height: 46px;    padding-top: 34px;    text-align: center;    color: #fff;}/* 上面部分为外部样式 */#right h5 a {    text-decoration:underline;    color: lightblue;}#right h5 a:visited {    color: #8800ff;}#right h5 a:hover {    color: #8800ff;}h4 {    letter-spacing: 1em;    font-size: 15px;    background: #e6e4db;    height:24px;    border-bottom: 1px solid #d9d7cd;    padding-top: 5px;    margin-top: 2px;    padding-left: 10px;}#right {    margin-left: 10px;    width: 754px;    height: 538px;    border: 1px solid #d9d7cd;    margin-top: 10px;    float:left;}#right h4 {    width: 744px;}#right h5, #right .date, #right p {    margin-left: 30px;}#right h5 {    margin-top: 10px;    font-size: 13px;}#right .date {    font-style: italic;}#right p {    width: 700px;    height: 20px;    background: #f4f4f0;    border: 1px solid #999;    text-indent: 2em;    line-height: 1.5em;    overflow: hidden;    text-overflow: ellipsis;}hr {    margin-top: 20px;}#content {    position: absolute;    top: 195px;    left: 5px;    display: none;    width: 99%;    height: 440px;    background: #f4f4f0;    border: 1px solid #999;    text-align: center;}#content h5 {    text-align: center;    font-size: 16px;    margin: 10px;}#content p {    width: 700px;    height: 300px;    margin: 10px auto;    background: #fff;    border: 1px solid #999;    text-align: left;    text-indent: 2em;    line-height: 1.8em;    overflow: auto;}#content button {    width: 100px;    height: 18px;    border: 1px solid #999;}

5.article.js

/* * @Author: Lin* @Date:   2017-07-29 21:15:28* @Last Modified by:   Lin* @Last Modified time: 2017-07-29 21:19:30*/function closeContent(x) {    x.parentNode.style.display="none";}function openContent(x) {    var t = document.getElementById("right");    document.getElementById("content").style.display="block";    document.getElementById("content_h5").innerHTML = t.getElementsByTagName("h5")[x].innerHTML;    document.getElementById("content_span").innerHTML = t.getElementsByTagName("span")[x].innerHTML;    document.getElementById("content_p").innerHTML = t.getElementsByTagName("p")[x].innerHTML;}

这里写图片描述

6.photo.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <link rel="stylesheet" href="../css/photo.css" />    <script src="../js/photo.js"></script></head><body>    <div id="top">        <div id="top_txt">            <a href="javascript:addFav('个人网站示例')" title="添加本页到收藏夹">收藏本页</a>            |            <a href="mailto:zhanzhang@qq.com" title="给站长发邮件">联系站长</a>        </div>    </div>    <div id="vi">        <div id="tt">            成功没有早晚<br />            努力就有收获        </div>    </div>    <div id="nav">        <ul>            <li><a href="index.html" target="_self">首页</a></li>            <li><a class="bar">|</a></li>            <li><a href="article.html" target="_self">日志</a></li>            <li><a class="bar">|</a></li>            <li><a href="photo.html" target="_self">照片</a></li>            <li><a class="bar">|</a></li>            <li><a href="message.html" target="_self">留言</a></li>        </ul>    </div>    <div id="main">        <div id="right">            <h4>|相片列表</h4>            <table align="center" cellpadding="0" cellspacing="20" width="750">                <tr>                    <td><h5><a onclick="openContent(0)">雏菊</a></h5></td>                    <td><h5><a onclick="openContent(1)">茉莉</a></h5></td>                    <td><h5><a onclick="openContent(2)">蝴蝶兰</a></h5></td>                </tr>                <tr>                    <td><a onclick="openContent(0)"><img src="../images/01.jpg" alt="../images/b01.jpg" /></a></td>                    <td><a onclick="openContent(1)"><img src="../images/02.jpg" alt="../images/b02.jpg" /></a></td>                    <td><a onclick="openContent(2)"><img src="../images/03.jpg" alt="../images/b03.jpg" /></a></td>                </tr>                <tr>                    <td><h5><a onclick="openContent(3)">郁金香</a></h5></td>                    <td><h5><a onclick="openContent(4)">玫瑰</a></h5></td>                    <td><h5><a onclick="openContent(5)">百合</a></h5></td>                </tr>                <tr>                    <td><a onclick="openContent(3)"><img src="../images/04.jpg" alt="../images/b04.jpg" /></a></td>                    <td><a onclick="openContent(4)"><img src="../images/05.jpg" alt="../images/b05.jpg" /></a></td>                    <td><a onclick="openContent(5)"><img src="../images/06.jpg" alt="../images/b06.jpg" /></a></td>                </tr>                <tr>                    <td><h5><a onclick="openContent(6)">月季</a></h5></td>                    <td><h5><a onclick="openContent(7)">紫罗兰</a></h5></td>                    <td><h5><a onclick="openContent(8)">美人蕉</a></h5></td>                </tr>                <tr>                    <td><a onclick="openContent(6)"><img src="../images/07.jpg" alt="../images/b07.jpg" /></a></td>                    <td><a onclick="openContent(7)"><img src="../images/08.jpg" alt="../images/b08.jpg" /></a></td>                    <td><a onclick="openContent(8)"><img src="../images/09.jpg" alt="../images/b09.jpg" /></a></td>                </tr>            </table>        </div>    </div>    <div id="bt">本网站版权为Lin所有<br /><span id="sysmsg"></span></div>    <div id="content"></div>    <p id="content_p">        <img src="" id="img_dis" /> <br />        <button onclick="closeContent(this)" id="content_btn">关闭窗口</button>    </p></body></html>

7.photo.css

/* * @Author: Lin* @Date:   2017-07-30 16:58:05* @Last Modified by:   Lin* @Last Modified time: 2017-07-30 19:03:31*/* {    margin:0px;    padding:0px;}html, body {    scrollbar-face-color:#98a363;    scrollbar-highlight-color:#e3e69d;    scrollbar-shadow-color:#999;    scrollbar-3dlight-color:#000;    scrollbar-arrow-color:#000;    scrollbar-track-color:#f4f4f0;    scrollbar-darkshadow-color:#666;}/*注：上面关于滚动条的设置在chrome中不可以显示但是在ie中可以*/body {    /*关于背景的设置*/    background:#d9d7cd;    background-image: url("../images/back.jpg");    background-repeat: no-repeat;    background-size: 150%;}ul {    list-style:none;    font-size:12px;}#top,#vi,#nav,#main,#bt {    width: 779px;    margin: 0px auto;}#top,#bt {    background-color:#000;}#top {    margin-top: 20px;    height:18px;    padding-top:5px;    text-align:right;    color:#fff;}#top_txt {    margin-right: 5px;}#top_txt a {    color:lightblue;    text-decoration: none;}#top_txt a:visited {    color:#lightblue;}#top_txt a:hover {    color:#fff;}#vi {    height:85px;    background:#98a363;    background-image: url("../images/vii.jpg");}#tt {    margin-left:120px;    padding-top:10px;    text-indent:-40px;    line-height:1.8em;    font-size:20px;    font-weight:bold;}#nav {    height:35px;    background:#e6e4db;}#nav ul {    margin-left: 30px;}#nav ul li {    float:left;}#nav ul a {    display: block;    width: 85px;    height:25px;    padding-top: 10px;    text-decoration: none;    letter-spacing: 15px;    text-align: center;    color: #000;    font-size: 15px;    font-weight: bold;}#nav ul a:visited {    color: #000;}#nav ul a:hover {    color: #98a363;    background: #fff;}#nav ul li.bar {    width: 6px;    padding-top: 12px;}#main {    height: 560px;    background:#fff;}#bt {    height: 46px;    padding-top: 34px;    text-align: center;    color: #fff;}h4 {    letter-spacing: 1em;    font-size: 15px;    background: #e6e4db;    height:24px;    border-bottom: 1px solid #d9d7cd;    padding-top: 5px;    margin-top: 2px;    padding-left: 10px;}#right {    width: 754px;    height: 538px;    border: 1px solid #d9d7cd;    margin-top: 10px;    margin-left: 10px;    float:left;}#right h4 {    width: 744px;}#right h5 {    font-size: 13px;    text-align: center;}#right a {    color: lightblue;}#right a:visited {    color: #333;}#right a:hover {    color: #d9d7cd;}#right table td {    text-align: center;}#right img {    width: 180px;    height: 100px;    border: 1px solid #999;}#content {    position: absolute;    top:0px;    left:0px;    display:none;    width: 100%;    height: 100%;    background:#000;    text-align: center;    filter: alpha(opacity=85);}#content_h5 {    text-align: center;    font-size: 16px;}#content_p {    width: 100%;    height: 350px;    text-align: center;    position: absolute;    top: 50px;    left: 0px;    display: none;}#content_btn {    width: 100px;    margin-top: 10px;    border: 1px solid #999;}

8.photo.js

/* * @Author: Lin* @Date:   2017-07-30 17:08:26* @Last Modified by:   Lin* @Last Modified time: 2017-07-30 17:12:52*/function closeContent(x) {    x.parentNode.style.display="none";    document.getElementById("content").style.display="none";}function openContent(x) {    document.getElementById("content").style.display="block";    document.getElementById("content_p").style.display="block";    document.getElementById("content_p").getElementsByTagName("img")[0].src=document.getElementsByTagName("img")[x].alt;}

这里写图片描述

9.message.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <link rel="stylesheet" href="../css/article.css" />    <script src="../js/article.js"></script></head><body>    <div id="top">        <div id="top_txt">            <a href="javascript:addFav('个人网站示例')" title="添加本页到收藏夹">收藏本页</a>            |            <a href="mailto:zhanzhang@qq.com" title="给站长发邮件">联系站长</a>        </div>    </div>    <div id="vi">        <div id="tt">            成功没有早晚<br />            努力就有收获        </div>    </div>    <div id="nav">        <ul>            <li><a href="index.html" target="_self">首页</a></li>            <li><a class="bar">|</a></li>            <li><a href="article.html" target="_self">日志</a></li>            <li><a class="bar">|</a></li>            <li><a href="photo.html" target="_self">照片</a></li>            <li><a class="bar">|</a></li>            <li><a href="message.html" target="_self">留言</a></li>        </ul>    </div>    <div id="main">        <div id="right">            <h4>|最新留言</h4>            <h5><a onclick="openContent(0)">friend~1</a></h5>            <span class="date">2017/07/30</span><br />            <p>                多拍点照片啊，大家分享一下            </p>            <hr />            <h5><a onclick="openContent(1)">friend~2</a></h5>            <span class="date">2017/07/28</span><br />            <p>                相片很好看，真的，不骗你            </p>            <hr />            <h5><a onclick="openContent(2)">friend~3</a></h5>            <span class="date">2017/07/27</span>            <br />            <p>                能否放一点北京奥运会的内容啊            </p>            <hr />            <h5><a onclick="openContent(3)">friend~4</a></h5>            <span class="date">2017/07/28</span>            <br />            <p>                还行了，虽然简单了一点            </p>            <hr />            <h5><a onclick="openContent(4)">friend~5</a></h5>            <span class="date">2017/07/29</span>            <br />            <p>                恩，不错，看来学习网站制作并不困难            </p>            <hr />            <a href="nextMessage.html">下一页</a>        </div>    </div>    <div id="bt">本网站版权为Lin所有<br />        <span id="sysmsg"></span>    </div>    <div id="content">        <h5 id="content_h5"></h5>        <span class="date" id="content_span"></span>        <br />        <p id="content_p"></p>        <button onclick="closeContent(this)">关闭窗口</button>    </div></body></html>

这里写图片描述

10.nextMessage.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <link rel="stylesheet" href="../css/article.css" />    <script src="../js/article.js"></script></head><body>    <div id="top">        <div id="top_txt">            <a href="javascript:addFav('个人网站示例')" title="添加本页到收藏夹">收藏本页</a>            |            <a href="mailto:zhanzhang@qq.com" title="给站长发邮件">联系站长</a>        </div>    </div>    <div id="vi">        <div id="tt">            成功没有早晚<br />            努力就有收获        </div>    </div>    <div id="nav">        <ul>            <li><a href="index.html" target="_self">首页</a></li>            <li><a class="bar">|</a></li>            <li><a href="article.html" target="_self">日志</a></li>            <li><a class="bar">|</a></li>            <li><a href="photo.html" target="_self">照片</a></li>            <li><a class="bar">|</a></li>            <li><a href="message.html" target="_self">留言</a></li>        </ul>    </div>    <div id="main">        <div id="right">            <h4>|最新留言</h4>            <h5><a onclick="openContent(0)">friend~1</a></h5>            <span class="date">2017/07/30</span><br />            <p>                网站主体颜色我不太喜欢，你能否用酷一点的颜色啊            </p>            <hr />            <h5><a onclick="openContent(1)">friend~2</a></h5>            <span class="date">2017/07/28</span><br />            <p>                恭喜啊，个人网站终于开张了，下次记得请我们吃饭啊            </p>            <hr />            <h5><a onclick="openContent(2)">friend~3</a></h5>            <span class="date">2017/07/27</span>            <br />            <p>                厉害，加油加油！！            </p>            <hr />            <h5><a onclick="openContent(3)">friend~4</a></h5>            <span class="date">2017/07/28</span>            <br />            <p>                还需要努力哦\(^o^)/            </p>            <hr />            <h5><a onclick="openContent(4)">friend~5</a></h5>            <span class="date">2017/07/29</span>            <br />            <p>                js学起来应该比css难很多吧？            </p>            <hr />            <a href="message.html">上一页</a>        </div>    </div>    <div id="bt">本网站版权为Lin所有<br />        <span id="sysmsg"></span>    </div>    <div id="content">        <h5 id="content_h5"></h5>        <span class="date" id="content_span"></span>        <br />        <p id="content_p"></p>        <button onclick="closeContent(this)">关闭窗口</button>    </div></body></html>

注：上面的代码中有一些部分是相同的，留言部分和日志部分基本是相同的。图片素材可另找~~
最终显示的结果为：

阅读全文

0 0