1. 书城首页的实现
功能
- 布局
- 水平菜单栏
- 下拉菜单
- 表格变色
- 广告页轮播
效果图
实现步骤
1). 创建资源文件夹
2). 布局的实现
实现代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="styles/Home.css"/>
<script type="text/javascript" src="scripts/Home.js"></script>
<title>首页</title>
</head>
<body >
<!--顶部导航-->
<div id="div_head"></div>
<!--菜单列表-->
<div id="div_menu"></div>
<!--搜索框-->
<div id="div_search"></div>
<!--轮播图-->
<div id="div_container"></div>
<!--热卖书籍推荐-->
<div id="div_recommend"></div>
<!--网站底部-->
<div id="div_bottom"></div>
</body>
</html>
对页面进行分层，可以分层为顶部栏目层，以及顶部的菜单层，搜索框层，轮播图层，书籍推荐层，底部标识层六层，
用标签<div></div>进行分层，
同时在<head></head>标签中，导入css文件和js文件的路径，
css文件用<link/>标签进行导入,js文件用<script>标签进行导入。
3). 书城顶部的实现
图片如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G1IuEjGO-1663080193268)(/pro-image/p1.jpg)]
实现的html代码：
<!--顶部导航-->
<div id="div_head">
<table id="head_table" >
<tr>
<td >
<a href="#">
<img src="images/logo1.jpg" id="top_img1" alt="传智书城logo"/>
</a>
</td>
<td style="text-align:right">
<img src="images/logo2.jpg" id="top_img2" alt="购物车logo"/>
<a href="#">购物车</a> |
<a href="#">帮助中心</a> |
<a href="#">我的帐户</a> |
<a href="resign.html">新用户注册</a>
</td>
</tr>
</table>
</div>
对应css代码：
/*顶部样式*/
#div_head {
width: 100%;
font-weight: bolder;
}
#head_table{
width: 100%;
}
#head_table td {
font-size: 16px;
}
#top_img1{
width: 150px;
}
#top_img2{
width: 26px;
}
整个栏目通过表格进行布局，整行有两个单元格，左侧logo单独站一个单元格，右侧购物车图片以及各种超链接占一个单元格，
左侧图标通过<img/>标签进行图片的导入，右侧导入一个购物车图片之后，使用<a></a>标签进行超链接文字的设置。
经验总结：对图片进行大小调整时，可以只限定其宽度或高度，图片会自动适应，如果强行改变图片大小可能导致图片的失真（清晰度降低）。
4). 书城菜单栏和搜索框的实现
实现的html代码：
<!--菜单列表-->
<div id="div_menu">
<ul class="menu_ul">
<li><a href="#">文学</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">计算机</a></li>
<li><a href="#">外语</a></li>
<li><a href="#">经管</a></li>
<li><a href="#">励志</a></li>
<li><a href="#">社科</a></li>
<li><a href="#">学术</a></li>
<li><a href="#">少儿</a></li>
<li><a href="#">艺术</a></li>
<li><a href="#">原版</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">考试</a></li>
<li><a href="#">生活百科</a></li>
<li ><a href="#" class="last_li">全部商品目录</a></li>
</ul>
</div>
<!--搜索框-->
<div id="div_search">
<form action="#" method="post">
<table>
<tr>
<td>
<span id="searchLabel">search</span>
<input type="text" value="请输入书名" id="text1"
onfocus="this.value=''" onblur="this.value='请输入书名'"/>
<input type="submit" value="搜索" class="button1"/>
</td>
</tr>
</table>
</form>
</div>
html实现原理：
菜单栏通过列表标签<lu></lu>实现，每个菜单单元通过<li></li>进行设置，在<li></li>标签中加入<a></a>进行将其中包含的菜单单元具有超链接的功能。其他部分通过css进行修饰。
搜索框加入了一个<form></form>表单的使用，之后在实现时可以通过搜索按钮将信息提交到指定页面。
搜索框通过代码<input type="text"/>进行设置，提交按钮通过<input type="submit"/>来实现，
之后给可以通过属性value来对文本框进行默认值的添加或者设置按钮上的文字。
对于<input/>标签，可以通过onfocus和onblur进行鼠标点击和鼠标失去焦点时进行的事件，
例如本代码中进行的<input type="text" value="请输入书名" onfocus=" this.value='' " onblur=" this.value='请输入书名' "/>进行的操作就是当文本框被点击后，默认的“请输入书名”这行字就会消失，变为空文本框，点击输入框其他区域后会再次恢复默认的文本。
实现的css代码：
/*菜单样式*/
#div_menu {
background-color: black;
font-size: 16px;
font-weight: bolder;
height: 30px;
padding-left: 160px;
}
.menu_ul{
list-style-type: none;
overflow: auto;
padding-top: 3px;
}
.menu_ul li{
float: left;
margin-right: 25px;
}
.menu_ul a{
text-decoration: none;
color: whitesmoke;
}
a:hover{
color: blue;
}
.last_li{
color: yellow !important;
}
/*搜索框样式*/
#div_search {
width: 100%;
background-color: orange;
font-weight: bolder;
}
#div_search #searchLabel{
color: white;
font-size: 14px;
}
#div_search table{
width: 100%;
padding-right: 100px;
}
#div_search td{
margin-right: 20px;
float: right;
}
css实现原理
菜单栏完成html设计之后的列表还没有背景，同时实现之后的样式如图：
在前面的html代码中给菜单的<div></div>定义了一个id="div_menu"属性，可以在css中通过#div_menu{}来对该div进行样式设置，
也给<ul></ul>设置了一个class="menu_ul",可以通过.menu_ul{}进行ul的样式设置。
通过.menu_ul li{}可以设置该<ul></ul>标签的所有<li></li>标签的样式。
现在的目标是需要去除文字前的小黑点，并且将列变为行，最后填充上背景颜色。
在.menu_ul{}中添加样式list-style-type: none;去除小黑点。
在.menu_ul li{}添加样式float: left;将列表单元向左浮动为一行，此时会成为如图所示情况：
在.menu_ul{}中添加样式overflow: auto;停止浮动，可以防止搜索框浮动到菜单栏中。
在.menu_ul li{}添加样式margin-right: 25px;使连成一团的文字分开一段距离。
然后对#div_menu{}添加样式background-color: black;为菜单栏添加一个黑色背景色，之后变可以在其中添加一些样式让栏目更加美观。
.menu_ul a{}中添加样式text-decoration: none;可以去除文本下划线，让看上去更加美观，其中的字体和颜色等设置在此省略，完成后的样式如下图：
之后可以通过css给页面再添加一点互动效果。
.menu_ul a:hover可以设置当鼠标放到超链接（标签<a></a>）上面是进行的操作，
这里添加了一个 color: blue;让鼠标放到文字上自动变为蓝色。
.last_li单独设置了最后一个标签的额外样式，这个标签需要设置为黄色，
但是直接添加样式color: yellow会由于优先级没有.menu_ul a高而被覆盖，
可以设置为color: yellow !important;提升到最高优先级，这样就可以成功设置需要的颜色。
搜索框由于只有一个表格，大部分css样式设计也只是进行一些文字大小颜色以及背景颜色还有页边距之类的设计，
此处就不赘述了,最终效果见开始时的界面。
5). 轮播图的实现
实现后的图片如下：
实现的html代码
<div id="div_container">
<!-- 先把第一张图片显示出来 -->
<img class="use" src="images/carouselDiagram1.jpg" alt="轮播图1"/>
<img src="images/carouselDiagram2.jpg" alt="轮播图2"/>
<img src="images/carouselDiagram3.jpg" alt="轮播图3"/>
<img src="images/carouselDiagram4.jpg" alt="轮播图4"/>
<img src="images/carouselDiagram5.jpg" alt="轮播图5"/>
<!-- 左右切换 -->
<div class="left"><</div>
<div class="right">></div>
<!-- 指示圆点 -->
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
html实现原理
轮播图分为三个部分：主体图片，左右切换箭头，用于指示和页面跳转的小圆点。
第一个部分通过<img/>导入了五张图片，class="use"在之后操作中控制要显示的图片。
第二个部分通过两个<div></div>实现的，具体需要css进行实现
第三个部分通过一个列表进行实现，由于有五张图片，就输入了五个<li></li>标签，class="active"用于之后操作中控制小圆点的颜色变化。
实现的css代码
/*轮播图样式2*/
#div_container{
margin-top: 10px;
width: 800px;
height: 310px;
position: relative;
margin-left: calc(50% - 400px);
}
#div_container img{
width: 100%;
height: 100%;
display: none;
}
#div_container .use {
display: block;
}
.left, .right{
position: absolute;
top: 40%;
width: 60px;
height: 100px;
font-size: 60px;
line-height: 90px;
color: lightblue;
background-color: gray;
text-align: center;
opacity: 0;
display: block;
cursor: pointer;
transition: opacity 1s;
}
.right{
right: 0;
}
.left:hover,.right:hover{
color: whitesmoke;
}
#div_container:hover .left, #div_container:hover .right{ /*鼠标悬停才容器范围内时显示按钮*/
opacity: 50%;
}
#div_container:hover ul{
background-color: gray; /*鼠标悬停才容器范围内时显示按钮*/
}
#div_container ul{
position: absolute;
bottom: 0;
margin-left: 40%;
padding-top: 7px;
padding-right: 50px;
height: 15px;
width: 100px;
border-radius: 8px;
transition: background 2s;
}
#div_container li{
list-style: none;
float: left;
background-color: powderblue;
width: 10px;
height: 10px;
border-radius: 50%; /*背景从方格变小圆点*/
margin-left: 10px;
cursor: pointer;
}
#div_container li.active{
background-color: black; /*焦点激活时的样式*/
}
这是未加载css时的轮播图：
很明显，现在还非常的混乱，需要先解决图片的问题，让图片回到原本的位置。
css的的引用方法不再进行阐述，直接进行样式的设计。
首先对图片进行操作，先让图片全部清空，即在#div_container img添加样式display: none;
但这样就没有图片了，然后那个use就派上用场了，我们设置#div_container .use样式为display: block;这样就能让class="use"的图片成功显现出来
这样还不够，此时图片还是一个大一个小，我们需要设置一个固定大小的框，
可以设置外部的<div></div>此时便可以设置#div_container设置一下width和height。
再给#div_container img设置width: 100%; height: 100%;
完成之后发现图片没有居中，如果用的是像素点设置的无法准确判断要偏移的距离，此时可以用calc()来得到居中效果，
例如margin-left: calc(50% - 400px);其中的50%表示屏幕长度一半，400px是我设置的边框长度的一半，两者相减得到的偏移量就可以让图片居中。
其他操作就不赘述了。
效果如图：
此时需要实现的是两个小箭头变为图片上的指示箭头。
可以根据通过.left, .right{}来进行样式大小、背景颜色、边框大小等的配置，
其中有个属性为opacity表示组件的透明度，
另一个transition表示某个属性改变时设置的过渡时间，也就是常说的渐变。
设置完之后会发现左右箭头都会在左边的中间部分，我们需要将另一个右指向的箭头挪过去，
可以在.right{}中设置一个样式right: 0;使其向右边距为0，这样就挪到了右边。
之后再给箭头添加一点互动效果，先在.left, .right{}中将opacity设置为0，
然后用#div_container:hover .left, #div_container:hover .right{}添加一个opacity: 50%;，让鼠标移动到容器（图片）上之后可以显示两边指示的箭头，
给.left:hover,.right:hover{}添加一个color: white;让鼠标移动到显示的箭头上之后可以变为白色。
显示效果如图：
之后要实现的是图片上小圆点的设置。
通过list-style: none;消除前面的圆点，
然后通过width: 10px;height: 10px;border-radius: 50%;形成一个小圆点，这个圆点可以设置颜色，以及显示。
之后就是float和margin-left来将竖行的点变为有间隔的一横行的点。
显示效果如图：
然后需要设置<ul></ul>来将圆点放到图片内的下方
#div_container ul{}设置一个绝对布局样式position: absolute;这样这个组件就可以合其他组件重叠了，通过bottom: 0;设置在组件底部，然后通过一些布局样式将组件水平居中就可以了。
之后就是给圆点设置一个小边框，可以防止圆点被图片颜色覆盖。
先给#div_container:hover ul设置一个background-color: gray;样式，鼠标移到图片时显示圆点的外边框的颜色。
然后对#div_container ul{}设置一些宽高样式，再用padding修饰一下内边距，让圆点在小边框中居中。
最终效果和开始时的演示图一致，但是不能进行切换图片的交互。
如下：
实现的js代码
var aImages = document.querySelectorAll('#div_container img'); /*导入html组件中的图片*/
var dots = document.querySelectorAll('#div_container li'); /*导入html组件中的列表*/
var arrowLeft = document.querySelector('#div_container .left'); /*导入html组件中的左箭头*/
var arrowRight = document.querySelector('#div_container .right'); /*导入html组件中的右箭头*/
var container = document.querySelector('#div_container'); /*导入html组件中的容器*/
var Index = 0; //图片下标
var autoRow = null;
//加载页面完成绑定事件
window.onload=function(){
autoRun() /*加载自动滚动事件*/
arrowLeft.onclick = toLeft; /*完成点击向左事件*/
arrowRight.onclick = toRight; /*完成点击向右事件*/
container.onmouseover = stopRun; /*鼠标在容器上是停止滚动*/
container.onmouseout = autoRun; /*离开容器继续滚动*/
for (var i = 0; i < dots.length; i++) { /*圆点绑定点击跳转事件*/
dots[i].index = i;
dots[i].onclick = jumpImage;
}
}
/*自动滚动*/
function autoRun(){
autoRow = self.setInterval("toRight()",1500);
}
/*停止滚动*/
function stopRun(){
window.clearInterval(autoRow);
}
/*清除所有图片样式，加载选定的Index的图片样式*/
function change(){
for (var i = 0; i < dots.length; i++) {
aImages[i].className = '';
dots[i].className = '';
}
aImages[Index].className = 'use';
dots[Index].className = 'active';
}
/*点击跳转*/
function jumpImage(){
Index = this.index;
change();
}
/*向右翻页*/
function toRight(){
Index++;
Index %= aImages.length; //实现周期性变化
change();
}
/*向左翻页*/
function toLeft(){
Index--;
if (Index < 0) {
Index = aImages.length - 1;
}
change();
}
该js代码是图片自动轮播，左右箭头翻页，点击圆点跳转的具体代码实现。
先通过document.querySelector获取各个组件，获取组件之后再进行函数的操作。
Index是一个全局的变量，这个变量可以记录当前页面位置。
window.onload=function(){}表示页面刚加载进行的操作，此时进行的是将对应的操作的函数和组件进行绑定。
function autoRun()函数设定了一个self.setInterval定时调用向右转移的函数，进行轮播
function stopRun()函数通过window.clearInterval清除计时器，让图片停止轮播
function change()先清除所有页面样式，然后通过Index来加载当前页面的样式，达到转换的目的
之后的function toRight()和function toLeft()对Index进行加减操作来调用function change()，同时需要有判断或取模，防止Index溢出。
function jumpImage()运用了一个this.index，这个是由window.onload=function()函数中的循环进行赋值的，两者结合可以将圆点绑定到页面的跳转上。
进行js操作遇到的问题
之前将js代码放置在html内是可以正常进行调用运行，但是放于js文件中调用时，js功效全部丧失。
进行排查发现js通过document.querySelector获取的到的组件进行alert()之后全部为空，
而document.querySelectorAll操作得到的数据却显示不为空，并且每个数据都存在。
而使用document.querySelectorAll来获取document.querySelector的组件时，
显示为NodeList但是通过下标得到的第零位却仍然为空。
解决方法
网上查阅发现时由于加载之后html有些组件仍然未加载完成，但是js已经进行运行，得到的就是一个空的元素，
我们只需要在调用是将<script type="text/javascript" src="scripts/Home.js"></script>
的后面加上defer，如下<script type="text/javascript" src="scripts/Home.js" defer></script>
就可以解决这个问题了。
注：
下面两个热卖书籍推荐、网站底部任务里面没有要求就没写.md，主要是写的好累。。。。
我也是边学边做的，有错误请指出。