前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >分享一个超好看回忆相册(代码自取)

分享一个超好看回忆相册(代码自取)

作者头像
天寒雨落
发布2022-11-20 10:25:24
6240
发布2022-11-20 10:25:24
举报
文章被收录于专栏:编程学习之路编程学习之路

目录

前言

正文

部分代码

单面截图

更改文档标题

更改图片

更改文字

源码


前言

Calabash Brothers

《葫芦兄弟》(又名:葫芦娃),是上海美术电影制片厂于1985-1987年原创出品的13集系列剪纸动画片,是中国动画第二个繁荣时期的代表作品之一,至今已经成为中国动画经典。讲述7只神奇的葫芦,7个本领超群的兄弟,为救亲人前赴后继,展开了与妖精们的周旋。

赠语

 童年就像是时间火车的车厢,直到火车驶向远方,就成了长大时对童年的追忆。童年就像是一段美好时光,而这,人生却只有一次,那是多么宝贵啊!童年就像是透明的水珠,当它到了哪个角落,就绝对不可能再还原。

正文

部分代码

代码语言:javascript
复制
<body>
<div class="slider">
  <div class="slider__slide slider__slide--active" data-slide="1">
    <div class="slider__wrap">
      <div class="slider__back"></div>
    </div>
    <div class="slider__inner">
      <div class="slider__content"> <a class="go-to-next">
        <h1>下一张<br>
          相册一</h1>
        <p style="color: red; font-size:36px;">1986</p></a> </div>
    </div>
  </div>
  <div class="slider__slide" data-slide="2">
    <div class="slider__wrap">
      <div class="slider__back"></div>
    </div>
    <div class="slider__inner">
      <div class="slider__content"> <a class="go-to-next">
        <h1>下一张<br>
          相册二</h1>
          <p style="color: blue; font-size:36px;">1986</p></a> </div>
    </div>
  </div>
  <div class="slider__slide" data-slide="3">
    <div class="slider__wrap">
      <div class="slider__back"></div>
    </div>
    <div class="slider__inner">
      <div class="slider__content"> <a class="go-to-next">
        <h1>下一张<br>
          相册三</h1>
          <p style="color:green; font-size:36px;">1986</p></a> </div>
    </div>
  </div>
  <div class="slider__slide" data-slide="4">
    <div class="slider__wrap">
      <div class="slider__back"></div>
    </div>
    <div class="slider__inner">
      <div class="slider__content"> <a class="go-to-next">
        <h1>下一张<br>
          相册四</h1>
          <p style="color:salmon; font-size:36px;">1986</p></a> </div>
    </div>
  </div>
  <div class="slider__slide" data-slide="5">
    <div class="slider__wrap">
      <div class="slider__back"></div>
    </div>
    <div class="slider__inner">
      <div class="slider__content"> <a class="go-to-next">
        <h1>下一张<br>
          相册五</h1>
          <p style="color:purple; font-size:36px;">1986</p></a> </div>
    </div>
  </div>
  <div class="slider__indicators"></div>
</div>
<script src='../biaobai_xiangcePPT/js/jquery.1.7.1.min.js'></script> 
<script src="../biaobai_xiangcePPT/js/index.js"></script>
</audio>
</div>
</body>

 单面截图

更改文档标题

代码语言:javascript
复制
<title>回忆相册</title>

浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样,当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。

把“回忆相册”换成你喜欢的标题 

更改图片

将键盘所指的图片路径换位你要用图片的路径,你能选的图片无非就两种第一种网图(右键复制图像链接) 第二种本地图片,将该html文件和图片放到同一文件夹里那么路径就是./加图片的文件名,./的意思就是当前目录

特别注意:图片板式要是横版的,不然不好看,推荐尺寸1920px-1200px

更改文字

 以第一张举例,红色箭头指的是上面大一点的白色字体,这个不是很建议更改

蓝色箭头指的是下面的小字,因为葫芦娃是1986年上海美术电影制片厂出品动画片,所以我加的是1986,如果你是送给girl friend 那么下面可以写女朋友的名字或5201314等

字体的颜色在color:red,把red换成你想换的字体颜色

字体大小在font-size:36px;嫌字体小了,把数值调大点,同理,嫌大了,调小点

源码

http://t.csdn.cn/LhnnR

👍+✏️+⭐️是对博主最大的鼓励与支持!!!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-11-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 正文
    • 部分代码
      •  单面截图
        • 更改文档标题
          • 更改图片
            • 更改文字
              • 源码
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档