首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

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

2012-02-26 
下拉菜单设置字体的大小我想问一下,在下拉菜单下面怎样可以设置显示字体的大小,就是点下拉框的时候里面的

下拉菜单设置字体的大小
我想问一下,在下拉菜单下面怎样可以设置显示字体的大小,就是点下拉框的时候里面的字会按相应的字号显示的,(例如: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> 

热点排行