Home Esplora Aiuto
Registrati Accedi
2001010522
/
weChat
1
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

上传文件至 ''

2001010522 3 anni fa
parent
f811f0aefa
commit
81077ad3e6
5 ha cambiato i file con 512 aggiunte e 0 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 153 0
      index.css
  2. 57 0
      index.html
  3. 53 0
      list.css
  4. 122 0
      list1.html
  5. 127 0
      list2.html

+ 153 - 0
index.css
Vedi File 

@@ -0,0 +1,153 @@
 
+a {

+    color: #333333;

+}

+

+/* 固定宽度居中 */

+.container {

+    width: 84%;

+    margin: 0 auto;

+}

+

+/* 页头 */

+header {

+    height: 60px;

+    background: linear-gradient(to right, red, orange);

+    font-size: 1.2em;

+}

+

+.headBar {

+    display: flex;

+    align-items: center;

+}

+

+/* logo */

+.logo {

+    width: 145px;

+    height: 45px;

+    background: url(../image/logo.jpg) no-repeat center;

+    background-size: cover;

+}

+

+/*导航栏*/

+nav {

+    width: 600px;

+}

+

+.navItem {

+    display: inline-block;

+    line-height: 60px;

+    padding: 0 20px;

+    color: #ffffff;

+}

+

+/* 当前选中的导航栏 */

+.navItem.active {

+    background: #555555;

+    font-weight: 700;

+}

+

+/*搜索框*/

+.search-wrap input {

+    border: O;

+    width: 15rem;

+    line-height: 1.75rem;

+    outline-style: none;

+    padding-left: 0.625rem;

+    border-radius: 5px;

+}

+

+.search-wrap button {

+    width: 3.125rem;

+    height: 1.75rem;

+    border: 0;

+    background-color: #555555;

+    color: #ffffff;

+    border-radius: 5px;

+}

+

+/* 网站介绍 */

+.fiction-text {

+    column-count: 2; /* 文本划分成2列 */

+    column-gap: 40px; /* 指定的列之间的差距 */

+    column-rule-style: solid;

+    column-rule-width: 1px;

+    padding: 0 70px;

+    margin-top: 40px;

+}

+

+/*介绍标题*/

+.fiction-text h1 {

+    column-span: all;

+    text-align: center;

+    margin-bottom: 20px;

+}

+

+/* iframe区域 */

+.iframeWrap {

+    width: 100%;

+    overflow: hidden;

+

+}

+

+iframe {

+    width: 103%;

+    height: 450px;

+}

+

+/*分页*/

+.pageWrap {

+    overflow: hidden;

+}

+

+.pageItem {

+    width: 100px;

+    height: 20px;

+    margin-right: 20px;

+}

+

+ul.page {

+    margin: 20px 0;

+    float: right;

+}

+

+ul.page li {

+    display: inline;

+}

+

+ul.page li a {

+    padding: 8px 16px;

+    border: 1px solid #cccccc;

+}

+

+/*未访问的超链接*/

+ul.page li a:link {

+    color: #333333;

+}

+

+/*已访问的超链接去*/

+ul.page li a:visited {

+    color: #333333;

+}

+

+/*当鼠标悬停在超链接上时*/

+ul.page li a:hover {

+    color: #FB6638;

+}

+

+/*被选择的超链接*/

+ul.page li a:active {

+    color: #FB6638;

+}

+

+/*页脚*/

+footer {

+    width: 100%;

+    height: 50px;

+    line-height: 50px;

+    text-align: center;

+    background-color: #E9E9E9;

+}

+

+footer a {

+    margin: 0 20px;

+}

+ 57 - 0
index.html
Vedi File 

@@ -0,0 +1,57 @@
 
+<!DOCTYPE html>

+<html>

+<head>

+    <meta charset="UTF-8">

+    <title>小说网首页</title>

+    <link rel="stylesheet" type="text/css" href="css/index.css">

+    <link rel="stylesheet" type="text/css" href="css/reset.css">

+</head>

+<body>

+<header>

+    <div class="container headBar">

+        <!-- Logo -->

+        <div class="logo"></div>

+        <!-- 导航栏 -->

+        <nav>

+            <a href="" class="navItem active">首页</a>

+            <a href="" class="navItem">分类</a>

+            <a href="" class="navItem">排行榜</a>

+            <a href="" class="navItem">个性小说</a>

+        </nav>

+        <!-- 搜索框 -->

+        <form class="search-wrap">

+            <input type="search" spellcheck="true">

+            <button type="submit">搜索</button>

+        </form>

+    </div>

+</header>

+<article class="container">

+    <!-- 网站介绍 -->

+    <div class="fiction-text">

+        <h1>网站介绍</h1>

+        <p>

+            小说网创建于2008 年，原名一起看小说网，是集创作、阅读于一体的在线鸿读网站。我们以“让

+            每个人都享受创作的乐趣” 为出发点，提供玄幻奇幻、都市言情、武侠仙侠、青春校园、穿越架空、惊

+            悚悬疑、经典文学、二次元等小说，读者可在线阅读及免费下载。

+        </p>

+    </div>

+    <!-- 小说列表 -->

+    <section class="iframeWrap">

+        <iframe name="Iframe" src="list1.html" style="border: 0;" frameborder="0"></iframe>

+    </section>

+    <!-- 分页栏 -->

+    <section class="pageWrap">

+        <ul class="page">

+            <li><a href="list1.html" target="Iframe" class="pageItem">1</a></li>

+            <li><a href="list2.html" (3)="Iframe" class="pageItem">2</a></li>

+        </ul>

+    </section>

+</article>

+<footer>

+    <a href="">关于小说</a> |

+    <a href="">友情链接</a> |

+    <a href="">联系我们</a> |

+    <a href="">帮助中心</a>

+</footer>

+</body>

+</html>

+ 53 - 0
list.css
Vedi File 

@@ -0,0 +1,53 @@
 
+/*小说列表*/

+.fictionBox {

+    border: 1px solid #CCCCCC;

+    padding: 20px 20px 0px;

+    margin: 40px;

+    display: flex;

+    justify-content: space-between;

+    align-content: center;

+    flex-wrap: wrap;

+}

+

+/* 图文信息*/

+.fictionBox article {

+    width: 490px;

+    height: 130px;

+    display: flex;

+    margin-bottom: 20px;

+}

+

+/* 小说图片 */

+.fictionImg {

+    width: 100px;

+    height: 130px;

+    box-shadow: 0 3px 4px rgba(0, 0, 0, .5);

+}

+

+.fictionImg img {

+    width: 100px;

+    height: 130px;

+}

+

+/* 全部文字信息 */

+.fictionInfo {

+    height: 140px;

+    margin-left: 15px;

+    overflow: hidden;

+}

+

+/* 小说标题 */

+.fictionInfo h3 {

+    margin-top: 5px;

+}

+

+/* 小说内容介绍 */

+.fictionTop {

+    font-size: 13px;

+    color: #555555;

+}

+

+.fictionTop span {

+    margin: 0 8px;

+    line-height: 35px;

+}

+ 122 - 0
list1.html
Vedi File 

@@ -0,0 +1,122 @@
 
+<!DOCTYPE html>

+<html>

+  <head>

+    <meta charset="UTF-8">

+    <title>小说网</title>

+    <link rel="stylesheet" type="text/css" href="css/list.css">

+    <link rel="stylesheet" type="text/css" href="css/reset.css">

+  </head>

+  <body>

+      <section class="fictionBox">

+          <!-- 小说图文信息 -->

+          <article>

+              <!--小说图片-->

+              <figure class="fictionImg">

+                  <img src="./image/1.jpg" alt="朝花夕拾">

+              </figure>

+              <div class="fictionInfo">

+                  <!-- 小说名字 -->

+                  <h3>朝花夕拾</h3>

+                  <!-- 小说作者 -->

+                  <small class="fictionTip">

+                        <mark>鲁迅</mark>

+                  </small>

+                  <!-- 小说简介 -->

+                  <p>

+                    《朝花夕拾》是鲁迅的散文集，是 “ 回忆的记事” ，比较完整地记录了鲁迅从幼年到青年时期的生活道路和经历。

+                  </p>

+              </div>

+          </article>

+          <article>

+              <!--小说图片-->

+              <figure class="fictionImg">

+                <img src="./image/2.jpg" alt="朝花夕拾">

+            </figure>

+            <div class="fictionInfo">

+                <!-- 小说名字 -->

+                <h3>骆驼祥子</h3>

+                <!-- 小说作者 -->

+                <small class="fictionTip">

+                      <mark>老舍</mark>

+                </small>

+                <!-- 小说简介 -->

+                <p>

+                  《骆驼祥子》是人民艺术家——老舍（舒庆春，1899-1966）所著的长篇小说，描述了20世纪20年代军阀混战时期人力车夫的悲惨命运。祥子是旧社会劳苦大众的代表人物。

+                </p>

+            </div>

+          </article>

+          <article>

+              <!--小说图片-->

+              <figure class="fictionImg">

+                <img src="./image/3.jpg" alt="朝花夕拾">

+            </figure>

+            <div class="fictionInfo">

+                <!-- 小说名字 -->

+                <h3>狂人日记</h3>

+                <!-- 小说作者 -->

+                <small class="fictionTip">

+                      <mark>鲁迅</mark>

+                </small>

+                <!-- 小说简介 -->

+                <p>

+                  《狂人日记》是鲁迅先生所著的中国新文学史上第一篇现代型短篇白话小说,该书出版与1918年5月15日,距离现在已经97年

+                </p>

+            </div>

+          </article>

+          <article>

+              <!--小说图片-->

+              <figure class="fictionImg">

+                <img src="./image/4.jpg" alt="朝花夕拾">

+            </figure>

+            <div class="fictionInfo">

+                <!-- 小说名字 -->

+                <h3>故乡</h3>

+                <!-- 小说作者 -->

+                <small class="fictionTip">

+                      <mark>鲁迅</mark>

+                </small>

+                <!-- 小说简介 -->

+                <p>

+                  《故乡》是现代文学家鲁迅于1921年创作的一篇短篇小说。小说以“我”回故乡的活动为线索，按照“回故乡”——“在故乡”——“离故乡”的情节安排，依据“我”的所见所闻所忆所感，着重描写了闰土和杨二嫂的人物形象，从而反映了辛亥革命前后农村破产、农民痛苦生活的现实；同时深刻指出了由于受封建社...

+                </p>

+            </div>

+          </article>

+          <article>

+            <!--小说图片-->

+            <figure class="fictionImg">

+              <img src="./image/5.jpg" alt="朝花夕拾">

+          </figure>

+          <div class="fictionInfo">

+              <!-- 小说名字 -->

+              <h3>阿Q正传</h3>

+              <!-- 小说作者 -->

+              <small class="fictionTip">

+                    <mark>鲁迅</mark>

+              </small>

+              <!-- 小说简介 -->

+              <p>

+                《阿Q正传》中国著名的小说家鲁迅先生创作的一部小说，以辛亥革命前后的江南农村未庄为背景，塑造了阿Q这样一个受旧社会沉重压迫而精神被扭曲变形的人物形象，阿Q精神已成了精神胜利...

+              </p>

+          </div>

+        </article> 

+        <article>

+          <!--小说图片-->

+          <figure class="fictionImg">

+            <img src="./image/6.jpg" alt="朝花夕拾">

+        </figure>

+        <div class="fictionInfo">

+            <!-- 小说名字 -->

+            <h3>呐喊</h3>

+            <!-- 小说作者 -->

+            <small class="fictionTip">

+                  <mark>鲁迅</mark>

+            </small>

+            <!-- 小说简介 -->

+            <p>

+              《呐喊》是现代文学家鲁迅的短篇小说集，收录鲁迅于1918年至1922年所作的14篇短篇小说，1923年由北京新潮社出版，现编入《鲁迅全集》第1卷。小说集真实地描绘了从辛亥革命到五四运动时期的社会生活，从革命民主主义出发，抱着启蒙主义目的和人道主义精神，揭示了种种深层次的社会矛盾，对旧时中国的制...

+            </p>

+        </div>

+      </article>                    

+      </section>

+  </body>

+</html>

+ 127 - 0
list2.html
Vedi File 

@@ -0,0 +1,127 @@
 
+<!DOCTYPE html>

+<html>

+  <head>

+    <meta charset="UTF-8">

+    <title>小说网</title>

+    <link rel="stylesheet" type="text/css" href="css/list.css">

+    <link rel="stylesheet" type="text/css" href="css/reset.css">

+  </head>

+  <body>

+      <section class="fictionBox">

+          <!-- 小说图文信息 -->

+          <article>

+            <!--小说图片-->

+            <figure class="fictionImg">

+              <img src="./image/6.jpg" alt="朝花夕拾">

+          </figure>

+          <div class="fictionInfo">

+              <!-- 小说名字 -->

+              <h3>呐喊</h3>

+              <!-- 小说作者 -->

+              <small class="fictionTip">

+                    <mark>鲁迅</mark>

+              </small>

+              <!-- 小说简介 -->

+              <p>

+                《呐喊》是现代文学家鲁迅的短篇小说集，收录鲁迅于1918年至1922年所作的14篇短篇小说，1923年由北京新潮社出版，现编入《鲁迅全集》第1卷。小说集真实地描绘了从辛亥革命到五四运动时期的社会生活，从革命民主主义出发，抱着启蒙主义目的和人道主义精神，揭示了种种深层次的社会矛盾，对旧时中国的制...

+              </p>

+          </div>

+        </article>  

+          <!-- 小说图文信息 -->

+          <article>

+            <!--小说图片-->

+            <figure class="fictionImg">

+              <img src="./image/5.jpg" alt="朝花夕拾">

+          </figure>

+          <div class="fictionInfo">

+              <!-- 小说名字 -->

+              <h3>阿Q正传</h3>

+              <!-- 小说作者 -->

+              <small class="fictionTip">

+                    <mark>鲁迅</mark>

+              </small>

+              <!-- 小说简介 -->

+              <p>

+                《阿Q正传》中国著名的小说家鲁迅先生创作的一部小说，以辛亥革命前后的江南农村未庄为背景，塑造了阿Q这样一个受旧社会沉重压迫而精神被扭曲变形的人物形象，阿Q精神已成了精神胜利...

+              </p>

+          </div>

+        </article> 

+          <!-- 小说图文信息 -->

+          <article>

+            <!--小说图片-->

+            <figure class="fictionImg">

+              <img src="./image/4.jpg" alt="朝花夕拾">

+          </figure>

+          <div class="fictionInfo">

+              <!-- 小说名字 -->

+              <h3>故乡</h3>

+              <!-- 小说作者 -->

+              <small class="fictionTip">

+                    <mark>鲁迅</mark>

+              </small>

+              <!-- 小说简介 -->

+              <p>

+                《故乡》是现代文学家鲁迅于1921年创作的一篇短篇小说。小说以“我”回故乡的活动为线索，按照“回故乡”——“在故乡”——“离故乡”的情节安排，依据“我”的所见所闻所忆所感，着重描写了闰土和杨二嫂的人物形象，从而反映了辛亥革命前后农村破产、农民痛苦生活的现实；同时深刻指出了由于受封建社...

+              </p>

+          </div>

+        </article>

+          <!-- 小说图文信息 -->

+          <article>

+            <!--小说图片-->

+            <figure class="fictionImg">

+              <img src="./image/3.jpg" alt="朝花夕拾">

+          </figure>

+          <div class="fictionInfo">

+              <!-- 小说名字 -->

+              <h3>狂人日记</h3>

+              <!-- 小说作者 -->

+              <small class="fictionTip">

+                    <mark>鲁迅</mark>

+              </small>

+              <!-- 小说简介 -->

+              <p>

+                《狂人日记》是鲁迅先生所著的中国新文学史上第一篇现代型短篇白话小说,该书出版与1918年5月15日,距离现在已经97年

+              </p>

+          </div>

+        </article>

+          <!-- 小说图文信息 -->

+          <article>

+            <!--小说图片-->

+            <figure class="fictionImg">

+              <img src="./image/2.jpg" alt="朝花夕拾">

+          </figure>

+          <div class="fictionInfo">

+              <!-- 小说名字 -->

+              <h3>骆驼祥子</h3>

+              <!-- 小说作者 -->

+              <small class="fictionTip">

+                    <mark>老舍</mark>

+              </small>

+              <!-- 小说简介 -->

+              <p>

+                《骆驼祥子》是人民艺术家——老舍（舒庆春，1899-1966）所著的长篇小说，描述了20世纪20年代军阀混战时期人力车夫的悲惨命运。祥子是旧社会劳苦大众的代表人物。

+              </p>

+          </div>

+        </article>

+          <!-- 小说图文信息 -->

+          <article>

+            <!--小说图片-->

+            <figure class="fictionImg">

+                <img src="./image/1.jpg" alt="朝花夕拾">

+            </figure>

+            <div class="fictionInfo">

+                <!-- 小说名字 -->

+                <h3>朝花夕拾</h3>

+                <!-- 小说作者 -->

+                <small class="fictionTip">

+                      <mark>鲁迅</mark>

+                </small>

+                <!-- 小说简介 -->

+                <p>

+                  《朝花夕拾》是鲁迅的散文集，是 “ 回忆的记事” ，比较完整地记录了鲁迅从幼年到青年时期的生活道路和经历。

+                </p>

+            </div>

+        </article>                  

+      </section>

+  </body>

+</html>