学做网站培训课程介绍

当前位置:

网站添加用户切换字体大小功能(适用wordpress,dedecms)

做一些网站时,特别是门户网站制作方法中,需要在文章页面添加一个用户切换字体大小功能,可以让浏览器根据自己需要去调节文章字体的大小,符合用户体验。效果如下图:

网站添加用户切换字体大小功能(适用wordpress,dedecms)

下面讲一下网站添加用户切换字体大小功能的方法,这种方法适用于wordpress仿站dedecms仿站教程

  1. 在<head></head>标签之间添加以下js特效代码:(<head>标签一般位于头部文件head.php中)
    <SCRIPT type=text/javaScript>
    function doZoom(size){
    document.getElementById('zoom').style.fontSize=size+'px'}
    </SCRIPT>
  2. 在文章页面模板中需要显示“字体:大 中 小”的地方添加以下代码:(wordpress文章页面模板:single.php  /  dedecms文章页面模板:article.html)
    字体:<a href="javascript:doZoom(18)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a>
  3. 在文章内容调用标签加上一个默认的文字大小属性。改成以下代码:
    wordpess:

    <span id="zoom" style="font-size:14px;">
    <?php the_content(); ?>
    </span>

    dedecms:

    <span id="zoom" style="font-size:14px;">
    {dede:field.body/}
    </span>
  4. 到这里为止,你自己做的网站就已经拥有用户切换字体大小功能。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 网页如何添加背景音乐 视频教程附件下载 (1116937 次浏览)
    在上网过程中,有很多网站打开后会自动播放背景音乐,而且只有当关闭网页之后背景音乐才会停止。在我们自己建网站,同样也可以给自己的网页添加背
  • QQ客服在很多网站都很普通,它可以很方便的让浏览我们网站的用户通过QQ进行交流,不需要去查找QQ再加好友,只需要点一下QQ客服上的图标就可以直接发信
  • 有时为了网站的帐户的安全,我们会不定期的修改网站用户名的密码,在wordpress网站后台,有一个很方便提供给我们修改网站密码的选项,通过这个选项,
  • 多站点 (Multisite) 功能是 WordPress 3.0  后版本的一个重要更新,整合了 WordPress MU 内核。后台自动升级内核后,无法直接使用该功能。需要通过手
  • 可以说任意一个网站都少不了换灯片,在之前的课程里学做网站论坛也列举了很多网站幻灯片代码,通过这些方法,我们可以制作作某一个规定尺寸的换灯片,
  • 有些学员在学习制作网站时,想在自己的网站上添加一些左右滚动的切换图效果,这种效果可以实现自动切换和手动左右切换。如果要实现在网站上增加切换图
  • dreamweaver是个可视化的软件,你直接选中你要更改的设置,在编辑器中直接就可以更改了。或是用CSS也可以设置你说的那些内容字体大小、颜色样式。dr
  • CSS网页布局中字体样式 图文教程 (120849 次浏览)
    在网页制作时,我们需要控制网页中字体的大小,颜色,粗细等,通过情况下,我们会使用以下的CSS样式去控制这个字体的样式:字体的大小:font-size
  • 做一些网站时,特别是门户网站制作方法中,需要在文章页面添加一个用户切换字体大小功能,可以让浏览器根据自己需要去调节文章字体的大小,符合用户体
  • wordpress评论功能可以让用户在我们自己的网站上进行对文章的评论,发表自己的观点,很好的增强了网站与用户之间的交互性。还有的网站还添加了邮件功
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 在之前的课程中,我们推荐大家在学习做网站时下载photoshop7.0破解版,这个软件功能完备,但这个软件只能运行在windowsXP系统,对于win7/win8/win10操
  • 什么是 Adobe Dreamweaver CS6Adobe  Dreamweaver  CS6 网页设计软件提供了一套直观的可视界面,供您创建和编辑 HTML 网站和移动应用程序。使用专
  • 用什么建网站?Wordpress建网站好不好?这些问题经常被新手问上问起。可以这样说,wordpress程序可以建各种类型的网站,它的功能强大之处令人称赞,
  • Wordpress 如何开启伪静态 视频教程 (1120063 次浏览)
    做网站制作好之后,如果网站做SEO优化时,需要进行伪静态的设置,同样也可以通过网站设置选置进行设置。Wordpress伪静态设置方法 登陆到wordpr
  • 使用不同的程序可以制作不同类型的网站,就像学做网站论坛一样,也同时使用了多个网站程序,主站使用wordpress程序,会员培训区使用discuz程序。使用
  • 很多同学使用DEDE程序与DZ程序共同去建一个网站,例如制作教育网站,使用dedecms程序做主站,使用DISCUZ做二级目录论坛.然后通过dedecms整合DZ程序实现