导航:首页 > 万维百科 > 网页设计中的折叠用什么代码

网页设计中的折叠用什么代码

发布时间:2021-01-16 03:21:55

1、设计一个网页折叠菜单,如何设置它默认为关闭状态?

在你想隐藏的折叠菜单外层的盒子加上这个CSS属性:display:none;就好了

2、如何在DW中制作左右折叠的网页

这个 不难我可以教复你的制

你要会使用ASP 语言 不用特别难的 简单的就行, 左边的 折叠 ×(树形 ) 是添加行为 实现的 ,这个在 设计面板里 是可以 实现的 , 而 想在右边的表格里 显示 左边 菜单里的详细内容 , 要建立数据库 。

左边的菜单 是通过调用 数据库里的数据 显示在右边的表格里的 ,?id=

3、关于网页制作....折叠,交我怎么做

<!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" />
<title>折叠彩单示范效果</title>
</head>

<body><SCRIPT language=JavaScript>
function actMenu(menuid)
{
try
{
var menuidobj = eval(menuid)
if(menuidobj.style.display=='none')
{
try
{
menu1.style.display='none';
menu2.style.display='none';
}
catch(e)
{}

menuidobj.style.display='';
Set(menuid);
menucookie = menuid;
}
else
{
menuidobj.style.display='none';
Set("none");
}
}
catch(e)
{}
}
</SCRIPT>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td bgcolor="#F7F7F7">· <A href="javascript:actMenu('menu1')">折叠彩单1</A></td>
</tr>
<tr id=menu1 style="DISPLAY: none">
<td bgcolor="#FFFFFF"><TABLE cellSpacing=0 cellPadding=0 width="95%" align=center
border=0>
<TBODY>
<TR>
<TD class=y-blue-an colSpan=3> <DIV align=left><center>
要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容要显示的内容<BR>
</DIV></TD>
</TR>
<TR>
<TD bgColor=#ffffff colSpan=3><IMG height=1 src=""
width=1 border=0></TD>
</TR>
</TBODY>
</TABLE></td>
</tr>
<tr>
<td bgcolor="#000000">· <A href="javascript:actMenu('menu2')">折叠菜单2</A></td>
</tr>
<tr id=menu2 style="DISPLAY: none">
<td bgcolor="#FFFFFF"><TABLE cellSpacing=0 cellPadding=0 width="95%" align=center
border=0>
<TBODY>
<TR>
<TD height=29> <DIV align=left>
<style type="text/css">
#sTitle {
background-color:#f7f7f7;
border:1px solid #cccccc;
width:800px; /*这里设置点击后显示的总宽度*/
margin-left:auto;
margin-right:auto;
padding:10px 4px;
font-size:9pt;
font-family: Verdana, Arial, sans-serif;
}
#sTitle ul{
margin:0 0 0 15px;
padding:0;
}
#sTitle li{
text-align: left;
width:100%;
white-space:nowrap;
overflow : hidden;
text-overflow : ellipsis ;
}
</style>
<div id="sTitle">
<ul>
<li><a href="#">超级链接</a></li>
<li><a href="#">超级链接</a></li>
<li><a href="#">超级链接</a></li>
<li><a href="#">超级链接</a></li>
</ul>
</div>
</DIV></TD>
</TR>
<TR>
<TD bgColor=#ffffff><IMG height=1 src="" width=1
border=0></TD>
</TR>
</TBODY>
</TABLE></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
</tr>
</table>
</body>
</html>

本来昨天就看到你的问题了,不过当时困了没来得及回答。

把以上代码拷贝到DW代码区域中。按F12默认保存。

这段代码有什么看不懂的你再问我好了。

4、求一个后台左侧菜单制作代码,用Jquery做的折叠展开效果.实际工作中一般都是用JQUEY吗?

可以告诉你思路,如果有3个菜单,就用3个div,最外层套一个大div来固定,点击展开实际就专是改变某个或者两属个div的高就行了,前提是定位方式做好,不要绝对定位,难控制,用jquery响应点击事件,,用jquery的animate函数制作展开动画效果。思路加技术解决问题,我电脑刚重装了没有装dreamweaver没法给你做了,jquery入门很快的

5、请教一个网页制作问题:怎样制作折叠页面

首先,你要利用布局表格和布局单元格制作一个样式,然后每做一个付页都以这个样式为基础就行了。比如左侧和上部为台头和导航,中间部分为展示区域,然后每个付页都做成这样,就可以了。

6、Dreamweaver中折叠代码是怎么用的

您可以折叠和扩展代码片断,网页设计中这样无须使用滚动条即可查看文档的不同部分。例如,若要查看应用于页面下方较远处的div标签的head标签中的所有CSS规则,您可以折叠head标签和div标签之间的所有内容,这样就可以同时看到两部分代码。尽管可以通过在“设计”视图或“代码”视图中来选择代码片断,但只能在“代码”视图中折叠代码。
注:依据Dreamweaver模板创建的文件将以完全展开的形式显示所有代码,即使模板文件(.dwt)包含折叠的代码片断也是如此。
折叠和展开代码片断
当您选择了代码后,将会在所选代码的旁边显示一组折叠按钮(在Windows中为减号;在Macintosh中为垂直三角形)。单击这些按钮可折叠和展开所选代码。折叠了代码后,折叠按钮将变为展开按钮(在Windows中为加号按钮;在Macintosh中为水平三角形)。
有时,不会准确折叠您所选的代码片断。Dreamweaver使用“智能折叠”来折叠最常用和视觉效果很好的选定内容。例如,如果您选择了一个缩进标签并且选择了该标签之前的缩进空格,则Dreamweaver将不会折叠缩进的空格,因为大多数用户希望保留缩进。若要禁用智能折叠,并强制Dreamweaver准确折叠选定的内容,您可在折叠代码之前按住Ctrl。
此外,如果片断中包含错误或特定浏览器不支持的代码,则会在折叠的代码片断上放置一个警告图标。
您也可以通过在按住Alt(Windows)或Option(Macintosh)的同时单击其中一个折叠按钮或单击“编码”工具栏中的“折叠选定内容”按钮折叠该代码。
选择一些代码。
选择“编辑”>“代码折叠”并选择任一选项。
选择折叠的代码片断
在“代码”视图中单击折叠代码片断。
注:当您在“设计”视图中选定的内容是折叠代码片断的一部分时,该片断将会在“代码”视图中自动展开。当您在“设计”视图中选定的内容是一个完整的代码片断时,“代码”视图中的片断将保持折叠状态。
本文TAG关键词:
网页设计Dreamweaver折叠代码网页设计内容首页设计经验什么是伪静态网页设计注意事项Dreamweaver中如何打开现有网页文档Dreamweaver查找替换的技巧哪些事情HTML5无法实现Dreamweaver的操作诀窍2011年网页设计流行趋势Dreamweaver
CS3选择性粘贴的妙用网站设计的小技巧汇总
(责任编辑:郑州室内设计培训,郑州网页设计培训,郑州平面设计培训)

7、求html格式的折叠文档的制作方法(类似于软件教程在线文档)?

这个可以使制用tree.js这个库来实现的
1、你可以使用tree.jsS实现左侧可以折叠的目录结构,点击左侧展示右侧的内容就可以了,具体可以查看tree.js文档
2、另外可以使用一些现成的静态模板来生成文档,比如vue官网使用的文档模板vue-press等等

8、网页设计怎么将一部分内容折叠起来

折叠一般用hide()

引用jQuery

然后用 $("#div1").hide() 就能把id为div1的区域隐藏起来了。保留title的显示,就能做到你说的折叠

9、网页树形折叠菜单制作

JavaScript Code: function Ob(o){ var o=document.getElementById(o)?document.getElementById(o):o; return o; } function Hd(o) { Ob(o).style.display="none"; } function Sw(o) { Ob(o).style.display=""; } function ExCls(o,a,b,n){ var o=Ob(o); for(i=0;i<n;i++) {o=o.parentNode;} o.className=o.className==a?b:a; } function CNLTreeMenu(id,TagName0) { this.id=id; this.TagName0=TagName0==""?"li":TagName0; this.AllNodes = Ob(this.id).getElementsByTagName(TagName0); this.InitCss = function (ClassName0,ClassName1,ClassName2,ImgUrl) { this.ClassName0=ClassName0; this.ClassName1=ClassName1; this.ClassName2=ClassName2; this.ImgUrl=ImgUrl || "css/s.gif"; this.ImgBlankA ="<img src=\"css/s.gif\" class=\"s\" onclick=\"ExCls(this,'"+ClassName0+"','"+ClassName1+"',1);\" alt=\"展开/折叠\" />"; this.ImgBlankB ="<img src=\"css/s.gif\" class=\"s\" />"; for (i=0;i<this.AllNodes.length;i++ ) { this.AllNodes[i].className==""?this.AllNodes[i].className=ClassName1:""; this.AllNodes[i].innerHTML=(this.AllNodes[i].className==ClassName2?this.ImgBlankB:this.ImgBlankA)+this.AllNodes[i].innerHTML; } } this.SetNodes = function (n) { var sClsName=n==0?this.ClassName0:this.ClassName1; for (i=0;i<this.AllNodes.length;i++ ) { this.AllNodes[i].className==this.ClassName2?"":this.AllNodes[i].className=sClsName; } } } CSS Code: .CNLTreeMenu img.s {cursor:pointer;vertical-align:middle;} .CNLTreeMenu ul {padding:0;} .CNLTreeMenu li {list-style:none;padding:0;} .Closed ul {display:none;} .Child img.s {background:none;cursor:default;} #CNLTreeMenu1 ul {margin:0 0 0 17px;} #CNLTreeMenu1 img.s {width:20px;height:15px;} #CNLTreeMenu1 .Opened img.s {background:url(skin1/opened.gif) no-repeat 0 0;} #CNLTreeMenu1 .Closed img.s {background:url(skin1/closed.gif) no-repeat 0 0;} #CNLTreeMenu1 .Child img.s {background:url(skin1/child.gif) no-repeat 3px 5px;} #CNLTreeMenu2 ul {margin:0 0 0 17px;} #CNLTreeMenu2 img.s {width:17px;height:15px;} #CNLTreeMenu2 .Opened img.s {background:url(skin2/opened.gif) no-repeat 4px 6px;} #CNLTreeMenu2 .Closed img.s {background:url(skin2/closed.gif) no-repeat 3px 6px;} #CNLTreeMenu2 .Child img.s {background:url(skin2/child.gif) no-repeat 3px 5px;} #CNLTreeMenu3 ul {margin:0 0 0 17px;} #CNLTreeMenu3 img.s {width:34px;height:18px;} #CNLTreeMenu3 .Opened img.s {background:url(skin3/opened.gif) no-repeat 0 1px;} #CNLTreeMenu3 .Closed img.s {background:url(skin3/closed.gif) no-repeat 0 1px;} #CNLTreeMenu3 .Child img.s {background:url(skin3/child.gif) no-repeat 13px 2px;} html code: <p> <!--CNLTreeMenu Start:--> </p> <div class="CNLTreeMenu" id="CNLTreeMenu1"> <h4>CNL Tree Menu1</h4> <p><a id="AllOpen_1" href="#" onclick="MyCNLTreeMenu1.SetNodes(0);Hd(this);Sw('AllClose_1');">全部展开</a><a id="AllClose_1" href="#" onclick="MyCNLTreeMenu1.SetNodes(1);Hd(this);Sw('AllOpen_1');" style="display:none;">全部折叠</a></p> <ul> <li class="Opened"><a href=" http://www.iecn.net ">IECN.Net</a> <ul> <li><a href="#1">技术区</a> <ul> <li><a href="#">网页技术</a> <ul> <li class="Child"><a href="#">JavaScript</a></li><!--Child Node--> <li class="Child"><a href="#">HTML/XHTML/CSS</a></li> <li class="Child"><a href="#">Ajax</a></li> <li class="Child"><a href="#">网页制作工具</a></li> <li class="Child"><a href="#">设计/图形</a></li> <li class="Child"><a href="#">Flash/多媒体</a></li> <li class="Child"><a href="#">VML/Web3D</a></li> </ul></li><!--Sub Node 3--> <li><a href="#">Web编程</a> <ul> <li class="Child"><a href="#">Java</a></li><!--Child Node--> <li class="Child"><a href="#">.Net</a></li> <li class="Child"><a href="#">ASP/VBScript</a></li> <li class="Child"><a href="#">PHP</a></li> <li class="Child"><a href="#">Perl/Python</a></li> <li class="Child"><a href="#">Web综合/开源</a></li> </ul></li><!--Sub Node 3--> <li><a href="#">数据库</a> <ul> <li class="Child"><a href="#">Access/SQLServer</a></li><!--Child Node--> <li class="Child"><a href="#">MySQL/PostgreSQL</a></li> <li class="Child"><a href="#">Oracle/DB2/Sybase</a></li> </ul></li><!--Sub Node 3--> <li><a href="#">服务器</a> <ul> <li class="Child"><a href="#">Windows/IIS</a></li><!--Child Node--> <li class="Child"><a href="#">Unix/Linux/Apache</a></li> <li class="Child"><a href="#">应用服务器</a></li> </ul></li><!--Sub Node 3--> </ul></li><!--Sub Node 2--> <li><a href="#1">二级目录</a> <ul> <li><a href="#">三级目录</a> <ul> <li><a href="#">四级目录</a> <ul> <li><a href="#">五级目录</a> <ul> <li><a href="#">......</a> <ul> <li><a href="#">第n级目录</a> <ul> <li class="Child"><a href="#">叶结点1</a></li><!--Child Node--> <li class="Child"><a href="#">叶结点2</a></li> <li class="Child"><a href="#">叶结点3</a></li> </ul></li><!--Sub Node n --> </ul></li><!--Sub Node 6 --> </ul></li><!--Sub Node 5 --> </ul></li><!--Sub Node 4--> </ul></li><!--Sub Node 3--> </ul></li><!--Sub Node 2--> <li><a href="#1">二级目录</a> <ul> <li><a href="#">三级目录</a> <ul> <li><a href="#">四级目录</a> <ul> <li><a href="#">五级目录</a> <ul> <li><a href="#">......</a> <ul> <li><a href="#">第n级目录</a> <ul> <li class="Child"><a href="#">叶结点1</a></li><!--Child Node--> <li class="Child"><a href="#">叶结点2</a></li> <li class="Child"><a href="#">叶结点3</a></li> </ul></li><!--Sub Node n --> </ul></li><!--Sub Node 6 --> </ul></li><!--Sub Node 5 --> </ul></li><!--Sub Node 4--> </ul></li><!--Sub Node 3--> </ul></li><!--Sub Node 2--> </ul></li><!--Sub Node 1 --> </ul> </div><!-- CNLTreeMenu --> <!--CNLTreeMenu1 End!-->

希望采纳

10、如何让dreamweaver设计的html代码折叠

cs6 版本  选择要折叠的部分 左边会出现减号 点击减号就好了 

cc2015版本  鼠标移到行号和代码中间的空白处 会出现灰色小三角 点击小三角

与网页设计中的折叠用什么代码相关的知识