美文网首页
第一个静态网页

第一个静态网页

作者: 小兔哈尼 | 来源:发表于2018-09-28 15:33 被阅读0次

预览图


111.png

index.html文件


<!DOCTYPE html>
<html>
<head>
    <title>电子书</title>
    <link rel="stylesheet" type="text/css" href="style/mystyle.css">
</head>
<body style="overflow-x:hidden;overflow-y:scroll">
<div class="main">
    <img id="titleimg" src="images/title01.png" alt="小兔哈尼看书"/>
    <ul id="menu">
        <li><a href="webs/junshi.htm">军事</a></li>
        <li><a href="webs/wuxia.htm">武侠</a></li>
        <li><a href="webs/yanqing.htm">言情</a></li>
        <li><a href="webs/lishi.htm">历史</a></li>
        <li><a href="webs/lishi.htm">小说</a></li>
        <li><a href="webs/lishi.htm">散文</a></li>
        <li><a href="webs/lishi.htm">诗歌</a></li>
        <li><a href="webs/lishi.htm">音乐</a></li>
    </ul>
</div>
<br/><br/>
<div class="divclear"></div>
<div class="main">
    <img id="middleimg" src="images/0.png" alt="中间图片"/>
</div>
<div class="divclear"></div>
<div class="main">
    <table class="booklist" border="0">
        <caption class="tabletitle" align="top" border="1">华语言情风云版</caption>
        <tr class="booktitle">
            <td>霸道总裁爱上我</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>首长夫人这职业</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>莫少,亲够了吗</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>一遇总统定终身</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>奔波二八</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>哈哈哈哈</td>
            <td class="bookdetail">持续更新</td>
        </tr>
    </table>
    <table class="booklist" border="0">
        <caption class="tabletitle" align="top" border="1">武侠世界</caption>
        <tr class="booktitle">
            <td>霸道总裁爱上我</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>首长夫人这职业</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>莫少,亲够了吗</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>一遇总统定终身</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>奔波二八</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>哈哈哈哈</td>
            <td class="bookdetail">持续更新</td>
        </tr>
    </table>
    <table class="booklist" border="0">
        <caption class="tabletitle" align="top" border="1">月票排行榜</caption>
        <tr class="booktitle">
            <td>霸道总裁爱上我</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>首长夫人这职业</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>莫少,亲够了吗</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>一遇总统定终身</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>奔波二八</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>哈哈哈哈</td>
            <td class="bookdetail">持续更新</td>
        </tr>
    </table>
</div>
<div class="divclear"></div>
<div class="main">
    <table class="booklist" border="0">
        <caption class="tabletitle" align="top" border="1">华语言情风云版</caption>
        <tr class="booktitle">
            <td>霸道总裁爱上我</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>首长夫人这职业</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>莫少,亲够了吗</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>一遇总统定终身</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>奔波二八</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>哈哈哈哈</td>
            <td class="bookdetail">持续更新</td>
        </tr>
    </table>
    <table class="booklist" border="0">
        <caption class="tabletitle" align="top" border="1">武侠世界</caption>
        <tr class="booktitle">
            <td>霸道总裁爱上我</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>首长夫人这职业</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>莫少,亲够了吗</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>一遇总统定终身</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>奔波二八</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>哈哈哈哈</td>
            <td class="bookdetail">持续更新</td>
        </tr>
    </table>
    <table class="booklist" border="0">
        <caption class="tabletitle" align="top" border="1">月票排行榜</caption>
        <tr class="booktitle">
            <td>霸道总裁爱上我</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>首长夫人这职业</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>莫少,亲够了吗</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>一遇总统定终身</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>奔波二八</td>
            <td class="bookdetail">持续更新</td>
        </tr>
        <tr class="booktitle">
            <td>哈哈哈哈</td>
            <td class="bookdetail">持续更新</td>
        </tr>
    </table>
</div>
<div class="divclear"></div>
<div class="footer">
    <p>联系我们&nbsp;&nbsp;&nbsp;&nbsp;帮助中心&nbsp;&nbsp;&nbsp;&nbsp;人才招聘&nbsp;&nbsp;&nbsp;&nbsp;
        公共频道
    </p>
    <p>Power&nbsp;by&nbsp;小兔哈尼</p>
</div>
</body>
</html>

mystyle.css文件

body {
    background-color: #F6F6F6;
    margin: 0px;
    padding: 0px;
}

#menu li {
    float: left;
    list-style: none;
    height: 40px;
    line-height: 45px;
    width: 120px;
    background-color: #D8D8D8;
    border-left: 2px solid #F2F2F2;
    font-size: 25px;
    display: block;
    text-align: center;
}

#menu li a {
    padding: 0;
    margin: 0;
    display: block;
    color: #6E6E6E;
    text-decoration: none
}

#menu li a:hover {
    background: #146C9C;
    color: #fff;
}

.main {
    margin-left: 310px;
    width: 1600px;
}

.divclear {
    clear: both;
}

#middleimg {
    width: 973px;
    height: 90px;
    margin-left: 42px;
    padding: 1px;
}

.booklist {
    float: left;
    margin-left: 42px;
    width: 297px;
    background-color: white;
    border-top: 2px solid #151515;
    padding: 7px;
}

.tabletitle {
    font-size: 25px;
    font-weight: bold;
    padding-bottom: 10px;
    padding-top: 10px;
}

.bookdetail {
    font-size: 4px;
    padding-bottom: 0px;
    color: #6E6E6E;
    font-family: ��Բ;
}

#bottomhr {
    height: 5em;
    width: 70%;
}

.footer {
    position: absolute;
    bottom: 0;
    height: 40px;
    width: 100%;
    text-align: center;
    color: #6E6E6E;
}

相关文章

  • 关于网站的一些知识

    一、常见的网页资源 有三种,分别是静态网页,动态网页,伪静态网页 (1)什么是静态网页资源? 静态网页:就是没...

  • Linux - 01-网站服务基本概念

    目录 [toc] 1 静态网页和动态网页 1.1 静态网页 概念:纯粹的HTML格式的网页通被称为“静态网页”;静...

  • day43课堂笔记(HTTP以及Nginx)

    第一章、思想 第二章、静态网页资源 2.1、什么是静态网页资源? 2.2、静态网页资源特点 2.3、静态网页资源特...

  • day42 HTTP以及Nginx

    第一章、思想 第二章、静态网页资源 2.1、什么是静态网页资源? 2.2、静态网页资源特点 2.3、静态网页资源特...

  • HTTP&NGINX

    第一章、思想 第二章、静态网页资源 2.1、什么是静态网页资源? 2.2、静态网页资源特点 2.3、静态网页资源特...

  • 网页

    1 网页的分类静态网页、动态网页 1 静态网页:不含任何后台语言,编辑后可直接在自己电脑看见的。 静态网页 静...

  • 爬虫精进(八) ------ selenium

    静态网页 : 用html写出的网页,就是静态网页。我们使用BeautifulSoup爬取这类型网页,因为网页源代码...

  • 第一个静态网页

    预览图 index.html文件 mystyle.css文件

  • 动态网页和静态网页

    Github page提供的服务是静态网页.静态网页和动态网页有何区别呢? 静态网页有什么局限性呢? 这些都是我们...

  • Day-43 http服务介绍

    静态网页资源1.1 静态网页资源介绍  在网站设计中,静态网页是相对于动态网页而言,指没有后台数据库,不含程序(如...

网友评论

      本文标题:第一个静态网页

      本文链接:https://www.haomeiwen.com/subject/oyjpoftx.html