仓酷云

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

[DIV+CSS] CSS教程之用CSS完成的一张图完成的导航条

[复制链接]
简单生活 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 07:39:52 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title><ahref="http://homepage.yesky.com/"class="bluekey"target="_blank">网页</a>殊效代码|http://homepage.yesky.com/|---用CSS完成的一张图完成的导航条</title><style>ul,li{list-style:none;float:left;}body{font-size:12px;line-height:1.6;font-family:Verdana,"宋体",Arial;text-align:center;}#infoli{margin-left:4px;margin-top:15px;}#infoa{display:block;text-align:center;padding-left:15px;padding-top:2px;padding-bottom:1px;background-image:url(http://www.jscode.cn/Uploadfile/200682494749491.GIF);background-repeat:no-repeat;color:#000;width:47px;cursor:hand;text-decoration:none;}#joba:link,#joba:visited{background-position:-62px0px;}#evea:link,#evea:visited{background-position:-124px0px;}#otha:link,#otha:visited{background-position:-186px0px;}#cara:hover,#cara:active{background-position:0px-22px;color:#fff;}#joba:hover,#cara:active{background-position:-62px-22px;color:#fff;}#evea:hover,#cara:active{background-position:-124px-22px;color:#fff;}#otha:hover,#cara:active{background-position:-186px-22px;color:#fff;}</style></head><body><divid="info"><ul><liid="car"><ahref="http://homepage.yesky.com/"target="_blank"><span>游戏</span></a></li><liid="job"><ahref="http://homepage.yesky.com/"target="_blank"><span>娱乐</span></a></li><liid="eve"><ahref="http://homepage.yesky.com/"target="_blank"><span>菜单</span></a></li><liid="oth"><ahref="http://homepage.yesky.com/"target="_blank"><span>好玩</span></a></li></ul></div><divstyle="clear:both">转载请说明出处子鼠<ahref="http://www.zishu.cn"target="_blank">http://www.zishu.cn</a>子鼠</div></body></html></p>
在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。
愤怒的大鸟 该用户已被删除
沙发
发表于 2015-1-18 06:45:46 | 只看该作者
Dreamweaver在所见即所得添加链接,也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈,用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。
透明 该用户已被删除
板凳
发表于 2015-1-25 17:07:48 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
老尸 该用户已被删除
地板
发表于 2015-2-3 12:11:07 | 只看该作者
俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。
乐观 该用户已被删除
5#
发表于 2015-2-8 22:45:58 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
深爱那片海 该用户已被删除
6#
发表于 2015-2-26 13:38:11 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
不帅 该用户已被删除
7#
发表于 2015-3-8 15:29:42 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
因胸联盟 该用户已被删除
8#
发表于 2015-3-16 05:08:10 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
兰色精灵 该用户已被删除
9#
发表于 2015-3-22 20:43:12 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-5-10 10:08

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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