实战HTML：花瓣网

原创

KaiSarH 2022-03-10 11:06:36 博主文章分类：实战 ©著作权

文章标签 html json i++ C 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者KaiSarH的原创作品，请联系作者获取转载授权，否则将追究法律责任

完整项目代码

运行效果

实战HTML：花瓣网_C
实战HTML：花瓣网_html_02
实战HTML：花瓣网_json_03

知识点及部分代码

一般用id做js操作，用class做样式。
box-shadow阴影效果.
块级标签水平居中：
```
margin：0 auto
```
块级标签垂直居中：
```
line-height: 28px;
```
input去掉点击后的边框
```
outline: none;
```
resize 属性规定是否可由用户调整元素的尺寸。

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

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

font-weight设置字体的粗细
line-height: 130px; 垂直居中
text-align: center; 水平居中

高级排他：记录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);
    }
}

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

word-wrap: normal|break-word;

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

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

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 = "<div class='box'>" +
        "<div class='pic'>" +
        "<img src="+ pic +" alt=''>" +
        "<div class='cover'></div>" +
        "</div>" +
        "<p>"+ txt +"</p>" +
        "<div class='btn-box'>" +
        "<a href='' class='collect'>采集</a>" +
        "<a href='' class='like'>" +
        "<span class='heart'></span>" +
        "</a>" +
        "</div>" +
        "</div>"
    // 1.2.4 拼接
    str += htmlStr;
    myTool.$("dom_pull").innerHTML = str;
}