静态网页设计——品书网（HTML+CSS+JavaScript）

前言

静态网页设计——xxx（HTML+CSS+JavaScript）

使用技术：HTML+CSS+JS
主要内容：给喜欢读书的人一个方便的平台

主要内容

1、主要内容

首页用html标签分割成多个区域，使用css设置样式，精准的分割页面格式化。

最上方使用li标签+css设计制作的菜单导航，还有使用js实现的轮播图，可以自动切换图片，或者点击下方的按钮可以手动切换图片。

代码：

<div id="head1">
        	<div id="b2">读书好，好读书，读好书！<span class="float-right"><a href="html/登录.html">登录</a></span><span class="float-right"><a href="html/注册.html">注册 | </a></span></div>     
      </div>
      <div id="head2">
          	<div class="a2"><input type="search" placeholder="搜索海量图书" class="c2" autocomplete="off" size="30" />
           <input name="提交" class="c1" type="submit" value=""  /></div>
            <div class="a1"><a href="#">我的账户</a></div>
           	<div class="a3"><a href="#">我的书架</a></div>
      </div>
      <div id="head3">
         	<div id="daohang">
            	<ul>
                	<div id="b1"><li><a href="#">首页</a></li></div>
                    <li><a href="html/资讯.html">资讯</a></li>
                   <li><a href="html/经典推荐.html">经典推荐</a></li>
                    <li><a href="html/每日一读.html">每日一读</a></li>
                    <li><a href="html/出版图书.html">出版图书</a></li>
                    <li><a href="html/国学古籍.html">国学古籍</a></li>
                    <li><a href="html/读者论坛.html">读者论坛</a></li>
                    <li><a href="html/读书导航.html">读书导航</a></li>
                </ul>
            </div>
         </div>
    </div>

2、资讯

使用li列表实现每日的资讯进行观看。

代码：

<div id="head">
   	  <div id="head1">
        	<div id="b2">读书好，好读书，读好书！<span class="float-right"><a href="登录.html">登录</a></span><span class="float-right"><a href="注册.html">注册 | </a></span></div>     
      </div>
      <div id="head2">
          	<div class="a2"><input type="search" placeholder="搜索海量图书" class="c2" autocomplete="off" size="30" />
           <input name="提交" class="c1" type="submit" value=""  /></div>
            <div class="a1"><a href="#">我的账户</a></div>
           	<div class="a3"><a href="#">我的书架</a></div>
      </div>
	</div>```

#### 3、经典阅读
使用p标签+img标签，介绍一些经典的书籍阅读。
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/4f4d208f7430440286effbf12c4871e8.png)

代码：

```html
<div id="main1" >
    	<h2>《百年孤独》</h2>
    	<div class="q1"><img src="../images2/a1.jpg" width="300"  />
        </div>
        <div class="q2">
        	<br />
            <h3>内容简介</h3>
            <p>《百年孤独》，是哥伦比亚作家加西亚·马尔克斯的代表作，也是拉丁美洲魔幻现实主义文学的代表作。被誉为“再现拉丁美洲历史社会图景的鸿篇巨著”。<br />
　　全书近30万字，内容庞杂，人物众多，情节曲折离奇，再加上神话故事、宗教典故、民间传说以及作家独创的从未来的角度来回忆过去的新颖倒叙手法等等，令人眼花缭乱。但阅毕全书，读者可以领悟， 作家是要通过布恩迪亚家族7代人充满神秘色彩的坎坷经历来反映哥伦比亚乃至拉丁美洲的历史演变和社会现实，要求读者思考造成马孔多百年孤独的原因，从而去寻找摆脱命运捉弄的正确途径。<br />
   &nbsp;&nbsp;&nbsp;&nbsp;《百年孤独》的故事发生在虚构的马孔多镇（马尔克斯称威廉·福克纳为导师，显然深受其影响），描述了布恩迪亚家族百年七代的兴衰、荣辱、爱恨、福祸，和文化与人性中根深蒂固的孤独。其内容涉及社会和家庭生活的方方面面，可以说是拉丁美洲历史文化的浓缩投影。《百年孤独》风格独特，既气势恢宏又奇幻诡丽。粗犷处寥寥数笔勾勒出数十年内战的血腥冷酷；细腻处描写热恋中情欲煎熬如慕如诉；奇诡处人间鬼界过去未来变幻莫测。轻灵厚重，兼而有之，被公认为魔幻现实主义最具代表性的作品。被称为“20世纪用西班牙文写作的最杰出的长篇小说之一”。</p>
        </div>
        <div class="q1"><img src="../images2/a2.jpg" />
        </div>
        <div class="q2">
        	<h3>作者简介</h3>
            <p>加夫列尔·加西亚·马尔克斯（Gabriel José de la Concordia García Márquez，1927年3月6日－2014年4月17日），哥伦比亚作家、记者和社会活动家，拉丁美洲魔幻现实主义文学的代表人物，20世纪最有影响力的作家之一，1982年诺贝尔文学奖得主。<br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;马尔克斯不仅因其丰富的文学创作在世界文坛上占有重要的位置，而且还以其深刻独到的文学创作观和美学追求著称于世。马尔克斯的创作立足于拉美大地，怀着深厚的民族感情，表现人民的生活和斗争，鞭挞各种各样的邪恶势力，同情弱小，反对强暴，表达人民对民主、自由和美好未来的渴望，揭示重要的社会问题，暴露形形色色的社会流弊等等，从不同的侧面反映拉丁美洲的历史和现实，展示当代拉美的社会面貌。</p>
        </div>
        <div class="q3">
        	<h3>经典语录</h3>
            <p> 其实他在意的不是死亡而是生命，因此听到死刑判决时，他心中没有恐惧只有留恋。</p>
            <p> 一个幸福晚年的秘决不是别的，而是与孤寂签订一个体面的协定。</p>
            <p> 多年以后，奥雷连诺上校站在行刑队面前，准会想起父亲带他去参观冰块的那个遥远的下午。</p>
            <p> 你那么憎恨那些人，跟他们斗了那么久，最终却变得和和他们一样，人世间没有任何理想值得以这样的沉沦作为代价</p>
            <p> 他没有察觉到时光在家里造成那些细微而又令人心碎的破坏，这么长日子的外出后，对任何一个有着清晰记忆的人来说，这种破坏都会觉得是一种灾难。</p>
            <p> 如果，清风有情，那么明月可鉴，抹不去的，是幽幽飘洒的孤独，解不开的是袅袅缠绕的前缘，斩不断的，是缠缠交织的思念，转不出的是，泻泻而逝的流年。</p>
            <p>  你和死亡好象隔着什么在看，没有什么感受，你的父母挡在你们中间，等到你的父母过世了，你才会直面这些东西，不然你看到的死亡是很抽象的，你不知道。亲戚，朋友，邻居，隔代，他们去世对你的压力不是那么直接，父母是隔在你和死亡之间的一道帘子，把你挡了一下，你最亲密的人会影响你的生死观。</p>
        </div>
    </div>

总结

想要看具体效果的同学，可以访问这个链接：
https://www.bilibili.com/video/BV1Wi4y1z7gX/?vd_source=5f425e0074a7f92921f53ab87712357b
具体的代码也在该链接下。