花瓣网

运行效果

知识点及部分代码

1. 一般用id做js操作，用class做样式。

2. box-shadow阴影效果.

3. 块级标签水平居中：

   margin：0 auto
   

4. 块级标签垂直居中：

   line-height: 28px;
   

5. input去掉点击后的边框

   outline: none;
   

6. resize 属性规定是否可由用户调整元素的尺寸。

7. linear-gradient() 函数用于创建一个线性渐变的 “图像”。

   background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
   direction	用角度值指定渐变的方向（或角度）。
   color-stop1, color-stop2,...	用于指定渐变的起止颜色。
   

8. font-weight设置字体的粗细

9. line-height: 130px; 垂直居中
   text-align: center; 水平居中

10. 高级排他：记录lastOne的下标

    function tab() {
        // 1. 获取需要的标签
        var allLis = myTool.$("tab_header").getElementsByTagName("li");
        var doms = myTool.$("tab_content").getElementsByClassName("dom");
        var lastOne = 0;
        // 2. 遍历接听
        for (var i = 0; i < allLis.length; i++) {
            var li = allLis[i];
            (function (index) {
                li.addEventListener("mouseover",function (evt) {
                    // 1. 清除样式
                    allLis[lastOne].className = "";
                    doms[lastOne].style.display = "none";
                    // 2. 设置选中
                    this.className = "current";
                    doms[index].style.display = "block";
                    // 3. 赋值
                    lastOne = index;
                })
            })(i);
        }
    }
    

11. word-wrap 属性允许长单词或 URL 地址换行到下一行。

    word-wrap: normal|break-word;
    
    normal	只在允许的断字点换行（浏览器保持默认处理）。
    break-word	在长单词或 URL 地址内部进行换行。
    

12. 做瀑布流的时候，先做好一个盒子，然后不断往父盒子里加入相同的子盒子就可以。

    for (var i = 0; i < 30; i++) {
        // 1.2.1 获取父标签文本
        str = myTool.$("dom_pull").innerHTML;
        // 1.2.2 取出图片地址和文字
        txt = json[i].txt;
        pic = json[i].pic;
    
        // 1.2.3 创建字标签
        htmlStr = "
    " +
            "
    " +
            "+ pic +" alt=''>" +
            "
    " +
            "
    " +
            "
    "+ txt +"
    " +
            "
    " +
            "采集" +
            "" +
            "" +
            "" +
            "
    " +
            "
    "
        // 1.2.4 拼接
        str += htmlStr;
        myTool.$("dom_pull").innerHTML = str;
    }
    

13. 轮播与普通轮播不同，知识改变图片的透明度

代码

结合轮播图、瀑布流等实现花瓣网首页