专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > HTML/CSS

下拉菜单设置字体的大小解决方案

发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
下拉菜单设置字体的大小
我想问一下,在下拉菜单下面怎样可以设置显示字体的大小,就是点下拉框的时候里面的字会按相应的字号显示的,(例如:QQ空间留言板上面的,点击字体大小,下拉框就会很直观的显示字号的大小。)
请问这是怎么实现的啊,我是用的Dreamweaver做的网页,需要什么代码才可以实现啊?

------解决方案--------------------
JS : select option
------解决方案--------------------
把需要改变的字体内容放到一个层里,然后用JS实现。



------解决方案--------------------
<style>
div.fontsize{
width:100px;
border:1px solid #CCC;
border-left-width:5px;
background-color:#FFF;
padding:3px;
display:none;
position:absolute;
}
div.fontsize a{
display:block;
width:100px;
height:20px;
color:#666;
text-decoration:none;
}

div.fontsize a:hover{
display:block;
width:100px;
height:20px;
background-color:#003366;
color:#FFF;
text-decoration:none;

}
span.menu{
display:block;
width:80px;
height:20px;line-height:20px;
border:1px solid #CCC;
font-size:12px;
text-align:center;
cursor:pointer;
}
</style>

<span id="menu" class="menu" onClick="setfontsize();">字体大小</span>
<script>
function setfontsize(){
var f = document.getElementById("fontsize");
var m = document.getElementById("menu");
f.style.display="block";
f.left = m.left
f.top = m.top + m.style.height;
}
</script>
<div id="fontsize" class="fontsize" onMouseUp="this.style.display='none'">
<a href="JavaScript:void(0);" style="font-size:12px;">12px</a>
<a href="JavaScript:void(0);" style="font-size:14px;">14px</a>
<a href="JavaScript:void(0);" style="font-size:16px;">16px</a>
<a href="JavaScript:void(0);" style="font-size:18px;">18px</a>
<a href="JavaScript:void(0);" style="font-size:24px;">24px</a>
</div>


基本就是以上的样子
------解决方案--------------------
简单写了个
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><script type="text/javascript">   function cc(_this) {  document.getElementById(_this).style.display =""; }  function dd(_this) {  document.getElementById(_this).style.display ="none"; }</script><title>无标题文档</title></head><body><span onmouseover="cc('gg')"  style="cursor:pointer;" onclick="dd('gg')">>X<</span><div id="gg" style=" display:none" ><div style="font-size:36px;">中国</div><div style="font-size:34px;">中国</div><div style="font-size:31px;">中国</div><div style="font-size:30px;">中国</div><div style="font-size:22px;">中国</div></div></body>
友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

热门推荐: