学习分享：JavaScript实现网页版阅读器

现在手机上的文本阅读app已经非常丰富，良好的阅读体验与海量的书库常常令我感到无比兴奋。

我想到8年前用一点几寸屏幕的mp3看电子书的情景，顿生一种淡淡的温馨。再久远一些，小的时候，我也经常和小伙伴们组团去书店看白书，也就是白看书。古老的木质书架上那一叠叠厚重的黄皮小说书，在年幼的我眼里仿佛是比盘子里的午餐肉更加美味可口的东西。

而在当今这个信息化的时代，看书变得空前的便利，可是儿时那种期待和兴奋的感受却消失在了时间的长河。

岁月在流逝，时代在进步。

愿放下所有的浮躁，在新的时代愉快地生活，无所谓明天怎样，我都相信肯定比今天更好。

本文以一个网页版阅读器作为案例，展示JavaScript中，对滚动条的一些处理，这是完成以后的样子：

当我滚动条往上滚动的时候，屏幕右下角会出现一个向上的箭头：

而往下滚动的时候，又自动消失。

当我点击这个半透明的箭头按钮，就会自动滑动到章节的最顶端。

本章就实现这个小功能。

开发工具：HBuilder（个人喜欢，顺从潮流放弃了使用大半年的EditPlus，不过EditPlus确实锻炼了我拼写单词的能力）

测试环境：谷歌浏览器

正文

1. 页面布局与绘制

我们写一个基本的html模板

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>TextReader</title>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 
 <style type="text/css">
 *{
 padding: 0;
 margin: 0;
 }
 </style>
 </head>
 <body>
 
 </body>
</html>

接着，我们把背景图片引入进来（尺寸略有调整）：

body{
 background: url(bg.jpg) no-repeat;
 background-size: 100%;
}

我们先写一个div，作为盛放整个手机的父容器。

在它的css样式中，我们做了居中定位（水平）。

.phone {
 width:322px ;
 height:550px; 
 position:relative;
 left:35%;
 top:35px;
 background: #66CC00;
}
<div class='phone'></div>

接下来，引入上下两端的样式图片。

其实，手机的顶部和底部就是两张图片：

我们先把顶部图片引入进来，在引入图片之前，先画两个div来盛放图片。

<body>
 <div class='phone'>
 <div class='phone_top'></div>
 
 <div class='phone-bottom'></div>
 </div>
</body>

然后，通过背景图的方式把图片贴进来。

.phone .phone_top {
 background: url(phone_top.png);
 height:42px;
}
.phone .phone-bottom {
 background: url(phone_bottom.png);
 position: absolute;
 height: 42px;
 width: 100%;
 bottom: 0;
}

这样一来，一个手机的大概模子就出来了，接下来，我们把屏幕区域加上去。

.phone .container{
 overflow-x: hidden;
 overflow-y: auto;
 width:90%;
 background:#ccc;
 height:456px;
 font-size:14px;
 text-align:left;
 background:#dcf3dc;
 font-family:微软雅黑;
 color:#555;
 line-height:28px;
 padding:16px;
 text-indent: 2em;
 padding: 16px 16px 0px 16px;
}
<body>
 <div class='phone'>
 <div class='phone_top'></div>
 <div class='container'></div>
 <div class='phone-bottom'></div>
 </div>
</body>

OK，现在可以把父容器的背景色给去掉了。

background: #66CC00; //去掉

为了把手机模型做得更像一点，我们手动给它加一个按钮，额，就手动画一个吧。

.back {
 width: 30px;
 height: 30px;
 position: absolute;
 left: 50%;
 margin-left: -15px;
 border: 2px solid #c7bcbc;
 top: 4px;
 border-radius: 50%;
}
<div class='phone-bottom'>
 <span class='back'></span>
</div>

虽然span是行内元素，但是因为我们给它设置了 position: absolute ，所以宽度和高度依然是起作用的。

我也是在写这个案例的时候无意中发现的，我以前一直以为需要手动给行内元素升级为块级元素才行。

这样，我们的页面布局差不多久完成啦。

2. 文字部分设计与美化

接下来，我们给阅读器模拟一些数据。

<body>
 <div class='phone'>
 <div class='phone_top'></div>
 <div class='container'>
 <h4>刀剑神域 </h4>
 <p>
 在一群好奇心旺盛的高手花了整整一个月测量后，发现最底层区域的直径大约有十公里，足以轻松容纳下整个世田谷区。再加上堆积在上面百层左右的楼层，其宽广的程度可说超乎想像。整体的档案量大到根本无法测量。 这样的空间内部有好几个都市、为数众多的小型街道与村落、森林和草原，甚至还有湖的存在。而连接每个楼层之间的阶梯只有一座，阶梯还都位于充斥怪物的危险迷宫区域之中，因此要发现并通过阶梯可以说是相当困难。但只要有人能够突破阻碍抵达上面的楼层，上下层各都市的「转移门」便会连结起来，人们也就可以自由来去两个楼层之间。
 </p>
 <p>
 经过两年的时间，这个巨大城堡就这样被逐渐地往上攻略，目前已到达第七十四层。城堡的名称是「艾恩葛朗特」。这座持续飘浮在空中、吞噬了将近六千人，充满着剑与战斗的世界。它的另一个名字是——SwordArtOnline刀剑神域」。闪烁着深灰色光芒的剑尖，浅浅地划过我的肩膀。 那固定显示在视线左上角的细长横线，好不容易缩短了长度。同时，似乎有只冰冷的手掌，抚摸过我胸口深处。 
 </p>
 <p>
 横线——那称为HP条的蓝色条状物，可以看出我的生命残值。虽然它还有八成左右的残值，但不能把事情看得太过于乐观。因为相对来说，我已经朝死亡深渊前进了两步。 在敌人的剑再度进入攻击动作之前，我就先往后跳开一大步，以保持与敌人之间的距离。 
 </p>
 <p>「呼……」 
 </p>
 <p>硬是吐了一大口气来调整一下气息。在这个世界的「身体」虽然不需要氧气，但在另一边，也就是躺在真实世界里的真正身体，现在呼吸应该非常剧烈。而随意摆放的手应该正流着大量冷汗，心跳也加速到破表了吧。 </p>
 
 <p>这也是理所当然的事。就算我眼前所见全部都是虚拟的立体影像对象，减少的也只是数值化的生命值，但我现在的确是赌上自己的性命在战斗。 从赌上性命这点来看，这场战斗真是相当不公平。因为，眼前的「敌人」——这除了拥有闪耀着光芒的深绿鳞片皮肤与长手臂外，还有着蜥蜴头与尾巴的半人半兽怪物，不只外表不是人类、甚至没有真实的生命。它只不过是不论被杀掉多少次，都可以由系统无限重生的数字文件档案集合体。 </p>
 <p>不对。 目前，操纵这只蜥蜴人的AI程序正在观察、学习我的战斗方式，用以不断提升自己的应对能力。但这些学习档案，在该个体消灭后便会重置，而且不会反馈到下次出现在这个区域的同种个体上。 
 </p>
 
 </div>
 <div class='phone-bottom'>
 <span class='back'></span>
 </div>
 </div>
</body>

滚动条的样式不太美观，我们将其美化一下

/** 滚动条样式美化 */
::-webkit-scrollbar{width:5px;height:6px;background:#ccc;}
::-webkit-scrollbar-button{background-color:#e5e5e5;}
::-webkit-scrollbar-track{background:#999;}
::-webkit-scrollbar-track-piece{background:#ccc}
::-webkit-scrollbar-thumb{background:#666;}
::-webkit-scrollbar-corner{background:#82AFFF;}
::-webkit-scrollbar-resizer{background:#FF0BEE;}
scrollbar{-moz-appearance:none !important;background:rgb(0,255,0) !important;}
scrollbarbutton{-moz-appearance:none !important;background-color:rgb(0,0,255) !important;}
scrollbarbutton:hover{-moz-appearance:none !important;background-color:rgb(255,0,0) !important;}

这样就好看多了。

标题部分有一点突兀，我们给出四条美化的建议：

1. 标题居左对齐

2. 底部画一条线，与小说正文分开，并且空开一些。

3. 字体颜色稍微淡一些，不要太黑

4. 字间稍微距大一些

于是

.phone .container h4 {
 text-indent: 0;
 margin-bottom: 1em;
 color:#736357;
 border-bottom:1px solid #736357;
 letter-spacing: 2px;
}

这样好看一些了吧，当然，每个人审美观不同啦，你也可以调成自己喜欢的样式。

段落之间和文字间距都太小了，我们也调一下，不要那么小气嘛，哈哈。

.phone .container p {
 margin-bottom: 15px;
 letter-spacing: 2px;
}

恩，好多了。

3. 引入向上的箭头图标

我们准备了一张半透明的箭头图标，现在将其引入。

<body>
 <div class='phone'>
 <div class='phone_top'></div>
 <div class='container'>
 
 <span id='toTop'></span>
 
 <h4>刀剑神域</h4>
 <p>
 在一群好奇心旺盛的高手花了整整一个月测量后，发现最底层区域的直径大约有十公里，足以轻松容纳下整个世田谷区。再加上堆积在上面百层左右的楼层，其宽广的程度可说超乎想像。整体的档案量大到根本无法测量。 这样的空间内部有好几个都市、为数众多的小型街道与村落、森林和草原，甚至还有湖的存在。而连接每个楼层之间的阶梯只有一座，阶梯还都位于充斥怪物的危险迷宫区域之中，因此要发现并通过阶梯可以说是相当困难。但只要有人能够突破阻碍抵达上面的楼层，上下层各都市的「转移门」便会连结起来，人们也就可以自由来去两个楼层之间。
 </p>
 <p>
 经过两年的时间，这个巨大城堡就这样被逐渐地往上攻略，目前已到达第七十四层。城堡的名称是「艾恩葛朗特」。这座持续飘浮在空中、吞噬了将近六千人，充满着剑与战斗的世界。它的另一个名字是——SwordArtOnline刀剑神域」。闪烁着深灰色光芒的剑尖，浅浅地划过我的肩膀。 那固定显示在视线左上角的细长横线，好不容易缩短了长度。同时，似乎有只冰冷的手掌，抚摸过我胸口深处。 
 </p>
 <p>
 横线——那称为HP条的蓝色条状物，可以看出我的生命残值。虽然它还有八成左右的残值，但不能把事情看得太过于乐观。因为相对来说，我已经朝死亡深渊前进了两步。 在敌人的剑再度进入攻击动作之前，我就先往后跳开一大步，以保持与敌人之间的距离。 
 </p>
 <p>「呼……」 
 </p>
 <p>硬是吐了一大口气来调整一下气息。在这个世界的「身体」虽然不需要氧气，但在另一边，也就是躺在真实世界里的真正身体，现在呼吸应该非常剧烈。而随意摆放的手应该正流着大量冷汗，心跳也加速到破表了吧。 </p>
 
 <p>这也是理所当然的事。就算我眼前所见全部都是虚拟的立体影像对象，减少的也只是数值化的生命值，但我现在的确是赌上自己的性命在战斗。 从赌上性命这点来看，这场战斗真是相当不公平。因为，眼前的「敌人」——这除了拥有闪耀着光芒的深绿鳞片皮肤与长手臂外，还有着蜥蜴头与尾巴的半人半兽怪物，不只外表不是人类、甚至没有真实的生命。它只不过是不论被杀掉多少次，都可以由系统无限重生的数字文件档案集合体。 </p>
 <p>不对。 目前，操纵这只蜥蜴人的AI程序正在观察、学习我的战斗方式，用以不断提升自己的应对能力。但这些学习档案，在该个体消灭后便会重置，而且不会反馈到下次出现在这个区域的同种个体上。 
 </p>
 
 </div>
 <div class='phone-bottom'>
 <span class='back'></span>
 </div>
 </div>
</body>

样式如下：

.phone .container #toTop {
 width: 40px;
 height: 60px;
 display: inline-block;
 position: absolute;
 background: url(top.png) no-repeat;
 background-size: 100%;
 bottom:80px;
 right: 15px;
 opacity: 0.7;
}

引进来了。

4. js控制

我们通过jQuery的animate方法来实现回到顶部的动画，实现该功能的核心逻辑就是控制滚动条距离顶部的高度，也就是scrollTop，让它变为0就可以了。

//单机图标直接返回顶部
$('#toTop').on('click',function(){
 $('.phone .container').eq(0).stop(true, true).animate({ scrollTop: 0},500,function(){
 $('#toTop').css({'opacity' : 0}); 
 });
 
 return false;
});

最后，我们还希望实现的一个效果就是，只有在滚动条往上拖动的时候，才把按钮显示出来，否则就隐藏该按钮。毕竟，我们在阅读的时候都不希望一直有个小图标吧。

实现思路也很简单，就是判断当前滚动条到底是向上滚动呢，还是向下滚动？

然后设置按钮的透明度就行了，这时候，我们需要对滚动条进行监听，如果向上滚动就显示按钮，否则隐藏按钮，实现代码如下：

var justScrollTop = 0; //记录上一次滚动条距离顶部的位置
//滚动条监听事件
$('.phone .container').on('scroll',function(e){
 if(e.target.scrollTop > justScrollTop){
 $('#toTop').css({'opacity' : 0}); //隐藏
 }else{
 $('#toTop').css({'opacity' : 0.8}); //显示
 }
 
 justScrollTop = e.target.scrollTop;
});

效果：

如果有没看明白的地方，欢迎在下面评论，或者私信我，都可以。

如果有必要，我会在下一期通过举例子的方式做解答。

TML: HyperText Markup Language 超文本标记语言

HTML代码不区分大小写, 包括HTML标记、属性、属性值都不区分大小写;

任何空格或回车键在代码中都无效，插入空格或回车有专用的标记，分别是、

HTML标记中不要有空格，否则浏览器可能无法识别。

如何添加注释(comment:评论;注释)

<!-- -->
<comment></comment>
<!-- --> 不能留有空格

字符集

<meta http-equiv="Content-Type" content="text/html;charset=#"/>

<base target="_blank">

可以将a链接的默认属性设置为_blank属性

单个标签要有最好有结束符(可以没有结束符)

<br/> <img src="" width="" />

便于兼容XHTML(XHTML必须要有结束符)

HTML标签的属性值可以有引号,可以没有引号,为了提高代码的可读性,推荐使用引号(单引号和双引号)，尽管属性值是整数，也推荐加上引号。

<marquee behavior="slide"></marquee>

便于兼容XHTML(XHTML必须要有引号)

<marquee behavior=slide></marquee>

经过测试,以上程序都可以正确运行

HTML标签涉及到的颜色值格式:

color_name 规定颜色值为颜色名称的文本颜色(比如 "red")。

hex_number 规定颜色值为十六进制值的文本颜色(比如 "#ff0000")。

rgb_number 规定颜色值为 rgb 代码的文本颜色(比如 "rgb(255,0,0)")。

transparent 透明色 color:transparent

rgba(红0-255,绿0-255,蓝0-255,透明度0-1)

opacity属性: 就是葫芦娃兄弟老六(技能包隐身)

css:

div{opacity:0.1} /*取值为0-1*/

英文(颜色值)不区分大小写

HTML中颜色值：采用十六进制兼容性最好(十六进制显示颜色效果最佳)

CSS中颜色值：不存在兼容性

红色 #FF0000

绿色 #00FF00

蓝色 #0000FF

黑色： #000000

灰色 #CCCCCC

白色 #FFFFFF

青色 #00FFFF

洋红 #FF00FF

黄色 #FFFF00

请问后缀 html 和 htm 有什么区别?

答: 1. 如果一个网站有 index.html和index.htm，默认情况下，优先访问.html

2. htm后缀是为了兼容以前的DOS系统8.3的命名规范

XHTML与HTML之间的关系?

XHTML是EXtensible HyperText Markup Language的英文缩写,即可扩展的超文本标记语言.

XHTML语言是一种标记语言,它不需要编译,可以直接由浏览器执行.

XHTML是用来代替HTML的, 是2000年w3c公布发行的.

XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求.

XHTML是基于XML的应用.

XHTML更简洁更严谨.

XHTML也可以说就是HTML一个升级版本.(w3c描述它为'HTML 4.01')

XHTML是大小写敏感的,XHTML与HTML是不一样的;HTML不区分大小写,标准的XHTML标签应该使用小写.

XHTML属性值必须使用引号,而HTML属性值可用引号,可不要引号

XHTML属性不能简写：如checked必须写成checked="checked"

单标记 , XHTML必须有结束符 ,而HTML可以使用 ,也可以使用

除此之外XHTML和HTML基本相同.

网页宽度设置多少为最佳?

960px

target属性值理解

_self 在当前窗口中打开链接文件,是默认值

_blank 开启一个新的窗口打开链接文件

_parent 在父级窗口中打开文件,常用于框架页面

_top 在顶层窗口中打开文件,常用语框架页面

字符集：

charset=utf-8

Gb2312 简单中文字符集, 最常用的中文字符

Gbk 简繁体字符集, 中文字符集

Big5 繁体字符集, 台湾等等

Utf-8 世界性语言的字符集

ANSI编码格式编码格式的扩展字符集有gb2312和gbk

单位问题：

HTML属性值数值型的一般不带单位, CSS必须带单位;

强制刷新

ctrl+F5

介：毕业不说再见，青春不散场！在云端，在一起！在问答https://developer.aliyun.com/ask/321737的留言区域晒出自己「线上环境」部署的毕业纪念册，在6月30号18点之前点赞数前10可以获得我们送出的毕业大礼包，阿里云的公仔盲盒一个以及10元的代金券一张，让你的青春永远在线！

毕业不说再见，青春不散场

经历了动荡的2020年，让2021年的同窗时光显得格外珍惜。早上的起床号仍然会响起，食堂的阿姨照常准备早餐，门口的大爷照例检查着证件和健康码，三年在一起已经980天18个小时51分59秒。但是又是一年毕业季，疫情影响了你们开学的时间，却没有影响到你们毕业，少了盛大的毕业典礼，但是一起走过的青春不会忘记。

毕业是千百万个人，千百万个夏天的故事，我们有千百万个理由让你的毕业更加特别一点。阿里云云开发平台的用户安南同学定制了他的专属毕业纪念册，他将他的纪念册奉献给大家，让所有的毕业生都可以快速拥有自己的云上毕业纪念册，通过阿里云云开发平台一键上线。不管你是IT大拿、还是建站小白，都可以分分钟获取自己专属的也毕业纪念册。毕业不说再见，青春不散场！

毕业纪念册效果图

毕业纪念册的上线步骤

1. 创建应用

a. 登陆云开发平台

登录云开发平台。使用阿里云账号登录，按照提示创建团队，点击同意协议。没有阿里云账号的用户，在登录页面注册后进行登录即可。为了保证最好的使用体验，请使用Chrome浏览器。

b. 创建应用

打开快速开始，点击创建新应用。

c. 云资源访问授权。

云资源访问授权。如果您之前没有使用过云开发平台，会出现云资源授权管理的选项，往下拉出现直至同意授权的字样，点击「同意授权」后出现授权成功，点击进入「下一步」。

d. 选择语言和计算服务。

分别选择开发语言NodeJS，创建方式选择直接创建，然后点击下一步。然后填写应用的名称和介绍，选择所属产品线（按需要选择），计算服务选择FC。然后点击完成，云服务如果没有开通需要开通一下，开通不收费。

2. 配置和上线应用。

a. 下载毕业纪念册的代码。

访问https://github.com/cloudworkbench/memory-album 下载源代码后解压缩到本地目录。

b. 创建环境

应用创建成功后会跳转到应用详情页面，点击日常环境的「部署配置」，依次选择【自动创建环境】-【选择任意可用区】-【自动创建交换机】

c. 在线开发部署

环境配置完成后，完成后回到如下页面，点击在线开发部署，在新的窗口打开WebIDE部署, 点击「在线开发部署」，打开CloudIDE上传代码文件。

d. 上传代码文件

CloudIDE加载完成后，选中下载后解压好的文件，将源码文件直接拖拽到CloudIDE的根目录，上传完成后记得保存并且推送。

e. 一键上线毕业纪念册

点击CloudIDE左侧的部署Tab，选择日常环境，点击立即部署，在弹出框中确认配置后继续部署。部署完成后产生临时域名，即可访问好部署的站点。快点给同学们分享一下吧，临时域名30分钟有效期。

f. 绑定线上域名

生产的临时域名是云开发平台免费提供的，有效期只有30分钟，过期之后需要手动刷新才可以生效。如果想保留作为长期的毕业站点使用，可以绑定自己的域名，现在很多域名1块钱首年。

在你购买的域名控制台，配置CNAME映射到该域名，下图以阿里云的域名控制台为例。如果你是新购的域名还没有备案的话，在云开发平台创建一个region在香港的产品也可以立即使用。

在云开发平台的应用详情页面点击线上环境的「域名配置」，绑定配置好的域名，并且按照日常环境的配置进行「环境配置」，保存后打开「在线开发部署」进行一键部署即可使用自己的域名进行访问。

毕业纪念册可定制的功能

1. 背景图更换

在index.html中更改url的路径images/classroom.png，或者替换文件夹里classroom.png文件

body {
        perspective: 1000px;
        display: block;
        padding:0;
        margin:0;
        overflow:hidden;
        background-image:url("images/classroom.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;

樱花透明度

在index.html中更改opacity 0~1之间的数字,1是完全清晰 0是隐形

/*樱花透明度*/
    canvas {
        padding:0;
        margin:0;
        opacity:0.3;

在一起计时

在js/time.js下输入入学年份就可以算出来在一起的时间

var arr = "2018-10-1 21:00:00".split(/[- :]/);//改这里
var box = document.getElementsByClassName('textCon')[0];

黑白上毕业纪念的话

在js/typing.js中修改str的内容以及显示的速度,也就是到时候黑板上显示的内容，字体大小/颜色/位置可以在css中调整

let divTyping = document.getElementById('text')//div
let i = 0,//初始化
    timer = 0,
    str = '山无棱,天地合,才敢与君绝'//要显示的字

function typing () {
    if (i <= str.length) {
        divTyping.innerHTML = str.slice(0, i++) + '_'//当字没显示完的时候,从字符串上切下来上去
        timer = setTimeout(typing, 450)//每次的间隔
    }

旋转相册

在css/xuanzhuan.css中，自定义图片, 图片大小以及旋转相册位置，可以替换掉image文件夹里的图片。

.xuanzhuan {
    width:200px;
    height:200px;
    margin: 100px auto;
    background: url("../images/xuanzhuan/shu.jpg") no-repeat;
    background-size: cover;
    transform-style: preserve-3d;
    position: absolute;
    transition: 15s linear;
    top: 50%;
    left: 42%;
    z-index: initial;
}
.xuanzhuan:hover{
    transform: rotateY(360deg);
}
.xuanzhuan div{
    height:150px;
    width: 200px;
    position: absolute;
    background-size: cover;
    background: no-repeat;
}
.xuanzhuan div:nth-child(1){ /*0,0,2,1*/
    background: url("../images/xuanzhuan/1.jpg");
    background-size: cover;
    transform:rotateY(0deg) translateZ(400px);
}
.xuanzhuan div:nth-child(2){
    background: url("../images/xuanzhuan/2.jpg");
    background-size: cover;
    transform:rotateY(60deg) translateZ(400px);
}
.xuanzhuan div:nth-child(3){
    background: url("../images/xuanzhuan/3.jpg");
    background-size: cover;
    transform:rotateY(120deg) translateZ(400px);
}
.xuanzhuan div:nth-child(4){
    background: url("../images/xuanzhuan/4.jpg");
    background-size: cover;
    transform:rotateY(180deg) translateZ(400px);
}
.xuanzhuan div:nth-child(5){
    background: url("../images/xuanzhuan/5.jpg");
    background-size: cover;
    transform:rotateY(240deg) translateZ(300px);
}
.xuanzhuan div:nth-child(6){
    background: url("../images/xuanzhuan/6.jpg");
    background-size: cover;
    transform:rotateY(300deg) translateZ(300px);
}

BGM音乐

这里采用的是外链引入音乐的方式，你也可以用自己本地的音乐文件，那样打开更快，只要放到项目根路径下直接引用就行。先生成外链，然后在index.html中引入，在index.html下的audio标签的里的source标签的src属性中粘贴链接。

<!--音乐-->
<audio controls class="music">
    <source class="music_a" src="http://m10.music.music/2021060508530538.mp3" type="audio/mpeg">
</audio>

本文为阿里云原创内容，未经允许不得转载。

在线咨询

上一篇：前端开发：极简的CSS 框架
下一篇：#一场秋冬的美丽邂逅#佳能EOS R5 & R6全画幅摄影大赛双周热评第一期

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商