文章标题

最新推荐文章于 2022-08-04 15:18:28 发布
最新推荐文章于 2022-08-04 15:18:28 发布
阅读量323 收藏
点赞数
分类专栏： html5 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012260672/article/details/49686547
版权

一个简单实用的手风琴效果

<!DOCTYPE html>
<head>
<meta charset="gb2312"/>
<title></title>
<style>
*{padding:0;margin:0;}
.img{width:600px;height:320px;background:#000;}
.img1{background:red;}
.img2{background:green;}
.img3{background:blue;}
.img4{background:orange;}
.img5{background:orangered;}
#box{width:805px;height:320px;margin:100px auto;overflow:hidden;
box-shadow:0 0 10px 1px rgba(0,0,0,0.35);}
#box ul li{float:left;list-style:none;width:160px;position:relative;
-webkit-transition:all .7s;-moz-transition:all .7s;-ms-transition:all .7s;
-o-transition:all .7s;border-left:1px solid #ccc;}
.title{color:#fff;font-size:20px;width:600px;background:rgba(0,0,0,0.5);
position:absolute;bottom:0;left:0;height:50px;line-height:50px;}
#box:hover li{width:50px;}
#box li:hover{width:600px;}
.circle{position:absolute;width:100px;height:100px;background:rgba(0,0,0,0.5);
border-radius:100%;margin:0 auto;}
</style>
</head>
<body>
<div id="box">
 <ul>
  <li>
   <a href=""><div class="img1 img"></div></a>
   <div class="title">标题1</div>
  </li>

  <li>
   <a href=""><div class="img2 img"></div></a>
   <div class="title">标题2</div>
  </li>

  <li>
   <a href=""><div class="img3 img"></div></a>
   <div class="title">标题3</div>
  </li>

  <li>
   <a href=""><div class="img4 img"></div></a>
   <div class="title">标题4</div>
  </li>

  <li>
   <a href=""><div class="img5 img"></div></a>
   <div class="title">标题5</div>
  </li>

 </ul>
</div>
</body>
</html>

1，主要知识点：
css3的transition属性，transition:all .65s;
rgba(0,0,0,0.5);
2,主要掌握计算盒子的总宽度和各个li的宽
800=600+4*50；
ul:hover li{width:50px;}
ul li:hover{width:600px;}
3，其他的效果我们可以自己发挥添加，比如字体，颜色，动画，其他的效果等，主要是把框架写出来

诸葛苍穹
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用POI生成文章标题
Cloud的专栏
09-24 7223
生成文章标题有两种方式，一种是自定义标题，还有一种是使用现有样式来生成，现在网上大部分是第一种方式，但这种方式有很多弊端，我们先来看第一种 第一步，引入依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>3.9</version> </dependency>
火车头插件：根据文章标题生成图片；标题生成相关配图
qq_26057339的博客
05-12 1755
本插件可以根据文章标题自动配图；根据文章标题生成一张好看的插图； 插件售价200；不限制ip,不限域名。一次购买终身使用。 没有第三方接口的调用不用担心插件失效。 插件效果： 插件优势： 用户可以自定义文字的颜色 用户可以自定义文字的大小 用户可以自定义图片背景 用户可以自定义图片格式 用户可以自定义图片储存的目录 用户可以自定义图片在文章哪个位置插入 插件分为 火车头插件和服务器接口： 服务器接口负责处理图片和储存图片； 火车头插件处理文章内容 服务器插件有运行环境要求 php 版本低于
python爬虫爬取微信公众号的阅读数、喜爱数、文章标题和链接等信息
weixin_46569877的博客
08-04 9623
python爬取微信公众号
爬虫中教你如何爬取自己喜欢博主所写文章标题及网址
qq_52262831的博客
11-23 2797
每日分享： 怎么判断一个人是否合适呢？我觉得，一个合适的人会让你看到和得到全世界，而一个不合适的人会让你失去全世界 博主页面例如下： 1. 在该页面抓包，并找到如下包： 2. 复制它的网址url，观察每一页的网址，发现url的前面都一样，就最后的数字不同；并复制user-agent，请求为get请求。 3. 找到网页中的a标签（包括title和link），方便抓取标题和链接： 注意：本来应该40个结果，而text()之后有80个（如下图）：（所以爬虫代码中列表索引为1，（0没有内..
如何利用Python爬虫爬取博主的全部文章的标题，文章标题的URL。可根据阅读量进行降序输出！
HWP
12-21 3841
步履艰辛呀！自己不会做网络爬虫，只好去找教程例子！ 当然自己也是有点小基础的！只是会读取简单的HTML网页代码！ 对于这么复杂的代码，驾驭不住呦~ 多个代码类型。我会分别列取出来的。 如果是代码的原作者，看到请联系我。我会标明来源地址的！ 前言： 但是无论是谁的主页，都会出现这个人的主页。 已经有好多人都爬取到啦！ 我爬取的所有链接的部分链接： 但是，这个链接：https://blog.csdn...
Java爬虫之爬取多篇含有关键词的文章标题和内容
hell_orld的博客
11-19 2152
Java爬虫之爬取多篇含有关键词的文章标题和内容实现的功能需要用到的jar包需要对html一些标签有一定的了解代码设计思想源代码 实现的功能 该代码针对维科网写的爬虫，具体如果想写其它的可以照着这篇模仿来写！ 输入想要搜索的关键字和输入关键字后的前几页页数（即输入关键字后跳转的网页的页数，如下图） 将包含关键字的文章标题和内容提取出来保存在一个txt文件里面（如下图，输入关键词为智能，前2页） 需要用到的jar包 获取文章信息需要的包：Jsoup； 需要对html一些标签有一定的了解 可以到w3cs
python爬虫之爬取多篇含有关键词的文章标题和内容优化
hell_orld的博客
09-15 3536
python爬虫之爬取多篇含有关键词的文章标题和内容优化需要和前篇联系起来实现的功能代码设计思想源代码 需要和前篇联系起来 python爬虫之爬取多篇含有关键词的文章标题和内容 实现的功能 爬取多个关键字的文章标题和内容（将要爬取的关键词放在一个数组中，通过for进行遍历），并且每个关键字创建一个文件夹，每篇文章放在独自一个txt文件里面，运行结果（自己调试时，只设置页面为2，数组为两个）： 代码设计思想 可以观看前面那篇python爬虫之爬取多篇含有关键词的文章标题和内容 ，因为这篇代码是对上一篇的
标题生成图片插件(火车头采集器：根据文章标题生成相关图片)
qq_26057339的博客
06-12 1250
本插件可以根据文章标题自动配图；根据文章标题生成一张好看的插图；根据标题生成图片,文章页自动配标题配图,避免版权问题 插件分为 火车头插件和服务器接口： 下载地址：https://xiaowangtx.cn/post/54.html......
【Python】简单爬虫抓取知乎专栏文章标题和链接、存储进CSV
memcpy0的博客
08-18 3728
文章目录 今天突发奇想，想要爬取一下知乎专栏文章的标题和链接，看看某个作者到底在这大几百几千篇文章中写了什么。
RiPro主题文章标题美化教程 WordPress美化教程
03-02
/*文章标题优化*/ .sjblog-avatar {  width: 50px;  float: left; } .sjblog-avatar img {  float: left;  width: 50px;  border-radius: 50%;  margin-right: 20px; } .sjblog-tgroup{ ...
Wordpress自定义函数控制文章标题长度
09-29
主要为大家介绍了Wordpress自定义函数控制文章标题长度,需要的朋友可以参考下
Python3 文章标题关键字提取的例子
01-20
1.读取所有文章标题； 2.用“结巴分词”的工具包进行文章标题的词语分割； 3.用“sklearn”的工具包计算Tf-idf（词频-逆文档率）; 4.得到满足关键词权重阈值的词 结巴分词详见：结巴分词Github sklearn详见：文本...
PHPCMS内容页文章标题添加页码的方法教程
09-29
如何让PHPCMS的内容页标题显示页码呢？让每篇文章的标题都不一样，这样不但提高了网页体验率，同时也可以达到SEO优化的效果，让百度、谷歌等多收录一些。
html5九宫格布局
诸葛苍穹
03-18 9548
<!DOCTYPE html> <html> <head> <title>html5响应式九宫格</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,height=device-height,inita
SVG:linearGradient渐变在直线上失效的问题解决方案
诸葛苍穹
07-03 3028
SVG:linearGradient渐变在直线上失效的问题解决方案 SVG开发里有个较为少见的问题。 对x1=x2或者y1=y2的直线（line以及path），比如： &lt;path d="M200,10 200,100" stroke="url(#orange_red)"/&gt; 如果，stroke里使用的是渐变效果，那么，在各种浏览器上都会出现同一个BUG，这条线消失了。 原因不...
canvas把SVG渲染成图片
诸葛苍穹
12-02 1686
canvas把SVG渲染成图片<script type="text/javascript" src="http://canvg.github.io/canvg/rgbcolor.js"></script> <script type="text/javascript" src="http://canvg.github.io/canvg/StackBlur.js"></script> <script
文本域字数统计
诸葛苍穹
10-20 1188
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> textarea{ width: 20%; resize: none; border: 1px so
wordpress 改写文章标题
最新发布
03-20
您可以使用以下代码来改写 WordPress 文章标题： function custom_title( $title ) { $new_title = '新标题'; return $new_title; } add_filter( 'the_title', 'custom_title' ); 将“新标题”替换为您想要的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值