Document

基于Html的图书小说静态网站设计

2023-06-11
dfer
556
html 前端 javascript 小说网站源码

资源下载地址：https://download.csdn.net/download/sheziqiong/87879970
资源下载地址：https://download.csdn.net/download/sheziqiong/87879970
基于Html的图书小说静态网站设计选题背景及意义可以从以下几个方面来考虑：

数字阅读的普及：随着数字阅读的普及，越来越多的人选择通过网络来阅读图书和小说。而基于Html的图书小说静态网站设计可以提供更便捷、更高效的阅读体验。

网络技术的发展：随着互联网技术的不断发展，越来越多的人选择通过网络来获取信息。因此，基于Html的图书小说静态网站设计可以更好地满足人们的需求。

图书小说市场的竞争：图书小说市场竞争激烈，如何提供更好的阅读体验、更优质的内容已成为图书小说企业的重要问题。而基于Html的图书小说静态网站设计可以提供更丰富、更多样化的内容，从而提高企业的竞争力。

技术方案方面，可以采用Html、CSS、JavaScript等技术进行网站的设计和开发。具体可以考虑采用响应式设计，使网站能够适应不同设备的屏幕大小；采用Ajax技术，实现无刷新加载内容；采用Bootstrap框架，提高网站的响应速度和用户体验等等。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta http-equiv="Pragma" content="no-cache">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="format-detection" content="telephone=no" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/ydui.flexible.js" ></script>
		<script type="text/javascript" src="js/style.js" ></script>
		<script type="text/javascript" src="js/jquery-1.10.1.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<title>首页</title>
	</head>
	<body>
		<header class="navbar navbar-static-top bs-docs-nav header-top-nav" id="header-top">
			<div class="integral-bgheader" id="integral-bgheader"></div>
  <div class="container">
    <div class="navbar-header">
      
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>  
      <button class="navbar-toggle collapsed search-btn" type="button" data-toggle="collapse" data-target="#bs-search" aria-controls="bs-search" aria-expanded="false">
        	<i class="glyphicon glyphicon-search"></i>
    </button>
      <a href="../" class="navbar-brand">代码背包</a>
    </div>
    <nav id="bs-navbar" class="collapse navbar-collapse navbar-left">
      <ul class="nav navbar-nav">
        <li>
          <a href="index.html" οnclick="" target="_blank">首页</a>
        </li>
        <li>
          <a href="list.html" οnclick="" target="_blank">java</a>
        </li>
        <li>
          <a href="javascript:;" οnclick="" target="_blank">html+css</a>
        </li>
        <li>
          <a href="bookshelf.html" οnclick="" target="_blank">php</a>
        </li> 
         <li>
          <a href="bookshelf.html" οnclick="" target="_blank">javascript</a>
        </li>
         <li>
          <a href="bookshelf.html" οnclick="" target="_blank">ios</a>
        </li>
        <li class="dropdown">
          <a href="javascript:;" οnclick="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">其他<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">JAVA</a></li>
          </ul>
        </li>
      </ul>
    </nav> 
    <ul class="nav navbar-nav collapse  navbar-collapse navbar-right search-style" id="bs-search">      
       <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="输入关键字" id="search-content">
        </div>
        <button type='button' οnclick="submit_search()" class="btn btn-default glyphicon glyphicon-search">搜索</button>
      </form>
      </ul>
  </div>
</header>
  <!--具体内容-->
  <div class="container bs-docs-container">
  	<!--推荐小说-->
  	<div class="clearfix">
  	<div class="bs-example recommend-style col-sm-12 col-md-9 col-xs-12">
  		<div class="Fiction-title"><i class="icon-tushu Fiction-icon"></i>推荐小说</div>
  		<div class="clearfix">
  		<div class="col-sm-6 col-md-3 col-xs-6">
        <div class="thumbnail">
        	<a href="list.html" class="clearfix">
          <div class="thumbnail-img"> 
          <img data-src="holder.js/100%x200" alt="100%x200" src="images/126836s.jpg" data-holder-rendered="true" style="height: 220px; width: 100%; display: block;">
          <h5 class=" author-name">作者：风青阳</h5>
          </div>
          <div class="caption">
           <div class="book-title clearfix"><h4 class="navbar-left">万古第一神 </h4></div> 
            <p class="recommend-summary">【百万读者收藏，热销榜、人气榜第一作品！】 李天命做梦都要笑醒了。 他家的宠物，竟然都是传说中的太古混沌巨兽！ 他的家鸡，是以太阳为食...</p>
          </div>
          <span class="recommend-sheets">第1053章 恐怖的曦皇</span>
        </div>
        </a>
      </div>
      <div class="col-sm-6 col-md-3 col-xs-6">
        <div class="thumbnail">
          <div class="thumbnail-img"> 
          <img data-src="holder.js/100%x200" alt="100%x200" src="images/126836s.jpg" data-holder-rendered="true" style="height: 220px; width: 100%; display: block;">
          <h5 class=" author-name">作者：风青阳</h5>
          </div>
          <div class="caption">
           <div class="book-title clearfix"><h4 class="navbar-left">万古第一神 </h4></div> 
            <p class="recommend-summary">【百万读者收藏，热销榜、人气榜第一作品！】 李天命做梦都要笑醒了。 他家的宠物，竟然都是传说中的太古混沌巨兽！ 他的家鸡，是以太阳为食...</p>
          </div>
          <span class="recommend-sheets">第1053章 恐怖的曦皇</span>
        </div>
      </div>
      <div class="col-sm-6 col-md-3 col-xs-6">
        <div class="thumbnail">
          <div class="thumbnail-img"> 
          <img data-src="holder.js/100%x200" alt="100%x200" src="images/126836s.jpg" data-holder-rendered="true" style="height: 220px; width: 100%; display: block;">
          <h5 class=" author-name">作者：风青阳</h5>
          </div>
          <div class="caption">
           <div class="book-title clearfix"><h4 class="navbar-left">万古第一神 </h4></div> 
            <p class="recommend-summary">【百万读者收藏，热销榜、人气榜第一作品！】 李天命做梦都要笑醒了。 他家的宠物，竟然都是传说中的太古混沌巨兽！ 他的家鸡，是以太阳为食...</p>
          </div>
          <span class="recommend-sheets">第1053章 恐怖的曦皇</span>
        </div>
      </div>
      <div class="col-sm-6 col-md-3 col-xs-6">
        <div class="thumbnail">
          <div class="thumbnail-img"> 
          <img data-src="holder.js/100%x200" alt="100%x200" src="images/126836s.jpg" data-holder-rendered="true" style="height: 220px; width: 100%; display: block;">
          <h5 class=" author-name">作者：风青阳</h5>
          </div>
          <div class="caption">
           <div class="book-title clearfix"><h4 class="navbar-left">万古第一神 </h4></div> 
            <p class="recommend-summary">【百万读者收藏，热销榜、人气榜第一作品！】 李天命做梦都要笑醒了。 他家的宠物，竟然都是传说中的太古混沌巨兽！ 他的家鸡，是以太阳为食...</p>
          </div>
          <span class="recommend-sheets">第1053章 恐怖的曦皇</span>
        </div>
      </div>
  		</div>
  		<!--小说类型-->
  		<div class="Fiction-kind">
  			<div class="kind-title">小说种类</div>
  			<div class="clearfix pad10">
	  			<a href="#" class="btn btn-primary dropdown-toggle" >玄幻 <span class="badge">142</span></a>
	  			<a href="#" class="btn btn-danger dropdown-toggle" >科幻 <span class="badge">1142</span></a>
	  			<a href="#" class="btn btn-info dropdown-toggle" >都市言情 <span class="badge">2342</span></a>
	  			<a href="#" class="btn btn-primary dropdown-toggle" >穿越 <span class="badge">1242</span></a>
	  			<a href="#" class="btn btn-danger dropdown-toggle" >爱情 <span class="badge">742</span></a>
	  			<a href="#" class="btn btn-warning  dropdown-toggle" >修仙 <span class="badge">542</span></a>
	  			<a href="#" class="btn btn-success dropdown-toggle" >魔幻 <span class="badge">442</span></a>
	  			<a href="#" class="btn btn-success dropdown-toggle" >恐怖 <span class="badge">442</span></a>
	  			<a href="#" class="btn btn-danger dropdown-toggle" >完结 <span class="badge">442</span></a>
  			</div>
  		</div>
  	</div>
  	<!--热门小说 -->
  	<div class="col-sm-12 col-md-3 col-xs-12">
  		<div class="Fiction-title"><i class="icon-host Fiction-icon"></i>热门小说</div>
  		<ul class="clearfix hostlist">
  			<li><span class="Fiction-type label label-danger navbar-left">言情</span><a href="#" class="host-title navbar-left">重生之都市仙尊</a><span class="navbar-right host-name">家三少</span></li>
  			<li><span class="Fiction-type label label-danger navbar-left">言情</span><a href="#" class="host-title navbar-left">重生之都市仙尊</a><span class="navbar-right host-name">家三少</span></li>
  			<li><span class="Fiction-type label label-danger navbar-left">言情</span><a href="#" class="host-title navbar-left">重生之都市仙尊</a><span class="navbar-right host-name">家三少</span></li>
  			<li><span class="Fiction-type label label-danger navbar-left">言情</span><a href="#" class="host-title navbar-left">重生之都市仙尊</a><span class="navbar-right host-name">家三少</span></li>
  			<li><span class="Fiction-type label label-danger navbar-left">言情</span><a href="#" class="host-title navbar-left">重生之都市仙尊</a><span class="navbar-right host-name">家三少</span></li>
  			<li><span class="Fiction-type label label-danger navbar-left">言情</span><a href="#" class="host-title navbar-left">重生之都市仙尊</a><span class="navbar-right host-name">家三少</span></li>
  			<li><span class="Fiction-type label label-danger navbar-left">言情</span><a href="#" class="host-title navbar-left">重生之都市仙尊</a><span class="navbar-right host-name">家三少</span></li>
  			<li><span class="Fiction-type label label-danger navbar-left">言情</span><a href="#" class="host-title navbar-left">重生之都市仙尊</a><span class="navbar-right host-name">家三少</span></li>
  			<li><span class="Fiction-type label label-danger navbar-left">言情</span><a href="#" class="host-title navbar-left">重生之都市仙尊</a><span class="navbar-right host-name">家三少</span></li>
  			<li><span class="Fiction-type label label-danger navbar-left">言情</span><a href="#" class="host-title navbar-left">重生之都市仙尊</a><span class="navbar-right host-name">家三少</span></li>
  			<li><span class="Fiction-type label label-danger navbar-left">言情</span><a href="#" class="host-title navbar-left">重生之都市仙尊</a><span class="navbar-right host-name">家三少</span></li>
  			<li><span class="Fiction-type label label-danger navbar-left">言情</span><a href="#" class="host-title navbar-left">重生之都市仙尊</a><span class="navbar-right host-name">家三少</span></li>
  			<li><span class="Fiction-type label label-danger navbar-left">言情</span><a href="#" class="host-title navbar-left">重生之都市仙尊</a><span class="navbar-right host-name">家三少</span></li>
  			<li><span class="Fiction-type label label-danger navbar-left">言情</span><a href="#" class="host-title navbar-left">重生之都市仙尊</a><span class="navbar-right host-name">家三少</span></li>
  			<li><span class="Fiction-type label label-danger navbar-left">言情</span><a href="#" class="host-title navbar-left">重生之都市仙尊</a><span class="navbar-right host-name">家三少</span></li>
  			<li><span class="Fiction-type label label-danger navbar-left">言情</span><a href="#" class="host-title navbar-left">重生之都市仙尊</a><span class="navbar-right host-name">家三少</span></li>
  			<li><span class="Fiction-type label label-danger navbar-left">言情</span><a href="#" class="host-title navbar-left">重生之都市仙尊</a><span class="navbar-right host-name">家三少</span></li>
  			<li><span class="Fiction-type label label-danger navbar-left">言情</span><a href="#" class="host-title navbar-left">重生之都市仙尊</a><span class="navbar-right host-name">家三少</span></li>
  			<li><span class="Fiction-type label label-danger navbar-left">言情</span><a href="#" class="host-title navbar-left">重生之都市仙尊</a><span class="navbar-right host-name">家三少</span></li>
  			<li><span class="Fiction-type label label-danger navbar-left">言情</span><a href="#" class="host-title navbar-left">重生之都市仙尊</a><span class="navbar-right host-name">家三少</span></li>
  		</ul>
  	</div>
  	</div>

在这里插入图片描述

资源下载地址：https://download.csdn.net/download/sheziqiong/87879970
资源下载地址：https://download.csdn.net/download/sheziqiong/87879970

上一篇： 07. Web大前端

下一篇：前端入门有哪些技巧或