## 1.Mac桌面
### 1.1新建一个Mac桌面项目
### 1.2搭建整体框架
### 1.3设计默认和背景样式
```
/*替换通配符，提高效率*/
a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl,
dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img,
ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var {
margin: 0;
padding: 0;
}
body{
/*背景*/
background: url("../image/bg_apple.jpg");
/*缩放效果*/
background-size: cover;
}
```
### 1.4设计头部背景样式
```
#top{
background: rgba(255,255,255,0.8);
height: 35px;
/*背景阴影：下边给黑色阴影*/
box-shadow: 0px 3px black;
}
```
### 1.5实现头部的内容和布局
```
<!--左边菜单-->
<ul class="top-left">
<li><a href="" class="glyphicon glyphicon-apple"></a></li>
<li><a href="">520IT</a></li>
<li><a href="">文件</a></li>
<li><a href="">编辑</a></li>
<li><a href="">显示</a></li>
<li><a href="">帮助</a></li>
</ul>
<!--右边菜单-->
<ul class="top-right">
<li ><a href="" class="glyphicon glyphicon-volume-up"></a></li>
<li ><a href="" class="glyphicon glyphicon-align-left"></a></li>
<li ><a href="" class="glyphicon glyphicon-question-sign"></a></li>
<li ><a href="" class="glyphicon glyphicon-leaf"></a></li>
</ul>
```
### 1.6设计头部样式
```
#top{
background: rgba(255,255,255,0.8);
height: 35px;
width: 100%;
/*背景阴影：下边给黑色阴影*/
box-shadow: 0px 3px black;
/*设计行高*/
line-height: 35px;
/*相对于浏览器定位*/
position: fixed;
left: 0;
top:0;
}
a{
/*字体变黑*/
color: black;
/*去除下划线*/
text-decoration: none;
font-size: 15px;
margin: 0 3px;
}
#top ul{
/*去掉圆点*/
list-style: none;
}
/*左浮动*/
#top .top-left {
float: left;
margin-left: 10px;
}
/*右浮动*/
#top .top-right{
float: right;
margin-right: 10px;
}
/*改变标签类型*/
#top ul li{
display: inline-block;
}
```
### 1.7设计低部背景样式
```
#bottom{
background: red;
height: 70px;
/*相对浏览器定位*/
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
```
### 1.8设计低部背景样式
1.修改html
2.添加样式
```
#bottom .dock{
background: url("../image/dock_bg.png");
width: 60%;
height: 100%;
/*水平居中*/
margin: 0 auto;
border-top-left-radius: 5px;
border-top-right-radius:5px;
}
```
### 1.9低部栏添加图片
```
<!--底部添加图片-->
<ul>
<li><a href="#"><img src="image/zurb-icon.png"></a></li>
<li><a href="#"><img src="image/linkedin-icon.png"></a> </li>
<li><a href="#"><img src="image/notable-icon.png"></a> </li>
<li><a href="#"><img src="image/lastfm-icon.png"></a> </li>
<li><a href="#"><img src="image/facebook-icon.png"></a> </li>
<li><a href="#"><img src="image/google-icon.png"></a> </li>
<li><a href="#"><img src="image/notable-icon.png"></a> </li>
<li><a href="#"><img src="image/lastfm-icon.png"></a> </li>
<li><a href="#"><img src="image/facebook-icon.png"></a> </li>
<li><a href="#"><img src="image/google-icon.png"></a> </li>
<li><a href="#"><img src="image/lastfm-icon.png"></a> </li>
</ul>
```
### 2.1低部栏添加图片样式
```
#bottom{
...
line-height: 70px;
/*水平居中*/
text-align: center;
}
/**给图片设计宽高*/
#bottom .dock img{
width: 55px;
margin: 0 5px;
}
/**改变标签类型*/
#bottom .dock ul{
display: inline-block;
}
/**改变标签类型*/
#bottom .dock li{
display: inline-block;
}
```
### 2.2低部栏图片添加过度动画
- **transform** 动画
-webkit-transform 动画效果
-webkit-transform-origin 参照坐标
-webkit-transition：过度动画效果
```
#bottom .dock li{
display: inline-block;
/*平移过度效果*/
-webkit-transition: 0.25s linear; /* Safari 和 Chrome */
-moz-transition: 0.25s linear; /* Firefox 4 */
-ms-transition: 0.25s linear /* IE 9 */
-o-transition: 0.25s linear; /* Opera */
transition: 0.25s linear; /* W3C */
}
#bottom .dock li:hover {
/*参照坐标*/
transform-origin: center bottom;
/*放大效果*/
-webkit-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
-o-transform: scale(1.5,1.5);
transform: scale(1.5,1.5);
}
```
### 2.3实现中间内容和结构
### 2.4设计中间内容样式
```
#middle{
margin-top: 50px;
margin-left: 15px;
width: 90px;
}
/**设计图片的宽*/
#middle .file img{
width: 90px;
}
/**设计文字颜色..*/
#middle .file p{
color: white;
text-align: center;
}
```
## 2.什么是JavaScript
- **什么是JavaScript**
[JavaScript]()是一门广泛用于 [浏览器客户端]()的 [脚本语言]() (解析运行，不是编译运行)由Netspace公司设计，当时跟Sun公司合作，所以名字起得像Java, 业内一般简称JS
- **JS的常见用途**
1） **动态效果** 和 **数据加载**都是js实现
2）HTML **DOM操作**（节点操作，比如添加、修改、删除节点）
3）给HTML网页增加 **动态**功能，比如动画
4） **事件处理**：比如监听鼠标点击、鼠标滑动、键盘输入
## 3.JavaScript的书写方式
JS常见的书写方式有2种
- 页内JS：
在当前网页的script标签中编写 ( script标签一般在body标签中 )
```
</body>
...
...
<script type="text/javascript">
/ *写脚本语言*/
</script>
</body>
```
- 外部JS
```
/ ** 引用外部的js文件，src 指定js文件路径 */
<script src="index.js"> </script>
```
## 4.JS简单应用..
### 4.1JavaScript输出.
- 弹窗输出
- 控制台输出
- 打断点
**案例：**
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输出helloWorld</title>
</head>
<body>
<script>
/*弹窗输出*/
alert('hello World !');
/*调试输出*/
console.log('java','android');
console.log('java','android');
/*打断点*/
debugger;
console.log('java','android');
</script>
</body>
</html>
```
## 5.JS数据类型.
1. 基本数据类型 ( java : int float long double ... ; javaScript : number string boolean object )
2. 打印真实类型 ( typeof xxx )
3. 运算（+ - * / % ....）
4. 面试题
5. 数组
6. 遍历数组
7. 数组的增删（压栈，出栈）
8. 函数库Math
9. 等号运算符
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS语法</title>
</head>
<body>
<script>
// 1. 基本数据类型
/*number*/
var age=100;
var money=100.02;
console.log(age,money);
/*string*/
var name='jack';
name2='rose';
console.log(name,name2);
/*boolean*/
var result1=false;
var result2=true;
console.log(result1,result2);
/*object*/
var score=null;
console.log(score);
/*number*/
var number1 =1,number2=2;
console.log(number1,number2);
// 2. 打印真实类型
console.log(typeof money,typeof name,typeof result1,typeof score);
// 3. 运算（+ - * / % ....）
var str=name+'-'+result2+'-'+score;
console.log(str);
// 4. 面试题
var str1=(10+'10')+10;
var str2=(10+10)+'10';
var str3='10'+('10'+10);
console.log(str1,str2,str3);//101010 2010 101010
// 5. 数组
// var arrs=new Array();
var arr=[];
console.log(typeof arr);
arr[0]='java';
arr[1]=12;
console.log(arr);
var numbers=['android',12,false,[12,34]];
console.log(numbers);
// 6. 遍历数组
var num=[100,500,200,600];
// for(var i=0;i<num.length;i++){
// console.log(num[i]);
// }
// for(i=0;i<num.length;i++){
// console.log(num[i]);
// }
// for(i in num){
// console.log(num[i]);
// }
// 7. 数组的增删（压栈，出栈）
num.push(900);//压栈
console.log(num);
num.pop();//出栈
console.log(num);
// 8. 函数库Math
var maxVaule=Math.max(100,400,300);
console.log(maxVaule);
console.log(Math.min(100,200,600));
var maxV=Math.max.apply(this,num);
var minV=Math.min.apply(this,num);
console.log(maxV,minV);
// 9.等号运算符
/*
* == 等于 （值）
* === 全等（值和类型）
*/
var a=5;
var b='5';
console.log(a==5);//true
console.log(b==5);//true
console.log(a===5);//true
console.log(b===5);//false
</script>
</body>
</html>
```
## 6.JS函数.
### 6.1JS函数格式
- **1.普通函数格式**
**function 函数名 （参数列表 ...）{**
**//函数体**
**return 返回值;**
**}**
- **2.匿名函数格式**
**var 函数别名 =function （参数列表 ...）{**
**//函数体**
**return 返回值;**
**}**
注意：想让<script> 标签中的脚本代码一定执行 , 可使用匿名函数： **（ function(){ } ）（）**
**案例：**
1. 加法运算
2. 多个数相加（参数为数组）
3. 内置数组（每个函数都会自带的一个内置数组，把传入的所有东西存到一个默认的数组arguments中）
4. 匿名函数
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-JS函数</title>
</head>
<body>
<script>
// 1. 加法运算
function sum(num1,num2) {
return num1+num2;
}
var result1=sum(12,3);
console.log(result1);
// 2. 多个数相加(参数为数组)
function sum2(arrays) {
var result=null;
for(i in arrays){
result+=arrays[i];
}
return result;
}
var result2=sum2([12,3,5]);
console.log(result2);
// 3.内置数组（函数自带的一个内置数组，把传入的所有东西存到一个默认的数组arguments中）
function sum3() {
var result=null;
for(i in arguments){
result +=arguments[i];
}
return result;
}
var result3=sum3(1,2,3,4);
console.log(result3);
// 4.匿名函数
var sum4=function () {
console.log('我是匿名函数，别名是sum4');
}
var result4=sum4();
</script>
</body>
</html>
```
## 7.JS对象
### 7.1JS产生对象.
#### 1.第一种
格式：var dog= **{ }**
**案例：**
1. 定义一只狗对象
2. 给狗对象添加属性
3. 给狗对象添加方法
4. 调用狗对象中的属性和方法
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-JS产生对象</title>
</head>
<body>
<script>
// 1. 定义一只狗对象
var dog={
//2. 给狗对象添加属性
age:12,
name:'jack',
height:50,
firends:['rose','lili'],
//3. 给狗对象添加方法
eat:function (food) {
console.log(this.name+' --吃--'+food);
},
run:function () {
console.log(this.name+' -- 跑--');
}
};
// 4. 调用狗对象中的属性和方法
console.log(dog.age,dog.name,dog.height,dog.firends);
dog.eat('骨头');
dog.run();
</script>
</body>
</html>
```
#### 2.第二种(批量产生对象)
构造函数 可以new对象。
普通函数 --> 升级 --> 构造函数,。（通过new 关键字升级）
格式：var dog= **new 函数名() ;**
**案例：**
1. 创建多只狗对象
2. 给狗的构造函数添加属性和方法
3. 给狗对象的属性赋值
4. 调用狗对象中的属性和方法
5. 把狗的构造函数封装到一个独立的js文件
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-批量产生对象</title>
</head>
<body>
<script>
/**让下面的js代码一定执行*/
(function () {
/*定义一个函数*/
// function dog() {
// console.log('dog');
// }
// dog();
/*升级函数为构造器函数*/
// function dog() {
// console.log('dog');
// }
// var dog1=new dog();
// var dog2=new dog();
/*类似java中的一个类*/
function dog() {
//2. 给狗的构造函数添加属性和方法
this.name=null;
this.age=null;
this.height=null;
this.firends=[];
this.eat=function () {
console.log('---eat---');
};
this.run=function () {
console.log('---run---');
};
}
// 1. 创建多只狗对象
var dog1=new dog();
var dog2=new dog();
// 3. 给狗对象的属性赋值
dog1.age=12;
dog1.name='jack';
dog2.age=8;
dog2.name='rose';
console.log(dog1);
console.log(dog2);
// 4. 调用狗对象中的属性和方法
console.log(dog1.age,dog1.name);
dog1.eat();
// 5. 把狗的构造函数封装到一个独立的js文件
})();
</script>
</body>
</html>
```
## 8.JS内置对象..
### 8.1window
window是javaScript的内置对象之一
#### 1.window的第一作用：
1)所有的 [全局变量]()都是 [window]()的 [属性]()
2)所有的 [全局函数]()都是 [window]()的 [方法]()
**案例：**
1. 全局变量（属于window的属性）
2. 全局函数（属于window的方法）
3. 打印window对象
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-window</title>
</head>
<body>
<script>
// 1. 全局变量（属于window的属性）
var age=12;
console.log(age);
console.log(window.age);
// 2. 全局函数（属于window的方法）
function dog() {
console.log('--dog--');
}
dog();
window.dog();
// 3. 打印window对象
function person() {
console.log(this);
}
window.person();//this 代表是window
new person();//this 代表是person对象
/*window的属性*/
window.alert('哈哈');
window.console.log('呵呵');
</script>
</body>
</html>
```
属性：
height、innerHeight、outerHeight的区别详解：
http://www.365mini.com/page/jquery-height-vs-innerheight-vs-outerheight.htm
#### 2.window的第二作用：
1) [动态跳转]()
**案例：**
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-window</title>
</head>
<body>
<button οnclick="startToSee();">点击跳转到小码哥官网</button>
<script>
/*点击跳转到小码哥官网*/
function startToSee() {
window.location.href='http://www.520it.com';
}
</script>
</body>
</html>
```
### 8.2document DOM 操作( 一)..
#### 1.documnet的两大作用
[1.动态的获取到整个网页中的所有标签（元素、节点...）]()
[2.对拿到的标签进行CRUD(增删改查)]()
#### 案例1.：
- 动态往body中添加文字和标签（增加标签）
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-documnet</title>
</head>
<body>
<script>
// 1. 动态往body中添加文字和标签
document.write('hello world !');
document.write('<button>我是一个button</button>');
document.write('<img src="image/image_01.jpg" alt="">');
</script>
</body>
</html>
```
#### 案例2：
- 切换图片（获取和修改标签）
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-图片的切换</title>
</head>
<body>
<img id="images" src="image/image_01.jpg" alt="">
<button οnclick="changeImage();">切换图片</button>
<script>
function changeImage() {
//1.拿到img标签
// var img=document.getElementsByTagName('img')[0];//通过tag获取对象
var img=document.getElementById('images');//通过id获取对象
//2.修改标签
img.src='image/image_02.jpg';
}
</script>
</body>
</html>
```
- 来回切换图片
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-来回切换图片</title>
</head>
<body>
<img src="image/image_01.jpg" alt="">
<button >来回切换图片</button>
<script>
//1.拿到img标签的对象
var img=document.getElementsByTagName('img')[0];
//2.拿到button标签的对象
var button=document.getElementsByTagName('button')[0];
//3.给button添加一个点击事件
button.οnclick=function () {
//4.判断
console.log(img.src);
// if(img.src=='image/image_01.jpg'){//有问题
/**indexOf 、 lastIndexOf: 有某个字符窜，则返回任意任意正数，没有找到则返回-1 */
if(img.src.indexOf('image/image_01.jpg')!=-1){
img.src='image/image_02.jpg';
}else{
img.src='image/image_01.jpg';
}
};
</script>
</body>
</html>
```
#### 案例3：
- 图片的显示和隐藏（获取和修改标签）
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-显示和隐藏</title>
</head>
<body>
<img id="icon" src="image/image_01.jpg" alt="">
<br>
<p name="word" >很美的图片...</p>
<button class="btn"> 隐藏</button>
<script>
//1.拿到标签
var icon=document.getElementById('icon');
var word=document.getElementsByName('word')[0];
var btn=document.getElementsByClassName('btn')[0];
//2.监听按钮的点击事件
btn.οnclick=function () {
if(btn.innerText=='隐藏'){
//icon.style：是获取到标签的样式
icon.style.display='none';
word.style.display='none';
btn.innerText='显示';
}else{
//icon.style：是获取到标签的样式
icon.style.display='inline-block';
word.style.display='block';
btn.innerText='隐藏';
}
}
</script>
</body>
</html>
```
#### 总结：
1）Document的 **DOM操作**就是对HTML中的 **标签**进行 **增删改查**。
2）想操作哪个标签，就要先拿到该 **标签的对象**。
## 9.JS中DMO操作（二）
### 9.1JS常用事件
**JS中的事件函数**都是以 **on开头**，类似Android中的点击事件
1. 当窗口加载完毕事件
2. 鼠标事件（类似android中的手指点击事件）
3. 获取焦点事件
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-JS常用的事件</title>
</head>
<body>
<img class="icon" src="image/image_01.jpg" alt="">
<input type="text" id="inputs">
<script>
// 1. 当窗口加载完毕事件
window.οnlοad=function () {
console.log(' ---窗口加载完毕 回调 ---')
// 2. 鼠标事件（类似android中的手指点击事件）
var icon=document.getElementsByClassName('icon')[0];
//鼠标进入
icon.οnmοuseοver=function () {
console.log('-- 鼠标进入 --');
}
//鼠标移动
icon.οnmοusemοve=function () {
console.log('-- 鼠标移动 --');
}
//鼠标离开
icon.οnmοuseοut=function () {
console.log('-- 鼠标离开 --');
}
// 3. 获取焦点事件
var inputs=document.getElementById('inputs');
inputs.οnfοcus=function () {
inputs.style.width='300px';
inputs.style.height='60px';
inputs.style.outline='none';
/*inputs.style.border='1px solid blue';*/
}
}
</script>
</body>
</html>
```
### 9.2.图片浏览器
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-图片浏览器</title>
</head>
<body>
<img src="image/image_01.jpg" alt="" class="icon">
<br>
<button class="pre">上一张</button>
<button class="next">下一张</button>
<script>
//1.找到标签
var icon=document.getElementsByClassName('icon')[0];
var pre=document.getElementsByClassName('pre')[0];
var next=document.getElementsByClassName('next')[0];
var currentIndex=1;
var min=1;
var max=3;
//2.点击上一张
pre.οnclick=function () {
if(currentIndex==min){
currentIndex=3;
}else{
currentIndex-=1;
}
icon.src='image/image_0'+currentIndex+'.jpg';
console.log('上一张'+icon.src);
}
//3.点击下一张
next.οnclick=function () {
if(currentIndex==max){
currentIndex=1;
}else{
currentIndex+=1;
}
icon.src='image/image_0'+currentIndex+'.jpg';
console.log('下一张'+icon.src);
}
</script>
</body>
</html>
```
### 9.3JS实现定时器
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-定时器</title>
<style>
body{
background-color: black;
text-align: center;
}
p{
color: red;
font-size: 60px;
display: none;
}
img{
display: none;
}
div{
color: red;
font-size: 160px;
margin-top: 100px;
}
</style>
</head>
<body>
<img src="image/flower.gif" alt="">
<p>I LOVE YOU </p>
<div>10</div>
<script>
//1.拿到要操作的标签
var icon=document.getElementsByTagName('img')[0];
var word=document.getElementsByTagName('p')[0];
var div=document.getElementsByTagName('div')[0];
//2.添加定时器
//var time
this.time=setInterval(function () {
console.log(' -- -- ')
div.innerText-=1;
if(div.innerText==0){
//3.停止定时
clearInterval(this.time);
//4.显示和隐藏
icon.style.display='inline-block';
word.style.display='block';
div.style.display='none';
}
},1000)
</script>
</body>
</html>
```
### 9.3DOM操作的补充（CRUD）
1. 添加标签
2. 获取标签
3. 创建标签
4. 插入标签
5. 删除标签
6. 改标签
7. 查找标签
8. 打印标签（属于查询）
**案例：**
html代码：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07-DOM操作的CRUD</title>
<style>
div{
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div id="main">
<p>我是在body中的写的标签</p>
</div>
<!--1.引用外部的js-->
<script src="js/index.js"></script>
<!--2.页内的js-->
<script>
</script>
</body>
</html>
```
index.js代码：
```
/**
* Created by Administrator on 2017/3/25.
*/
//window窗体加载完毕后执行下面的代码：（会覆盖body写的界面）
window.οnlοad=function () {
//CRUD 操作
// 1. 添加标签
// document.write('<input type="color">');
//
}
// 1. 添加标签
document.write('<input type="color">');
// 2. 获取标签
var div=document.getElementById('main');
// 3. 创建图片标签
var img=document.createElement('img');
img.src='image/image_01.jpg';
img.style.width='80%';
// 4. 插入标签
div.appendChild(img);
// 5.删除标签
var input=document.getElementsByTagName('input')[0];
input.remove();
// 6. 改标签
// 7. 查找标签
// document.getElementsByClassName();
// document.getElementsByTagName();
// document.getElementsByName();
// document.getElementById();
// 8. 打印标签（属于查询）
console.log(img);
console.log(div.childNodes);
```
## 10.Tab选项卡（综合练习）
### 10.1整体框架的搭建
### 10.2设计选项卡的样式
```
*{
margan:0;
padding:0;
}
body{
padding: 60px;
}
/*选项卡样式*/
#tab{
width: 498px;
height: 130px;
border: 1px solid #9d9d9d;
}
```
### 10.3设计选项卡头部样式
```
/*选项卡头部样式*/
#tab-top{
background-color: #dddddd;
height: 35px;
}
```
### 10.4实现头布局和样式
**布局：**
```
<!--头部-->
<div id="tab-top">
<ul>
<li class="selected">公告</li>
<li>规则</li>
<li>论坛</li>
<li>安全</li>
<li>公益</li>
</ul>
</div>
```
**样式：**
1.去除圆点和左浮动
```
#tab-top ul{
/*去除圆点*/
list-style: none;
}
#tab-top ul li{
/*左浮动*/
float: left;
width: 98px;
}
```
2.垂直居中和水平居中
```
/*选项卡头部样式*/
#tab-top{
background-color: #dddddd;
height: 35px;
/*垂直居中*/
line-height: 35px;
/*水平居中*/
text-align: center;
}
```
3.添加边界
```
#tab-top ul li{
/*左浮动*/
float: left;
width: 98px;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-bottom: 1px solid #9d9d9d;
}
```
4.设计ul的宽度为500px 和 给选项卡添加overflow
```
/*选项卡样式*/
#tab{
...
overflow: hidden;
}
#tab-top ul{
/*去除圆点*/
list-style: none;
width: 500px;
}
```
5.默认选中第一个选项卡
```
#tab-top ul li.selected{
background-color: white;
border-bottom: 0px;
border-left: 1px solid #9d9d9d;
border-right: 1px solid #9d9d9d;
}
```
6.ul向左移动1px
```
/*选项卡头部样式*/
#tab-top{
....
/*定位*/
position: relative;
}
#tab-top ul{
....
/*定位*/
position: absolute;
left: -1px;
}
```
7.添加伪类选择器
```
#tab-top ul li:hover{
color: orange;
font-weight: bold;
}
```
### 10.5实现内容布局和样式（一）
**布局：**
```
<ul>
<li>
<a href="#">接次文件，毁了一家店</a>
</li>
<li>
<a href="#">账号安全神器阿里钱盾</a>
</li>
<li>
<a href="#">新版阿里110上线了</a>
</li>
<li>
<a href="#">卖家学违禁避免被处罚</a>
</li>
</ul>
```
**样式：**
1.去除圆点和左浮动
```
#tab-body .dom ul {
/*去掉点*/
list-style: none;
}
#tab-body .dom li{
/*浮动*/
float: left;
width: 230px;
margin-bottom: 15px;
}
```
2.内容水平居中和去掉a标签的下划线
```
/*内容部分*/
#tab-body{
margin-top: 10px;
/*内容水平居中*/
text-align: center;
}
a{
/*去除a标签的下划线*/
text-decoration: none;
}
```
### 10.6实现内容布局和样式（二）
**布局：**
```
<!--内容-->
<div id="tab-body">
<!--让第一个内容显示出来-->
<div class="dom" style="display: block;">
<ul>
<li>
<a href="#">接次文件，毁了一家店</a>
</li>
<li>
<a href="#">账号安全神器阿里钱盾</a>
</li>
<li>
<a href="#">新版阿里110上线了</a>
</li>
<li>
<a href="#">卖家学违禁避免被处罚</a>
</li>
</ul>
</div>
<!--第二个-->
<div class="dom">
<ul>
<li>
<a href="#">“全额返现”要管控啦</a>
</li>
<li>
<a href="#">淘宝新规发布汇总(7月)</a>
</li>
<li>
<a href="#">炒信规则调整意见反馈</a>
</li>
<li>
<a href="#">质量相关规则近期变更</a>
</li>
</ul>
</div>
<!--第三个-->
<div class="dom" >
<ul>
<li>
<a href="#">阿里建商家全链路服务</a>
</li>
<li>
<a href="#">个性化的消费时代来临</a>
</li>
<li>
<a href="#">跨境贸易是中小企业机</a>
</li>
<li>
<a href="#">美妆行业虚假信息管控</a>
</li>
</ul>
</div>
<!--第四个-->
<div class="dom" >
<ul>
<li>
<a href="#">接次文件，毁了一家店</a>
</li>
<li>
<a href="#">账号安全神器阿里钱盾</a>
</li>
<li>
<a href="#">新版阿里110上线了</a>
</li>
<li>
<a href="#">卖家学违禁避免被处罚</a>
</li>
</ul>
</div>
<!--第五个-->
<div class="dom">
<ul>
<li>
<a href="#">为了公益high起来</a>
</li>
<li>
<a href="#">魔豆妈妈在线申请</a>
</li>
</ul>
</div>
</div>
```
**样式：**
```
#tab-body .dom {
/*所有的内容都隐藏*/
display: none;
}
a:hover{
color: orange;
}
```
### 10.7 JS实现动态切换
1. 拿到所有的li标签
2. 拿到所有的内容div标签
3. 遍历li标签
4. 取出单独的li标签
5. 监听每个标签的鼠标移动事件
6. 让所有的li标签不被选中
7. 让当前标签选中
8. 让所有的内容隐藏
9. 让选中的内容展示出来
```
/**
* Created by Administrator on 2017/3/25.
*/
window.οnlοad=function () {
//1.拿到所有的li标签
var allLi=document.getElementById('tab-top').getElementsByTagName('li');
console.log(allLi);
//2.拿到所有的内容div标签
var allD=document.getElementById('tab-body').getElementsByClassName('dom');
console.log(allD);
//判断
if(allLi.length!=allD.length){
return ;
}
//3.遍历li标签
for(var i=0;i<allLi.length;i++){
//4.取出单独的li标签
var li=allLi[i];
li.id=i;
console.log(li);
//5.监听每个鼠标移动事件
li.οnmοusemοve=function () {
//6.让所有的li标签不被选中
for(var j=0;j<allLi.length;j++){
allLi[j].className='';
//8.让所有的内容隐藏
allD[j].style.display='none';
}
//7.让当前标签选中
this.className='selected';
//9.让选中的内容展示出来
console.log('i='+i);
allD[this.id].style.display='block';
}
}
}
``
```
```
4556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
