来一发CSS+DIV计划实例：纯CSS制造下拉导航菜单 background,absolute,position,relative,specific

萌萌妈妈 发表于 2015-1-16 00:21:22

来一发CSS+DIV计划实例：纯CSS制造下拉导航菜单

层叠样式表（CascadingStyleSheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。
以下是援用片断：
<styletype="text/css">
.menu{
font-family:verdana,sans-serif;
width:750px;
position:relative;
font-size:0.85em;
padding-bottom:250px;
}
.menuul{
padding:0;
margin:0;
list-style-type:none;
}
.menuulli{
float:left;
position:relative;
}
.menuullia,.menuullia:visited{
display:block;
text-decoration:none;
color:#000;
width:139px;
height:3em;
color:#000;
border:1pxsolid#fff;
border-width:1px1px00;
background:#dfc184;
padding-left:10px;
line-height:3em;
}
*html.menuullia,.menuullia:visited{
width:149px;
w/idth:139px;
}
.menuulliul{
display:none;
}
table{
margin:-1px;
border-collapse:collapse;
font-size:1em;
}

/*specifictononIEbrowsers*/
.menuulli:hovera{
color:#fff;
background:#bd8d5e;
}
.menuulli:hoverul{
display:block;
position:absolute;
top:3em;
margin-top:1px;
left:0;
width:150px;
}
.menuulli:hoverulliul{
display:none;
}
.menuulli:hoverullia{
display:block;
background:#faeec7;
color:#000;
height:auto;
line-height:1.2em;
padding:5px10px;
width:129px
}
.menuulli:hoverullia.drop{
background:#c9c9a7url(../../graphics/drop.gif)bottomrightno-repeat;
}
.menuulli:hoverullia:hover{
background:#c9c9a7;
color:#000;
}
.menuulli:hoverulli:hoverul{
display:block;
position:absolute;
left:150px;
top:0;
width:150px;
}
.menuulli:hoverulli:hoverul.left{
left:-150px;
}

</style>

<divclass="menu">

<ul>
<li><aclass="drop"href="../menu/index.html">DEMOS

</a>


<table><tr><td>

<ul>
<li><ahref="../menu/zero_dollars.html"title="Thezerodollaradspage">zerodollarsadvertisingpage</a></li>
<li><ahref="../menu/embed.html"title="Wrappingtextaroundimages">wrappingtextaroundimages</a></li>
<li><ahref="../menu/form.html"title="Stylingforms">styledform</a></li>
<li><ahref="../menu/nodots.html"title="Removingactive/focusborders">activefocus</a></li>

<li><aclass="drop"href="../menu/hover_click.html"title="Hover/clickwithnoactive/focusborders">hover/clickwithnoborders

</a>


<table><tr><td>
<ul>
<li><ahref="../menu/form.html"title="Stylingforms">styledform</a></li>
<li><ahref="../menu/nodots.html"title="Removingactive/focusborders">removingactive/focusborders</a></li>
<li><ahref="../menu/hover_click.html"title="Hover/clickwithnoactive/focusborders">hover/click</a></li>
</ul>
</td></tr></table>



</li>

<liclass="upone"><ahref="../menu/shadow_boxing.html"title="Multi-positiondropshadow">shadowboxing</a></li>
<li><ahref="../menu/old_master.html"title="ImageMapfordetailedinformation">imagemapfordetailedinformation</a></li>
<li><ahref="../menu/bodies.html"title="funwithbackgroundimages">funwithbackgroundimages</a></li>
<li><ahref="../menu/fade_scroll.html"title="fade-outscrolling">fadescrolling</a></li>
<li><ahref="../menu/em_images.html"title="emsizeimagescompared">emimagesizescompared</a></li>
</ul>

</td></tr></table>



</li>

<li><ahref="../boxes/index.html">BOXES

</a>


<table><tr><td>

<ul>
<li><ahref="spies.html"title="acodedlistofspies">acodedlistofspies</a></li>
<li><ahref="vertical.html"title="ahorizontalverticalmenu">verticalmenu</a></li>
<li><ahref="expand.html"title="anenlargingunorderedlist">enlargingunorderedlist</a></li>
<li><ahref="enlarge.html"title="anunorderedlistwithlinkimages">linkimages</a></li>
<li><ahref="cross.html"title="non-rectangularlinks">non-rectangular</a></li>
<li><ahref="jigsaw.html"title="jigsawlinks">jigsawlinks</a></li>
<li><ahref="circles.html"title="circularlinks">circularlinks</a></li>
</ul>

</td></tr></table>



</li>

<li><ahref="../mozilla/index.html">MOZILLA

</a>


<table><tr><td>

<ul>
<li><ahref="../mozilla/dropdown.html"title="Adropdownmenu">dropdownmenu</a></li>
<li><ahref="../mozilla/cascade.html"title="Acascadingmenu">cascadingmenu</a></li>
<li><ahref="../mozilla/content.html"title="Usingcontent:">content:</a></li>
<li><ahref="../mozilla/moxbox.html"title=":hoverappliedtoadiv">mozziebox</a></li>
<li><ahref="../mozilla/rainbow.html"title="Icanbuildarainbow">Icanbuildarainbowwithtransparentborders</a></li>
<li><ahref="../mozilla/snooker.html"title="Snookercue">asnookercueusingborderart</a></li>
<li><ahref="../mozilla/target.html"title="TargetPractise">targetpractise</a></li>
<li><ahref="../mozilla/splittext.html"title="Twotoneheadings">twotoneheadings</a></li>
<li><ahref="../mozilla/shadow_text.html"title="Shadowtext">shadowtext</a></li>
</ul>

</td></tr></table>



</li>

<li><ahref="../ie/index.html">EXPLORER

</a>


<table><tr><td>

<ul>
<li><ahref="../ie/exampleone.html"title="Exampleone">thefirstexampleforInternetExplorer</a></li>
<li><ahref="../ie/weft.html"title="Weftfonts">weftfonts</a></li>
<li><ahref="../ie/exampletwo.html"title="Verticalalign">verticallyaligningtext</a></li>
</ul>

</td></tr></table>



</li>

<li><ahref="../opacity/index.html">OPACITY

</a>


<table><tr><td>

<ul>
<li><ahref="../opacity/colours.html"title="colourwheel">acolourwheelusingopaquecolours</a></li>
<li><ahref="../opacity/picturemenu.html"title="amenuusingopacity">amenuusingopacity</a></li>
<li><ahref="../opacity/png.html"title="partialopacity">partialopacity</a></li>
<li><ahref="../opacity/png2.html"title="partialopacityII">partialopacityII</a></li>

<li><aclass="drop"href="../menu/hover_click.html"title="Hover/clickwithnoactive/focusborders">HOVER/CLICK

</a>


<table><tr><td>

<ulclass="left">
<li><ahref="../menu/form.html"title="Stylingforms">styledform</a></li>
<li><ahref="../menu/nodots.html"title="Removingactive/focusborders">removingactive/focusborders</a></li>
<li><ahref="../menu/hover_click.html"title="Hover/clickwithnoactive/focusborders">hover/click</a></li>
</ul>

</td></tr></table>



</li>
</ul>

</td></tr></table>



</li>
</ul>

</div><styletype="text/css">.menu{font-family:verdana,sans-serif;width:750px;position:relative;font-size:0.85em;padding-bottom:250px;}.menuul{padding:0;margin:0;list-style-type:none;}.menuulli{float:left;position:relative;}.menuullia,.menuullia:visited{display:block;text-decoration:none;color:#000;width:139px;height:3em;color:#000;border:1pxsolid#fff;border-width:1px1px00;background:#dfc184;padding-left:10px;line-height:3em;}*html.menuullia,.menuullia:visited{width:149px;w/idth:139px;}.menuulliul{display:none;}table{margin:-1px;border-collapse:collapse;font-size:1em;}/*specifictononIEbrowsers*/.menuulli:hovera{color:#fff;background:#bd8d5e;}.menuulli:hoverul{display:block;position:absolute;top:3em;margin-top:1px;left:0;width:150px;}.menuulli:hoverulliul{display:none;}.menuulli:hoverullia{display:block;background:#faeec7;color:#000;height:auto;line-height:1.2em;padding:5px10px;width:129px}.menuulli:hoverullia.drop{background:#c9c9a7url(../../graphics/drop.gif)bottomrightno-repeat;}.menuulli:hoverullia:hover{background:#c9c9a7;color:#000;}.menuulli:hoverulli:hoverul{display:block;position:absolute;left:150px;top:0;width:150px;}.menuulli:hoverulli:hoverul.left{left:-150px;}</style><divclass="menu"><ul><li><aclass="drop"href="../menu/index.html">DEMOS</a><table><tr><td><ul><li><ahref="../menu/zero_dollars.html"title="Thezerodollaradspage">zerodollarsadvertisingpage</a></li><li><ahref="../menu/embed.html"title="Wrappingtextaroundimages">wrappingtextaroundimages</a></li><li><ahref="../menu/form.html"title="Stylingforms">styledform</a></li><li><ahref="../menu/nodots.html"title="Removingactive/focusborders">activefocus</a></li><li><aclass="drop"href="../menu/hover_click.html"title="Hover/clickwithnoactive/focusborders">hover/clickwithnoborders</a><table><tr><td><ul><li><ahref="../menu/form.html"title="Stylingforms">styledform</a></li><li><ahref="../menu/nodots.html"title="Removingactive/focusborders">removingactive/focusborders</a></li><li><ahref="../menu/hover_click.html"title="Hover/clickwithnoactive/focusborders">hover/click</a></li></ul></td></tr></table></li><liclass="upone"><ahref="../menu/shadow_boxing.html"title="Multi-positiondropshadow">shadowboxing</a></li><li><ahref="../menu/old_master.html"title="ImageMapfordetailedinformation">imagemapfordetailedinformation</a></li><li><ahref="../menu/bodies.html"title="funwithbackgroundimages">funwithbackgroundimages</a></li><li><ahref="../menu/fade_scroll.html"title="fade-outscrolling">fadescrolling</a></li><li><ahref="../menu/em_images.html"title="emsizeimagescompared">emimagesizescompared</a></li></ul></td></tr></table></li><li><ahref="../boxes/index.html">BOXES</a><table><tr><td><ul><li><ahref="spies.html"title="acodedlistofspies">acodedlistofspies</a></li><li><ahref="vertical.html"title="ahorizontalverticalmenu">verticalmenu</a></li><li><ahref="expand.html"title="anenlargingunorderedlist">enlargingunorderedlist</a></li><li><ahref="enlarge.html"title="anunorderedlistwithlinkimages">linkimages</a></li><li><ahref="cross.html"title="non-rectangularlinks">non-rectangular</a></li><li><ahref="jigsaw.html"title="jigsawlinks">jigsawlinks</a></li><li><ahref="circles.html"title="circularlinks">circularlinks</a></li></ul></td></tr></table></li><li><ahref="../mozilla/index.html">MOZILLA</a><table><tr><td><ul><li><ahref="../mozilla/dropdown.html"title="Adropdownmenu">dropdownmenu</a></li><li><ahref="../mozilla/cascade.html"title="Acascadingmenu">cascadingmenu</a></li><li><ahref="../mozilla/content.html"title="Usingcontent:">content:</a></li><li><ahref="../mozilla/moxbox.html"title=":hoverappliedtoadiv">mozziebox</a></li><li><ahref="../mozilla/rainbow.html"title="Icanbuildarainbow">Icanbuildarainbowwithtransparentborders</a></li><li><ahref="../mozilla/snooker.html"title="Snookercue">asnookercueusingborderart</a></li><li><ahref="../mozilla/target.html"title="TargetPractise">targetpractise</a></li><li><ahref="../mozilla/splittext.html"title="Twotoneheadings">twotoneheadings</a></li><li><ahref="../mozilla/shadow_text.html"title="Shadowtext">shadowtext</a></li></ul></td></tr></table></li><li><ahref="../ie/index.html">EXPLORER</a><table><tr><td><ul><li><ahref="../ie/exampleone.html"title="Exampleone">thefirstexampleforInternetExplorer</a></li><li><ahref="../ie/weft.html"title="Weftfonts">weftfonts</a></li><li><ahref="../ie/exampletwo.html"title="Verticalalign">verticallyaligningtext</a></li></ul></td></tr></table></li><li><ahref="../opacity/index.html">OPACITY</a><table><tr><td><ul><li><ahref="../opacity/colours.html"title="colourwheel">acolourwheelusingopaquecolours</a></li><li><ahref="../opacity/picturemenu.html"title="amenuusingopacity">amenuusingopacity</a></li><li><ahref="../opacity/png.html"title="partialopacity">partialopacity</a></li><li><ahref="../opacity/png2.html"title="partialopacityII">partialopacityII</a></li><li><aclass="drop"href="../menu/hover_click.html"title="Hover/clickwithnoactive/focusborders">HOVER/CLICK</a><table><tr><td><ulclass="left"><li><ahref="../menu/form.html"title="Stylingforms">styledform</a></li><li><ahref="../menu/nodots.html"title="Removingactive/focusborders">removingactive/focusborders</a></li><li><ahref="../menu/hover_click.html"title="Hover/clickwithnoactive/focusborders">hover/click</a></li></ul></td></tr></table></li></ul></td></tr></table></li></ul></div><scriptlanguage="Javascript">varnow=newDate();document.write("</noscript></p>
提高易用性。使用CSS可以结构化HTML，例如：标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。

金色的骷髅 发表于 2015-1-18 06:17:19

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

飘飘悠悠 发表于 2015-1-25 18:22:45

可以使用 CSS 检查工具进行设计。

透明发表于 2015-2-3 14:31:42

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

深爱那片海 发表于 2015-2-9 04:16:14

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

简单生活 发表于 2015-2-26 22:21:05

可以使用 CSS 检查工具进行设计。

不帅发表于 2015-3-8 18:47:47

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

兰色精灵 发表于 2015-3-16 12:30:12

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

山那边是海 发表于 2015-3-22 23:15:29

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

页: [1]

仓酷云's Archiver

来一发CSS+DIV计划实例：纯CSS制造下拉导航菜单