add file:Bootstrap
This commit is contained in:
qianguyihao
898
04-前端基本功：CSS和DOM练习/01-CSS基础练习：JD首页的制作（顶部和底部）.md
Normal file
898
04-前端基本功：CSS和DOM练习/01-CSS基础练习：JD首页的制作（顶部和底部）.md
Normal file
@@ -0,0 +1,898 @@
|
||||
|
||||
|
||||
|
||||
## 前言
|
||||
|
||||
京东是典型的电商类网站，学习这个网站的制作比较有价值。我们准备用WebStorm进行开发。
|
||||
|
||||
京东首页的截图为：<http://img.smyhvae.com/20180119_1653.jpg>
|
||||
|
||||
### 页面规划：新建一个空的工程
|
||||
|
||||
我们首先新建一个空的工程：
|
||||
|
||||
|
||||
|
||||
|
||||
### CSS初始化（基本样式）
|
||||
|
||||
|
||||
京东网站有一些基本样式，在各个页面中都要用到：（将这些基本样式copy到css.base里面去）
|
||||
|
||||
base.css中的公共的部分：
|
||||
|
||||
```css
|
||||
@charset "UTF-8";
|
||||
/*css 初始化 */
|
||||
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
|
||||
fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; } /*去掉边框、去掉轮廓（比如输入框外面的蓝边框）*/
|
||||
|
||||
/*去掉列表前面的圆点*/
|
||||
ul, ol {
|
||||
list-style: none;
|
||||
}
|
||||
input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";} /*字体一般是指定这两个*/
|
||||
select, input { vertical-align:middle;}
|
||||
select, input, textarea { font-size:12px; margin:0; }
|
||||
textarea { resize:none; } /*禁止文本输入框在右下角拖拽（因为拖动后会调整输入框大小）*/
|
||||
img {border:0; vertical-align:middle; } /* 去掉图片底侧默认的3像素空白缝隙*/
|
||||
table { border-collapse:collapse; }
|
||||
body {
|
||||
font:12px/150% Arial,Verdana,"\5b8b\4f53"; /*\5b8b\4f53指的是宋体*/
|
||||
color:#666;
|
||||
background:#fff
|
||||
}
|
||||
|
||||
/*start:清除浮动【推荐此方式进行清除浮动】。左浮动和右浮动都清除了，盒子刚好达到闭合的状态*/
|
||||
.clearfix:before, .clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
*zoom: 1; /*IE/7/6*/
|
||||
}
|
||||
/*end：清除浮动*/
|
||||
|
||||
a {color:#666; text-decoration:none; } /*去掉超链接的下划线*/
|
||||
a:hover{color:#C81623;} /*鼠标悬停时的颜色*/
|
||||
h1,h2,h3,h4,h5,h6 {text-decoration:none;font-weight:normal;font-size:100%;} /*font-size:100% 的意思是：让它们和父亲一样大，避免在不同的浏览器中显示大小不一致*/
|
||||
s,i,em{font-style:normal;text-decoration:none;} /*去掉i标签和em的斜体，取消s标签的删除线*/
|
||||
.col-red{color: #C81623!important;}
|
||||
|
||||
/*公共类*/
|
||||
.w { /*版心（可视区）。需要专门提取出来 */
|
||||
width: 1210px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.fl {
|
||||
float: left
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right
|
||||
}
|
||||
|
||||
.al {
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.ac {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.ar {
|
||||
text-align: right
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
上方代码解释：
|
||||
|
||||
（1）**清除浮动**的方式：
|
||||
|
||||
```css
|
||||
.clearfix:before, .clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
*zoom: 1; /*IE/7/6*/
|
||||
}
|
||||
```
|
||||
|
||||
这是如今比较流行的清除浮动的方式。比如小米官网就是采用的这种。
|
||||
|
||||
（2）其他属性：
|
||||
|
||||
我们给`fieldset, img,input,button`等标签设置了`outline-style:none`，意思去掉轮廓（比如去掉输入框外面的蓝边框，去掉之后，蓝色没有了，但是黑色依然存在）。去掉的原因是：首先，轮廓不好看；其次，在google浏览器和在火狐浏览器上，渲染的效果不同。
|
||||
|
||||
img标签中，我们通过`vertical-align:middle`属性**去掉图片底侧默认的3像素空白缝隙**，还有一种方法可以达到效果，那就是`display: block`。
|
||||
|
||||
|
||||
给`h1,h2,h3,h4,h5,h6`设置**`font-size:100%`**是因为：h标签在每个浏览器中显示的大小不一致，设置此属性则表示，**让它们都和父亲一样大**。
|
||||
|
||||
（3）一些小标记
|
||||
|
||||
`s`是删除线，`i`和`em`是斜体。我们经常用它们做一些小装饰、小图标。
|
||||
|
||||
### 引入css文件
|
||||
|
||||
base.css初始化之后，我们需要在html文件中引入它。引入外部样式表的方式如下：（`stylesheet`指样式表）
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="css/base.css">
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
注意，**base.css和index.css的书写顺序不能颠倒**，因为是按照书写顺序，从上往下进行加载的。
|
||||
|
||||
|
||||
### Favicon 小图标
|
||||
|
||||
Favicon 图标指的是箭头处这个小图标：
|
||||
|
||||
|
||||
|
||||
官网链接<https://www.jd.com/favicon.ico>可以下载这个小图标。
|
||||
|
||||
我们把`favicon.ico`图片放到工程文件的根目录，通过下面这种方式进行加载：
|
||||
|
||||
```html
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
```
|
||||
|
||||
注意，`shortcut icon`是Favicon的专有名词，不能改成别的单词。
|
||||
|
||||
代码位置：
|
||||
|
||||
|
||||
|
||||
|
||||
## 顶部导航的制作
|
||||
|
||||
我们先制作下面这个部分，它位于网站的最顶部：
|
||||
|
||||
|
||||
|
||||
顶部导航栏的html结构如下：（直接放在body标签下）
|
||||
|
||||
```html
|
||||
<!--顶部导航start-->
|
||||
<div class="shortcut">
|
||||
<!--版心-->
|
||||
<div class="w">
|
||||
<!--左浮动区域-->
|
||||
<div class="fl">
|
||||
<div class="dt"> 送至：北京
|
||||
<i><s>◇</s></i>
|
||||
</div>
|
||||
</div>
|
||||
<!--右浮动区域-->
|
||||
<div class="fr">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">你好，请登录</a>
|
||||
<a href="#" class="col-red">免费注册</a>
|
||||
</li>
|
||||
<li class="line"></li>
|
||||
<li>我的订单</li>
|
||||
<li class="line"></li>
|
||||
<li class="fore">我的京东
|
||||
<i><s>◇</s></i>
|
||||
</li>
|
||||
<li class="line"></li>
|
||||
<li>京东会员</li>
|
||||
<li class="line"></li>
|
||||
<li>企业采购</li>
|
||||
<li class="line"></li>
|
||||
<li class="fore tel-jd">
|
||||
<em class="tel"></em> <!--小手机图标-->
|
||||
手机京东
|
||||
<i><s>◇</s></i>
|
||||
</li>
|
||||
<li class="line"></li>
|
||||
<li class="fore">
|
||||
关注京东
|
||||
<i><s>◇</s></i>
|
||||
</li>
|
||||
<li class="line"></li>
|
||||
<li class="fore">
|
||||
客户服务
|
||||
<i><s>◇</s></i>
|
||||
</li>
|
||||
<li class="line"></li>
|
||||
<li class="fore">
|
||||
网站导航
|
||||
<i><s>◇</s></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!--顶部导航end-->
|
||||
|
||||
```
|
||||
|
||||
顶部导航栏需要加入的css样式如下：（放到base.css中）
|
||||
|
||||
```css
|
||||
/*顶部导航start*/
|
||||
.shortcut {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.dt,
|
||||
.shortcut .fore {
|
||||
padding: 0 20px 0 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dt i,
|
||||
.fore i {
|
||||
font: 400 15px/15px "宋体";
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
right: 3px;
|
||||
height: 7px;
|
||||
overflow: hidden;
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.dt s,
|
||||
.fore s {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fr li {
|
||||
float: left;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.fr .line {
|
||||
width: 1px;
|
||||
height: 12px;
|
||||
background-color: #ddd;
|
||||
margin-top: 9px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.shortcut .tel-jd {
|
||||
padding: 0 20px 0 25px;
|
||||
}
|
||||
|
||||
.tel {
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 20px;
|
||||
background: url(../images/sprite.png) no-repeat;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
/*顶部导航end*/
|
||||
|
||||
```
|
||||
|
||||
css代码解释：
|
||||
|
||||
（1）整个的顶部导航栏是一个shortcut：
|
||||
|
||||
```css
|
||||
.shortcut {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
```
|
||||
|
||||
然后将左侧的文字设置为左浮动，右侧的文字设置为右浮动。
|
||||
|
||||
（2）完成左侧部分的文字。
|
||||
|
||||
（3）右侧部分文字的结构：ul中放了九个li，用来存放文字。代码快捷键是`ul>li*9`（符号`>`是包含的关系）。
|
||||
|
||||
需要注意的是，“登录”和“注册”是同一个<li>里面的两个`<a>`。它们是一个整体，所以要放到同一个li里。
|
||||
|
||||
|
||||
(4)文字中间的间隔线：
|
||||
|
||||
|
||||
|
||||
上图所示，我们发现，每个li之间都有`1像素宽、12像素高的间隔线`，这个也是用li做的。
|
||||
|
||||
（5）增加文字右侧的小三角。
|
||||
|
||||
（6）在`手机京东`这个li中增加手机小图标，这里用到了css精灵图。
|
||||
|
||||
|
||||
京东顶部导航条的工程文件如下：
|
||||
|
||||
<http://download.csdn.net/download/smyhvae/10214943>
|
||||
|
||||
## 顶部banner图
|
||||
|
||||
接下来我们只做顶部的banner图，效果如下：
|
||||
|
||||
|
||||
|
||||
也就是上图中“1元抢宝”的那个位置。
|
||||
|
||||
涉及到的html代码如下：
|
||||
|
||||
|
||||
```html
|
||||
<!--京东的topbanner部分-->
|
||||
<div class="topbanner">
|
||||
<div class="w tb">
|
||||
<img src="images/topbanner.jpg" alt=""/>
|
||||
<a href="javascript:;" class="close-banner"></a>
|
||||
</div>
|
||||
</div>
|
||||
<!--京东的topbanner部分 end-->
|
||||
|
||||
```
|
||||
|
||||
在base.css中涉及到的css代码如下：
|
||||
|
||||
```css
|
||||
/*topbanner start*/
|
||||
.topbanner {
|
||||
background-color: #8A25C6;
|
||||
}
|
||||
.close-banner {
|
||||
position: absolute;
|
||||
right:0;
|
||||
top:5px;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
background: url(../images/close.png) no-repeat;
|
||||
}
|
||||
.close-banner:hover {
|
||||
background-position:bottom;
|
||||
}
|
||||
.tp{
|
||||
position: relative;
|
||||
}
|
||||
/*topbanner end*/
|
||||
|
||||
```
|
||||
|
||||
代码解释：
|
||||
|
||||
重点是`close-banner`这个class，也就是右上角的那个`X`。这里用到了子绝父相，注意，设置相对定位的父亲是`tb`这个class，因为要考虑到网页缩放的情况。
|
||||
|
||||
`.close-banner:hover`这个属性里，我们设置的背景图的定位是bottom，意思是，保证精灵图和父亲的底边贴齐，就不用使用像素的方式对精灵兔图进行定位了。
|
||||
|
||||
|
||||
## 搜索框
|
||||
|
||||
搜索框的UI如下：
|
||||
|
||||
|
||||
|
||||
|
||||
上图中，包含了四个部分：
|
||||
|
||||
- 左侧的logo
|
||||
|
||||
- 中间的搜索框
|
||||
|
||||
- 右侧的购物车
|
||||
|
||||
- 热搜文字（中间搜索框的下方）
|
||||
|
||||
我们在WebStorm中输入`.search-logo+.search-input+.search-car+.search-moreA`，然后按tab键，就可以补齐代码：
|
||||
|
||||
```html
|
||||
<div class="search-logo"></div>
|
||||
<div class="search-input"></div>
|
||||
<div class="search-car"></div>
|
||||
<div class="search-moreA"></div>
|
||||
```
|
||||
|
||||
相关的html代码如下：
|
||||
|
||||
```html
|
||||
<!--search部分start-->
|
||||
<div class="serach">
|
||||
<div class="w clearfix">
|
||||
<div class="search-logo">
|
||||
<a href="http://www.jd.com" title="京西" target="_blank">京东官网</a>
|
||||
</div>
|
||||
<div class="search-input">
|
||||
<!--placeholder="运动相机"-->
|
||||
<input type="text" value="运动相机"/>
|
||||
<button>搜索</button>
|
||||
</div>
|
||||
<div class="search-car">
|
||||
<a href="#">我的购物车</a>
|
||||
<i class="icon1"></i>
|
||||
<i class="icon2">></i>
|
||||
<i class="icon3">8</i>
|
||||
</div>
|
||||
<div class="search-moreAlink">
|
||||
<a href="#" class="col-red">出境999</a>
|
||||
<a href="#">沸腾厨卫</a>
|
||||
<a href="#">249减100</a>
|
||||
<a href="#">手机节</a>
|
||||
<a href="#">每150减50</a>
|
||||
<a href="#">男靴</a>
|
||||
<a href="#">巧克力</a>
|
||||
<a href="#">cool1手机</a>
|
||||
<a href="#">男士卫衣</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--search部分end-->
|
||||
```
|
||||
|
||||
相关的css代码如下：
|
||||
|
||||
```css
|
||||
/*search部分start*/
|
||||
.search-logo {
|
||||
float: left;
|
||||
width: 362px;
|
||||
height: 60px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.search-logo a {
|
||||
width: 270px;
|
||||
height: 60px;
|
||||
display: block;
|
||||
text-indent: -9999px;
|
||||
background: url(../images/logo.png) no-repeat;
|
||||
}
|
||||
.search-input {
|
||||
float: left;
|
||||
height: 36px;
|
||||
padding-top: 25px;
|
||||
}
|
||||
.search-input input {
|
||||
float: left;
|
||||
width: 450px;
|
||||
height: 32px;
|
||||
padding-left: 4px;
|
||||
font: 400 14px/32px "microsoft yahei";
|
||||
color: rgb(153, 153, 153);
|
||||
border: 2px solid #B61D1D;
|
||||
border-right: 0;
|
||||
}
|
||||
.search-input button {
|
||||
width: 82px;
|
||||
height: 36px;
|
||||
color: #fff;
|
||||
float: left;
|
||||
font: 400 16px/36px "微软雅黑";
|
||||
background-color: #B61D1D;
|
||||
cursor: pointer;
|
||||
/*cursor: pointer; 变成小手*/
|
||||
/*cursor: text; 变成光标*/
|
||||
/*cursor: move; 变成四角箭头*/
|
||||
/*cursor: default; 变成小白*/
|
||||
}
|
||||
.search-car {
|
||||
float: right;
|
||||
width: 96px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
padding-left: 43px;
|
||||
position: relative;
|
||||
margin: 25px 65px 0 0;
|
||||
border: 1px solid #DFDFDF;
|
||||
background-color: #F9F9F9;
|
||||
}
|
||||
.icon1 {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 18px;
|
||||
width: 18px;
|
||||
height: 16px;
|
||||
background: url(../images/tel.png) no-repeat 0 -58px;
|
||||
}
|
||||
.icon2 {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
color: #999;
|
||||
/*font-family: "SimSun";*/
|
||||
font: 13px/34px "SimSun";
|
||||
}
|
||||
.icon3 {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
/*left: 0;*/
|
||||
width: 16px;
|
||||
height: 14px;
|
||||
background-color: #C81623;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border-radius: 7px 7px 7px 0; /*画圆角矩形*/
|
||||
}
|
||||
.search-moreAlink {
|
||||
float: left;
|
||||
width: 530px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.search-moreAlink a {
|
||||
margin-right: 8px;
|
||||
}
|
||||
/*search部分end*/
|
||||
```
|
||||
|
||||
对于这四个部分，我们依次来讲解。
|
||||
|
||||
### 1、左侧的logo
|
||||
|
||||
为了便于SEO，需要给图片这个超链接加上文字，然后设置文字的缩进为`text-indent: -9999px;`。
|
||||
|
||||
### 2、搜索栏
|
||||
|
||||
“搜索”按钮：当我们把鼠标放在“搜索”上的时候， 发现鼠标变成了小手，这里是用到了`cursor`属性。
|
||||
|
||||
`cursor`有如下属性值：
|
||||
|
||||
```css
|
||||
cursor: pointer; /*变成小手*/
|
||||
cursor: text; /*变成光标*/
|
||||
cursor: move; /*变成四角箭头*/
|
||||
cursor: default; /*变成默认的箭头*/
|
||||
```
|
||||
|
||||
### 3、购物车
|
||||
|
||||
购物车里包含了四个元素：一个文字，三个图标。
|
||||
|
||||
为了让文字“我的购物车”这个`<a>`上下方向居中，我们给`<a>`标签的行高line-height为父亲的高度。
|
||||
|
||||
另外，“我的购物车”这四个字并不是水平居中的，于是，我们可以给它一个左侧的padding，而不用给右侧padding。
|
||||
|
||||
另外三个小图标可以用绝对定位来做。
|
||||
|
||||
右上角的小图标（圆角矩形）：它的红色背景不是图片，而是用`border-radius`属性画的**圆角矩形**。
|
||||
|
||||
圆角矩形`border-radius`有下面几种画法：
|
||||
|
||||
```
|
||||
border-radius: 宽/高一半;
|
||||
border-radius: 50%;
|
||||
border-radius: 0.3em;
|
||||
border-radius: 左上角 右上角 右下角 左下角;
|
||||
```
|
||||
|
||||
### 搜索框下方的热搜文字
|
||||
|
||||
热搜文字的功能性并不强，仅仅使用几个超链接`<a>`标签即可（每个 a 之间用margin隔开）。不需要像别的导航栏那样，在ul里放li，在li里放a。
|
||||
|
||||
注意，每个 a 之间是用margin隔开，不是用padding隔开；否则的话，鼠标点击中间的空白处也会出现跳转。
|
||||
|
||||
顶部导航条+顶部banner+搜索框的工程文件如下：
|
||||
|
||||
<http://download.csdn.net/download/smyhvae/10218022>
|
||||
|
||||
## slogen：口号
|
||||
|
||||
要求实现的效果如下：
|
||||
|
||||
|
||||
|
||||
上图可以看到，这里要实现的效果是：无论浏览器如何移动，要保证第二个slogen的左侧位于浏览器的正中间。这是可以用到绝对定位的知识。
|
||||
|
||||
html的代码如下：
|
||||
|
||||
```html
|
||||
<!--底部的口号 start-->
|
||||
<div class="slogen">
|
||||
<span class="item slogen1">
|
||||
<img src="images/slogen1.png" alt=""/>
|
||||
</span>
|
||||
<span class="item slogen2">
|
||||
<img src="images/slogen2.png" alt=""/>
|
||||
</span>
|
||||
<span class="item slogen3">
|
||||
<img src="images/slogen3.png" alt=""/>
|
||||
</span>
|
||||
<span class="item slogen4">
|
||||
<img src="images/slogen4.png" alt=""/>
|
||||
</span>
|
||||
</div>
|
||||
<!--底部的口号 end-->
|
||||
```
|
||||
|
||||
`class=slogen`指的是整个slogen区域。item表示四个口号中相同的部分。
|
||||
|
||||
css的代码如下；
|
||||
|
||||
```css
|
||||
/*底部的口号 start*/
|
||||
.slogen {
|
||||
height: 54px;
|
||||
padding: 20px 0;
|
||||
background-color: #f5f5f5;
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 302px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.slogen1 {
|
||||
margin-left: -608px;
|
||||
}
|
||||
|
||||
.slogen2 {
|
||||
margin-left: -304px;
|
||||
}
|
||||
|
||||
.slogen3 {
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.slogen4 {
|
||||
margin-left: 304px;
|
||||
}
|
||||
|
||||
/*底部的口号 end*/
|
||||
```
|
||||
|
||||
我们给item设置`left: 50%;`，确保每个item移到了父亲的正中间。然后每个item各自移动相应的距离即可实现。
|
||||
|
||||
|
||||
## 最下方的购物指南&区域覆盖
|
||||
|
||||
需要实现的效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
上图中，需要实现的内容包括两个部分：左侧的购物指南和右侧的区域覆盖（我把这两个部分用红线隔开了）。
|
||||
|
||||
### 购物指南
|
||||
|
||||
需要使用的布局如下：
|
||||
|
||||
|
||||
|
||||
这里的重点是要量出dt和dd的行高。
|
||||
|
||||
html代码如下：
|
||||
|
||||
```html
|
||||
|
||||
<!--购物指南等 start-->
|
||||
<div class="w footer-shopping clearfix">
|
||||
<dl>
|
||||
<dt>购物指南</dt>
|
||||
<dd><a href="#">购物流程</a></dd>
|
||||
<dd><a href="#">会员介绍</a></dd>
|
||||
<dd><a href="#">生活旅行/团购</a></dd>
|
||||
<dd><a href="#">常见问题</a></dd>
|
||||
<dd><a href="#">大家电</a></dd>
|
||||
<dd><a href="#">联系客服</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>配送方式</dt>
|
||||
<dd><a href="#">上门自提</a></dd>
|
||||
<dd><a href="#">211限时达</a></dd>
|
||||
<dd><a href="#">配送服务查询</a></dd>
|
||||
<dd><a href="#">配送费收取标准</a></dd>
|
||||
<dd><a href="#">海外配送</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>购物指南</dt>
|
||||
<dd><a href="#">购物流程</a></dd>
|
||||
<dd><a href="#">会员介绍</a></dd>
|
||||
<dd><a href="#">生活旅行/团购</a></dd>
|
||||
<dd><a href="#">常见问题</a></dd>
|
||||
<dd><a href="#">大家电</a></dd>
|
||||
<dd><a href="#">联系客服</a></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>购物指南</dt>
|
||||
<dd><a href="#">购物流程</a></dd>
|
||||
<dd><a href="#">会员介绍</a></dd>
|
||||
<dd><a href="#">生活旅行/团购</a></dd>
|
||||
<dd><a href="#">常见问题</a></dd>
|
||||
<dd><a href="#">大家电</a></dd>
|
||||
<dd><a href="#">联系客服</a></dd>
|
||||
</dl>
|
||||
<dl class="last-dl">
|
||||
<dt>购物指南</dt>
|
||||
<dd><a href="#">购物流程</a></dd>
|
||||
<dd><a href="#">会员介绍</a></dd>
|
||||
<dd><a href="#">生活旅行/团购</a></dd>
|
||||
<dd><a href="#">常见问题</a></dd>
|
||||
<dd><a href="#">大家电</a></dd>
|
||||
<dd><a href="#">联系客服</a></dd>
|
||||
</dl>
|
||||
</div>
|
||||
<!--购物指南等 end-->
|
||||
```
|
||||
|
||||
因为这片区域是浮动的，我们要通过`clearfix`这个class清除浮动，防止其被覆盖。
|
||||
|
||||
css代码如下：
|
||||
|
||||
```css
|
||||
/*购物指南等 start*/
|
||||
.footer-shopping {
|
||||
margin-top: 16px; /*和上方保持距离*/
|
||||
}
|
||||
.footer-shopping dl{
|
||||
float: left;
|
||||
width: 200px;
|
||||
}
|
||||
dl.last-dl {
|
||||
width: 100px;
|
||||
}
|
||||
.footer-shopping dt{
|
||||
height: 34px;
|
||||
font: 400 16px/34px "microsoft yahei";
|
||||
}
|
||||
.footer-shopping dd{
|
||||
line-height: 20px;
|
||||
}
|
||||
/*购物指南等 end*/
|
||||
```
|
||||
|
||||
### 区域覆盖
|
||||
|
||||
html代码如下：
|
||||
|
||||
```html
|
||||
<div class="coverage">
|
||||
<h3>京东自营覆盖区县</h3>
|
||||
<p>京东已向全国2654个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
|
||||
<a href="#">查看详情 ></a>
|
||||
</div>
|
||||
```
|
||||
|
||||
css代码如下：
|
||||
|
||||
```css
|
||||
/*覆盖区域 start*/
|
||||
.coverage {
|
||||
float: left;
|
||||
width: 186px;
|
||||
height: 169px;
|
||||
margin-right: 60px;
|
||||
padding-left: 17px;
|
||||
background: url(../images/china.png) no-repeat left bottom;
|
||||
}
|
||||
|
||||
.coverage h3 {
|
||||
height: 34px;
|
||||
font: 400 16px/34px "microsoft yahei";
|
||||
}
|
||||
|
||||
.coverage p {
|
||||
padding-top: 8px;
|
||||
}
|
||||
.coverage a {
|
||||
float: right;
|
||||
}
|
||||
/*覆盖区域 end*/
|
||||
```
|
||||
|
||||
注意这里将精灵图设置为背景时，用到的定位属性是`left bottom`，意思是保证精灵图的左侧跟父亲左侧贴齐，下方和父亲下方贴齐。这样做的话，就不用通过像素来进行定位了。
|
||||
|
||||
|
||||
## 最底部
|
||||
|
||||
最底部的效果如下：
|
||||
|
||||
|
||||
|
||||
如上图所示，它包含了三个部分。
|
||||
|
||||
涉及到的html代码如下：
|
||||
|
||||
```html
|
||||
|
||||
<!--最底部 start-->
|
||||
<div class="w footer-bottom">
|
||||
|
||||
<div class="footer-about">
|
||||
<a href="#">关于我们</a>|
|
||||
<a href="#">联系我们</a>|
|
||||
<a href="#">联系客服</a>|
|
||||
<a href="#">商家入驻</a>|
|
||||
<a href="#">营销中心</a>|
|
||||
<a href="#">手机京东</a>|
|
||||
<a href="#">友情链接</a>|
|
||||
<a href="#">销售联盟</a>|
|
||||
<a href="#">京东社区</a>|
|
||||
<a href="#">京东公益</a>|
|
||||
<a href="#">English Site</a>|
|
||||
<a href="#">Contact Us</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-copyright">
|
||||
<img src="images/guohui.png"/>京公网安备 11000002000088号 | 京ICP证070359号 | 互联网药品信息服务资格证编号(京)-经营性-2014-0008 | 新出发京零 字第大120007号<br>
|
||||
互联网出版许可证编号新出网证(京)字150号 | 出版物经营许可证 | 网络文化经营许可证京网文[2014]2148-348号 | 违法和不良信息举报电话：4006561155<br>
|
||||
Copyright © 2004 - 2016 京东JD.com 版权所有 | 消费者维权热线：4006067733<br>
|
||||
京东旗下网站：京东钱包
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom-img">
|
||||
<a href="#"><img src="images/img1.jpg"/></a>
|
||||
<a href="#"><img src="images/img1.jpg"/></a>
|
||||
<a href="#"><img src="images/img1.jpg"/></a>
|
||||
<a href="#"><img src="images/img1.jpg"/></a>
|
||||
<a href="#"><img src="images/img1.jpg"/></a>
|
||||
<a href="#"><img src="images/img1.jpg"/></a>
|
||||
</div>
|
||||
</div>
|
||||
<!--最底部 end-->
|
||||
|
||||
```
|
||||
|
||||
涉及到的css代码如下：
|
||||
|
||||
```css
|
||||
|
||||
/*最底部start*/
|
||||
.footer-bottom {
|
||||
margin-top: 20px;
|
||||
text-align: center; /*让文字在容器中水平方向居中*/
|
||||
padding: 20px 0 30px;
|
||||
border-top: 1px solid #E5E5E5;
|
||||
}
|
||||
|
||||
.footer-bottom .footer-about a{
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.footer-bottom-img a {
|
||||
margin: 0 5px;
|
||||
}
|
||||
/*最底部end*/
|
||||
```
|
||||
|
||||
你去京东官网看看，发现最最底部的文字竟然是图片：
|
||||
|
||||
|
||||
|
||||
|
||||
## 总结
|
||||
|
||||
以上全部内容，最终实现的效果如下：
|
||||
|
||||
|
||||
|
||||
对应的工程文件如下：
|
||||
|
||||
- [2018-01-22-前端基础练习-JD顶部导航.rar](http://download.csdn.net/download/smyhvae/10218487)
|
||||
|
||||
794
04-前端基本功：CSS和DOM练习/02-CSS基础练习：JD首页的制作（快捷导航部分）.md
Normal file
794
04-前端基本功：CSS和DOM练习/02-CSS基础练习：JD首页的制作（快捷导航部分）.md
Normal file
@@ -0,0 +1,794 @@
|
||||
02-CSS基础练习：JD首页的制作（快捷导航部分）
|
||||
|
||||
我们在上一篇文章中制作的网页最顶部的导航，是属于网页导航。
|
||||
|
||||
本文中，Banner图上方的导航，叫做**快捷导航**（shortcut）。
|
||||
|
||||
##快捷导航的骨架
|
||||
|
||||
我们先制作快捷导航的骨架。如下图所示：
|
||||
|
||||
|
||||
|
||||
上图中，`shortcut-nav-menu-all`和`shortcut-nav-menu-one`都是属于`shortcut-nav-menu`部分，只不过，后者是将父亲撑破了。
|
||||
|
||||
为了实现上图，对应的html代码如下：
|
||||
|
||||
```html
|
||||
<!--shortcut-nav部分start-->
|
||||
<div class="shortcut-nav">
|
||||
<div class="w">
|
||||
<div class="shortcut-nav-menu">
|
||||
<div class="shortcut-nav-menu-all">
|
||||
<a href="#">全部商品分类</a>
|
||||
</div>
|
||||
<div class="shortcut-nav-menu-one" style="color: #fff">
|
||||
下一段再讲
|
||||
</div>
|
||||
</div>
|
||||
<div class="shortcut-nav-items">
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="shortcut-nav-img">
|
||||
<a href="#">
|
||||
<img src="images/img2.jpg"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--shortcut-nav部分end-->
|
||||
```
|
||||
|
||||
css代码如下：
|
||||
|
||||
```css
|
||||
/*shortcut-nav部分start*/
|
||||
.shortcut-nav {
|
||||
height: 44px;
|
||||
border-bottom: 2px solid #B1191A;
|
||||
}
|
||||
.shortcut-nav-menu { /*撑开和撑破是两回事：撑开说明盒子变成那么大，撑破盒子还是那么大，子盒子很大。子盒子shortcut-nav-menu-one把父亲撑破了*/
|
||||
width: 210px;
|
||||
height: 44px; /*浮动的盒子相互影响，不过是否在同一个盒子中*/
|
||||
float: left;
|
||||
position: relative;
|
||||
z-index: 1; /*通过z-index属性将层级放到最高*/
|
||||
}
|
||||
.shortcut-nav-menu-all a {
|
||||
display: block;
|
||||
width: 190px;
|
||||
height: 44px;
|
||||
color: white;
|
||||
padding: 0 10px;
|
||||
background-color: #B1191A;
|
||||
font: 400 15px/44px "microsoft yahei";
|
||||
}
|
||||
.shortcut-nav-menu-one {
|
||||
height: 465px;
|
||||
margin-top: 2px;
|
||||
background-color: #C81623;
|
||||
border-left: 1px solid #B1191A;
|
||||
border-bottom: 1px solid #B1191A;
|
||||
/*border-left: 1px solid #000;*/
|
||||
/*border-bottom: 1px solid #000;*/
|
||||
}
|
||||
.shortcut-nav-items {
|
||||
width: 730px;
|
||||
height: 44px;
|
||||
float: left;
|
||||
}
|
||||
.shortcut-nav-items li {
|
||||
float: left;
|
||||
}
|
||||
.shortcut-nav-items a {
|
||||
display: inline-block;
|
||||
height: 44px;
|
||||
padding: 0 20px;
|
||||
color: #333;
|
||||
font: 400 16px/44px "microsoft yahei";
|
||||
}
|
||||
.shortcut-nav-items a:hover {
|
||||
color: #C81623;
|
||||
}
|
||||
.shortcut-nav-img {
|
||||
width: 200px;
|
||||
height: 44px;
|
||||
float: right;
|
||||
margin-top: -10px;
|
||||
margin-right: 50px;
|
||||
/*position: relative;*/
|
||||
/*left: -50px;*/
|
||||
/*top: -10px;*/
|
||||
}
|
||||
/*shortcut-nav部分end*/
|
||||
```
|
||||
|
||||
|
||||
## 具体的商品分类
|
||||
|
||||
商品的具体分类即`shortcut-nav-menu-one`部分，我们来实现这部分的代码。要求实现的效果如下：
|
||||
|
||||
|
||||
|
||||
我们在上面的代码中已经给`shortcut-nav-menu-one`设置了一些属性（例如给左边和下边增加一个像素的红色边框），在此基础之上，需要新增的代码如下：
|
||||
|
||||
html代码：
|
||||
|
||||
```html
|
||||
<!--具体的商品分类start-->
|
||||
<div class="shortcut-nav-menu-one" style="color: #fff">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="">家用电器</a>
|
||||
<i>></i>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">手机</a>
|
||||
<span>、</span>
|
||||
<a href="">数码</a>
|
||||
<i>></i>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">电脑</a>
|
||||
<span>、</span>
|
||||
<a href="">办公</a>
|
||||
<i>></i>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a href="">家居</a>
|
||||
<span>、</span>
|
||||
<a href="">家具</a>
|
||||
<i>></i>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">男装</a>
|
||||
<span>、</span>
|
||||
<a href="">女装</a>
|
||||
<i>></i>
|
||||
</li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!--具体的商品分类end-->
|
||||
```
|
||||
|
||||
css部分如下：
|
||||
|
||||
```css
|
||||
/*具体的商品分类start*/
|
||||
.shortcut-nav-menu-one ul {
|
||||
font: 400 14px/31px "microsoft yahei"; /*字体属性具有继承性，让儿子 a 具有此继承性*/
|
||||
}
|
||||
.shortcut-nav-menu-one li {
|
||||
padding-left: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.shortcut-nav-menu-one a{
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.shortcut-nav-menu-one i {
|
||||
right: 10px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.shortcut-nav-menu-one li:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.shortcut-nav-menu-one li:hover a,span,i{
|
||||
color: #C81623;
|
||||
}
|
||||
/*具体的商品分类end*/
|
||||
```
|
||||
|
||||
|
||||
## 轮播图slider + 京东快报
|
||||
|
||||
接下来，我们要实现下面这个部分：
|
||||
|
||||
|
||||
|
||||
组成部分包括：左侧的轮播图、右侧的京东快报 & 充话费 & 右下角的小海报。
|
||||
|
||||
结构如下：
|
||||
|
||||
```html
|
||||
<!--main部分start-->
|
||||
<div class="main">
|
||||
<div class="w">
|
||||
<div class="main-slider">
|
||||
|
||||
</div>
|
||||
<div class="main-news">
|
||||
<div class="main-news-top"> <!--京东快报+充话费-->
|
||||
<div class="main-news-top-faster"> <!--京东快报-->
|
||||
|
||||
</div>
|
||||
<div class="main-news-top-money"> <!--充话费-->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="main-news-bottom">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--main部分end-->
|
||||
```
|
||||
|
||||
我们依次来讲解。
|
||||
|
||||
### 1、轮播图：main-slider
|
||||
|
||||
首页的banner图是首页独有的，所以这部分的css代码要写在index.css里，不要写在base.css里。
|
||||
|
||||
html代码如下：
|
||||
|
||||
```html
|
||||
|
||||
<!--main部分start-->
|
||||
<div class="main">
|
||||
<div class="w">
|
||||
<div class="main-slider">
|
||||
<a href="">
|
||||
<img src="images/slider.jpg" alt="">
|
||||
</a>
|
||||
|
||||
<ul> <!--指示点-->
|
||||
<li>1</li>
|
||||
<li>2</li>
|
||||
<li>3</li>
|
||||
<li>4</li>
|
||||
<li>5</li>
|
||||
<li>6</li>
|
||||
</ul>
|
||||
<a href="javascript:;" class="arrow-left"><</a> <!--左边的箭头-->
|
||||
<a href="javascript:;" class="arrow-right">></a> <!--右边的箭头-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--main部分end-->
|
||||
|
||||
```
|
||||
|
||||
注意：超链接 a 标签中，`href="javascript:;`表示点击超链接时，什么都不做。
|
||||
|
||||
CSS代码如下：
|
||||
|
||||
```css
|
||||
.main-slider {
|
||||
float: left;
|
||||
margin: 12px 0 0 220px;
|
||||
width: 730px;
|
||||
height: 454px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main-slider ul {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
margin-left: -66px;
|
||||
}
|
||||
|
||||
.main-slider ul li {
|
||||
float: left;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: #fff;
|
||||
background-color: #3E3E3E;
|
||||
border-radius: 50%; /*圆角矩形*/
|
||||
line-height: 18px;
|
||||
text-align: center; /*让 li 里面的文本水平方向居中*/
|
||||
margin: 0 2px;
|
||||
cursor: pointer; /*鼠标悬停时变成小手*/
|
||||
}
|
||||
|
||||
.main-slider .arrow-left { /* 轮播图左侧的箭头*/
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -31px;
|
||||
left: 0px;
|
||||
width: 28px;
|
||||
height: 62px;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
color: #fff;
|
||||
font: 400 22px/62px "sumsun";
|
||||
text-align: center;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
.main-slider .arrow-left:hover {
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.main-slider .arrow-right { /*轮播图右侧的箭头*/
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -31px;
|
||||
right: 0px;
|
||||
width: 28px;
|
||||
height: 62px;
|
||||
background-color: pink;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
color: #fff;
|
||||
font: 400 22px/62px "sumsun";
|
||||
text-align: center;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
.main-slider .arrow-right:hover {
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
代码解释如下；
|
||||
|
||||
（1）轮播图，我们采取的方式是：在超链接 a 里面放一个img标签。
|
||||
|
||||
（2）指示点：在一个ul中放多个li。然后通过绝对定位的方式，让ul放在轮播图的正中间（水平方向）。最后详细设置每个指示点li的属性（比如，`text-align: center`属性可以让li里面的文字水平居中）。
|
||||
|
||||
（3）左右两边的箭头：鼠标悬停时，颜色不同。我们通过`background-color: rgba(0,0,0,0.3)`设置背景的透明度。
|
||||
|
||||
最终实现的效果如下：
|
||||
|
||||
|
||||
|
||||
### 京东快报
|
||||
|
||||
html代码如下：
|
||||
|
||||
```html
|
||||
<div class="main-news-top-faster"> <!--京东快报-->
|
||||
<div class="main-news-top-faster-title">
|
||||
<h2>京东快报</h2>
|
||||
<a href="#">更多 ></a>
|
||||
</div>
|
||||
<div class="main-news-top-faster-content">
|
||||
<ul>
|
||||
<li><span>[特惠]</span>新闻1</li>
|
||||
<li><span>[公告]</span>新闻2</li>
|
||||
<li><span>[特惠]</span>新闻3</li>
|
||||
<li><span>[公告]</span>新闻4</li>
|
||||
<li><span>[特惠]</span>新闻5</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
css代码如下；
|
||||
|
||||
```css
|
||||
.main-news-top-faster {
|
||||
height: 163px;
|
||||
border-bottom: 1px dashed #E4E4E4; /*虚线*/
|
||||
}
|
||||
|
||||
|
||||
.main-news-top-faster-title {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-bottom: 1px dotted #E8E8E8; /*点线*/
|
||||
padding: 0 15px;
|
||||
|
||||
}
|
||||
|
||||
.main-news-top-faster-title h2{
|
||||
float: left;
|
||||
font: 400 16px/32px "microsoft yahei";
|
||||
}
|
||||
|
||||
.main-news-top-faster-title a {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.main-news-top-faster-content {
|
||||
padding: 5px 0 0 15px;
|
||||
|
||||
}
|
||||
|
||||
.main-news-top-faster-content li {
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.main-news-top-faster-content span {
|
||||
font-weight: 700;
|
||||
margin-right: 5px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.main-news-top-money ul {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
### 3、充话费部分：12个单元格（重要）
|
||||
|
||||
**（1）步骤一：**画表格
|
||||
|
||||
充话费这部分，我们不用table标签来做，一般table标签一般是用来放文字的。这里因为有图片，所以我们用ul标签来做，在ul里放12个浮动的li。
|
||||
|
||||
如果我们直接这样进行设置：
|
||||
|
||||
```css
|
||||
.main-news-top-money ul {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.main-news-top-money li {
|
||||
width: 62px;
|
||||
height: 70px;
|
||||
border: 1px solid #E8E8E8;
|
||||
float: left;
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
会发现，效果不尽人意：
|
||||
|
||||
|
||||
|
||||
上图所示，我们发现，红框部分的12个li，并没有按照我们预期的那样进行排列。因为每个li有border。真实的li当中，它们的border是有重叠的。
|
||||
|
||||
解决办法：
|
||||
|
||||
> 父亲宽度不够时，为了让盒子浮动不掉下去，可以给子盒子之上父盒子之下再给一个盒子，让它的宽度略大于父亲的宽度即可。
|
||||
|
||||
比如这里，**本身这个区域整体的宽度是250，我们就设置ul的宽度是260px即可（**满足的条件是：li的宽度*4 < **ul的宽度** < li的宽度*5）。
|
||||
|
||||
ul的宽度设置为260px之后发现，最右边和最下面的部分会多出来：
|
||||
|
||||
|
||||
|
||||
我们可以给`main-news-top-money`设置`overflow: hidden`，将多余的部分切掉（这是没有办法的事情）。
|
||||
|
||||
于是乎，充话费这部分的代码如下：
|
||||
|
||||
html部分：
|
||||
|
||||
```html
|
||||
<div class="main-news-top-money"> <!--充话费-->
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
css部分：
|
||||
|
||||
```css
|
||||
.main-news-top-money ul {
|
||||
width: 260px; /*让宽度略大于整体的宽度250px*/
|
||||
}
|
||||
|
||||
.main-news-top-money li {
|
||||
width: 62px;
|
||||
height: 70px;
|
||||
border: 1px solid #E8E8E8;
|
||||
float: left;
|
||||
border-top: 0; /* 将每个单元格的上边框去掉，因为跟单元格的下边框重合了。*/
|
||||
margin-top: -1px; /* 整体向上移动一个单位，因为边框重合了*/
|
||||
margin-left: -1px ;/* 整体向左移动一个单位，因为边框重合了*/
|
||||
}
|
||||
```
|
||||
|
||||
这样的话，表格就画好了：
|
||||
|
||||
|
||||
|
||||
**（2）步骤二：**往表格里填充内容
|
||||
|
||||
接下来，我们往表格里填充内容。最终，充话费部分的代码如下：
|
||||
|
||||
html部分：
|
||||
|
||||
```html
|
||||
<div class="main-news-top-money"> <!--充话费-->
|
||||
<ul>
|
||||
<li>
|
||||
<a href="">
|
||||
<i></i> <!--单元格里的图片-->
|
||||
<span>话费</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<i class="main-news-top-money-icon2"></i> <!--单元格里的图片-->
|
||||
<span>机票</span>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<i></i> <!--单元格里的图片-->
|
||||
<span>话费</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<i></i> <!--单元格里的图片-->
|
||||
<span>话费</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<i></i> <!--单元格里的图片-->
|
||||
<span>话费</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<i></i> <!--单元格里的图片-->
|
||||
<span>话费</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<i></i> <!--单元格里的图片-->
|
||||
<span>话费</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<i></i> <!--单元格里的图片-->
|
||||
<span>话费</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<i></i> <!--单元格里的图片-->
|
||||
<span>话费</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<i></i> <!--单元格里的图片-->
|
||||
<span>话费</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<i></i> <!--单元格里的图片-->
|
||||
<span>话费</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">
|
||||
<i></i> <!--单元格里的图片-->
|
||||
<span>话费</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
|
||||
index.css部分：
|
||||
|
||||
```css
|
||||
/*充话费部分start*/
|
||||
.main-news-top-money {
|
||||
overflow: hidden; /*将多余的部分切掉*/
|
||||
}
|
||||
|
||||
.main-news-top-money ul {
|
||||
width: 260px; /*让宽度略大于整体的宽度250px*/
|
||||
}
|
||||
|
||||
.main-news-top-money li {
|
||||
width: 62px;
|
||||
height: 70px;
|
||||
border: 1px solid #E8E8E8;
|
||||
float: left;
|
||||
border-top: 0; /* 将每个单元格的上边框去掉，因为跟单元格的下边框重合了。*/
|
||||
margin-top: -1px; /* 整体向上移动一个单位，因为边框重合了*/
|
||||
margin-left: -1px ;/* 整体向左移动一个单位，因为边框重合了*/
|
||||
}
|
||||
|
||||
.main-news-top-money li a {
|
||||
display: block;
|
||||
width: 62px;
|
||||
height: 30px;
|
||||
padding-top: 40px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main-news-top-money li a i {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 18px;
|
||||
background: url("../images/fly.png") right top;
|
||||
}
|
||||
|
||||
.main-news-top-money .main-news-top-money-icon2 {
|
||||
background: url("../images/fly.png") right -25px;
|
||||
}
|
||||
/*充话费部分end*/
|
||||
```
|
||||
|
||||
代码解释：
|
||||
|
||||
- 单元格里的文字：我们可以给单元格里的文字设置padding-top，保证文字位于单元格的底部。
|
||||
|
||||
- 单元格里的图片（精灵图）的位置：通过子绝父相的方式（子是图片`<i>`本身，相是每个单元格里的超链接文字`<a>`）。通过子绝父相的方式定位之后，发现精灵图都是一样的图标，目前的处理办法是：手动添加不同的class进行修改精灵图，以后等我们学习js了，就不用这么麻烦了。
|
||||
|
||||
画出的表格如下：
|
||||
|
||||
|
||||
|
||||
|
||||
## 今日推荐
|
||||
|
||||
接下来，我们开始做下面这部分：
|
||||
|
||||
|
||||
|
||||
上图中的“今日推荐”，标签可以这样布局：ul > li > a > img
|
||||
|
||||
为了防止这部分的内容跑到上面去，我们可以给上面的`class-main`部分清除浮动。
|
||||
|
||||
“今日推荐”这部分的代码如下。
|
||||
|
||||
html代码如下：
|
||||
|
||||
```html
|
||||
<!--今日推荐start-->
|
||||
<div class="today">
|
||||
<div class="w clearfix">
|
||||
<div class="today-left fl">
|
||||
<a href=""></a>
|
||||
</div>
|
||||
|
||||
<div class="today-right">
|
||||
<ul>
|
||||
<li><a href=""><img src="images/today1.jpg" alt=""></a></li>
|
||||
<li><a href=""><img src="images/today2.jpg" alt=""></a></li>
|
||||
<li><a href=""><img src="images/today3.jpg" alt=""></a></li>
|
||||
<li><a href=""><img src="images/today4.jpg" alt=""></a></li>
|
||||
</ul>
|
||||
<a href="javascript:;" class="arrow-left"><</a> <!--左边的箭头-->
|
||||
<a href="javascript:;" class="arrow-right">></a> <!--右边的箭头-->
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!--今日推荐end-->
|
||||
```
|
||||
|
||||
index.css中的代码如下；
|
||||
|
||||
```css
|
||||
/*今日推荐start*/
|
||||
.today {
|
||||
padding: 10px 0 20px;
|
||||
}
|
||||
|
||||
.today-left a{
|
||||
display: block;
|
||||
width: 210px;
|
||||
height: 150px;
|
||||
background: url("../images/today.jpg");
|
||||
}
|
||||
|
||||
.today-right {
|
||||
float: right;
|
||||
width: 1000px;
|
||||
overflow: hidden; /*隐藏掉右侧超出的几个像素*/
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.today-right ul {
|
||||
width: 410%; /*这一点很有技巧*/
|
||||
}
|
||||
|
||||
.today-right li{
|
||||
float: left;
|
||||
margin-right: 1px;
|
||||
|
||||
}
|
||||
/*今日推荐end*/
|
||||
```
|
||||
|
||||
|
||||
## banner两侧的广告
|
||||
|
||||
要实现的内容是下图中的箭头处：
|
||||
|
||||
|
||||
|
||||
|
||||
注意这部分的div的位置，是放在`class="shortcut-nav"`和`class="main"`之间的。
|
||||
|
||||
两侧的广告其实是一个放在 a 标签里的超大背景图，而且这个大图的宽度超过了版心。所以，超链接的宽度给`width: 100%`更合适。a 的高度设置为图片的高度即可。
|
||||
|
||||
代码实现如下：
|
||||
|
||||
html:
|
||||
|
||||
```html
|
||||
<!--网页两侧的广告start-->
|
||||
<div class="banner-ad">
|
||||
<a href="http://www.baidu.com"></a>
|
||||
</div>
|
||||
<!--网页两侧的广告end-->
|
||||
```
|
||||
|
||||
index.css:
|
||||
|
||||
```css
|
||||
/*banner两侧的广告start*/
|
||||
.banner-ad {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.banner-ad a {
|
||||
width: 100%;
|
||||
height: 644px;
|
||||
background: url("../images/ad.png") no-repeat center top;
|
||||
position: absolute;
|
||||
}
|
||||
/*banner两侧的广告end*/
|
||||
```
|
||||
|
||||
上方代码中，我们不用给图片的父亲`banner-ad`设置高度。
|
||||
|
||||
超链接a ：我们不知道超链接的宽度是多少，所以直接设置为`width: 100%`。注意它的背景图的摆放位置，`center`确保了背景图位于水平方向的正中间，`top`确保了背景图和父亲定边对齐。
|
||||
|
||||
|
||||
两侧广告的实现效果如下：
|
||||
|
||||
|
||||
|
||||
注意，上图中，两侧的广告实现之后发现，蓝框部分的两个位置(`main-news-top-faster`和`today-left`)点击时，发现跳转的是两侧广告的链接，因为它们的层级不够高。解决办法：给蓝框这两个部分加一个`position: relative`属性即可提高层级。
|
||||
|
||||
## 总结
|
||||
|
||||
上一篇文章和这一篇文章，加起来，最终实现的效果如下：
|
||||
|
||||
|
||||
|
||||
工程文件如下：
|
||||
|
||||
- [2018-01-23-前端基础练习-JD顶部导航.rar](http://download.csdn.net/download/smyhvae/10222155)
|
||||
|
||||
|
||||
715
04-前端基本功：CSS和DOM练习/03-DOM操作练习：基础练习.md
Normal file
715
04-前端基本功：CSS和DOM练习/03-DOM操作练习：基础练习.md
Normal file
@@ -0,0 +1,715 @@
|
||||
|
||||
## DOM操作练习
|
||||
|
||||
### 举例1：点击按钮时，显示和隐藏盒子。
|
||||
|
||||
代码实现：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
button {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<button id="btn">隐藏</button>
|
||||
<div>
|
||||
生命壹号
|
||||
</div>
|
||||
|
||||
<script>
|
||||
//需求：点击button,隐藏盒子。改变文字，在点击按钮，显示出来。
|
||||
//步骤：
|
||||
//1.获取事件源和相关元素
|
||||
//2.绑定事件
|
||||
//3.书写事件驱动程序
|
||||
|
||||
//1.获取事件源和相关元素
|
||||
var btn = document.getElementById("btn");
|
||||
var div1 = document.getElementsByTagName("div")[0];
|
||||
//2.绑定事件
|
||||
btn.onclick = function () {
|
||||
//3.书写事件驱动程序
|
||||
//判断btn的innerHTML属性值，如果为隐藏就隐藏盒子，并修改按钮内容为显示。
|
||||
//反之，则显示，并修改按钮内容为隐藏
|
||||
if (this.innerHTML === "隐藏") {
|
||||
div1.className = "hide";
|
||||
//修改按钮上的文字（innerHTML）
|
||||
btn.innerHTML = "显示";
|
||||
} else {
|
||||
div1.className = "show";
|
||||
//修改按钮上的文字（innerHTML）
|
||||
btn.innerHTML = "隐藏";
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
代码解释：
|
||||
|
||||
当盒子是显示状态时，就设置为隐藏；当盒子是隐藏状态时，就设置为显示。注意这里的逻辑判断。
|
||||
|
||||
另外，这里用到了`innerHTHL`属性，它可以修改按钮上显示的文字。
|
||||
|
||||
代码最终显示的效果如下：
|
||||
|
||||
20180127_1518.gif
|
||||
|
||||
### 举例2：美女相册
|
||||
|
||||
这里推荐一个网站：
|
||||
|
||||
- 占位图片生成的在线网站：<https://placeholder.com/>
|
||||
|
||||
好处是：素材做出来之前，先留出空位，方便以后换图。比如<http://via.placeholder.com/400x300>这个链接可以生成400*300的占位图片。
|
||||
|
||||
需求：
|
||||
|
||||
- （1）点击小图片，改变下面的大图片的src属性值，让其赋值为a链接中的href属性值。
|
||||
- （2）让p标签的innnerHTML属性值，变成a标签的title属性值。
|
||||
|
||||
|
||||
为了实现美女相册，代码如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-family: "Helvetica", "Arial", serif;
|
||||
color: #333;
|
||||
margin: 1em 10%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #333;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #c60;
|
||||
background-color: transparent;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
float: left;
|
||||
padding: 1em;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#imagegallery {
|
||||
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#imagegallery li {
|
||||
margin: 0px 20px 20px 0px;
|
||||
padding: 0px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#imagegallery li a img {
|
||||
border: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h2>
|
||||
美女画廊
|
||||
</h2>
|
||||
<a href="#">注册</a>
|
||||
<ul id="imagegallery">
|
||||
<li>
|
||||
<a href="image/1.jpg" title="美女A">
|
||||
<img src="image/1-small.jpg" width="100" alt="美女1"/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="image/2.jpg" title="美女B">
|
||||
<img src="image/2-small.jpg" width="100" alt="美女2"/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="image/3.jpg" title="美女C">
|
||||
<img src="image/3-small.jpg" width="100" alt="美女3"/>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="image/4.jpg" title="美女D">
|
||||
<img src="image/4-small.jpg" width="100" alt="美女4"/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div style="clear:both"></div>
|
||||
|
||||
<img id="image" src="image/placeholder.png" width="450px"/>
|
||||
|
||||
<p id="des">选择一个图片</p>
|
||||
|
||||
<script>
|
||||
//需求：
|
||||
//（1）点击小图片，改变下面的大图片的src属性值，让其赋值为a链接中的href属性值。
|
||||
//（2）让p标签的innnerHTML属性值，变成a标签的title属性值。
|
||||
|
||||
//1.获取事件源和相关元素
|
||||
//利用元素获取其下面的标签。
|
||||
var ul = document.getElementById("imagegallery");
|
||||
var aArr = ul.getElementsByTagName("a"); //获取ul中的超链接<a>
|
||||
|
||||
// console.log(aArr[0]);
|
||||
var img = document.getElementById("image");
|
||||
var des = document.getElementById("des");
|
||||
//2.绑定事件
|
||||
//以前是一个一个绑定，但是现在是一个数组。我们用for循环绑定
|
||||
for (var i = 0; i < aArr.length; i++) {
|
||||
aArr[i].onclick = function () {
|
||||
//3.【核心代码】书写事件驱动程序：修改属性值
|
||||
img.src = this.href; //this指的是函数调用者，和i并无关系，所以不会出错。
|
||||
// img.src = aArr[i].href; 注意，上面这一行代码不要写成这样
|
||||
des.innerHTML = this.title;
|
||||
return false; //retrun false表示：阻止继续执行下面的代码。
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
代码解释：
|
||||
|
||||
（1）获取事件源：我们通过`ul.getElementsByTagName("a")`来获取ul里面的a元素。
|
||||
|
||||
（2）绑定事件：因为要绑定一个数组，所以这里用for循环来绑定
|
||||
|
||||
（3）【重要】书写事件驱动程序：这里是用`img.src = this.href`，而不是用`img.src = aArr[i].href`。因为this指的是函数的调用者。如果写成后者，等i变成了4，就会一直是4。显然不能达到效果。
|
||||
|
||||
（4）代码的最后一行：`retrun false`表示：阻止继续执行下面的代码。
|
||||
|
||||
实现的效果如下：
|
||||
|
||||
20180127_1630.gif
|
||||
|
||||
工程文件：
|
||||
|
||||
- [2018-01-27-美女相册demo.rar](http://download.csdn.net/download/smyhvae/10227161)
|
||||
|
||||
### 举例3：鼠标悬停时，显示二维码大图
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
.code {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.code a {
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: url(http://img.smyhvae.com/20180127_QRcode_small.png) no-repeat -159px -51px;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.code-big {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 80px;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.onload = function () {
|
||||
//需求：鼠标放到a链接上，显示二维码（添加show类名，去掉hide类名）
|
||||
// 鼠标移开a链接，隐藏二维码（添加hide类名，去掉show类名）
|
||||
|
||||
|
||||
//1.获取事件源和相关元素
|
||||
var a = document.getElementsByTagName("a")[0];
|
||||
var div = document.getElementsByClassName("code-big")[0];
|
||||
//2.绑定事件
|
||||
a.onmouseover = fn1; //鼠标悬停时
|
||||
a.onmouseout = fn2; //鼠标离开时
|
||||
|
||||
//定义方法
|
||||
function fn1() {
|
||||
//3.书写事件驱动程序
|
||||
div.className = "code-big show";
|
||||
//div.className = div.className.replace("hide", "show");
|
||||
|
||||
}
|
||||
|
||||
function fn2() {
|
||||
div.className = "code-big hide";
|
||||
//了解,字符串操作，把字符串中的hide替换成show。
|
||||
// div.className = div.className.replace("show","hide");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="code">
|
||||
<a href="#"></a>
|
||||
<img src="http://img.smyhvae.com/2016040102.jpg" alt="" class="code-big hide"/>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
|
||||
实现效果：
|
||||
|
||||
20180127_1800.gif
|
||||
|
||||
|
||||
## 表单元素的属性
|
||||
|
||||
表单元素的属性包括：type、value、checked、selected、disabled等。
|
||||
|
||||
|
||||
### 举例1：禁用文本框/解禁文本框
|
||||
|
||||
|
||||
```html
|
||||
<body>
|
||||
|
||||
账号: <input type="text" value="生命壹号..."/><button>禁用</button><button>解禁</button><br><br>
|
||||
密码: <input type="password" value="aaabbbccc"/>
|
||||
|
||||
<script>
|
||||
|
||||
var inp = document.getElementsByTagName("input")[0];
|
||||
var btn1 = document.getElementsByTagName("button")[0];
|
||||
var btn2 = document.getElementsByTagName("button")[1];
|
||||
|
||||
btn1.onclick = function () {
|
||||
inp.disabled = "no"; //禁用文本框。属性值里随便写什么字符串都行，但不能为空。
|
||||
}
|
||||
btn2.onclick = function () {
|
||||
inp.disabled = false; //解禁文本框。让disabled属性消失即可。
|
||||
// inp.removeAttribute("disabled");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
```
|
||||
|
||||
当文本框被禁用之后，文本框只读，不能编辑，光标点不进去。
|
||||
|
||||
|
||||
上方代码可以看到，**禁用文本框**的代码是：
|
||||
|
||||
```javascript
|
||||
inp.disabled = "no"; //让disabled属性出现，即可禁用
|
||||
```
|
||||
|
||||
我们的目的时让`disabled`这个属性出现，即可禁用。所以，属性值里可以写数字，可以写任意一个字符串，但不能写0，不能写false，不能为空。一般我们写no。
|
||||
|
||||
|
||||
|
||||
**解禁文本框**的代码是：
|
||||
|
||||
|
||||
```javascript
|
||||
inp.disabled = false; // 方法1：让disabled属性消失，即可解禁。
|
||||
inp.removeAttribute("disabled"); //方法2：推荐
|
||||
|
||||
```
|
||||
|
||||
|
||||
我们的目的是删除`disabled`属性，即可解禁。属性值可以是false，可以是0。但我们一般采用方式2进行解禁。
|
||||
|
||||
实现效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 举例2：文本框获取焦点/失去焦点
|
||||
|
||||
细心的读者会发现，京东和淘宝的搜索框，获取焦点时，提示文字的体验是不同的。
|
||||
|
||||
京东：
|
||||
|
||||
20180127_2000.gif
|
||||
|
||||
淘宝：
|
||||
|
||||
20180127_2005.gif
|
||||
|
||||
其实，**淘宝的提示文字，是用一个绝对定位的单独的标签来做的**。
|
||||
|
||||
京东是判断输入框是否获取焦点；淘宝是判断输入框内是否有用户输入的文字。
|
||||
|
||||
|
||||
我们现在来实现一下。代码如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
input {
|
||||
width: 300px;
|
||||
height: 36px;
|
||||
padding-left: 5px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
label {
|
||||
position: absolute;
|
||||
top: 82px;
|
||||
left: 56px;
|
||||
font-size: 12px;
|
||||
color: #ccc;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
京东: <input id="inp1" type="text" value="微单相机"/><br><br>
|
||||
淘宝: <label for="inp2">电动牙刷</label><input id="inp2" type="text"/><br><br>
|
||||
placeholder: <input type="text" placeholder="我是placeholder"/>
|
||||
|
||||
<script>
|
||||
//需求：京东的input按钮获取焦点后，立刻删除内容。失去后光标显示文字。
|
||||
|
||||
var inp1 = document.getElementById("inp1");
|
||||
|
||||
inp1.onfocus = function () {
|
||||
//判断，如果input里面的内容是“微单相机”，那么把值赋值为“”；
|
||||
if (this.value === "微单相机") {
|
||||
inp1.value = "";
|
||||
inp1.style.color = "#000";
|
||||
|
||||
}
|
||||
}
|
||||
//失去焦点事件
|
||||
inp1.onblur = function () {
|
||||
//判断：如果input内容为空，那么把内容赋值为微单相机。
|
||||
if (this.value === "") {
|
||||
inp1.value = "微单相机";
|
||||
inp1.style.color = "#ccc";
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//需求：在input中输入文字，label标签隐藏；当里面的文字变成空字符串，label显示。
|
||||
|
||||
var inp2 = document.getElementById("inp2");
|
||||
var lab = document.getElementsByTagName("label")[0];
|
||||
|
||||
//2.绑定事件(输入文字、和删除文字时，都会触动这个事件)
|
||||
inp2.oninput = function () {
|
||||
//判断input中的值是否为空，如果为空，那么label显示，否则隐藏。
|
||||
if (this.value === "") {
|
||||
lab.className = "show";
|
||||
} else {
|
||||
lab.className = "hide";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
实现效果如下：
|
||||
|
||||
20180127_2010.gif
|
||||
|
||||
如上方所示，我们还可以用placeholder来做，但是IE678并不支持，所以不建议使用。
|
||||
|
||||
|
||||
### 举例3：用户注册信息错误时，输入框失去焦点后，高亮显示。
|
||||
|
||||
代码实现：
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
.wrong {
|
||||
border: 2px solid red;
|
||||
}
|
||||
.right {
|
||||
border: 2px solid #91B81D;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
账号：<input type="text" onblur="fn(this)"/><br><br>
|
||||
密码：<input type="password" onblur="fn(this)"/>
|
||||
|
||||
<script>
|
||||
//需求：失去焦点的时候判断input按钮中的值，如果账号或密码在6-12个字符之间通过，否则报错。
|
||||
|
||||
function fn(aaa){
|
||||
//html中的input标签行内调用function的时候,是先通过window调用的function，所以打印this等于打印window
|
||||
// console.log(this)
|
||||
//只有传递的this才指的是标签本身。
|
||||
// console.log(aaa)
|
||||
// console.log(this.value)
|
||||
if(aaa.value.length < 6 || aaa.value.length>12){
|
||||
aaa.className = "wrong";
|
||||
}else{
|
||||
aaa.className = "right";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
代码解释：这次我们是在标签内调用function的，此时是先通过window调用的function。所以行内调用的时候要带this。
|
||||
|
||||
|
||||
实现效果：
|
||||
|
||||
20180127_2035.gif
|
||||
|
||||
|
||||
### 举例4：全选和反选
|
||||
|
||||
|
||||
对应的代码如下：
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.my-table {
|
||||
width: 300px;
|
||||
margin: 100px auto 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
border: 1px solid #c0c0c0;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid #d0d0d0;
|
||||
color: #404060;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #09c;
|
||||
font: bold 16px "微软雅黑";
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
td {
|
||||
font: 14px "微软雅黑";
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
cursor: pointer;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
window.onload = function () {
|
||||
//需求1：点击上面的的input，下面全选或者反选。
|
||||
//思路：获取了上面的input按钮，只需要判断，checked属性是true还是false，如果是true，下面的全部变成true；false同理。
|
||||
|
||||
var topInp = document.getElementById("title");
|
||||
|
||||
var tbody = document.getElementById("content");
|
||||
var botInpArr = tbody.getElementsByTagName("input");
|
||||
|
||||
//绑定事件
|
||||
topInp.onclick = function () {
|
||||
//费劲版
|
||||
// for(var i=0;i<botInpArr.length;i++){
|
||||
// if(topInp.checked === true){
|
||||
// botInpArr[i].checked = true;
|
||||
// }else{
|
||||
// botInpArr[i].checked = false;
|
||||
// }
|
||||
// }
|
||||
|
||||
//优化版（被点击的input按钮的checked属性值，应该直接作为下面的所有的input按钮的checked属性值）
|
||||
for(var i=0;i<botInpArr.length;i++){
|
||||
botInpArr[i].checked = this.checked;
|
||||
}
|
||||
}
|
||||
|
||||
//需求2：点击下面的的input，如果下面的全部选定了，上面的全选，否则相反。
|
||||
//思路：为下面的每一个input绑定事件，每点击一次都判断所有的按钮
|
||||
// checked属性值是否全部都是true，如果有一个是false，
|
||||
// 那么上面的input的checked属性也是false;都是true，topInp的checked就是true；
|
||||
|
||||
|
||||
for(var i=0;i<botInpArr.length;i++){
|
||||
botInpArr[i].onclick = function () { //每一个input都要绑定事件
|
||||
//开闭原则（用开关来控制）
|
||||
var bool = true;
|
||||
//检测每一个input的checked属性值。
|
||||
for(var j=0;j<botInpArr.length;j++){
|
||||
if(botInpArr[j].checked === false){
|
||||
bool = false;
|
||||
}
|
||||
}
|
||||
topInp.checked = bool;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="my-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<input type="checkbox" id="title" />
|
||||
</th>
|
||||
<th>菜名</th>
|
||||
<th>饭店</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="content">
|
||||
<tr>
|
||||
<td>
|
||||
<input type="checkbox" />
|
||||
</td>
|
||||
<td>菜品1</td>
|
||||
<td>木屋烧烤</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="checkbox" />
|
||||
</td>
|
||||
<td>菜品2</td>
|
||||
<td>蒸菜馆</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="checkbox" />
|
||||
</td>
|
||||
<td>菜品3</td>
|
||||
<td>海底捞火锅</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input type="checkbox" />
|
||||
</td>
|
||||
<td>菜品4</td>
|
||||
<td>面点王</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
注意代码中的注释，需求2是比较难的地方，这里用到了两次for循环。第一次for循环是因为，要给每个input都要进行绑定事件。
|
||||
|
||||
实现的效果如下：
|
||||
|
||||
20180127_2320.gif
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
```
|
||||
453
04-前端基本功：CSS和DOM练习/04-DOM操作练习：Tab栏切换（通过className设置样式）.md
Normal file
453
04-前端基本功：CSS和DOM练习/04-DOM操作练习：Tab栏切换（通过className设置样式）.md
Normal file
@@ -0,0 +1,453 @@
|
||||
|
||||
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8371782.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
京东网页上，可以看到下面这种tab栏的切换：
|
||||
|
||||
|
||||
|
||||
我们把模型抽象出来，实现一下。
|
||||
|
||||
## 举例引入：鼠标悬停时，current元素的背景变色
|
||||
|
||||
> 本段我们先举一个例子，因为这里用到了**排他思想**（先干掉 all，然后保留我一个）。对于理解tab切换，很有帮助。
|
||||
|
||||
完整的代码实现：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
button {
|
||||
margin: 10px;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.current {
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<button>按钮1</button>
|
||||
<button>按钮2</button>
|
||||
<button>按钮3</button>
|
||||
<button>按钮4</button>
|
||||
<button>按钮5</button>
|
||||
|
||||
<script>
|
||||
//需求：鼠标放到哪个button上，改button变成黄色背景（添加类）
|
||||
|
||||
|
||||
var btnArr = document.getElementsByTagName("button");
|
||||
//绑定事件
|
||||
for(var i=0;i<btnArr.length;i++){ //要为每一个按钮绑定事件，所以用到了for循环
|
||||
btnArr[i].onmouseover = function () {
|
||||
//【重要】排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
|
||||
//排他思想和for循环连用
|
||||
for(var j=0;j<btnArr.length;j++){
|
||||
btnArr[j].className = "";
|
||||
}
|
||||
this.className = "current"; //【重要】核心代码
|
||||
}
|
||||
}
|
||||
|
||||
//鼠标离开current时，还原背景色
|
||||
for(var i=0;i<btnArr.length;i++){ //要为每一个按钮绑定事件，所以用到了for循环
|
||||
btnArr[i].onmouseout = function () { //鼠标离开任何一个按钮时，就把按钮的背景色还原
|
||||
this.className = "";
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
代码解释：
|
||||
|
||||
鼠标悬停时，current栏变色，这里用到了排他思想：先把所有按钮的className设置为空，然后把我(this)这个按钮的className设置为current，就可以达到变色的效果。核心代码是：
|
||||
|
||||
|
||||
```javascript
|
||||
//排他思想：先把所有按钮的className设置为空，然后把我（this）这个按钮的className设置为current
|
||||
//排他思想和for循环连用
|
||||
for(var j=0;j<btnArr.length;j++){
|
||||
btnArr[j].className = "";
|
||||
}
|
||||
this.className = "current";
|
||||
```
|
||||
|
||||
实现的效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
## tab切换：初步的代码
|
||||
|
||||
代码如下：
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.box {
|
||||
width: 500px;
|
||||
height: 200px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 50px auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
ul {
|
||||
width: 600px;
|
||||
height: 40px;
|
||||
margin-left: -1px;
|
||||
list-style: none;
|
||||
}
|
||||
li {
|
||||
float: left;
|
||||
width: 101px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
font: 600 18px/40px "simsun";
|
||||
background-color: pink;
|
||||
cursor: pointer;
|
||||
}
|
||||
span {
|
||||
display: none;
|
||||
width: 500px;
|
||||
height: 160px;
|
||||
background-color: yellow;
|
||||
text-align: center;
|
||||
font: 700 100px/160px "simsun";
|
||||
}
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
.current {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.onload = function () {
|
||||
//需求：鼠标放到上面的li上，li本身变色(添加类)，对应的span也显示出来(添加类);
|
||||
//思路：1.点亮上面的盒子。 2.利用索引值显示下面的盒子。
|
||||
|
||||
var liArr = document.getElementsByTagName("li");
|
||||
var spanArr = document.getElementsByTagName("span");
|
||||
|
||||
for(var i=0;i<liArr.length;i++){
|
||||
//绑定索引值（新增一个自定义属性：index属性）
|
||||
liArr[i].index = i;
|
||||
liArr[i].onmouseover = function () {
|
||||
|
||||
//1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想)
|
||||
for(var j=0;j<liArr.length;j++){
|
||||
liArr[j].className = "";
|
||||
spanArr[j].className = "";
|
||||
}
|
||||
this.className = "current";
|
||||
spanArr[this.index].className = "show"; //【重要代码】
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="box">
|
||||
<ul>
|
||||
<li class="current">鞋子</li>
|
||||
<li>袜子</li>
|
||||
<li>帽子</li>
|
||||
<li>裤子</li>
|
||||
<li>裙子</li>
|
||||
</ul>
|
||||
<span class="show">鞋子</span>
|
||||
<span>袜子</span>
|
||||
<span>帽子</span>
|
||||
<span>裤子</span>
|
||||
<span>裙子</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
实现效果如下：
|
||||
|
||||
|
||||
|
||||
上方代码的核心部分是：
|
||||
|
||||
```javascript
|
||||
for(var i=0;i<liArr.length;i++){
|
||||
//绑定索引值（新增一个自定义属性：index属性）
|
||||
liArr[i].index = i;
|
||||
liArr[i].onmouseover = function () {
|
||||
|
||||
//1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想)
|
||||
for(var j=0;j<liArr.length;j++){
|
||||
liArr[j].className = "";
|
||||
spanArr[j].className = "";
|
||||
}
|
||||
this.className = "current";
|
||||
spanArr[this.index].className = "show"; //【重要代码】
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
这段代码中，我们是通过给 `liArr[i]`一个index属性：` liArr[i].index = i`，然后让下方的span对应的index也随之对应显示：`spanArr[this.index].className = "show"`。
|
||||
|
||||
这样做比较难理解，其实还有一种容易理解的方法是：**给liArr[i]增加index属性时，通过attribute的方式**，因为这种方式增加的属性是可以显示在标签上的。也就有了下面这样的代码：
|
||||
|
||||
```javascript
|
||||
for(var i=0;i<liArr.length;i++){
|
||||
//绑定索引值(自定义属性)，通过Attribute的方式【重要】
|
||||
liArr[i].setAttribute("index",i);
|
||||
liArr[i].onmouseover = function () {
|
||||
//3.书写事件驱动程序（排他思想）
|
||||
//1.点亮盒子。 2.利用索引值显示盒子。(排他思想)
|
||||
for(var j=0;j<liArr.length;j++){
|
||||
liArr[j].removeAttribute("class");
|
||||
spanArr[j].removeAttribute("class");
|
||||
}
|
||||
this.setAttribute("class","current");
|
||||
spanArr[this.getAttribute("index")].setAttribute("class","show");
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
显示的效果是一样的，不同的地方在于，我们审查元素发现，li标签中确实新增了自定义的index属性：
|
||||
|
||||
|
||||
|
||||
本段中，我们的目的已经达到了，不足的地方在于，**本段中的代码是通过document获取的的标签**，如果网页中有很多个这种tab选项卡，必然互相影响。
|
||||
|
||||
为了多个tab栏彼此独立，我们就需要通过**封装函数**的方式把他们抽取出来，于是就有了下面的改进版代码。
|
||||
|
||||
## tab切换：改进版代码（函数封装）
|
||||
|
||||
### 方式一：给current标签设置index值【推荐的代码】
|
||||
|
||||
完整版代码实现：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 500px;
|
||||
height: 200px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 50px auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ul {
|
||||
width: 600px;
|
||||
height: 40px;
|
||||
margin-left: -1px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
float: left;
|
||||
width: 101px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
font: 600 18px/40px "simsun";
|
||||
background-color: pink;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
display: none;
|
||||
width: 500px;
|
||||
height: 160px;
|
||||
background-color: yellow;
|
||||
text-align: center;
|
||||
font: 700 100px/160px "simsun";
|
||||
}
|
||||
|
||||
.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.current {
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
window.onload = function () {
|
||||
//需求：鼠标放到上面的li上，li本身变色(添加类)，下方对应的span也显示出来(添加类);
|
||||
//思路：1.点亮上面的盒子。 2.利用索引值显示下面的对应的盒子。
|
||||
|
||||
//1、获取所有的box
|
||||
var boxArr = document.getElementsByClassName("box");
|
||||
|
||||
//让每一个box都调用函数
|
||||
for (var i = 0; i < boxArr.length; i++) {
|
||||
fn(boxArr[i]);
|
||||
}
|
||||
|
||||
function fn(element) {
|
||||
var liArr = element.getElementsByTagName("li"); //注意，是element获取事件源，不是document获取事件源
|
||||
var spanArr = element.getElementsByTagName("span");
|
||||
//2.绑定事件（循环绑定）
|
||||
for (var i = 0; i < liArr.length; i++) {
|
||||
//绑定索引值（新增一个自定义属性：index属性）
|
||||
liArr[i].index = i;
|
||||
liArr[i].onmouseover = function () {
|
||||
//3.书写事件驱动程序（排他思想）
|
||||
//1.点亮上面的盒子。 2.利用索引值显示下面的盒子。(排他思想)
|
||||
for (var j = 0; j < liArr.length; j++) {
|
||||
liArr[j].className = "";
|
||||
spanArr[j].className = "";
|
||||
}
|
||||
this.className = "current";
|
||||
spanArr[this.index].className = "show"; //【重要】核心代码
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="box">
|
||||
<ul>
|
||||
<li class="current">鞋子</li>
|
||||
<li>袜子</li>
|
||||
<li>帽子</li>
|
||||
<li>裤子</li>
|
||||
<li>裙子</li>
|
||||
</ul>
|
||||
<span class="show">鞋子</span>
|
||||
<span>袜子</span>
|
||||
<span>帽子</span>
|
||||
<span>裤子</span>
|
||||
<span>裙子</span>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<ul>
|
||||
<li class="current">鞋子</li>
|
||||
<li>袜子</li>
|
||||
<li>帽子</li>
|
||||
<li>裤子</li>
|
||||
<li>裙子</li>
|
||||
</ul>
|
||||
<span class="show">鞋子</span>
|
||||
<span>袜子</span>
|
||||
<span>帽子</span>
|
||||
<span>裤子</span>
|
||||
<span>裙子</span>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<ul>
|
||||
<li class="current">鞋子</li>
|
||||
<li>袜子</li>
|
||||
<li>帽子</li>
|
||||
<li>裤子</li>
|
||||
<li>裙子</li>
|
||||
</ul>
|
||||
<span class="show">鞋子</span>
|
||||
<span>袜子</span>
|
||||
<span>帽子</span>
|
||||
<span>裤子</span>
|
||||
<span>裙子</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
注意，通过函数fn的封装之后，我们是通过参数element获取元素，而不再是document了。这样可以达到“抽象性”的作用，各个tab栏之间相互独立。
|
||||
|
||||
上方代码中，我们是通过给 liArr[i]一个index属性：` liArr[i].index = i`，然后让下方的span对应的index也随之对应显示：`spanArr[this.index].className = "show"`。
|
||||
|
||||
这样做比较难理解，根据上一段的规律，当然还有一种容易理解的方法是：**给liArr[i]增加index属性时，通过attribute的方式**，因为这种方式增加的属性是可以显示在标签上的。也就有了下面的方式二。
|
||||
|
||||
### 方式二：通过attribute设置index的值
|
||||
|
||||
基于上面方式一中的代码，我们修改一下js部分的代码，其他部分的代码保持不变。js部分的代码如下：
|
||||
|
||||
```html
|
||||
<script>
|
||||
window.onload = function () {
|
||||
//需求：鼠标放到上面的li上，li本身变色(添加类)，下方对应的span也显示出来(添加类);
|
||||
//思路：1.点亮上面的盒子。 2.利用索引值显示下面的对应的盒子。
|
||||
|
||||
//1、获取所有的box
|
||||
var boxArr = document.getElementsByClassName("box");
|
||||
|
||||
//让每一个box都调用函数
|
||||
for (var i = 0; i < boxArr.length; i++) {
|
||||
fn(boxArr[i]);
|
||||
}
|
||||
|
||||
function fn(element) {
|
||||
var liArr = element.getElementsByTagName("li"); //注意，是element获取事件源，不是document获取事件源
|
||||
var spanArr = element.getElementsByTagName("span");
|
||||
//2.绑定事件（循环绑定）
|
||||
for (var i = 0; i < liArr.length; i++) {
|
||||
//绑定索引值(自定义属性)
|
||||
liArr[i].setAttribute("index", i);
|
||||
liArr[i].onmouseover = function () {
|
||||
//3.书写事件驱动程序（排他思想）
|
||||
//1.点亮盒子。 2.利用索引值显示盒子。(排他思想)
|
||||
for (var j = 0; j < liArr.length; j++) {
|
||||
liArr[j].removeAttribute("class"); //注意，这里是class，不是className
|
||||
spanArr[j].removeAttribute("class");
|
||||
}
|
||||
this.setAttribute("class", "current");
|
||||
spanArr[this.getAttribute("index")].setAttribute("class", "show");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
不过，方式一的写法应该比方式二更常见。
|
||||
|
||||
**总结**：通过函数封装的形式，可以保证各个tab栏之间的切换互不打扰。最终实现效果如下：
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
206
04-前端基本功：CSS和DOM练习/05-DOM操作练习：访问关系的封装.md
Normal file
206
04-前端基本功：CSS和DOM练习/05-DOM操作练习：访问关系的封装.md
Normal file
@@ -0,0 +1,206 @@
|
||||
|
||||
|
||||
|
||||
## 访问关系的函数封装
|
||||
|
||||
（1）函数封装
|
||||
|
||||
新建一个文件名叫`tools.js`，然后在里面封装访问关系。代码如下。
|
||||
|
||||
|
||||
|
||||
tools.js:
|
||||
|
||||
```javascript
|
||||
/**
|
||||
* Created by smyhvae on 2018/01/28.
|
||||
*/
|
||||
|
||||
function getEle(id){
|
||||
return document.getElementById(id);
|
||||
}
|
||||
|
||||
/**
|
||||
* 功能：给定元素查找他的第一个元素子节点，并返回
|
||||
* @param ele
|
||||
* @returns {Element|*|Node}
|
||||
*/
|
||||
function getFirstNode(ele){
|
||||
var node = ele.firstElementChild || ele.firstChild;
|
||||
return node;
|
||||
}
|
||||
|
||||
/**
|
||||
* 功能：给定元素查找他的最后一个元素子节点，并返回
|
||||
* @param ele
|
||||
* @returns {Element|*|Node}
|
||||
*/
|
||||
function getLastNode(ele){
|
||||
return ele.lastElementChild || ele.lastChild;
|
||||
}
|
||||
|
||||
/**
|
||||
* 功能：给定元素查找他的下一个元素兄弟节点，并返回
|
||||
* @param ele
|
||||
* @returns {Element|*|Node}
|
||||
*/
|
||||
function getNextNode(ele){
|
||||
return ele.nextElementSibling || ele.nextSibling;
|
||||
}
|
||||
|
||||
/**
|
||||
* 功能：给定元素查找他的上一个兄弟元素节点，并返回
|
||||
* @param ele
|
||||
* @returns {Element|*|Node}
|
||||
*/
|
||||
function getPrevNode(ele){
|
||||
return ele.previousElementSibling || ele.previousSibling;
|
||||
}
|
||||
|
||||
/**
|
||||
* 功能：给定元素和索引值查找指定索引值的兄弟元素节点，并返回
|
||||
* @param ele 元素节点
|
||||
* @param index 索引值
|
||||
* @returns {*|HTMLElement}
|
||||
*/
|
||||
function getEleOfIndex(ele,index){
|
||||
return ele.parentNode.children[index];
|
||||
}
|
||||
|
||||
/**
|
||||
* 功能：给定元素查找他的所有兄弟元素，并返回数组
|
||||
* @param ele
|
||||
* @returns {Array}
|
||||
*/
|
||||
function getAllSiblings(ele){
|
||||
//定义一个新数组，装所有的兄弟元素，将来返回
|
||||
var newArr = [];
|
||||
var arr = ele.parentNode.children;
|
||||
for(var i=0;i<arr.length;i++){
|
||||
//判断：对同级的所有元素节点进行遍历，如果不是传递过来的元素自身，那就是兄弟元素，于是添加到新数组中。
|
||||
if(arr[i]!==ele){
|
||||
newArr.push(arr[i]);
|
||||
}
|
||||
}
|
||||
return newArr;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
上方代码中，我们单独来重视一下最后一个方法：获取指定元素的兄弟元素：
|
||||
|
||||
|
||||
```javascript
|
||||
/**
|
||||
* 功能：给定元素查找他的所有兄弟元素，并返回数组
|
||||
* @param ele
|
||||
* @returns {Array}
|
||||
*/
|
||||
function getAllSiblings(ele){
|
||||
//定义一个新数组，装所有的兄弟元素，将来返回
|
||||
var newArr = [];
|
||||
var arr = ele.parentNode.children;
|
||||
for(var i=0;i<arr.length;i++){
|
||||
//判断：对同级的所有元素节点进行遍历，如果不是传递过来的元素自身，那就是兄弟元素，于是添加到新数组中。
|
||||
if(arr[i]!==ele){
|
||||
newArr.push(arr[i]);
|
||||
}
|
||||
}
|
||||
return newArr;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
（2）函数的调用举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
li {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: pink;
|
||||
margin: 5px;
|
||||
list-style: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li id="box"></li>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
<script src="tools.js"></script>
|
||||
<script>
|
||||
|
||||
//获取box改为red
|
||||
var box = getEle("box");
|
||||
box.style.backgroundColor = "red"
|
||||
|
||||
//获取第一个和最后一个子节点
|
||||
var parent = box.parentNode;
|
||||
getFirstNode(parent).style.backgroundColor = "yellow";
|
||||
getLastNode(parent).style.backgroundColor = "yellow";
|
||||
|
||||
//获取上一个和下一个兄弟节点
|
||||
getNextNode(box).style.backgroundColor = "blue";
|
||||
getPrevNode(box).style.backgroundColor = "blue";
|
||||
|
||||
|
||||
//指定兄弟节点
|
||||
getEleOfIndex(box,0).style.backgroundColor = "green";
|
||||
getEleOfIndex(box,1).style.backgroundColor = "green";
|
||||
|
||||
//获取所有的兄弟节点（返回值是数组，所以用for循环操作）
|
||||
var arr = getAllSiblings(box);
|
||||
for(var i=0;i<arr.length;i++){
|
||||
arr[i].style.backgroundColor = "green";
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
注意：上方代码中，我们引用到了`tools.js`这个工具类。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
```
|
||||
|
||||
|
||||
505
04-前端基本功：CSS和DOM练习/06-DOM操作练习：通过style对象设置样式.md
Normal file
505
04-前端基本功：CSS和DOM练习/06-DOM操作练习：通过style对象设置样式.md
Normal file
@@ -0,0 +1,505 @@
|
||||
|
||||
|
||||
## style属性的设置和获取
|
||||
|
||||
在DOM当中，如果想设置样式，有两种形式：
|
||||
|
||||
- className（针对内嵌样式表）
|
||||
|
||||
- style（针对行内样式）
|
||||
|
||||
这一段就来讲一下style。
|
||||
|
||||
需要注意的是：style是一个对象，只能获取**行内样式**，不能获取内嵌的样式和外链的样式。例如：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<style>
|
||||
div {
|
||||
border: 6px solid red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="box1" style="width: 200px;height: 100px;background-color: pink;"></div>
|
||||
|
||||
<script>
|
||||
var box1 = document.getElementsByTagName("div")[0];
|
||||
|
||||
console.log(box1.style.backgroundColor);
|
||||
console.log(box1.style.border); //没有打印结果，因为这个属性不是行内样式
|
||||
console.log(typeof box1.style); //因为是对象，所以打印结果是Object
|
||||
console.log(box1.style); //打印结果是对象
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
20180129_1407.png
|
||||
|
||||
上图显示，因为border属性不是行内样式，所以无法通过style对象获取。
|
||||
|
||||
## style属性的注意事项
|
||||
|
||||
style属性需要注意以下几点：
|
||||
|
||||
- （1）样式少的时候使用。
|
||||
|
||||
- （2）style是对象。
|
||||
|
||||
我们在上方已经打印出来，typeof的结果是Object。
|
||||
|
||||
- （3）值是字符串，没有设置值是“”。
|
||||
|
||||
- （4）命名规则，驼峰命名。和css不一样。
|
||||
|
||||
- （5）只能获取行内样式，和内嵌和外链无关。
|
||||
|
||||
本段最开始的时候讲到的。
|
||||
|
||||
- （6）box.style.cssText = “字符串形式的样式”。
|
||||
|
||||
|
||||
`cssText`这个属性，其实就是把行内样式里面的值当做字符串来对待。在上方代码的基础之上，举例：
|
||||
|
||||
```html
|
||||
<script>
|
||||
var box1 = document.getElementsByTagName("div")[0];
|
||||
|
||||
//通过cssText一次性设置行内样式
|
||||
box1.style.cssText = "width: 300px;height: 300px;background-color: green;";
|
||||
|
||||
console.log(box1.style.cssText); //这一行更加可以理解,style是对象
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
20180129_1410.png
|
||||
|
||||
## style的常用属性
|
||||
|
||||
style的常用属性包括：
|
||||
|
||||
- backgroundColor
|
||||
|
||||
- backgroundImage
|
||||
|
||||
- color
|
||||
|
||||
- width
|
||||
|
||||
- height
|
||||
|
||||
- border
|
||||
|
||||
- opacity 设置透明度 (IE8以前是filter: alpha(opacity=xx))
|
||||
|
||||
注意DOM对象style的属性和标签中style内的值不一样，因为在JS中，`-`不能作为标识符。比如：
|
||||
|
||||
- DOM中：backgroundColor
|
||||
|
||||
- CSS中：background-color
|
||||
|
||||
|
||||
## style属性的举例
|
||||
|
||||
我们针对上面列举的几个style的样式，来举几个例子：
|
||||
|
||||
- 1、改变div的大小和透明度
|
||||
|
||||
- 2、当前输入的文本框高亮显示
|
||||
|
||||
- 3、高级隔行变色、高亮显示
|
||||
|
||||
- 4、百度皮肤
|
||||
|
||||
- （继续下面PPT）
|
||||
|
||||
- 显示隐藏/关闭广告/显示二维码（隐藏方法）
|
||||
|
||||
- 提高层级
|
||||
|
||||
下面来逐一实现。
|
||||
|
||||
|
||||
|
||||
### 举例1：改变div的大小和透明度
|
||||
|
||||
代码举例：
|
||||
|
||||
```html
|
||||
<body>
|
||||
<div style="width: 100px;height: 100px;background-color: pink;"></div>
|
||||
<script>
|
||||
|
||||
var div = document.getElementsByTagName("div")[0];
|
||||
div.onmouseover = function () {
|
||||
div.style.width = "200px";
|
||||
div.style.height = "200px";
|
||||
div.style.backgroundColor = "black";
|
||||
div.style.opacity = "0.2"; //设置背景色的透明度。单位是0.1
|
||||
div.style.filter = "alpha(opacity=20)"; //上一行代码的兼容性写法。注意单位是百进制
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
```
|
||||
|
||||
|
||||
### 举例2：当前输入的文本框高亮显示
|
||||
|
||||
代码实现：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
input {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ul>
|
||||
<input type="text"/>
|
||||
<input type="text"/>
|
||||
<input type="text"/>
|
||||
<input type="text"/>
|
||||
<input type="text"/>
|
||||
</ul>
|
||||
<script>
|
||||
//需求：让所有的input标签获取焦点后高亮显示
|
||||
|
||||
//1.获取事件源
|
||||
var inpArr = document.getElementsByTagName("input");
|
||||
//2.绑定事件
|
||||
//3.书写事件驱动程序
|
||||
for (var i = 0; i < inpArr.length; i++) {
|
||||
//获取焦点后，所有的input标签被绑定onfocus事件
|
||||
inpArr[i].onfocus = function () {
|
||||
this.style.border = "2px solid red";
|
||||
this.style.backgroundColor = "#ccc";
|
||||
}
|
||||
//绑定onblur事件，取消样式
|
||||
inpArr[i].onblur = function () {
|
||||
this.style.border = "";
|
||||
this.style.backgroundColor = "";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 举例3：高级隔行变色、高亮显示
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: 500px;
|
||||
margin: 100px auto 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
border: 1px solid #c0c0c0;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid #d0d0d0;
|
||||
color: #404060;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #09c;
|
||||
font: bold 16px "微软雅黑";
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
td {
|
||||
font: 14px "微软雅黑";
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
background-color: #f0f0f0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.current {
|
||||
background-color: red !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>姓名</th>
|
||||
<th>课程</th>
|
||||
<th>成绩</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="target">
|
||||
<tr>
|
||||
<td>
|
||||
1
|
||||
</td>
|
||||
<td>生命壹号</td>
|
||||
<td>语文</td>
|
||||
<td>100</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
2
|
||||
</td>
|
||||
<td>生命贰号</td>
|
||||
<td>日语</td>
|
||||
<td>99</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
3
|
||||
</td>
|
||||
<td>生命叁号</td>
|
||||
<td>营销学</td>
|
||||
<td>98</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
4
|
||||
</td>
|
||||
<td>生命伍号</td>
|
||||
<td>数学</td>
|
||||
<td>90</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
5
|
||||
</td>
|
||||
<td>许嵩</td>
|
||||
<td>英语</td>
|
||||
<td>96</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
6
|
||||
</td>
|
||||
<td>vae</td>
|
||||
<td>体育</td>
|
||||
<td>90</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
//需求：让tr各行变色，鼠标放入tr中，高亮显示。
|
||||
|
||||
//1.隔行变色。
|
||||
var tbody = document.getElementById("target");
|
||||
var trArr = tbody.children;
|
||||
//循环判断并各行赋值属性（背景色）
|
||||
for (var i = 0; i < trArr.length; i++) {
|
||||
if (i % 2 !== 0) {
|
||||
trArr[i].style.backgroundColor = "#a3a3a3";
|
||||
} else {
|
||||
trArr[i].style.backgroundColor = "#ccc";
|
||||
}
|
||||
|
||||
//鼠标进入高亮显示
|
||||
//难点：鼠标移开的时候要回复原始颜色。
|
||||
//计数器（进入tr之后，立刻记录颜色，然后移开的时候使用记录好的颜色）
|
||||
var myColor = "";
|
||||
trArr[i].onmouseover = function () {
|
||||
//赋值颜色之前，先记录颜色
|
||||
myColor = this.style.backgroundColor;
|
||||
this.style.backgroundColor = "#fff";
|
||||
}
|
||||
trArr[i].onmouseout = function () {
|
||||
this.style.backgroundColor = myColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
实现的效果如下：
|
||||
|
||||
20180129_1520.gif
|
||||
|
||||
代码解释：
|
||||
|
||||
上方代码中，我们**用到了计数器myColor来记录每一行最原始的颜色**（赋值白色之前）。如果不用计数器，可能很多人以为代码是写的：（错误的代码）
|
||||
|
||||
```html
|
||||
<script>
|
||||
//需求：让tr各行变色，鼠标放入tr中，高亮显示。
|
||||
|
||||
//1.隔行变色。
|
||||
var tbody = document.getElementById("target");
|
||||
var trArr = tbody.children;
|
||||
//循环判断并各行赋值属性（背景色）
|
||||
for (var i = 0; i < trArr.length; i++) {
|
||||
if (i % 2 !== 0) {
|
||||
trArr[i].style.backgroundColor = "#a3a3a3";
|
||||
} else {
|
||||
trArr[i].style.backgroundColor = "#ccc";
|
||||
}
|
||||
|
||||
//鼠标进入高亮显示
|
||||
//难点：鼠标移开的时候要回复原始颜色。
|
||||
//计数器（进入tr之后，立刻记录颜色，然后移开的时候使用记录好的颜色）
|
||||
trArr[i].onmouseover = function () {
|
||||
this.style.backgroundColor = "#fff";
|
||||
}
|
||||
trArr[i].onmouseout = function () {
|
||||
this.style.backgroundColor = "#a3a3a3";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
这种错误的代码，实现的效果却是：（未达到效果）
|
||||
|
||||
20180129_1525.gif
|
||||
|
||||
|
||||
## js 访问css属性
|
||||
|
||||
访问行内的css样式，有两种方式：
|
||||
|
||||
方式一：
|
||||
|
||||
```javascript
|
||||
box.style.width
|
||||
|
||||
box.style.top
|
||||
```
|
||||
|
||||
方式二：
|
||||
|
||||
```javascript
|
||||
元素.style["属性"]; //格式
|
||||
|
||||
box.style["width"]; //举例
|
||||
```
|
||||
|
||||
方式二最大的优点是：可以给属性传递参数。
|
||||
|
||||
|
||||
### 获取css的样式
|
||||
|
||||
上面的内容中，我们通过`box1.style.属性`只能获得**行内样式**的属性。可如果我们想获取**内嵌或者外链**的样式，该怎么办呢？
|
||||
|
||||
（1）w3c的做法：
|
||||
|
||||
```javascript
|
||||
window.getComputedStyle("元素", "伪类");
|
||||
```
|
||||
|
||||
两个参数都是必须要有的，如果没有伪类就用 null 代替。
|
||||
|
||||
|
||||
（2）IE和opera的做法：
|
||||
|
||||
```javascript
|
||||
obj.currentStyle;
|
||||
```
|
||||
|
||||
于是，就有了一种兼容性的写法，同时将其封装。代码举例如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
div {
|
||||
background-color: pink;
|
||||
/*border: 1px solid #000;*/
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="width: 100px;height: 100px;"></div>
|
||||
|
||||
<script>
|
||||
|
||||
//赋值：div.style.....
|
||||
var div1 = document.getElementsByTagName("div")[0];
|
||||
|
||||
console.log(getStyle(div1, "width"));
|
||||
console.log(getStyle(div1, "padding"));
|
||||
console.log(getStyle(div1, "background-color"));
|
||||
|
||||
//兼容方法获取元素样式
|
||||
function getStyle(ele, attr) {
|
||||
if (window.getComputedStyle) {
|
||||
return window.getComputedStyle(ele, null)[attr];
|
||||
}
|
||||
return ele.currentStyle[attr];
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
打印结果：
|
||||
|
||||
20180204_1425.png
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
517
04-前端基本功：CSS和DOM练习/07-DOM操作练习：innerHTML的方式创建元素.md
Normal file
517
04-前端基本功：CSS和DOM练习/07-DOM操作练习：innerHTML的方式创建元素.md
Normal file
@@ -0,0 +1,517 @@
|
||||
|
||||
|
||||
## 动态创建DOM元素的三种方式
|
||||
|
||||
- `document.write();` 不常用，因为容易覆盖原来的页面。
|
||||
|
||||
- `innerHTML = ();` 用的比较多。绑定属性和内容比较方便。(节点套节点)
|
||||
|
||||
- `document.createElement();` 用得也比较多，指定数量的时候一般用它。
|
||||
|
||||
|
||||
**1、方式一：**
|
||||
|
||||
```javascript
|
||||
document.write();
|
||||
```
|
||||
|
||||
这种方式的好处是：比较随意，想创建就创建，可以直接在`write`里写属性都行。但是会把原来的标签给覆盖掉。所以不建议。
|
||||
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
smyhvae
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
//第一种创建方式：document.write();
|
||||
document.write("<li class='hehe'>我是document.write创建的</li>");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
**方式二：**innerHTML
|
||||
|
||||
|
||||
举例如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
smyhvae
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
var ul = document.getElementsByTagName("ul")[0];
|
||||
|
||||
//第二种：直接利用元素的innerHTNL方法。（innerText方法不识别标签）
|
||||
ul.innerHTML += "<li id='li1'>我是innerHTML创建的</li>" //注意，是用符号“+=”，不是“=”
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
注意，上方代码中，是用是用符号`+=`，不是`=`，前者是在原来的基础之上增加，后者是替换。
|
||||
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**3、方式三：**利用DOM的api创建
|
||||
|
||||
利用DOM的api创建节点，有很多种：
|
||||
|
||||
比如：
|
||||
|
||||
- createElement()
|
||||
|
||||
- appendChild()
|
||||
|
||||
- removeChild()
|
||||
|
||||
- insertBefore()
|
||||
|
||||
- replaceChild()
|
||||
|
||||
|
||||
这个我们在上一篇文章的`DOM节点的操作`这一段中已经讲到了。
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
|
||||
## innerHTML举例：在线用户的获取
|
||||
|
||||
现在要做下面这样一个页面：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
上图的意思是，每次刷新页面，都从服务器获取最新的在线人数的名单（我们先用本地的数组来模拟服务器上的数据）。
|
||||
|
||||
它的结构是：div > ul > li。每一个li就是一个头像。
|
||||
|
||||
如果在本地直接添加几个头像的话，代码是：
|
||||
|
||||
```html
|
||||
//往ul中添加li元素以及li元素中的内容
|
||||
ul.innerHTML += '<li>'+
|
||||
'<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="生命壹号"></a>'+
|
||||
'<p><a href="#" title="生命壹号" target="_blank">生命壹号</a></p>'+
|
||||
'</li>';
|
||||
ul.innerHTML += '<li>'+
|
||||
'<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="生命壹号"></a>'+
|
||||
'<p><a href="#" title="生命壹号" target="_blank">生命壹号</a></p>'+
|
||||
'</li>';
|
||||
ul.innerHTML += '<li>'+
|
||||
'<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="生命壹号"></a>'+
|
||||
'<p><a href="#" title="生命壹号" target="_blank">生命壹号</a></p>'+
|
||||
'</li>';
|
||||
|
||||
```
|
||||
|
||||
上方代码有两点比较重要：
|
||||
|
||||
- 我们是通过`ul.innerHTML += 元素节点`的方式来不停地往ul里面加内容，比`createElement`的方式要方便。
|
||||
|
||||
- 元素的内容本身有双引号`"`，所以我们要用单引号`'`进行字符串的连接。
|
||||
|
||||
但是，当我们从服务器获取在线用户的时候，头像和用户的昵称是动态变化的，所以每个字符串要用变量进行表示：
|
||||
|
||||
```html
|
||||
ul.innerHTML += '<li>'+
|
||||
'<a href="#" target="blank"><img src="'+users[i].icon+'" width="48" height="48" alt="'+users[i].name+'"></a>'+
|
||||
'<p><a href="#" title="'+users[i].name+'" target="_blank">'+users[i].name+'</a></p>'+
|
||||
'</li>';
|
||||
|
||||
```
|
||||
|
||||
这里我们暂时用本地的数组来代表服务器的数据，最终的完整版代码如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
* {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.wp {
|
||||
width: 730px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
.mtn {
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
|
||||
#ct .frame {
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.xfs_2 .frame-title, .xfs_2 .frametitle, .xfs_2 .tab-title {
|
||||
background-color: #A90000;
|
||||
background-position: 0 -99px;
|
||||
}
|
||||
|
||||
.xfs .frame-title, .xfs .frametitle, .xfs .tab-title, .xfs .frame-title a, .xfs .frametitle a, .xfs .tab-title a {
|
||||
color: #FFF !important;
|
||||
}
|
||||
|
||||
.xfs .frame-title, .xfs .frametitle, .xfs .tab-title {
|
||||
border: none;
|
||||
background: transparent url(images/mu.png) repeat-x 0 95;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 0 10px;
|
||||
height: 32px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin: 10px 10px 0;
|
||||
}
|
||||
|
||||
ul, menu, dir {
|
||||
display: block;
|
||||
list-style: none;
|
||||
-webkit-margin-before: 1em;
|
||||
-webkit-margin-after: 1em;
|
||||
-webkit-margin-start: 0px;
|
||||
-webkit-margin-end: 0px;
|
||||
-webkit-padding-start: 25px;
|
||||
}
|
||||
|
||||
.mls li {
|
||||
padding: 0 0 5px;
|
||||
width: 66px;
|
||||
height: 85px;
|
||||
}
|
||||
|
||||
.ml li {
|
||||
float: left;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font: 12px/1.5 Tahoma, 'Microsoft Yahei', 'Simsun';
|
||||
}
|
||||
|
||||
.mls p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.ml p, .ml span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mls img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.ml img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
a img {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wp mtn">
|
||||
<div id="diy3" class="area">
|
||||
<div id="frameipq7f2" class="xfs xfs_2 frame move-span cl frame-1">
|
||||
<div
|
||||
class="title frame-title"><span class="titletext">当前在线用户</span></div>
|
||||
<div id="frameipq7f2_left"
|
||||
class="column frame-1-c">
|
||||
<div
|
||||
id="frameipq7f2_left_temp" class="move-span temp"></div>
|
||||
<div id="portal_block_695"
|
||||
class="block move-span">
|
||||
<div
|
||||
id="portal_block_695_content" class="dxb_bc">
|
||||
<div class="module cl ml mls" id="users">
|
||||
<ul>
|
||||
<!--<li>-->
|
||||
<!--<a href="#" target="_blank"><img src="images/noavatar_small.gif" width="48" height="48" alt="生命壹号"></a>-->
|
||||
<!--<p><a href="#" title="生命壹号" target="_blank">生命壹号</a></p>-->
|
||||
<!--</li>-->
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
//模拟从服务器获取数据
|
||||
var users = [
|
||||
{"name": "smyhvae", "icon": "images/noavatar_small.gif"},
|
||||
{"name": "smyh", "icon": "images/noavatar_small.gif"},
|
||||
{"name": "smyh02", "icon": "images/75_avatar_small.jpg"},
|
||||
{"name": "vae", "icon": "images/89_avatar_small.jpg"},
|
||||
{"name": "today", "icon": "images/noavatar_small.gif"},
|
||||
{"name": "enen", "icon": "images/noavatar_small.gif"},
|
||||
{"name": "oyey", "icon": "images/noavatar_small.gif"},
|
||||
{"name": "dongxiaojie", "icon": "images/noavatar_small.gif"},
|
||||
{"name": "qishi", "icon": "images/noavatar_small.gif"},
|
||||
{"name": "qqtang", "icon": "images/noavatar_small.gif"},
|
||||
{"name": "wawawa", "icon": "images/noavatar_small.gif"},
|
||||
{"name": "haha", "icon": "images/noavatar_small.gif"},
|
||||
{"name": "robot", "icon": "images/noavatar_small.gif"},
|
||||
{"name": "heheda", "icon": "images/noavatar_small.gif"},
|
||||
{"name": "smyhvae1", "icon": "images/noavatar_small.gif"},
|
||||
{"name": "lihaile", "icon": "images/noavatar_small.gif"}
|
||||
];
|
||||
|
||||
//需求：页面显示所有的在线用户。
|
||||
//思路：模拟服务器获取数据（数组中装着json）.获取ul，把ul的innerHTML属性获取到，然后不间断的往innerHTML属性中赋值。
|
||||
//赋值要求：li标签的内容。
|
||||
//步骤：(获取元素)
|
||||
var div = document.getElementById("users");
|
||||
var ul = div.firstElementChild || div.firstChild;
|
||||
// var ul = div.children[0];
|
||||
|
||||
//1.模拟服务器获取数据（定义数组），通过循环添加元素（定义for）
|
||||
//数组中有多少元素，我们就创建多少个li标签
|
||||
for (var i = 0; i < users.length; i++) {
|
||||
//2.模拟实验的操作方式。
|
||||
ul.innerHTML += '<li>' +
|
||||
'<a href="#" target="blank"><img src="' + users[i].icon + '" width="48" height="48" alt="' + users[i].name + '"></a>' +
|
||||
'<p><a href="#" title="' + users[i].name + '" target="_blank">' + users[i].name + '</a></p>' +
|
||||
'</li>';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
工程文件：
|
||||
|
||||
- [2018-02-01-获取在线用户列表demo.rar](http://download.csdn.net/download/smyhvae/10237611)
|
||||
|
||||
|
||||
|
||||
## innerHTML举例2：模拟百度搜索的下方提示
|
||||
|
||||
要求实现的效果如下：
|
||||
|
||||
|
||||
|
||||
在这之前，我们先实现这样一个例子：**判断字符串以某个字符串为开头**。
|
||||
|
||||
**判断字符串是否以某个字符串为开头：**
|
||||
|
||||
|
||||
```javascript
|
||||
var str = "smyhvae";
|
||||
|
||||
//判断str是否以sm为开头？（给定字符串，然后他的索引值为0）
|
||||
var num = str.indexOf("sm");
|
||||
//只有返回值为0，那么字符串才是以参数为开头
|
||||
//如果在任何位置都查询不到参数，则返回值为-1；
|
||||
|
||||
```
|
||||
|
||||
|
||||
代码解释：我们可以通过`indexOf("参数")`来实现。如果返回的索引值为0，说明字符串就是以这个参数开头的。
|
||||
|
||||
为了实现上方gif图的搜索功能，完整版代码如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 500px;
|
||||
margin: 200px auto;
|
||||
}
|
||||
|
||||
ul {
|
||||
width: 392px;
|
||||
padding: 5px;
|
||||
list-style: none;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 70px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<input type="text"/>
|
||||
<button>搜索</button>
|
||||
<!--<ul>-->
|
||||
<!--<li>aaaa</li>-->
|
||||
<!--<li>bbb</li>-->
|
||||
<!--<li>ccc</li>-->
|
||||
<!--</ul>-->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
//需求：输入内容(输入事件，键盘弹起事件)，模拟服务器获取内容，创建ul，并在其中显示。
|
||||
|
||||
//1.获取事件源
|
||||
//模拟服务器获取内容
|
||||
var arr = ["a", "ab", "abc", "abcd", "aa", "aaa"];
|
||||
var box = document.getElementsByTagName("div")[0];
|
||||
var inp = box.children[0];
|
||||
// var inp = document.getElementsByTagName("input")[0];
|
||||
|
||||
//2.绑定事件(输入内容(输入事件，键盘弹起事件))
|
||||
inp.onkeyup = function () {
|
||||
//创建一个字符串，里面添加满了li和对应的内容。
|
||||
var newArr = [];
|
||||
//遍历老数组arr，然后判断每一项，只要是以input的内容为开头的，就添加到新数组newArr中，然后转成字符串。
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
|
||||
//获取输入内容input标签的value属性值。
|
||||
if (arr[i].indexOf(this.value) === 0) { //【重要】判断老数组arr中的每一项，是否以input的内容为开头
|
||||
newArr.push("<li>" + arr[i] + "</li>");
|
||||
}
|
||||
}
|
||||
var str = newArr.join("");
|
||||
|
||||
//Bug1：每次创建新的ul之前，如果有就的ul，就先删除旧的ul
|
||||
if (box.getElementsByTagName("ul")[0]) {
|
||||
//只要存在，那么就是object，object类型的数据，只要不是null,对应的boolean值都是true；
|
||||
box.removeChild(box.children[2]);
|
||||
}
|
||||
|
||||
//Bug2.如果input的内容为空，那么就不能再生成ul了。
|
||||
//如果input为空，那就切断函数
|
||||
|
||||
//Bug3.如果arr数组中找不到以input为开头的元素。那就切断函数
|
||||
//newArr的长度为0，就能证明以input内容为开头的元素，在arr中不存在
|
||||
if (this.value.length === 0 || newArr.length === 0) { //fix bug2、fix bug3
|
||||
//切断函数，直接return
|
||||
return;
|
||||
}
|
||||
|
||||
//3.书写事件驱动程序
|
||||
var ul = document.createElement("ul");
|
||||
//把创建好的内容添加到ul中。
|
||||
ul.innerHTML = str;
|
||||
box.appendChild(ul);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 动态操作表格
|
||||
|
||||
|
||||
方式1：
|
||||
|
||||
```
|
||||
createElement()
|
||||
```
|
||||
|
||||
方式2：
|
||||
|
||||
- rows (只读，table和textarea能用)
|
||||
|
||||
- insertRow() (只有table能调用)
|
||||
|
||||
- deleteRow() (只有table能调用)
|
||||
|
||||
- cells (只读，table和textarea能用)
|
||||
|
||||
- insertCell() (只有tr能调用)
|
||||
|
||||
- deleteCell() (只有tr能调用)
|
||||
|
||||
|
||||
PS：括号里可以带index。用的不多。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
202
04-前端基本功：CSS和DOM练习/08-JavaScript基础：定时器.md
Normal file
202
04-前端基本功：CSS和DOM练习/08-JavaScript基础：定时器.md
Normal file
@@ -0,0 +1,202 @@
|
||||
|
||||
|
||||
## 定时器的常见方法
|
||||
|
||||
- setInterval()：循环定时器。周而复始的执行（循环执行）
|
||||
|
||||
- setTimeout()：定时炸弹。用完以后立刻报废（只执行一次）
|
||||
|
||||
|
||||
### 定义定时器的方式
|
||||
|
||||
**方式一：**匿名函数
|
||||
|
||||
每间隔一秒打印一次：
|
||||
|
||||
```javascript
|
||||
setInterval(function () {
|
||||
console.log(1);
|
||||
},1000);
|
||||
```
|
||||
|
||||
**方式二：**
|
||||
|
||||
每间隔一秒打印一次：
|
||||
|
||||
|
||||
```javascript
|
||||
setInterval(fn,1000);
|
||||
|
||||
function fn(){
|
||||
console.log(1);
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### 定时器高级：清除定时器
|
||||
|
||||
定时器的返回值可以用来清除定时器。具体方法是：假设定时器setInterval()的返回值是`参数1`，那么`clearInterval(参数1)`就可以清除定时器。
|
||||
|
||||
setTimeout()的道理是一样的。
|
||||
|
||||
代码举例：
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<script>
|
||||
var num = 1;
|
||||
|
||||
var timer = setInterval(function () {
|
||||
console.log(num); //每间隔一秒，打印一次num的值
|
||||
num ++;
|
||||
if(num ===5) { //打印四次之后，就清除定时器
|
||||
clearInterval(timer);
|
||||
}
|
||||
|
||||
}, 1000);
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
## 定时器举例
|
||||
|
||||
### 举例一：5秒后关闭网页两侧的广告栏
|
||||
|
||||
假设网页两侧的广告栏为两个img标签，它们的样式为：
|
||||
|
||||
|
||||
```html
|
||||
<style>
|
||||
...
|
||||
...
|
||||
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
5秒后关闭广告栏的js代码为：
|
||||
|
||||
```html
|
||||
<script>
|
||||
window.onload = function () {
|
||||
//获取相关元素
|
||||
var imgArr = document.getElementsByTagName("img");
|
||||
//设置定时器：5秒后关闭两侧的广告栏
|
||||
setTimeout(fn,5000);
|
||||
function fn(){
|
||||
imgArr[0].style.display = "none";
|
||||
imgArr[1].style.display = "none";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
### 举例二：关闭京东顶部广告栏（带动画效果关闭）
|
||||
|
||||
我们在[之前的文章](https://github.com/smyhvae/Web/blob/master/03-JavaScript%E5%9F%BA%E7%A1%80/07-JavaScript%E5%9F%BA%E7%A1%80%EF%BC%9ADOM%E6%93%8D%E4%BD%9C.md)中做过这道题。但是现在，要求广告栏在关闭的时候，带动画效果：**点击关闭按钮后，顶部广告栏慢慢地变透明，直到全部关闭。**
|
||||
|
||||
我们可以用定时器来做。完整版代码如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.top-banner {
|
||||
background-color: pink;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.w {
|
||||
width: 1210px;
|
||||
margin: 10px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 1210px;
|
||||
height: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
text-decoration: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font: 700 14px/20px "simsum";
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 1210px;
|
||||
height: 80px;
|
||||
background-color: green;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-banner" id="topBanner" style="opacity: 1">
|
||||
<div class="w">
|
||||
<img src="blue" alt=""/>
|
||||
<a href="#" id="closeBanner">×</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search">
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
//需求：点击关闭按钮，先让top-banner这个盒子透明度变为0，紧接着display：none;
|
||||
|
||||
//1.获取事件源和相关元素
|
||||
var closeBanner = document.getElementById("closeBanner");
|
||||
var topBanner = document.getElementById("topBanner");
|
||||
//定义定时器
|
||||
var timer = null;
|
||||
//2.绑定事件
|
||||
closeBanner.onclick = function () {
|
||||
//3.书写事件驱动程序（定时器，透明度变为0，清除定时器，并隐藏盒子）
|
||||
timer = setInterval(function () {
|
||||
topBanner.style.opacity -= 0.1;
|
||||
if (topBanner.style.opacity < 0) {
|
||||
topBanner.style.display = "none";
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
代码解释：
|
||||
|
||||
注意，我们要实现给顶部的div加一个行内样式`style="opacity: 1"`，然后才能通过定时器判断`topBanner.style.opacity`的值。
|
||||
|
||||
定时器的返回值其实是number类型的，但我们习惯性地设置初始值为null。
|
||||
|
||||
实现效果：
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user