购书+阅读静态网页设计与实现

一、主页设计HTML

1、效果展示及实现

2、完整代码

二、主页样式布局CSS

三、空间功能实现Javascript

主要功能

Javascript完整代码：

总结

购书+阅读静态网页设计与实现

项目完整代码已打包在CSDN：MyBookWeb，需要可以下载。也可联系我获取。

主要功能以及元素应用：

1、实现购书网站的基本页面，包括主页、书籍分类栏、登录界面、自动显示浏览时间、图片轮播切换等功能。

2、使用的网页元素包括div分块、form表单、ul列表、img插入图片等，各类id、class标签；

3、CSS样式有color、font、边框、背景属性、尺寸（width、height）、内外边距属性(padding、margin)、定位(position、display、float、z-index)、文本、过渡transition，这些样式综合使用，对html页面进行布局设计。

4、Javascript功能：实现图片轮播切换、点击切换、表单登录验证、用户浏览网站时长计算、鼠标事件、加载提示等。

整个网页设计分为html、css、javascript三部分，相对独立分离又在最后结合一起。接下来将以此三个部分进行介绍。

一、主页设计HTML

首先，我大致构建出自己目标的网页草图，画出实现主要部分以及相对位置；然后开始编写html的代码，主要对一个独立功能的块用div包括，为后面css样式所用。

html代码划分为2大部分：头部top和内容content；最重要的content里面也分为小的部分，包括首页main、网站goal和登录界面login。

注：下面为了展示html页面各部分的完成效果，css样式布局已经规划好。可结合下部分CSS查看。

1、效果展示及实现

1、网页顶部栏展示：

实现代码：

  1. <div class="top">
  2.   <div class="logo"> <a href="Read_Me.html">Read Me</a> </div>
  3.   <div class="wel">阅读我，给你畅游书海的乐趣！<br>
  4.     等待你的到来！</div>
  5.   <div id="time">
  6.     <form name="record" method="post" action="">
  7.       浏览时长:
  8.       <input name="area" type="text" value="">
  9.     </form>
  10.   </div>
  11.   <div class="detail">
  12.     <ul>
  13.       <li><a href="#">语言<span class="icon"></span></a>
  14.         <ul>
  15.           <li><a href="#">中国站：简体中文</a></li>
  16.           <li><a href="#">国际站：English</a></li>
  17.         </ul>
  18.       </li>
  19.       <li><a href="#">我的<span class="icon"></span></a>
  20.         <ul class="list2">
  21.           <li><a href="#">账户信息</a></li>
  22.           <li><a href="#">设置</a></li>
  23.         </ul>
  24.       </li>
  25.       <li><a href="#">我的云书房</a></li>
  26.       <li><a href="#">我的购物车</a></li>
  27.     </ul>
  28.     <div class="clear"></div>
  29.   </div>
  30. </div>
  31. <!--top-->

2、首页顶端目录栏及侧边栏

顶端栏目设置了二级目录，鼠标hover时候可以展示

代码：

  1. <div id="nav">
  2.   <div id="mulu">
  3.     <ul>
  4.       <li><a href="#nav">首页</a></li>
  5.       <li><a href="#goal">Read Me动态</a></li>
  6.       <li><a href="#" onClick="f1()">藏书阁</a></li>
  7.       <li><a href="#">网站导航<span class="icon"></span></a>
  8.         <ul class="list1">
  9.           <li><a href="#">资源中心</a></li>
  10.           <li><a href="#">帮助</a></li>
  11.           <li><a href="#">关于我们</a></li>
  12.         </ul>
  13.       </li>
  14.       <li><a href="#">最新活动</a></li>
  15.       <li><a href="#login_page">登录</a></li>
  16.     </ul>
  17.   </div> <!--mulu--> 
  18.  
  19. </div>
  20.  
  21.     <div id="sort">
  22.       <ul id="book1">
  23.         <li class="f"><a href="#">经典</a></li>
  24.         <li class="s"><a href="#">科技</a></li>
  25.         <li class="t"><a href="#">教育</a></li>
  26.         <li class="f1"><a href="#">生活</a></li>
  27.         <li class="f2"><a href="#">艺术</a></li>
  28.         <li class="s"><a href="#">电子书</a></li>
  29.         <li class="s1"><a href="#">听书</a></li>
  30.       </ul>
  31.     </div>

3、搜索框及图片轮播

代码实现：

  1.     <!--sort-->
  2.     <div id="search">
  3.       <form id="form">
  4.         <input class="in1" name="search" type="text" placeholder="请输入您要搜索的关键字">
  5.         <button onclick="f2()">搜索</button>
  6.         <!--input class="ou1" type="submit" name="send"  value="搜索"-->
  7.       </form>
  8.       <a href="#">智能推荐</a>
  9.     </div>  <!--search-->
  10.  
  11.     <div id="tu">
  12.       <div class="c-banner">
  13.         <div class="banner">
  14.           <ul>
  15.             <li><img src="data:images/book1.jpg" width="1000"></li>
  16.             <li><img src="data:images/lunbo1.jpg" ></li>
  17.             <li><img src="data:images/book2.jpg" ></li>
  18.             <li><img src="data:images/lunbo2.jpg"></li>
  19.             <li><img src="data:images/shan.png"></li>
  20.             <li><img src="data:images/book3.jpg" ></li>
  21.           </ul>
  22.         </div>
  23.         <!--banner-->
  24.         <div class="nexImg"><img src="data:images/nexImg.png" /></div>
  25.         <div class="preImg"><img src="data:images/preImg.png" /></div>
  26.         <div class="jumpBtn">
  27.           <ul>
  28.             <li jumpImg="0"></li>
  29.             <li jumpImg="1"></li>
  30.             <li jumpImg="2"></li>
  31.             <li jumpImg="3"></li>
  32.             <li jumpImg="4"></li>
  33.             <li jumpImg="5"></li>
  34.           </ul>
  35.         </div><!--jumpBtn--> 
  36.  
  37.       </div>  <!--c-banner--> 
  38.  
  39.     </div><!--tu-->

4、简单的介绍页面

5、表单页面

  1.   <div id="login_page">
  2.     <div class="login1">
  3.       <form action="#" method="post">
  4.         <input type="text" name="name" class="name" placeholder="Usename" required>
  5.         <input type="password" name="password" class="password" placeholder="Password" required>
  6.         <div class="wthree-text">
  7.           <ul>
  8.             <li>
  9.               <label class="anim">
  10.                 <input type="checkbox" class="checkbox" required>
  11.                 <span>七天内自动登录</span> </label>
  12.             </li>
  13.             <li><a href="#">忘记密码?</a></li>
  14.           </ul>
  15.         </div>
  16.         <div class="clear"></div>
  17.         <input type="submit" value="Login" onclick="check()">
  18.       </form>
  19.       <p><a href="#">创建账号？</a></p>
  20.     </div>
  21.   </div><!--login_page-->

2、完整代码

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Read Me 图书网</title>
  6. <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
  7. <script type="text/javascript" src="js/Readme.js"></script>
  8. <link rel="stylesheet" type="text/css" href="mystyle.css">
  9. </head>
  10.  
  11. <body>
  12. <div class="top">
  13.   <div class="logo"> <a href="Read_Me.html">Read Me</a> </div>
  14.   <div class="wel">阅读我，给你畅游书海的乐趣！<br>
  15.     等待你的到来！</div>
  16.   <div id="time">
  17.     <form name="record" method="post" action="">
  18.       浏览时长:
  19.       <input name="area" type="text" value="">
  20.     </form>
  21.   </div>
  22.   <div class="detail">
  23.     <ul>
  24.       <li><a href="#">语言<span class="icon"></span></a>
  25.         <ul>
  26.           <li><a href="#">中国站：简体中文</a></li>
  27.           <li><a href="#">国际站：English</a></li>
  28.         </ul>
  29.       </li>
  30.       <li><a href="#">我的<span class="icon"></span></a>
  31.         <ul class="list2">
  32.           <li><a href="#">账户信息</a></li>
  33.           <li><a href="#">设置</a></li>
  34.         </ul>
  35.       </li>
  36.       <li><a href="#">我的云书房</a></li>
  37.       <li><a href="#">我的购物车</a></li>
  38.     </ul>
  39.     <div class="clear"></div>
  40.   </div>
  41. </div>
  42. <!--top-->
  43. <div id="nav">
  44.   <div id="mulu">
  45.     <ul>
  46.       <li><a href="#nav">首页</a></li>
  47.       <li><a href="#goal">Read Me动态</a></li>
  48.       <li><a href="#" onClick="f1()">藏书阁</a></li>
  49.       <li><a href="#">网站导航<span class="icon"></span></a>
  50.         <ul class="list1">
  51.           <li><a href="#">资源中心</a></li>
  52.           <li><a href="#">帮助</a></li>
  53.           <li><a href="#">关于我们</a></li>
  54.         </ul>
  55.       </li>
  56.       <li><a href="#">最新活动</a></li>
  57.       <li><a href="#login_page">登录</a></li>
  58.     </ul>
  59.   </div> <!--mulu--> 
  60.  
  61. </div>
  62. <div class="content">
  63.   <div id="main">
  64.     <div id="sort">
  65.       <ul id="book1">
  66.         <li class="f"><a href="#">经典</a></li>
  67.         <li class="s"><a href="#">科技</a></li>
  68.         <li class="t"><a href="#">教育</a></li>
  69.         <li class="f1"><a href="#">生活</a></li>
  70.         <li class="f2"><a href="#">艺术</a></li>
  71.         <li class="s"><a href="#">电子书</a></li>
  72.         <li class="s1"><a href="#">听书</a></li>
  73.       </ul>
  74.     </div>
  75.     <!--sort-->
  76.     <div id="search">
  77.       <form id="form">
  78.         <input class="in1" name="search" type="text" placeholder="请输入您要搜索的关键字">
  79.         <button onclick="f2()">搜索</button>
  80.         <!--input class="ou1" type="submit" name="send"  value="搜索"-->
  81.       </form>
  82.       <a href="#">智能推荐</a>
  83.     </div>  <!--search-->
  84.  
  85.     <div id="tu">
  86.       <div class="c-banner">
  87.         <div class="banner">
  88.           <ul>
  89.             <li><img src="data:images/book1.jpg" width="1000"></li>
  90.             <li><img src="data:images/lunbo1.jpg" ></li>
  91.             <li><img src="data:images/book2.jpg" ></li>
  92.             <li><img src="data:images/lunbo2.jpg"></li>
  93.             <li><img src="data:images/shan.png"></li>
  94.             <li><img src="data:images/book3.jpg" ></li>
  95.           </ul>
  96.         </div>
  97.         <!--banner-->
  98.         <div class="nexImg"><img src="data:images/nexImg.png" /></div>
  99.         <div class="preImg"><img src="data:images/preImg.png" /></div>
  100.         <div class="jumpBtn">
  101.           <ul>
  102.             <li jumpImg="0"></li>
  103.             <li jumpImg="1"></li>
  104.             <li jumpImg="2"></li>
  105.             <li jumpImg="3"></li>
  106.             <li jumpImg="4"></li>
  107.             <li jumpImg="5"></li>
  108.           </ul>
  109.         </div><!--jumpBtn--> 
  110.  
  111.       </div>  <!--c-banner--> 
  112.  
  113.     </div><!--tu-->
  114.  
  115.     <div id="dontai">
  116.       <ul class="share">
  117.         <li><a href="#" class="note">读者之窗<span>来看看读者最近在读写什么吧！</span></a></li>
  118.         <li><a href="#" class="note">书评专栏<span>这里是优美的书评，让人流连忘返！</span></a></li>
  119.         <li><a href="#" class="note">我要投稿<span>投稿有奖，发挥你的智慧时候到了！</span></a></li>
  120.       </ul>
  121.     </div>
  122.   </div> <!--main-->
  123.   <div id="goal">
  124.     <h2>我们的宗旨</h2>
  125.     <div class="line green"><span> </span></div>
  126.     <h4>致力于创新的图书网站，让阅读更加高效有趣，打造影响世界的品牌</h4>
  127.     <div class="services_grids">
  128.       <div class="grid_1_of_4 services_1_of_4"> <img src="data:images/flag.png" id="t1" alt="品牌" />
  129.         <h3>品牌化</h3>
  130.         <p>赋予产品和服务与众不同的特点，准确市场定位，创造自己！</p>
  131.       </div>
  132.       <div class="grid_1_of_4 services_1_of_4"> <img src="data:images/design.png" id="t2" alt="设计" />
  133.         <h3>行动派</h3>
  134.         <p>社会在发展，我在行动，跟随时代不断进步，充分承担起责任。</p>
  135.       </div>
  136.       <div class="grid_1_of_4 services_1_of_4"> <img src="data:images/development.png" id="t3" alt="创新" />
  137.         <h3>创新发展</h3>
  138.         <p>坚持以观念创新为先导、战略创新为方向、组织创新为保障、技术创新为手段！</p>
  139.       </div>
  140.       <div class="grid_1_of_4 services_1_of_4"> <img src="data:images/rocket.png" id="t4" alt="高效" />
  141.         <h3>高效执行</h3>
  142.         <p>打造高效执行的团队，保持团队竞争力！</p>
  143.       </div>
  144.     </div>
  145.   </div><!--goal-->
  146.  
  147. <div id="login">
  148.   <div id="login_page">
  149.     <div class="login1">
  150.       <form action="#" method="post">
  151.         <input type="text" name="name" class="name" placeholder="Usename" required>
  152.         <input type="password" name="password" class="password" placeholder="Password" required>
  153.         <div class="wthree-text">
  154.           <ul>
  155.             <li>
  156.               <label class="anim">
  157.                 <input type="checkbox" class="checkbox" required>
  158.                 <span>七天内自动登录</span> </label>
  159.             </li>
  160.             <li><a href="#">忘记密码?</a></li>
  161.           </ul>
  162.         </div>
  163.         <div class="clear"></div>
  164.         <input type="submit" value="Login" onclick="check()">
  165.       </form>
  166.       <p><a href="#">创建账号？</a></p>
  167.     </div>
  168.   </div><!--login_page-->
  169.  
  170.   <div id="right"> <span>© 2020 CZH. All rights Reserved</span> </div><!--rightt--> 
  171.  
  172. </div><!--login-->
  173.  
  174. </div><!--content-->
  175.  
  176. </body>
  177. </html>

二、主页样式布局CSS

CSS样式在整个网页设计需要花费一定时间，因为需要不断调整页面的布局，将元素组件放于比较合理位置，设置颜色，让用户有良好的视觉效果。根据平时浏览一些网页的经验设计整个网页的合理效果。在CSS文件mystyle.css中，各部分有详细解析用法，这里就不细讲。

  1. @charset "utf-8";
  2. /* CSS Document */
  3. *{
  4.     margin:;
  5.     padding:;
  6. /*    width: 1000px;*/
  7. }
  8.  
  9. ul,ol,li{
  10.     list-style:none;
  11.     font-family:"微软雅黑"
  12. }
  13.  
  14. .logo a{
  15.     font-family:"Times New Roman", Times, serif;
  16.     font-size:50px;
  17.     font-weight:bold;
  18.     font-style:italic;
  19.     text-decoration:none;
  20.     color:#03F;
  21.     float:left;
  22. }
  23. .top{
  24.     height:60px;
  25.     background:url(images/pattern.gif) repeat;
  26.     display:block;
  27.     /*float:bottom;*/
  28. }
  29. .wel{
  30.     color:#000;
  31.     text-align:left;
  32.     font-size:20px;
  33.     font-family:"宋体", "楷体", "微软雅黑";
  34.     font-weight:bold;
  35.     float:left
  36. }
  37.  
  38. #time{
  39.     position:relative;
  40.     top:20px;
  41.     right: -160px;
  42.     font-family:"宋体";
  43. }
  44.  
  45. #time form input{
  46.     height:25px;
  47.     width:100px;
  48.     color:#F00;
  49.     font-family:"宋体";
  50.     }
  51.  
  52. .detail{
  53.     display:inline-block;/*top右边信息栏为行内块,不影响下边内容显示*/
  54. }
  55.  
  56. .detail a{
  57.     text-decoration:none;
  58.     color:#666
  59. }
  60.  
  61. .detail ul li{
  62.     float:left;
  63.     width:90px;
  64.     position:relative;/*设置信息栏在top相对位置*/
  65.     left:480px;
  66.     top:-10px;
  67.     margin-left:50px;
  68.     margin-top:15px;
  69.     text-align:center;
  70.     font-family:"楷体";
  71.     font-size:18px
  72. }
  73.  
  74. .detail ul li ul li{
  75.     display:none;/*二级目录隐藏*/
  76.     width:150px;
  77.     float:none;
  78. }
  79.  
  80. .detail ul li:hover ul li{
  81.     display:block;/*鼠标停留在一级时二级显示*/
  82.     position:relative;
  83.     left:-85px;
  84.     background-color:#FFf;
  85. }
  86.  
  87. #book1 a:hover,.detail ul li a:hover, .detail ul li ul li a:hover{
  88.     color:#03F;
  89. }
  90.  
  91. #nav a{
  92.     text-decoration:none;
  93.     color:#fff;
  94. }
  95.  
  96. #nav{
  97.     margin:;
  98.     padding:;
  99.     background:url(images/fancybox_overlay.png) repeat;/*主菜单背景图，设置高宽以及间距，为块元素*/
  100.     height:50px;
  101.     /*width:1519px;float:none;
  102.     display:block;*/
  103. }
  104.  
  105. #mulu{
  106.     display:inline-block;/*主菜单目录为行内块，保证元素显示位置，主要影响二级菜单显示效果*/
  107. }
  108.  
  109. #mulu ul li{
  110.     width:200px;/*文字显示宽度*/
  111.     text-align:center;
  112.     line-height:50px;
  113.     display:block;
  114.     float:left;
  115.     margin-left:50px;/*每个标题左间隔*/
  116. }    
  117.  
  118. #mulu ul li ul li{
  119.     width:100px;
  120.     float:none;/*二级菜单分行显示*/
  121.     display:none;
  122.     background-color:#666;
  123. }
  124. #mulu ul li:hover ul li{
  125.     display:inline-block;
  126.     position:relative;
  127.     left:-24px;
  128.     z-index:;/*保证显示上层，下面div在下层*/
  129. }
  130. /*#mulu ul li ul li ul{三级菜单分行显示
  131.     float:left;
  132.     display:none;
  133.     position:relative;
  134.     right:150px;
  135.     bottom:50px;
  136. }
  137. #mulu ul li ul li:hover ul{
  138.     display:block;
  139. }
  140. */
  141.  
  142. #mulu ul li a:hover,#mulu ul li ul li a:hover{
  143.     color:#F00
  144. }
  145.  
  146. .icon{
  147.     display: inline-block;
  148.     vertical-align: middle;
  149.     width:0px;
  150.     height:0px;
  151.     border:5px solid transparent;
  152.     border-top-color:#000/*top箭头向下 bottom箭头向上*/
  153. }
  154.  
  155. #main{
  156.     display:block;
  157.     height:620px;
  158.     width:1519px;
  159.     /*position:relative;
  160.     top:-50px;*/
  161.     background:url(images/avatars/intro-bg.jpg) no-repeat/*主页背景图*/
  162. }
  163.  
  164. #sort{
  165.     float:left;/*分类栏布局在左*/
  166.     height:620px;
  167.     background:url(images/fancybox_overlay.png) repeat;
  168. }
  169.  
  170. #book1 li{
  171.     display:block;/*书籍类别块*/
  172.     float:top;/**/
  173.     padding:10px;/*相互间间距*/
  174.     margin:40px;
  175.     width:100px;
  176.     /*background-color:#0FF;*/
  177.     text-align:center;
  178. }
  179.  
  180. #book1 a{
  181.     color:white;
  182.     text-decoration:none
  183. }
  184.  
  185. #search{
  186.     display:inline-block;
  187.     position:relative;/*搜索框位置*/
  188.     left:300px;
  189.     top:20px;
  190.  
  191. }
  192.  
  193. #search a{
  194.     color:#F00;
  195.     font-size:18px;
  196.     text-decoration:none;
  197.     position:relative;
  198.     top:20px;
  199.     left:20px;
  200. }
  201.  
  202. #form{
  203.     float:left;
  204.     border: 3px solid #BD1D17 ;/*表单边框样式*/
  205.     width:700px;
  206.     border-radius:5px
  207. }
  208.  
  209. #form .in1{
  210.     width:605px;/*input区域*/
  211.     height:50px;
  212.     font-size:18px;
  213.     font-family:"宋体"
  214. }
  215.  
  216. button{
  217.     width:90px;
  218.     height:55px;
  219.     float: right;
  220.     background-color:#BD1D17;
  221.     border:none;
  222.     font-size:18px;
  223. }
  224. button:hover{
  225.     cursor:pointer;
  226. }
  227.  
  228. input::-webkit-input-placeholder{/*输入提醒文字样式*/
  229.     font-size:18px;
  230.     padding-left:40px;
  231.     padding-top:40px;
  232.     z-index:;
  233.     font-family:"宋体";
  234. }
  235. input:hover::-webkit-input-placeholder {
  236. color: #FFF;
  237. -webkit-transition: color.3s;
  238. }
  239.  
  240. #tu{
  241.     height:100%;
  242.     width:80%;
  243.     overflow:hidden;
  244.     bottom:-50px;
  245.     font-size:;
  246.     /*float:left;*/
  247.     position:relative;
  248.     left:100px
  249. }
  250. /*图片轮播切换*/
  251. .c-banner{
  252.     width: 90%;
  253.     position:relative;
  254. }
  255. .c-banner img{
  256.     width: 100%;
  257. }
  258. .c-banner .banner ul{
  259.     list-style: none;
  260.     padding-left: 0px;
  261.     margin-bottom: 0px;
  262. }
  263. .c-banner .banner ul li{/*各张图片*/
  264.     position: absolute;
  265.     display: none;
  266.     opacity:;
  267. }
  268. .c-banner .banner ul li:nth-child(1){
  269.     opacity:;
  270.     display: block;
  271. }
  272. .c-banner .banner ul li img{
  273.     width: 100%;
  274.     position: absolute;
  275.     top: 0px;
  276. }
  277. .c-banner .banner ul li:first-child img{
  278.     position: relative;
  279. }
  280. .c-banner .nexImg,.c-banner .preImg{/*鼠标点击左右切换方向的效果*/
  281.     padding: 25px 10px 25px 10px;
  282.     position: absolute;
  283. /*    top: 80%;*/
  284.     margin-top: 180px;
  285.     background: #000000;
  286.     opacity: 0.5;/*透明度*/
  287.     border-radius: 5px;/*圆边框*/
  288.     z-index:;
  289.  
  290. }
  291. .c-banner .nexImg:hover,.c-banner .preImg:hover,.c-banner .jumpBtn ul li:hover{
  292.     opacity: 0.8;
  293.     cursor:pointer;
  294. }
  295. .c-banner .nexImg{
  296.     right: 0px;
  297. }
  298. .c-banner .nexImg img,.c-banner .preImg img{
  299.  
  300. }
  301. .c-banner .jumpBtn{
  302.     width: 100%;
  303.     position: absolute;
  304.     bottom: 20px;
  305.     text-align: center;
  306. }
  307. .c-banner .jumpBtn ul{
  308.     margin-bottom: 0px;
  309.     padding: 0px;
  310. }
  311.  
  312. .c-banner .jumpBtn ul li{
  313.     width: 10px;
  314.     height: 10px;
  315.     border-radius: 50%;
  316.     display: inline-block;
  317.     background-color: white;
  318.     opacity: 0.5;/*透明度*/
  319.     margin-left: 10px;
  320. }
  321. .c-banner .jumpBtn ul li:first-child{
  322.     margin-left: 0px;
  323. }
  324.  
  325. #dontai{
  326.     float:right;
  327.     display:block;
  328.     position:relative;
  329.     top:-260px;
  330.     background:url(images/formbg.gif) repeat;
  331.     height:200px;
  332.     width:120px;
  333. }
  334.  
  335. .share li{
  336.     padding:20px;/*相互间间距
  337.     margin:40px;*/
  338. }
  339.  
  340. .share a{
  341.     text-decoration:none;
  342.     color:#003;
  343. }
  344.  
  345. .share a:hover{
  346.     color:red;
  347. }
  348.  
  349. .note span{
  350. display: none;
  351. }
  352.  
  353. .note:hover span{ /*span 标签仅在 :hover 状态时显示*/
  354. display:block;
  355. float:left;
  356. position:relative;
  357. top:20px;
  358. left:-100px;
  359. width:150px;
  360. border:1px solid black;
  361. background-color:#0CF;
  362. color:black;
  363. }
  364.  
  365. #goal{
  366.     background:#17c2a4;
  367.     padding:5em 0;
  368.     height:450px;
  369. }
  370.  
  371. #goal h2{
  372.     font-size:2.2em;
  373.      color:#FFF;
  374.      text-align:center;
  375.      letter-spacing:10px;
  376.      -webkit-text-stroke-width:2px;
  377. }
  378.  
  379. #goal h4{
  380.     color:#FFF;
  381.     font-size:1.2em;
  382.     text-align:center;
  383.     width:50%;
  384.     margin:0 auto;
  385.     padding-top: 1em;
  386. }
  387. .line{
  388.     text-align:center;
  389. }
  390. .line span{
  391.     display:inline-block;
  392.     padding:2px 45px;
  393.     vertical-align:middle;
  394. }
  395. .green span{
  396.     background:#14a58c;
  397. }
  398.  
  399. #services_grids{
  400.     margin-top:3em;
  401. }
  402.  
  403. .grid_1_of_4{
  404.     display: block;
  405.     float:left;
  406.     margin: 1% 0 1% 1.6%;
  407. }
  408. .grid_1_of_4:first-child {
  409.     margin-left:;
  410. }
  411. .services_1_of_4 {
  412.     width: 20.8%;
  413.     padding: 1.5%;
  414.     text-align: center;
  415. }
  416. .services_1_of_4  img{
  417.     max-width:100%;
  418.     margin:25px 0;
  419. }
  420. .services_1_of_4  h3{
  421.     font-size:1.4em;
  422.      color:#000;
  423.      text-align:center;
  424.      font-weight:;
  425.      text-transform:uppercase;
  426.      -webkit-text-stroke: 1px;
  427.      letter-spacing:1px;
  428. }
  429. .services_1_of_4  p{
  430.     font-size:1em;
  431.     color:#000;
  432.     text-align: center;
  433.     margin: 0 auto;
  434.     padding:10px 0;
  435.     line-height:1.6em;
  436. }
  437.  
  438. /*登录界面*/
  439. #login{
  440.     height:800px;
  441.     background: #673AB7;
  442.     background: -webkit-linear-gradient(to bottom right, #673AB7 50%, #6231b9 50%);
  443.     background: linear-gradient(to bottom right, #673AB7 50%, #6231b9 50%);
  444.     background-size:cover;
  445.     background-attachment: fixed;
  446. }
  447. #login_page {
  448.     width: 35%;
  449.     /**/position:relative;
  450.     left:500px;
  451.     top:150px;
  452.     background: rgba(41, 5, 105, 0.43);
  453.     background-size: cover;
  454. }
  455. .login1 {
  456.     padding: 0.5em 3em 3em;
  457. }
  458.  
  459. .login1 a{
  460.     text-decoration:none;
  461. }
  462. .login1 input[type="text"],input[type="password"]{
  463.     font-size: 1em;
  464.     color: #fff;
  465.     font-weight:;
  466.     margin: 3em 0 0;
  467.     width: 93%;
  468.     display: block;
  469.     border: none;
  470.     padding: 1em;
  471.     border-bottom: solid 1px #fff;
  472.     -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  473.     transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  474.     background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #fff 4%);
  475.     background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #fff 4%);
  476.     background-position: -800px 0;
  477.     background-size: 100%;
  478.     background-repeat: no-repeat;
  479. }
  480. .login1 .text:focus,.login1 .text:valid {
  481.     box-shadow: none;
  482.     outline: none;
  483.     background-position: 0 0;
  484. }
  485. .login1 .text:focus::-webkit-input-placeholder,.login1 .text:valid::-webkit-input-placeholder {
  486.     color: #FFC107;
  487.     font-size: .9em;
  488.     -webkit-transform: translateY(-20px);/*各类浏览器的前缀*/
  489.     -moz-transform: translateY(-20px);
  490.     -o-transform: translateY(-20px);
  491.     -ms-transform: translateY(-20px);
  492.     transform: translateY(-20px);
  493.     visibility: visible;
  494. }
  495. .login1 ::-webkit-input-placeholder {
  496.    color: #fff;
  497.    font-weight:;
  498. }
  499. /* .login1 :-moz-placeholder { Firefox 18-
  500.    color: #fff;
  501. }
  502. .login1 ::-moz-placeholder {   Firefox 19+
  503.    color: #fff;
  504. }
  505. .login1 :-ms-input-placeholder {
  506.    color: #fff;
  507. } */
  508. .login1 input[type="submit"] {
  509.     font-size: 1em;
  510.     color: #fff;
  511.     background: #6439af;
  512.     outline: none;
  513.     border: none;
  514.     cursor: pointer;
  515.     padding: 1em;
  516.     -webkit-appearance: none;
  517.     width: 100%;
  518.     margin: 3em 0;
  519. }
  520. .login1 input[type="submit"]:hover {
  521.     background: #8a2be2;
  522.     -webkit-transform: translateY(8px);
  523.     -ms-transform: translateY(8px);
  524.     -o-transform: translateY(8px);
  525.     transform: translateY(8px);
  526.     -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.58);
  527.     -moz-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.58);
  528.     box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.58);
  529.     -webkit-transition: .5s all;/*实现过渡效果*/
  530.     -moz-transition: .5s all;
  531.     -o-transition: .5s all;
  532.     -ms-transition: .5s all;
  533.     transition: .5s all;
  534. }
  535. .login1 p {
  536.     font-size: 1em;
  537.     color: #fff;
  538.     text-align: center;
  539.     letter-spacing: 1px;
  540. }
  541. .login1 p a {
  542.     color: #fff;
  543.     -webkit-transition: .5s all;
  544.     -moz-transition: .5s all;
  545.     transition: .5s all;
  546. }
  547. .login1 p a:hover{
  548.     color: #FFC107;
  549. }
  550. .wthree-text {
  551.     margin-top: 3em;
  552. }
  553. .wthree-text ul li {
  554.     display: inline-block;
  555.     float: left;
  556. }
  557. .wthree-text ul li:nth-child(2) {
  558.     float: right;
  559. }
  560. .wthree-text ul li a {
  561.     font-size: 1em;
  562.     color: #fff;
  563. }
  564. .wthree-text ul li a:hover{
  565.     color: #FFC107;
  566. }
  567.  
  568. /*-- checkbox --*/
  569. .wthree-text label {
  570.     font-size: 1em;
  571.     color: #fff;
  572.     font-weight:;
  573.     cursor: pointer;
  574.     position:relative;
  575. }
  576. .wthree-text input.checkbox {
  577.     background: #4c2395;
  578.     cursor: pointer;
  579.     width: 1.2em;
  580.     height: 1.2em;
  581. }
  582. .wthree-text input.checkbox:before {
  583.     content: "";
  584.     position:absolute;
  585.     width: 1.2em;
  586.     height: 1.2em;
  587.     background: inherit;
  588.     cursor: pointer;
  589. }
  590. .wthree-text input.checkbox:after {
  591.     content: "";
  592.     transition: .4s ease-in-out;
  593.     position:absolute;
  594.     top: 0px;
  595.     left:;
  596.     z-index:;
  597.     width: 1.2em;
  598.     height: 1.2em;
  599.     border: 1px solid #FFC107;
  600. }
  601.  
  602. .anim input.checkbox:checked:after {
  603.     transform: rotate(-45deg);
  604.     height: .5rem;
  605.     border-color: transparent;
  606.     border-right-color: transparent;
  607.     animation: .4s rippling .4s ease;
  608.     animation-fill-mode: forwards;
  609. }
  610. @keyframes rippling {
  611.     50% {
  612.         border-left-color: #FFC107;
  613.     }
  614.     100% {
  615.         border-bottom-color: #FFC107;
  616.         border-left-color: #FFC107;
  617.     }
  618. } 
  619.  
  620. #right{
  621.     position:relative;
  622.     top:200px;
  623.     text-align:center
  624. }

三、空间功能实现Javascript

主要功能

这部分使用javascript实现网页的一些功能，有表单简单验证用户的登录、图片自动轮播和点击切换、几个窗口事件和鼠标、按钮事件，另外实现用户浏览网页的时间计算，这是我在设计时想到的一个简单功能，直观反映用户浏览时间，在一些网站上也有此功能。

1、使用js的onload事件，在网页加载完毕时弹出窗口提示

  1. window.onload=function(){
  2.     alert("欢迎来到Read Me，数据以为你加载完毕！")
  3. }

2、网页停留时间（刷新时重新计时）

  1. /*网页停留时间记录*/
  2. var second=0;
  3. var minute=0;
  4. var hour=0;
  5. window.setTimeout("interval();",1000);
  6.  
  7. function interval()
  8. {
  9.  
  10.     second++;
  11.     if(second==60)
  12.     {
  13.     second=0;minute+=1;
  14.     }
  15.     if(minute==60)
  16.     {
  17.     minute=0;hour+=1;
  18.     }
  19.     var times= hour+"时"+minute+"分"+second+"秒";
  20.     document.record.area.value =times;
  21.     window.setTimeout("interval();",1000);
  22. }

3、登录界面和简单验证，未涉及后端技术，使用了js设置几个账户和密码，在上面js介绍中代码可以看到设置的2个账号密码，登录成功会提示并跳转到主页，帐户密码错误也会提示。

  1. function check(){
  2.     var names=['name1','name2'];
  3.     var psws=['123','321'];
  4.     var name=document.getElementsByClassName("name").item(0).value;
  5.     var psw=document.getElementsByClassName("password").item(0).value;
  6.     var k=-1;var url = window.location.href;
  7.     for(i=0;i<names.length;i++)
  8.       {
  9.           if(name==names[i])
  10.               k=i;
  11.  
  12.       }
  13.     if(k!=-1&&psw==psws[k])
  14.      {
  15.           alert("Login successfully！");
  16.         /*console.log("登录成功！");
  17. 　　　　　　setCookie("username",userName,2000);*/
  18. 　　　　　　window.location.href=url;
  19.      }
  20.     else
  21.         alert("用户名不存在或密码错误");
  22. }

Javascript完整代码：

  1. // JavaScript Document
  2. //定时器返回值
  3. $(function(){
  4.     var time=null;
  5. //记录当前位子
  6. var nexImg = 0;
  7. //用于获取轮播图图片个数
  8. var imgLength = $(".c-banner .banner ul li").length;
  9. //当时动态数据的时候使用,上面那个删除
  10. // var imgLength =0;
  11. //设置底部第一个按钮样式
  12. $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");
  13.  
  14. //页面加载
  15. $(document).ready(function(){
  16.     // dynamicData();
  17.     //启动定时器,设置时间为3秒一次
  18.     time =setInterval(intervalImg,3000);
  19. });
  20.  
  21. //点击上一张
  22. $(".preImg").click(function(){
  23.     //清楚定时器
  24.     clearInterval(time);
  25.     var nowImg = nexImg;
  26.     nexImg = nexImg-1;
  27.     console.log(nexImg);
  28.     if(nexImg<0){
  29.         nexImg=imgLength-1;
  30.     }
  31.     //底部按钮样式设置
  32.     $(".c-banner .jumpBtn ul li").css("background-color","white");
  33.     $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");
  34.  
  35.     //将当前图片试用绝对定位,下一张图片试用相对定位
  36.     $(".c-banner .banner ul img").eq(nowImg).css("position","absolute");
  37.     $(".c-banner .banner ul img").eq(nexImg).css("position","relative");
  38.  
  39.     //轮播淡入淡出
  40.     $(".c-banner .banner ul li").eq(nexImg).css("display","block");
  41.     $(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000);
  42.     $(".c-banner .banner ul li").eq(nowImg).stop().animate({"opacity":0},1000,function(){
  43.         $(".c-banner ul li").eq(nowImg).css("display","none");
  44.     });
  45.  
  46.     //启动定时器,设置时间为3秒一次
  47.     time =setInterval(intervalImg,3000);
  48. })
  49.  
  50. //点击下一张
  51. $(".nexImg").click(function(){
  52.     clearInterval(time);
  53.     intervalImg();
  54.     time =setInterval(intervalImg,3000);
  55. })
  56.  
  57. //轮播图
  58. function intervalImg(){
  59.     if(nexImg<imgLength-1){
  60.         nexImg++;
  61.     }else{
  62.         nexImg=0;
  63.     }
  64.  
  65.     //将当前图片试用绝对定位,下一张图片试用相对定位
  66.     $(".c-banner .banner ul img").eq(nexImg-1).css("position","absolute");
  67.     $(".c-banner .banner ul img").eq(nexImg).css("position","relative");
  68.  
  69.     $(".c-banner .banner ul li").eq(nexImg).css("display","block");
  70.     $(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity":1},1000);
  71.     $(".c-banner .banner ul li").eq(nexImg-1).stop().animate({"opacity":0},1000,function(){
  72.         $(".c-banner .banner ul li").eq(nexImg-1).css("display","none");
  73.     });
  74.     $(".c-banner .jumpBtn ul li").css("background-color","white");
  75.     $(".c-banner .jumpBtn ul li[jumpImg="+nexImg+"]").css("background-color","black");
  76. }
  77.  
  78. //轮播图底下按钮
  79. //动态数据加载的试用应放在请求成功后执行该代码,否则按钮无法使用
  80. $(".c-banner .jumpBtn ul li").each(function(){
  81.     //为每个按钮定义点击事件
  82.     $(this).click(function(){
  83.         clearInterval(time);
  84.         $(".c-banner .jumpBtn ul li").css("background-color","white");
  85.         jumpImg = $(this).attr("jumpImg");
  86.         if(jumpImg!=nexImg){
  87.             var after =$(".c-banner .banner ul li").eq(jumpImg);
  88.             var befor =$(".c-banner .banner ul li").eq(nexImg);
  89.  
  90.             //将当前图片试用绝对定位,下一张图片试用相对定位
  91.             $(".c-banner .banner ul img").eq(nexImg).css("position","absolute");
  92.             $(".c-banner .banner ul img").eq(jumpImg).css("position","relative");
  93.  
  94.             after.css("display","block");
  95.             after.stop().animate({"opacity":1},1000);
  96.             befor.stop().animate({"opacity":0},1000,function(){
  97.                 befor.css("display","none");
  98.             });
  99.             nexImg=jumpImg;
  100.         }
  101.         $(this).css("background-color","black");
  102.         time =setInterval(intervalImg,3000);
  103.     });
  104. });
  105. });
  106.  
  107. function check(){
  108.     var names=['name1','name2'];
  109.     var psws=['123','321'];
  110.     var name=document.getElementsByClassName("name").item(0).value;
  111.     var psw=document.getElementsByClassName("password").item(0).value;
  112.     var k=-1;var url = window.location.href;
  113.     for(i=0;i<names.length;i++)
  114.       {
  115.           if(name==names[i])
  116.               k=i;
  117.  
  118.       }
  119.     if(k!=-1&&psw==psws[k])
  120.      {
  121.           alert("Login successfully！");
  122.         /*console.log("登录成功！");
  123. 　　　　　　setCookie("username",userName,2000);*/
  124. 　　　　　　window.location.href=url;
  125.      }
  126.     else
  127.         alert("用户名不存在或密码错误");
  128. }
  129.  
  130. /*网页停留时间记录*/
  131. var second=0;
  132. var minute=0;
  133. var hour=0;
  134. window.setTimeout("interval();",1000);
  135.  
  136. function interval()
  137. {
  138.  
  139.     second++;
  140.     if(second==60)
  141.     {
  142.     second=0;minute+=1;
  143.     }
  144.     if(minute==60)
  145.     {
  146.     minute=0;hour+=1;
  147.     }
  148.     var times= hour+"时"+minute+"分"+second+"秒";
  149.     document.record.area.value =times;
  150.     window.setTimeout("interval();",1000);
  151. }
  152.  
  153. function f1()
  154. {
  155.     alert("功能正在完善更新中，敬请期待!")
  156. }
  157.  
  158. window.onload=function(){
  159.     alert("欢迎来到Read Me，数据以为你加载完毕！")
  160. }

总结

纵观整个网页设计，并不是很难完成，但是，基本包含了前端的基础内容，在开篇列举了使用到的元素标签，对于掌握基础前端设计是比较好的案例，适合初学者。购书+阅读静态网页设计与实现，纯HTML+CSS+Javascript，基本实现网站经典功能和一些自己的想法，包括：图片轮播切换、点击切换、表单登录验证、用户浏览网站时长计算、鼠标点击提示、加载提示，体验前端开发的过程，小白入门前端开发案例详细步骤。

项目完整代码已打包在CSDN：MyBookWeb，需要可以下载。也可联系我获取。,下载源码地址请看我的CSDN：https://blog.csdn.net/Charzous/article/details/108407720

我的CSDN链接地址：https://blog.csdn.net/Charzous/article/details/108407720

我的博客园：https://www.cnblogs.com/chenzhenhong/p/13650095.html

版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。

购书网站前端实现（HTML+CSS+JavaScript）的更多相关文章

  1. 网站前端性能优化之javascript和css

    之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶 ...

  2. 前端三剑客:html,css,JavaScript

    一.前端概念 二.html详细介绍 三.css基础 四.css盒模型 五.css高级布局 六.JS基础 七.JS常用类 八.JS基础操作 九.JS高级与事件 十.BOM与DOM 十一.jQuery初识 ...

  3. 前端开发周报: CSS 布局方式方式与JavaScript数据结构和算法

    前端开发周报:CSS 布局方式与JavaScript动画库 1.常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局.Grid 布局.圣杯布局.双飞翼布局等.http: ...

  4. Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...

  5. [转载]Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    http://brackets.io/ Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维 ...

  6. 【项目总结】扯一扯电商网站前端css的整体架构设计（1）

    最近半忙不忙的写了一个外包网站,网站主要功能是艺术品竞拍和艺术衍生品的销售.工程已经完成了80%左右,现在前后端代码量已经50W行左右,我主要负责的是前端设计和前端布局.下面就先放一个网站的设计图吧, ...

  7. 前端html+css+JavaScript 需要掌握的单词

    前端html+css+JavaScript 需要掌握的单词   broswer 浏览器(客户端) html 超文本标记语言 css 层叠样式表 javascript 语言名字(类似python/php ...

  8. 前端~HTML~CSS~JavaScript~JQuery~Vue

    HTML CSS JavaScript DOM文档操作 jQuery实例 Vue

  9. 【PC网站前端架构探讨系列】关于中小型PC网站前端架构方案的讨论与实践

    目   录 1.遇到的问题 2.目标 3.探讨 4.架构设想 5.流程 6.初步实现 7.存在问题 8.最后 遇到的问题 我在这个系列上篇文章 已经讲解并开始逐步应用模块化思想,不知大家还记不记得,题 ...

随机推荐

  1. 剑指offer之字符串是否为数值

    1. 题目 这是<剑指offer>上的一道题,刚开始觉得这是一道挺简单的题目,后来发现自己太年轻了,考虑的因素太少了,思考了而是分钟还是无从下手,看了作者的思路深深被他折服了,题目如下: ...

  2. C#LeetCode刷题之#31-下一个排列（Next Permutation）

    目录 问题 示例 分析 问题 该文章已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4965 访问. 实现获取下一个排列的函数,算法需要将 ...

  3. vue keep-alive 不生效和多级（三级以上）缓存失败

    vue keep-alive https://cn.vuejs.org/v2/api/#keep-alive keep-alive 不生效的可能原因 如果安装官方的写法,已经正常完成keep-aliv ...

  4. JS实例-全选练习

    <!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" ...

  5. 第四周：卷积神经网络 part 3

    第四周:卷积神经网络 part 3 视频学习 语义分割中的自注意力机制和低秩重建 语义分割(Semantic Segmentation) 概念:语义分割是在像素级别上的分类,属于同一类的像素都要被归为 ...

  6. 【算法•日更•第三十七期】A*寻路算法

    ▎写在前面 这是一种搜索算法,小编以前总是念成A乘寻路算法,没想到一直念错. 请大家都念成A星寻路算法,不要像小编一样丢人了. ▎A*寻路算法 ☞『引入』 相信大家都或多或少的玩过一些游戏吧,那么游戏 ...

  7. Elasticsearch聚合语句

    聚合的范围是search query过滤出的数据 四种聚合类型: 一.Bucketing 桶聚合,常规的分类然后计算每个分类的文档数量 二.Metric 分类并对一组文档进行sum.avg等数学运算 ...

  8. CardView之可切换式卡片

    今天我所要作的笔记是: 可切换式的卡片CardView. Java代码部分 1.我们要根据自己的当前版本号添加相对应的一个依赖: implementation 'com.android.support ...

  9. js中的寄生组合继承

    function inheritProperty(subType, superType) { function F(){} F.prototype = superType.prototype; sup ...

  10. Tugnsten Fabric-MPLS-三层转发

    1.网络拓扑图如下: 2.场景:虚机1.1.1.3 ping 虚机3.3.3.3(两个虚机加入到虚拟路由器里面了,所以可以互通) 3.查看虚机1.1.1.3所对应的VRF: 4.其中41为mpls标签 ...