首页
精品网站
艺术设计
网络学院
信息中心
求职招聘
网站综合
服装网站
编程开发
设计论坛
投稿
我要上榜
设计资源站
平面设计
画册
VI欣赏
包装
CG-插画
搜索
个人网页
Alexa排名
CSS
建站资源
下载专区
JS特效
品牌服装
服装院校
专题欣赏
SEO
图标欣赏
专题
域名注册
虚拟主机
广州网站设计
域名注册
广州网站建设
上海网站建设
虚拟主机
广州网页设计
虚拟主机
域名注册
acg王国
ACG玩家
当前位置：
网站综合首页
>>
网页JS特效
>>
文本特效类
>> 网页设计中字体及字体大小的匹配控制
网页设计中字体及字体大小的匹配控制
网站色彩搭配讲解
跟我探索网站排名的捷径
网页banner设计欣赏
网站装饰图标设计欣赏
设计赛事集合
ACG王国
来源：
中国设计秀
作者：
佚名
点击：
121
加入收藏
发表评论
0
顶一下
关键字：
网页
字体匹配
字体大小的匹配控制
网页特效
HTML代码
代码如下,点击运行可查看效果:
<html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>Select dropdowns style controls</title> <style type="text/css" media="screen,projection"> div {width:500px;padding:10px;backgroundd:#eee;} p {font:normal 1em/1.5em arial;color:#000;background:#eee;} p span {color:#999;} </style> <script type="text/javascript"> function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function onChangeSelects() { var fontsizeselect = document.getElementById('fontsize'); fontsizeselect.onchange = function () { var ps = document.getElementsByTagName('p'); for (var i=0; i<ps.length; i++){ ps[i].style.fontSize = this.value; } } var lineheightselect = document.getElementById('lineheight'); lineheightselect.onchange = function () { var ps = document.getElementsByTagName('p'); for (var m=0; m<ps.length; m++){ ps[m].style.lineHeight = this.value; } } var fontfamilyselect = document.getElementById('fontfamily'); fontfamilyselect.onchange = function () { var ps = document.getElementsByTagName('p'); for (var k=0; k<ps.length; k++){ ps[k].style.fontFamily = this.value; } } var fontcolorselect = document.getElementById('fontcolor'); fontcolorselect.onchange = function () { var ps = document.getElementsByTagName('p'); for (var n=0; n<ps.length; n++){ ps[n].style.color = this.value; } } } addLoadEvent(onChangeSelects); </script> </head> <body> <div id="formstylecontrols"> <fieldset> <label for="fontsize">Change Font Size</label> <select id="fontsize"> <option value="1em">1em</option> <option value="1.2em">1.2em</option> <option value="1.4em">1.4em</option> </select> </fieldset> <fieldset> <label for="lineheight">Change Line Height</label> <select id="lineheight"> <option value="1.5em">1.5em</option> <option value="2em">2em</option> <option value="2.5em">2.5em</option> </select> </fieldset> <fieldset> <label for="fontfamily">Change Font</label> <select id="fontfamily"> <option value="Arial">Arial</option> <option value="Verdana">Verdana</option> <option value="Georgia">Georgia</option> </select> </fieldset> <fieldset> <label for="fontcolor">Change Font Color</label> <select id="fontcolor"> <option value="#000000">Black</option> <option value="#ff0000">Red</option> <option value="#00ff00">Green</option> <option value="#0000ff">Blue</option> </select> </fieldset> </div> <div id="container"> <p><span><p></span>Whilst referred to less flatteringly as "the big blue Boy Scout" by some of his fellow superheroes, Superman is hailed as "The Man of Steel," "The Man of Tomorrow," and "The Last Son of Krypton," by the general public within the comics. As Clark Kent, Superman lives among humans as a "mild-mannered reporter" for the Metropolis newspaper The Daily Planet (the Daily Star in original stories).<span></p></span></p> <p><span><p></span>Here he works alongside reporter Lois Lane, with whom he is romantically linked. This relationship has been consummated by marriage on numerous occasions across varying media, and the union is now firmly established within the current mainstream comics continuity.<span></p></span></p> <p><span><p></span>The character's cast, powers and trappings have slowly expanded throughout the years. Superman's backstory was altered to allow for adventures as Superboy, and other survivors of Krypton were discovered, including Supergirl and Krypto the Superdog. In addition, Superman has been licensed and adapted into a variety of media, from radio to television and film.<span></p></span></p> <p><span><p></span>The motion picture Superman Returns was released in 2006, with a performance at the international box office which exceeded expectations. The character has been revamped and updated, most recently in 1986. John Byrne recreated the character, reducing Superman's powers and erasing several characters from the canon in a move which attracted media attention. Press coverage was again garnered in the 1990s with the Death of Superman, a storyline which saw the character briefly killed.<span></p></span></p> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
2008-06-26 00:50:00 出处：
中国设计秀cnwebshow.com
本文引用地址：
http://www.cnwebshow.com/site/html/article_2349.html
热点文章/相关文章
KUGOO首页展示效果
运用filter做广告渐近渐显效果.
2例关于金额转换的问题的JS特效
动画效果鼠标点击打开/关闭层
最新文章
·
js特效文本框随文本的长度而增长
·
图片选择images of radio chec...
·
网页设计中动态更改字符的颜色特效
·
网页设计中字体及字体大小的匹...
·
一个精美强大的JS日历代码
·
六种风格时间显示,一定有你喜欢...
·
文字播放完成后页面随即跳转
·
7种JS脚本分页代码 showPages v1.0
·
3个最常用的JS时间特效
·
实时变化的时间特效
艺术设计秀最新图片
Karla Pamanes包装...
Charis插画艺术设...
希腊设计机构平面...
spd包装设计作品欣赏
FREYA个性插画设计...
德国平面大师乌韦...
推荐文章
·
图片选择images of radio chec...
素材下载
矢量
潮流素材
背景素材
模板
网站地图
|
关于我们
|
联系我们
|
网站建设
|
广告服务
|
版权声明
|
免责声明
|
网站公告
|
友情链接
|
留言
|
旧版入口
Copyright © 2005-2008
中国设计秀_网页设计秀_艺术设计秀_网页设计教程_网站建设作品_平面设计欣赏_包装设计欣赏_品牌网站建设
All Right Reserved.
做最专业的设计服务网站,秀出自我，秀出精彩！
中国设计秀，秀---无处不在！！
交流群：9107036 3848215 8850631
粤ICP备05067046号
HTML代码
