欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

如何使用HTML、CSS和JavaScript打造购书网站的前端界面

最编程 2024-07-22 15:14:16
...

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

一、主页设计HTML

1、效果展示及实现

2、完整代码

二、主页样式布局CSS

三、空间功能实现Javascript

主要功能

Javascript完整代码：

总结

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

项目下载获取方式：

①关注公众号“陆海的点滴”，回复“购书网站”，公众号里面联系我获取。

②****资源下载：购书静态网页设计与实现，原生HTML+CSS+Javascript实现！

 

主要功能以及元素应用：

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、网页顶部栏展示：

实现代码：

<div class="top">
  <div class="logo"> <a href="Read_Me.html">Read Me</a> </div>
  <div class="wel">阅读我，给你畅游书海的乐趣！<br>
    等待你的到来！</div>
  <div id="time">
    <form name="record" method="post" action="">
      浏览时长:
      <input name="area" type="text" value="">
    </form>
  </div>
  <div class="detail">
    <ul>
      <li><a href="#">语言<span class="icon"></span></a>
        <ul>
          <li><a href="#">中国站：简体中文</a></li>
          <li><a href="#">国际站：English</a></li>
        </ul>
      </li>
      <li><a href="#">我的<span class="icon"></span></a>
        <ul class="list2">
          <li><a href="#">账户信息</a></li>
          <li><a href="#">设置</a></li>
        </ul>
      </li>
      <li><a href="#">我的云书房</a></li>
      <li><a href="#">我的购物车</a></li>
    </ul>
    <div class="clear"></div>
  </div>
</div>
<!--top-->

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

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

代码：

<div id="nav">
  <div id="mulu">
    <ul>
      <li><a href="#nav">首页</a></li>
      <li><a href="#goal">Read Me动态</a></li>
      <li><a href="#" onClick="f1()">藏书阁</a></li>
      <li><a href="#">网站导航<span class="icon"></span></a>
        <ul class="list1">
          <li><a href="#">资源中心</a></li>
          <li><a href="#">帮助</a></li>
          <li><a href="#">关于我们</a></li>
        </ul>
      </li>
      <li><a href="#">最新活动</a></li>
      <li><a href="#login_page">登录</a></li>
    </ul>
  </div> <!--mulu--> 
 
</div>
 
 
    <div id="sort">
      <ul id="book1">
        <li class="f"><a href="#">经典</a></li>
        <li class="s"><a href="#">科技</a></li>
        <li class="t"><a href="#">教育</a></li>
        <li class="f1"><a href="#">生活</a></li>
        <li class="f2"><a href="#">艺术</a></li>
        <li class="s"><a href="#">电子书</a></li>
        <li class="s1"><a href="#">听书</a></li>
      </ul>
    </div>

3、搜索框及图片轮播

 

 

代码实现： 

    <!--sort-->
    <div id="search">
      <form id="form">
        <input class="in1" name="search" type="text" placeholder="请输入您要搜索的关键字">
        <button onclick="f2()">搜索</button>
        <!--input class="ou1" type="submit" name="send"  value="搜索"-->
      </form>
      <a href="#">智能推荐</a> 
    </div>  <!--search-->
  
    <div id="tu">
      <div class="c-banner">
        <div class="banner">
          <ul>
            <li><img src="images/book1.jpg" width="1000"></li>
            <li><img src="images/lunbo1.jpg" ></li>
            <li><img src="images/book2.jpg" ></li>
            <li><img src="images/lunbo2.jpg"></li>
            <li><img src="images/shan.png"></li>
            <li><img src="images/book3.jpg" ></li>
          </ul>
        </div>
        <!--banner-->
        <div class="nexImg"><img src="images/nexImg.png" /></div>
        <div class="preImg"><img src="images/preImg.png" /></div>
        <div class="jumpBtn">
          <ul>
            <li jumpImg="0"></li>
            <li jumpImg="1"></li>
            <li jumpImg="2"></li>
            <li jumpImg="3"></li>
            <li jumpImg="4"></li>
            <li jumpImg="5"></li>
          </ul>
        </div><!--jumpBtn--> 
        
      </div>  <!--c-banner--> 
    
    </div><!--tu-->

4、简单的介绍页面 

5、表单页面

 
  <div id="login_page">
    <div class="login1">
      <form action="#" method="post">
        <input type="text" name="name" class="name" placeholder="Usename" required>
        <input type="password" name="password" class="password" placeholder="Password" required>
        <div class="wthree-text">
          <ul>
            <li>
              <label class="anim">
                <input type="checkbox" class="checkbox" required>
                <span>七天内自动登录</span> </label>
            </li>
            <li><a href="#">忘记密码?</a></li>
          </ul>
        </div>
        <div class="clear"></div>
        <input type="submit" value="Login" onclick="check()">
      </form>
      <p><a href="#">创建账号？</a></p>
    </div>
  </div><!--login_page-->

2、完整代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Read Me 图书网</title>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/Readme.js"></script>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
 
<body>
<div class="top">
  <div class="logo"> <a href="Read_Me.html">Read Me</a> </div>
  <div class="wel">阅读我，给你畅游书海的乐趣！<br>
    等待你的到来！</div>
  <div id="time">
    <form name="record" method="post" action="">
      浏览时长:
      <input name="area" type="text" value="">
    </form>
  </div>
  <div class="detail">
    <ul>
      <li><a href="#">语言<span class="icon"></span></a>
        <ul>
          <li><a href="#">中国站：简体中文</a></li>
          <li><a href="#">国际站：English</a></li>
        </ul>
      </li>
      <li><a href="#">我的<span class="icon"></span></a>
        <ul class="list2">
          <li><a href="#">账户信息</a></li>
          <li><a href="#">设置</a></li>
        </ul>
      </li>
      <li><a href="#">我的云书房</a></li>
      <li><a href="#">我的购物车</a></li>
    </ul>
    <div class="clear"></div>
  </
																				

						

							上一篇：							
								如何在JavaScript中添加HTML内容的方法探析							
						

						

							下一篇：							
								四种简单易懂的方法：用HTML、CSS和JS制作轮播图							
						

					

															

						

							推荐阅读