HTML5之JavaScript简介（一）

最新推荐文章于 2024-08-15 00:25:57 发布

英雄有梦

最新推荐文章于 2024-08-15 00:25:57 发布

阅读量2.3k

点赞数

分类专栏： HTML5专栏文章标签： javascript html5

本文链接：https://blog.csdn.net/wzc10101415/article/details/64929886

版权

HTML5专栏专栏收录该内容

6 篇文章 1 订阅

订阅专栏

一、JS的基本语法
01-输出helloWorld

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--页内JS-->
    <script type="text/javascript">
//       alert('hello world!');
        // 方便调试的输出
        console.log("hello world!");
        console.log("hello world!");
        console.log("hello world!");
    </script>
</head>
<body>
   <!--<button onclick="alert("hewejnkdnjewnj");">你好,小码哥</button>-->
</body>
</html>

02-JS中常见的语法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<script type="text/javascript">
   var age = 18; //number
   var money = 100.11;//number
   var name = 'jack'; //string
   var name2 = 'rose'; //string
   var result = true; //boolean  false
   var score = null;  // object
//   console.log(age, money, name, name2, result, score);
//   typeof 判断变量的类型
//   console.log(typeof age,typeof money,typeof name,typeof name2,typeof result, typeof score);

    // 如何拼接
    var count1 = age + money;
    var newName = name + '-' + name2;
//    console.log(newName);


     // 规律:
     // 变量的拼接都是从左往右,任何类型的变量和string类型的变量拼接,都会被转换为string类型
    // 题目
   var str1 = 10 + 10 + '10';  // 2010
   var str2 = '10' + '10' + 10; // 101010
   var str3 = '10' + 10+  10; // 101010 1020
   var str4 = '10' + 10 + '10'; // 101010
//   console.log(typeof str3);

    // 数组
    var arrNumber = [-1, age, name, result, '哈哈哈', ['百度', '谷歌']];
    // 遍历
    for(var i=0; i<arrNumber.length; i++){
//        console.log(i,arrNumber[i]);
    }
//    console.log(arrNumber[5][0]);

//    删除数组最后的元素
    arrNumber.pop();
//    console.log(arrNumber);
// 加入数组
    var name = '大神二期';
    arrNumber.push(name);
//   console.log(arrNumber);
//    类型 object
//    console.log(typeof arrNumber);

    var numbers = [-1, 23,32,99];
    // 取出最小值
//   console.log(Math.max(120, 3232, 0));
//   取出数组中的最小值或最大值
    console.log(Math.min.apply(null, numbers))

</script>

</body>
</html>

03-JS中的函数

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script type="text/javascript">
   // 定义一个函数
    function sum(num1, num2){
        return num1 + num2;
    }
//    调用
  var count = sum(10, 40);
//  console.log(count);

   // 万能的加法函数
    function sum2(numbers){
        var count = 0;
        for(var number in numbers){
//            console.log(number);
            count += numbers[number];
        }
        return count;
    }

    var numbers = [10, 12, 15, 1221,3232, 'jh'];
    var result = sum2(numbers);
//    console.log(result);

   // 最终方案  arguments
   function sum3(){
       var count = 0;
       for(var number in arguments){
//            console.log(number);
           count += arguments[number];
       }
       return count;
   }

   var result2 = sum3(10,12,322,1221,3232,3232);
//   console.log(result2);

    // 匿名函数
    var sum4 = function (){
        console.log('-------');
    }
    sum4()
</script>
</body>
</html>

04-JS中的对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script type="text/javascript">
    // 狗对象
    // this 在哪个对象中,其就代表那个对象
    var dog = {
        name : 'wangcai',
        age  : 15,
        height : 1.55,
        friends :['xixi', 'lulu'],
        // 吃
        eat : function(someThing){
            console.log(this.name + '-----吃' + someThing);
        },
        // 跑
        run : function(someWhere){
            console.log(this.name + '------跑' + someWhere);
        }
    };

//    调用
//    console.log(dog.name, dog.age, dog.height);
      dog.eat('五花肉');
      dog.run('操场');


//    console.log(typeof  dog);
</script>
</body>
</html>

05-量产狗对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script type="text/javascript">
    // 函数 --> 构造函数
    function Dog(){
        console.log('--------');
    }

    // 调用函数
//    Dog();
    // 升级成构造函数
    var dog1 = new Dog();  // new -->[[ alloc] init]
    console.log(dog1);

    var dog2 = new Dog();
    console.log(dog2);



</script>
</body>
</html>

06-验证是否产生不同的对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script type="text/javascript">
    // 函数--->构造函数
    function Dog(){
        this.name = null;
        this.age = null;
        this.height = null;
        this.friends = [];
        this.eat = function(someThing){
            console.log(this.name + '吃' + someThing);
        };
        this.run = function(someWhere){
            console.log(this.name + '跑' + someWhere);
        };
    }

    // 产生狗对象
    var dog1 = new  Dog();
    var dog2 = new Dog();

    dog1.name = 'wangcai';
    dog1.age = 10;
    dog1.height = 1.55;
    dog1.friends = ['hhh', 'xxxx'];

    dog2.name = 'ahuang';
//    console.log(dog1, dog2);

    dog1.run();
    dog2.run();

    dog1.eat('五花肉');
    dog2.eat('喝汤');

</script>
</body>
</html>

07-JS语法的自由

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script type="text/javascript">
   // &&  ||
   // ||
    var name1 = 'name1';
    var name2 = '';
    var name3 = 'name3';
    var name4 = 'name4';

    var newName = null;
    // 以前
    if(name1){
        newName = name1;
    }else if(name2){
        newName = name2;
    }else if(name3){
        newName = name3;
    }else{
        newName = name4;
    }
//    console.log(newName);
   // 新的写法
    newName = name1 || name2 || name3 || name4;
//    console.log(newName);


    // &&
     var age = 2;
    if(age>20){
        console.log('你可以结婚了');
    }
    //
   (age>20)&&  console.log('你可以结婚了!!!!!');
</script>
</body>
</html>

二、JS的内置对象
01-JS的内置对象-window

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script type="text/javascript">
    // window
    // 1.所有的全局变量都是window的属性
    // 2.所有的全局函数都是window的函数

    var age = 19;
//    console.log(window.age);

    function dog(){
        console.log('-------');
    }
//    window.dog();

    function person(){
        var name = 'jack';
//        console.log(window.name);
    }

//    window.alert(0);
//    window.console.log('我是window的孩子');
    alert(0);
    // 动态跳转
    window.location.href = 'http://baidu.com';
    window.location.href = 'ds2q://openCamera?name=jack?pwd=5555'
</script>
</body>
</html>

02-JS的内置对象-document

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        // document
        // 1.可以动态的获取网页中的任意一个节点(标签)
        // 2.可以对获取到的节点进行DOM操作(CRUD)

        // 写入
        document.write('hello world!');
        document.write('<input type="color">');
        document.write('<img src="https://www.baidu.com/img/bd_logo1.png" width="100">');
    </script>
</head>
<body>
    <p>211121212121212121212</p>
</body>
</html>

03-JS的DOM操作

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        // 函数
        function changeImg(){
           // 根据id名拿到对应的标签
            var img = document.getElementById('icon');
           // 更改标签的属性
            img.src = 'images/img_03.jpg';
            img.alt = '田园';
        }
    </script>
</head>
<body>
   <img id="icon" src="images/img_02.jpg" alt="风景">
   <p></p>
   <button onclick="changeImg();">更改图片</button>
</body>
</html>

04-JS的DOM操作-2

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<img id="icon" class="img1" src="images/img_02.jpg" alt="风景">
<p></p>
<button>切换图片</button>

<script type="text/javascript">
    // 拿到对应的标签
    // 根据类名拿到对应的标签
    var img = document.getElementsByClassName('img1')[0];
    // 根据标签名拿到对应的标签
    var btn = document.getElementsByTagName('button')[0];
    // 实现点击
    btn.onclick = function(){
       console.log(img.src);
        // indexOf  lastIndexOf 有,则返回任意正整数; 没有,则返回-1
        if(img.src.lastIndexOf('images/img_02.jpg') != -1){
           img.src = 'images/img_03.jpg';
           img.alt = '田园';
        }else{
           img.src = 'images/img_02.jpg';
           img.alt = '风光';
        }

//       if(img.src == 'images/img_02.jpg'){
//           img.src = 'images/img_03.jpg';
//           img.alt = '田园';
//       }else{
//           img.src = 'images/img_02.jpg';
//           img.alt = '风光';
//       }
    }
</script>
</body>
</html>

05-JS中常用的事件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<input name="test1" type="text">
<input class="test2" type="text" value="大神二期">

 <button id="btn">百度一下</button>

 <img id="icon" src="images/img_02.jpg">


<script type="text/javascript">
   // 当网页加载完毕
   window.onload = function(){
//       alert('网页加载完毕');
    // 拿到input标签  name
    var input = document.getElementsByName('test1')[0];
    // 获得焦点
    input.onfocus = function(){
        // 只要是css的属性,加style
        input.style.outline = 'none';
        input.style.border = '1px solid yellow';
        input.width = '500px';
        input.style.fontSize = '19px';
    }
   }

   // 选中触发
    var input2 = document.getElementsByClassName('test2')[0];
    input2.onselect = function(){
        alert(input2.value);
    }

    // 鼠标按下或者弹起
    var btn = document.getElementById('btn');
    btn.onmousedown = function(){
        console.log('按下鼠标');
    }
    btn.onmouseup = function(){
       console.log('抬起鼠标');
    }

    // 鼠标移动触发事件
    var img = document.getElementById('icon');
    // 进入图片
    img.onmouseover = function(){
        console.log('进入图片');
    }
    // 在图片上移动
   img.onmousemove = function(){
       console.log('在图片上移动');
   }
    // 离开图片
   img.onmouseout = function(){
       console.log('离开图片');
   }
</script>
</body>
</html>

三、JS的DOM操作-综合
01-显示和隐藏
这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<img class="icon" src="images/img_02.jpg">
<p name="word">我是一张图片</p>
<br>
<button id="btn">隐藏</button>

<script type="text/javascript">
    // 拿到所有的标签
    var img = document.getElementsByClassName('icon')[0];
    var p = document.getElementsByName('word')[0];
    var btn = document.getElementById('btn');
   // 监听点击事件
    btn.onclick = function(){
       if(btn.innerHTML == '隐藏'){
           img.style.display = 'none';
           p.style.display = 'none';
           btn.innerHTML = '显示';
       }else{
           img.style.display = 'inline-block';
           p.style.display = 'block';
           btn.innerHTML = '隐藏';
       }

    }

</script>
</body>
</html>

02-倒计时
这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        img{
            display: none;
        }
        p{
            display: none;
        }

        div{
            font-size: 200px;
            color: red;
        }
    </style>
</head>
<body>
 <img id="icon" src="images/flower.jpg">
 <p class="word">我对你的爱如滔滔江水.....</p>
 <div>5</div>

 <script type="text/javascript">
    // 拿到对应的标签
    var img = document.getElementById('icon');
    var p = document.getElementsByClassName('word')[0];
    var div = document.getElementsByTagName('div')[0];

     // 倒计时
    var timer = setInterval(function(){
        // 让div中的值每隔一秒-1
         div.innerHTML -= 1;
       // 判断
         if(div.innerHTML == '0'){
             // 清除计时器
             clearInterval(timer);
             // 隐藏div
             div.style.display = 'none';
             // 显示鲜花和文字
             img.style.display = 'inline-block';
             p.style.display = 'block';
         }

     }, 1000);

 </script>
</body>
</html>

03-上下切换图片
这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
 <img src="images/icon_01.png">
 <p></p>
 <button>上一张</button>
 <button>下一张</button>

<script type="text/javascript">
   // 拿到对应的标签
    var img = document.getElementsByTagName('img')[0];
    var pre = document.getElementsByTagName('button')[0];
    var next = document.getElementsByTagName('button')[1];

   // 定义变量
   var maxImgCount = 9;
   var minImgCount = 1;
   var currentCount = minImgCount;

   // 上下切换图片
   // 向上
    pre.onclick = function(){
       if(currentCount == minImgCount){
           currentCount = maxImgCount;
       }else{
           currentCount --;
       }
       img.src = 'images/icon_0'+currentCount+'.png';
       console.log(img.src);
    }

   // 向下
    next.onclick = function(){
        if(currentCount == maxImgCount){
            currentCount = minImgCount;
        }else{
            currentCount ++;
        }
        img.src = 'images/icon_0'+currentCount+'.png';
        console.log(img.src);
    }
</script>
</body>
</html>

四、JS的CRUD（增删改查）
index.js

    // DOM的CRUD

// c 创建create

// 1.直接往body中动态的添加标签(可以是任意类型)
    document.write('helloWorld');
    document.write('<img src="image/img_01.jpg">');

// 2. 创建一个新的标签,然后插入到body中任意的一个标签中 appendChild
    var div = document.createElement('div');
    div.style.background = 'red';
    div.style.width = '500px';
    div.style.height = '300px';
    // 添加到父标签
    document.body.appendChild(div);

    // 往div中插入一张图片
    var img = document.createElement('img');
    img.src = 'image/img_02.jpg';
    div.appendChild(img);

    // 拿到p标签
    var img1 = document.createElement('img');
    img1.src = 'image/img_03.jpg';

    var p = document.getElementById('word');
    p.appendChild(img1);


// 删除有3种方式: 1. 直接用body进行删除,但是只能作用于直接子标签
//              2. 拿到当前标签的父标签,再来删除
//              3. 直接拿当前的标签,调用 remove()方法.

//   document.body.removeChild(p);
    // 拿到当前标签的父标签,再来删除
//     p.parentNode.removeChild(p);
    // 3
//      p.remove();



// 改  拿到对应的标签,做出改变...



// 查
// 第一种方式:
//     document.getElementsByClassName();
//     document.getElementsByName();
//     document.getElementsByTagName();
//     document.getElementById();
// (注意:id返回一个值,其他的都是返回数组)


// 第二种方式:遍历标签内部的内容

//   find(document.body);
//
//   function find(object){
//      for(var i in object){
//          console.log(object[i]);
//      }
//   }

  console.log(document.body.childNodes);

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <!--<script type="text/javascript" >-->
        <!--alert(0);-->
    <!--</script>-->


</head>
<body>
  <p id="word"></p>

  <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

五、Canvas画布
01-绘制直线
这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绘制直线</title>
</head>
<body>
<!--创建画板-->
<canvas id="canvas" style="border: 1px solid #ddd">当前版本过低,请升级您的浏览器版本!</canvas>

<script type="text/javascript">
    // 拿到对应的画板
    var canvas = document.getElementById('canvas');
    canvas.width = 900;
    canvas.height = 600;
   // 拿到上下文
    var context = canvas.getContext('2d');
    context.lineWidth = 5;

    context.beginPath();
    context.strokeStyle = 'red';
    //起点
    context.moveTo(100,100);
    context.lineTo(400,100);
    context.closePath();
    // 绘制
    context.stroke();

    // 再来一条直线
    context.beginPath();
    context.strokeStyle = 'blue';
    context.moveTo(250,20);
    context.lineTo(250,320);
    context.closePath();
    context.stroke();
</script>
</body>
</html>

02-绘制面
这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绘制面</title>
</head>
<body>
<!--创建画板-->
<canvas id="canvas" style="border: 1px solid #ddd">当前版本过低,请升级您的浏览器版本!</canvas>

<script type="text/javascript">
    // 拿到对应的画板
    var canvas = document.getElementById('canvas');
    canvas.width = 900;
    canvas.height = 600;
    // 拿到上下文
    var context = canvas.getContext('2d');
    // 状态开始
    context.beginPath();
    context.strokeStyle = 'red';
    context.fillStyle = 'yellow';
    context.lineWidth = 5;
    context.moveTo(100, 100);
    context.lineTo(200, 300);
    context.lineTo(400, 100);
    context.lineTo(100, 100);
    context.closePath();
    // 绘制
    context.stroke();
    // 填充
    context.fill();

    // 绘制长方形
    context.beginPath();
    context.strokeStyle = 'blue';
    context.fillStyle = 'yellow';
    context.lineWidth = 10;
    context.moveTo(300,300);
    context.lineTo(600,300);
    context.lineTo(600,500);
    context.lineTo(300,500);
    context.lineTo(300,300);
    context.closePath();
    context.stroke();
    context.fill();
</script>
</body>
</html>

03-绘制弧线
这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--创建画板-->
<canvas id="canvas" style="border: 1px solid #ddd">当前版本过低,请升级您的浏览器版本!</canvas>

<script type="text/javascript">
    // 拿到对应的画板
    var canvas = document.getElementById('canvas');
    canvas.width = 900;
    canvas.height = 600;
    // 拿到上下文
    var context = canvas.getContext('2d');
    context.strokeStyle = 'red';
    context.lineWidth = 5;
    context.arc(100, 100, 60, 0, 0.5*Math.PI, true);
    // 绘制
    context.stroke();
</script>
</body>
</html>

04-批量绘制弧线
这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--创建画板-->
<canvas id="canvas" style="border: 1px solid #ddd">当前版本过低,请升级您的浏览器版本!</canvas>

<script type="text/javascript">
    // 拿到对应的画板
    var canvas = document.getElementById('canvas');
    canvas.width = 1000;
    canvas.height = 600;

    // 拿到上下文
    var context = canvas.getContext('2d');
    context.strokeStyle = 'green';
    context.lineWidth = 5;
    for(var i=0; i<10; i++){
      context.beginPath();
      context.arc(100*i, 100, 40, 0, 2.0 * Math.PI *(i+1)/10);
//      context.closePath();
      context.stroke();
    }

        context.fillStyle='red';
    for(var i=0; i<10; i++){
        context.beginPath();
        context.arc(30*i, 200, 40, 0, 2.0 * Math.PI *(i+1)/10);
//      context.closePath();
        context.stroke();
        context.fill();
    }
</script>
</body>
</html>

05-奥运五环
这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--创建画板-->
<canvas id="canvas" style="border: 1px solid #ddd">当前版本过低,请升级您的浏览器版本!</canvas>

<script type="text/javascript">
    // 拿到对应的画板
    var canvas = document.getElementById('canvas');
    canvas.width = 1000;
    canvas.height = 600;

    // 拿到上下文
    var context = canvas.getContext('2d');
    context.lineWidth = 5;
    var arrColor = ['red', 'green', 'blue', 'yellow', 'black'];
    for(var i=0; i<5; i++){
        context.beginPath();
        context.strokeStyle = arrColor[i];
        context.arc(150+100*i, 100, 70, 0, 2.0*Math.PI);
        context.closePath();
        context.stroke();
    }
</script>
</body>
</html>

六、Tab选项卡
这里写图片描述

index.css

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{
  padding: 0px;
  margin: 0px;
}

a{
    text-decoration: none;
    color: black;
}

ul{
    list-style: none;
}

.tab{
    width: 498px;
    height: 130px;
    margin: 30px;
    border: 1px solid #ddd;
    overflow: hidden;
}

.tab .tab-head{
    height: 36px;
    position: relative;
    background-color: #F7F7F7;
}

.tab .tab-head ul{
    position: absolute;
    width: 501px;
    left: -1px;
}

.tab .tab-head li{
    float: left;
    width: 98px;
    height: 36px;
    background-color: #F7F7F7;
    line-height: 36px;
    border-bottom: 1px solid #ddd;
    padding: 0 1px;
    text-align: center;
    overflow: hidden;
}

.tab .tab-head li a:hover{
    color: #F90;
}

.tab .tab-head li.select{
    background-color: #FFF;
    border-bottom-color:#FFF;
    border-left:1px solid #eee;
    border-right:1px solid #eee;
    padding: 0px;
    font-weight: bolder;
}

.tab .mod{
    margin: 10px 6px;
    display: none;
}

.tab .mod ul li{
    float: left;
    width: 239px;
    height: 35px;
    overflow: hidden;
}

index.js

//function $(id){
//    return typeof  id === 'string' ? document.getElementById(id) : id;
//}
//
//window.onload = function(){
//   // 获取鼠标滑过的标签
//   var titles = $('tab-head').getElementsByTagName('li');
//   var divs = $('nav-con').getElementsByTagName('div');
//   if (titles.length != divs.length) return;
//   // 遍历titles下所有的li
//    for(var i = 0; i < titles.length; i++){
//       titles[i].id = i;
//       titles[i].onclick = function(){
//          for(var j=0; j<titles.length; j++){
//              titles[j].className = '';
//              divs[j].style.display = 'none';
//          }
//           this.className = 'select';
//           divs[this.id].style.display = 'block';
           alert(this.id);
//       }
//    }
//
//}

//   $(id) --->  document.getElementById(id)
function $(id){
   return typeof id === 'string' ? document.getElementById(id):id;
}


window.onload = function(){
   // 拿到所有的li(标题) 以及 li对应内容的div
    var titles = $('tab-head').getElementsByTagName('li');
    var divs = $('nav-con').getElementsByTagName('div');
    // 判断
    if(titles.length != divs.length) return;
    // 遍历所有的li,然后监听鼠标移动事件
    for(var i = 0; i < titles.length; i++){
        var li = titles[i];
        li.id = i;
        li.onmouseover = function(){
           for(var j=0; j<titles.length; j++){
             titles[j].className = '';
             divs[j].style.display = 'none';
           }
            //  一定要用this
           this.className = 'select';
           divs[this.id].style.display = 'block';
        }
    }
};

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Tab选项卡</title>
    <link href="css/index.css" rel="stylesheet">
    <script src="js/index.js" type="text/javascript"></script>
</head>
<body>
   <div id="tab" class="tab">
       <div id="tab-head" class="tab-head">
           <ul>
               <li class="select"><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 id="nav-con" class="nav-con">
           <div class="mod" style="display: block;">
               <ul>
                   <li>
                       <a href="#">数据七夕:金牛爱送玫瑰</a>
                   </li>
                   <li>
                       <a href="#">阿里打造"互联网监管"</a>
                   </li>
                   <li>
                       <a href="#">10万家店60万新品</a>
                   </li>
                   <li>
                       <a href="#">全球最大网上时装周</a>
                   </li>
               </ul>
           </div>
           <div class="mod">
               <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="mod">
               <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="mod">
               <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="mod">
               <!--<img src="images/icon_01.png">-->
               <!--<img src="images/icon_02.png">-->
               <ul>
                   <li>
                       <a href="#">为了公益high起来</a>
                   </li>
                   <li>
                       <a href="#">魔豆妈妈在线申请</a>
                   </li>
               </ul>
           </div>
       </div>
   </div>

</body>
</html>