完整项目代码

运行效果

知识点及部分代码

一般用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;
}

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

代码

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

实战HTML：花瓣网相关推荐

python批量读取图片并批量保存_Python爬虫：批量抓取花瓣网高清美图并保存
原标题:Python爬虫:批量抓取花瓣网高清美图并保存昨天看到了不错的图片分享网--花瓣,里面的图片质量还不错,所以利用selenium+xpath我把它的妹子的栏目下爬取了下来,以图片栏目名称给文 ...
python花瓣飘零_Python爬虫练习之花瓣网
花瓣网是个瀑布式布局,而且下拉的时候发现要登录帐号.本来以为要用requests.post模拟登录,能够顺手练习一下的,结果不登陆帐号也照样可以爬取.一开始是打算用selenium的,后来运行的过程中 ...
Python 爬虫: 抓取花瓣网图片
接触Python也好长时间了,一直没什么机会使用,没有机会那就自己创造机会!呐,就先从爬虫开始吧,抓点美女图片下来. 废话不多说了,讲讲我是怎么做的. 1. 分析网站想要下载图片,只要知道图片的地址 ...
浙江网信办处置44家违规网站包含网易游戏、花瓣网等
[TechWeb]3月27日消息,据"扫黄打非"官微发布的消息,今年以来,浙江省网信办集中处置44家违法违规网站,其中,约谈存在不良信息的"网易游戏"" ...
花瓣网方砖布局图片内容无限加载用户体验才是王道
jquery特效制作目前用户体验设计比较受欢迎的pinterest和花瓣网的图片内容无限加载,方砖式的布局方式.用jquery Masonry插件制作当鼠标拖动滚动条时图片和内容数据无限滚动加载,直到 ...
android 点击查看大图_你是不是遇到，在花瓣网部分图片详情页，点击“放大镜”无法预览高清大图？...
大家好,此篇文章您可以花 3 分钟学习到:如何借助率叶插件,恢复花瓣网图片详情页预览高清大图. 新品推送:这是什么神仙功能,尽然可以在Photoshop里上花瓣网.站酷.阿里图标等网站! 2020-0 ...
福利来啦！花瓣网图片批量下载助手APP终于完工，再也不用一张一张保存美图了。
废话不说,直入主题. 学习IOS开发不久,这是我做的第一个个人APP,分享给和我一样喜欢收藏花瓣美图的朋友. 主要功能:批量下载花瓣网画板所有原始图片.(不是缩略图哦) 安装平台:越狱iphone,i ...
仿花瓣网html模板,仿花瓣网的自动悬浮导航效果 jquery
仿花瓣网的自动悬浮导航效果 body, h1, ul { margin:0; } ul li { list-style-type:none; } #header { width:100%; borde ...
Python爬虫练习之花瓣网
前两天写的花瓣网爬虫,花瓣网是个瀑布式布局,而且下拉的时候发现要登录帐号.本来以为要用requests.post模拟登录,能够顺手练习一下的,结果不登陆帐号也照样可以爬取.一开始是打算用seleniu ...
Python 花瓣网动态爬虫
好久没有写爬虫了,之前只是止步于爬取静态网页,于是准备找个简单的动态网页进行爬取,在学长的建议下,进军花瓣网. 首先在爬取图片之前肯定要对网页源码进行分析这里可以使用chrome的F12开发人员工具 ...

实战HTML：花瓣网

完整项目代码

运行效果

知识点及部分代码

代码

实战HTML：花瓣网相关推荐

最新文章

热门文章