仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 2342|回复: 13
打印 上一主题 下一主题

[DIV+CSS] 来谈谈:破洛洛搜集30个特别的CSS导航网页

[复制链接]
老尸 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 22:17:27 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
最新版本html5+CSS3与2014年10月29日,万维网联盟宣布,经过几乎8年的艰辛努力,该标准规范终于最终制定完成。
1.TheMenumenu


ThisanothergreatCSSmenuStuNichollsthat’suniqueChoveringoveramenuitemrevealsasubmenu.Ifyouwantgetstartedwiththismenujustsimpleviewthesourcecode.Demoinpage.
2.PureCSShovermenu

ViewDemo
InthisCSStechnique,you’lllearntocreateavertically-orientedCSShovermenuthatrevealsasubmenuwhenamenuitemishoveredon.
3.MatteCSSMenu

ViewDemo
MatteisasimpleCSSmenuwithroundedcornersusingtwosmallimagesonlyfrom13styles.ItismaintainedbyDavidAppleyardwhohaslotsofsimpleandadvancedCSS-basedmenus.
4.CSSBlurMenu

ViewDemo
ThisCSStechniqueshowsyouamethodfromcreatingamenuthatblurssiblingmenuitemswhenyouhoveroveranitem.
5.CSSNavigationwithGlowingIcons


1234567下一页


一个样式规则由一个选择器后跟一个声明块组成,声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。
老尸 该用户已被删除
沙发
 楼主| 发表于 2015-1-15 23:18:57 | 只看该作者

来谈谈:破洛洛搜集30个特别的CSS导航网页

所有的设计第一步就是构思,构思好了。
ViewDemo</P>ThisbeautifulCSSmenutechniquecanbecreatedbyfollowingalongthisextensivestep-by-steptutorial.
6.CSSSlidingDoorusingonly1image

ViewDemo
ThisslickCSSmenuisbasedontheSlidingDoorstechniquebutonlyusesoneimage.
7.NavigationMatrixReloaded

ViewDemo
ThisstylishnavigationmenutechniqueusesaCSSsprite.
8.CSSHorizontalMenu

ViewDemo
IanMainprovidesagreatsetoffreeCSSmenusthatarestylishandeasytouse.
9.WoodyCSSMenu


Woodyisapre-madeCSSmenuthat’sreadytouseandhasbeentestedinIE6,IE7,Firefox,Opera,Safari,Chrome.Demointhepage.
10.AdvancedCSSMenu


AdvancedCSSMenuwascreatedby
上一页1234567下一页


CSS的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽,而且众所周知,搜索引擎喜欢清洁的代码。
老尸 该用户已被删除
板凳
 楼主| 发表于 2015-1-15 23:24:13 | 只看该作者

来谈谈:破洛洛搜集30个特别的CSS导航网页

缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
NickLaandusesanadvanced(extraordinary)listmenuutilizingtheCSSpositionproperty.Demointhepage.</P>1.SimpleYellowTabbed

ThismenuisfromCSSMenuGeneratorwhichhasmorefreehighqualitymenus.Demointhepage.
12.Vimeo-LikeTopNavigation

ViewDemo
ThisCSS-basednavigationmenuisbasedontheVimeoprimarymenu.
13.AppleLikeColorfulCSSMenu


LearnatechniqueformimickingApple’simagerolloverCSSmenubyfollowingalongthismenututorial.Demoinpage.
14.CSSHoverbox


InspiredbytheHoverboxImageGallerytechniquedevelopedbyNathanSmith,CSSHoverboxleansonthebackground-positionCSSpropertytosuperimposerolloverimagesontopofneighboringmenuitems.Demoinpage.
15.BigCSSBox


上一页1234567下一页


最新版本html5+css3与2014年10月29日,万维网联盟宣布,经过几乎8年的艰辛努力,该标准规范终于最终制定完成。
老尸 该用户已被删除
地板
 楼主| 发表于 2015-1-15 23:28:23 | 只看该作者

来谈谈:破洛洛搜集30个特别的CSS导航网页

这工具比表格好的唯一就是你可以定义一个ID,想怎么玩它就怎么玩他,表格用来处理显示数据,DIV+css+TABLE就行了,都什么年代了,以前没有DIV,而且386的年代不也一样,现在都奔腾4了
</P>ThisisanexperimentalCSSmenuthatallowsyoutocreateascalingmenuthatadjustsdependingonthebrowser’swidth.Demoinpage.
16.SimpleCSS-baseddrop-downmenu


ViewDemo
ThisisaverybasicCSS-baseddrop-downmenuthat’sexcellentfortryingtogrokthetechniqueinvolvedincreatingdrop-downmenuthatdoesn’trequireclient-sidescripting.
17.TwoLevelHorizontalNavigationinCSS


ViewDemo
VeerlePietersprovidesaCSSmenuandtutorialcreatedusingtext-indentCSSproperty.
18.UberlinkCSSListMenus


ViewDemo
ThisCSSnavigationbarlooksandbehaveslikeanimage-swappingmenu.
19.CSS-OnlyAccordionEffect


ViewDemo
Inthistechnique,you’llwitnessamethodforcreatingaCSS-basedaccordionmenu.
20.</p>
上一页1234567下一页


使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。
老尸 该用户已被删除
5#
 楼主| 发表于 2015-1-15 23:34:50 | 只看该作者

来谈谈:破洛洛搜集30个特别的CSS导航网页

你可以轻松地控制页面的布局。
TabbedNavigationUsingCSS


HereisanotherexcellentmethodforcreatingamoduletabinterfacebasedpurelyonCSS.Usethetabsinthepagetolearnabouttheinstructionsonhowtoimplementthistechnique.
21.CSSMiniTabs(theUN-tab,tab)

ViewDemo
ThisCSSmenuonthepopularwebdesignagencySimpleBitsshowsawayforcreatingminitabs.Viewthesourcecodeonthedemopagetolearnhowitworks(thecodeisinlineandformattedwellforreadabilityforyourconvenience).
22.Drop-DownMenus,HorizontalStyle

ViewDemo
ThisAListApartCSSmenutechniqueisforafly-outsubmenuthatappearsontherightofthetop-levelmenu,leveragingtheposition:absoluteCSSpropertytomovethesubmenutotheappropriatelevel.
23.ListIntoaNavigationBar

ViewDemo
RogerJohanssonof456BereaStreetshowsusthebasicprinciplesofturninganunorde
上一页1234567下一页


表现和结构分离,在团队开发中更容易分工合作而减少相互关联性
老尸 该用户已被删除
6#
 楼主| 发表于 2015-1-15 23:36:43 | 只看该作者

来谈谈:破洛洛搜集30个特别的CSS导航网页

学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。
redlistintoanavigationbarCit’sagreatstartingpointforbeginnerstolearnaboutbuildingasemanticHTMLstructureandthenstylingitwithCSS.</P>24.CSSTabswithSubmenus


ThisCSSmenutechniquewillallowyoutocreateCSStabsthathavesubmenusforatwo-levelhierarchy.Demoinpage.
25.CSSBlockNavigationMenu


ThisCSSmenutechniqueallowsyoutocreateanavigationmenuthathasitemwithdescriptions.Demoinpage.
26.XHTML&CSSSpriteNavigation

ViewDemo
ThisstylishCSSspritemenutechniquehasthreestates:idle,hover,andclicked.
27.XHTMLCSSTabbedMenu

ViewDemo
Learnhowtocreatemoduletabswithouttheuseofclient-sidescripting.
28.Cool,Simple,HorizontalCSSMenu


上一页1234567下一页


可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。
老尸 该用户已被删除
7#
 楼主| 发表于 2015-1-15 23:45:59 | 只看该作者

来谈谈:破洛洛搜集30个特别的CSS导航网页

一个样式规则由一个选择器后跟一个声明块组成,声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。
<divclass="start">ViewDemo</P>LearntocreateastraightforwardtechniqueforcreatingaCSSbasedmenu.
29.CSSMenuwithDescriptions


ViewDemo
Thistechniqueshowcasesamethodforcreatingamenuthatexpandswhenhoveredupon.
30.CSSHoverButton


ViewDemo
<P>CreateCSSbutton-stylenavigationmenubycheckingoutthisexcellenttutorial.
爱飞 该用户已被删除
8#
发表于 2015-1-17 23:58:32 | 只看该作者
AdobeDreamweaver(前称MacromediaDreamweaver)是Adobe公司的著名网站开发工具。
若天明 该用户已被删除
9#
发表于 2015-1-26 23:57:18 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
老尸 该用户已被删除
10#
 楼主| 发表于 2015-2-11 08:35:33 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
山那边是海 该用户已被删除
11#
发表于 2015-3-2 08:03:37 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
莫相离 该用户已被删除
12#
发表于 2015-3-11 05:24:40 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
分手快乐 该用户已被删除
13#
发表于 2015-3-17 23:10:30 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
小魔女 该用户已被删除
14#
发表于 2015-3-25 12:11:17 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-6 18:01

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表