导航:首页 > 万维百科 > 网页设计菜单按钮

网页设计菜单按钮

发布时间:2020-12-19 06:16:56

1、网页导航菜单栏制作

导航菜单的实现

首先定义导航外围容器的样式:

#left {
width: 178px;
}

现在外围容器我们只要简单版的定义其宽度,并权赋予left的id名。在left容器中,我们添加一个名为navcontainer的子容器来放置导航菜单。实现导航的标签推荐使用无序列表ul,通过CSS我们可以改变其外观和形式。HTML结构如下:

< div id="navcontainer">
< ul>
< li>< a href="#">Home< /a>< /li>
< li>< a href="#">About me< /a>< /li>
< li>< a href="#">ximicc< /a>< /li>
< li>< a href="#">Articles< /a>< /li>
< li>< a href="#">Photo roll< /a>< /li>
补充
< /ul>
< /div>
ul和li标签构建了一个简单的项目列表,其项目符号默认为小圆点,这是我们不需要的。利用CSS可以去掉那些小圆点,并用背景图片的形式替换以我们制作好的图标:

2、网页设计:如何创建一个滚动菜单

首先打开dreamweaver8写基本语法
<marquee>滚动文字 </marquee>
2.文字移动属性的设置
(1)滚动方向属性direction
可以设定文字滚动的方向,分别为向左(left)、向右(right)、向上(up)、向下(down),使滚动的文字具有更多的变化。
基本语法:
<marquee direction="value">滚动文字</marquee>
(2)滚动方式属性behavior
通过这个属性能够设定不同方式的滚动文字效果。如滚动的循环往复、交替滚动、单次滚动等。
基本语法:
<marquee behavior="value">滚动文字</marquee>
(3)滚动循环属性loop
通过这个属性能够让文字滚动循环进行。
基本语法:
<marquee loop="次数">滚动文字</marquee>
(4)滚动速度属性scrollamout
通过这个属性能够调整文字滚动的速度。
基本语法:
<marquee scrollamount="value">滚动文字</marquee>
(5)滚动延迟属性scrolldelay
通过这个属性,可以在每一次滚动的间隔产生一段时间的延迟。
基本语法:
<marquee scrolldelay="value">滚动文字</marquee>
3.外观(Layout)设置
(1)滚动文字对齐方式align
基本语法:
<marquee align="对齐方ottom,对齐上沿、中间、下沿。
(2)滚动背景颜色属性bgcolor

在滚动文字的后面,可以添加背式">滚动文字</marquee>
对方方式=top、middle、b景颜色。
基本语法:
<marquee bgcolor="color_value">滚动文字</marquee>

3、网页设计中的弹出菜单制作

打开"行为"面板,选"显示弹出菜单"在内容里有个"+",新建一个,重复新建多个即可,其他选项是设置外观和功能,自己看着办.要选中触发行为的文字或图像再点行为面板.这样就不是竖着排了吧

4、网页制作怎么制作按钮

1.新建一个500*250象素的窗口,填充绿色(R:52,G:175,B:125),再新建一层命名为"按钮--底",选择“圆角矩形工具”,半径数值为“25”,绘制圆角矩形。

2.所示锁定透明象素

3.选择渐变工具,颜色设置如下<图5>,由上至下绘制渐变效果

4.在“按钮-底”上新建一层命名为“按钮--高光”,调出“按钮--底”的选区如<图7>,选择菜单:选择 > 修改 > 收缩,数值为3,再填充白色,按Ctrl D取消选区。

5.在“按钮--高光”这层添加蒙版,再用黑白渐变工具如<图11>由上往下绘制渐变

6.回到"按钮--底"这层,调出图层样式,分别调节:内阴影,描边。

7.在"按钮--底"这层上面新建一层命名为“按钮--测光”,调出“按钮--底”的选区如<图16>,选择菜单:选择 > 修改 > 收缩,数值为1,再填充白色,用矩形选取工具适当的把选区向右移几个象素然后按"Delete"键删除选区部分

8.按Ctrl D取消选区,再用橡皮工具选适当的大小插除下面的部分

9.按Ctrl J 把"按钮--侧光"复制一层,选择:编辑> 变形 > 垂直翻转,再选择:编辑> 变形 > 水平翻转,把翻转后的图片移到右侧适当的位置

10.在"按钮--底"上面新建一层命名为“按钮--边”调出"按钮--底"的选区如<图23>,再选择菜单:编辑 > 描边 设置如<图24>再按Ctrl D 取消选区。

11.在"按钮--高光"上面新建一层命名为“按钮--文字”,在上面打上"网站名",字体颜色用白色.

12.按Ctrl J 把文字复制一层,把下面的文字隐藏,为上面文字加投影效果,设置如<图27>,再回到下面的文字层,删格化图层,选择菜单 编辑> 变形 > 垂直翻转 把文字拖到合适的位置

13.如下图添加蒙版用黑白渐变从上至下绘制渐变,制作文字的倒影。

5、网页下拉菜单怎么制作

<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css菜单演示</title>

<style type="text/css">
<!--

*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}

#nav {
line-height: 24px; list-style-type: none; background:#666;
}

#nav a {
display: block; width: 80px; text-align:center;
}

#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}

#nav li {
float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
background:#999;
}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; width: 180px; position: absolute;
}
#nav li ul li{
float: left; width: 180px;
background: #F6F6F6;
}

#nav li ul a{
display: block; width: 180px;w\idth: 156px;text-align:left;padding-left:24px;
}

#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#C00;
}

#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}

-->
</style>

<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

"");
}
}
}
window.onload=menuFix;

//--><!]]></script>

</head>
<body>

<ul id="nav">
<li><a href="#">产品介绍</a>
<ul>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
</ul>
</li>
<li><a href="#">服务介绍</a>
<ul>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二服务二</a></li>
<li><a href="#">服务二服务二服务二</a></li>
<li><a href="#">服务二</a></li>
</ul>
</li>
<li><a href="#">成功案例</a>
<ul>
<li><a href="#">案例三</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">案例三案例三</a></li>
<li><a href="#">案例三案例三案例三</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四111</a></li>
</ul>
</li>

<li><a href="#">在线演示</a>
<ul>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示演示演示</a></li>
</ul>
</li>
<li><a href="#">联系我们</a>
<ul>
<li><a href="#">联系联系联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">联系联系</a></li>
<li><a href="#">联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
<li><a href="#">联系联系联系</a></li>
</ul>
</li>

</ul>

</body>
</html>

6、网页中的按钮怎么制作下拉菜单啊?

在flash里面直接做好连接
1、建一个元件,比如命名为“按钮链接”
2、将“按钮链接”导入FLASH舞台中你设计的位置;
3、点击“按钮链接”一下哦,然后点击动作菜单/全函数/“浏览器/网络”/双击getURL
在脚本编辑栏中会出现getURL();
在括弧中输入"http://地址",注意一定要加" " 哦,否则语法错误;
然后写入:
on(release) {
getURL("http://地址");
}
最后面给一个连接,可以参考下。有解释getURL()得具体用法。有问题欢迎留言交流,因为这里的修改次数是有限的,经常有的问题修改几次就不让在改答案了。

跳转的地址可以在本地测试,前提是网页最好在flash同目录里面,直接引用
on(release) {
getURL("网页.htm");
}

7、左侧页面菜单栏样式设计

俺做过类似的功能, 左边固定一个treeview,右边放一个容器控件, 点击左边的treeview节点的时候根据节点的不同,用反射机制创建一个你要的控件(就是右边的那一部分,你事先已经做成用户控件),然后调用 右边容器的Controls.Add方法,把你刚才的创建那个控件放进去并显示出来就OK了。

与网页设计菜单按钮相关的知识