仓酷云

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

[DIV+CSS] DIV教程之XHTML+CSS制造的尺度网站导航菜单

[复制链接]
谁可相欹 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 10:38:20 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
其实DIV+CSS是很简单的一种布局方式,甚至比任何一种编程语言都要简单(虽然它不能算是编程语言)。



<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>CSS代码演示-http://www.jz123.cn</title><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css">body{background-color:white;font-size:12px;font-family:Arial,Helvetica,sans-serif;margin:0px;padding:0px;color:white;}ul,li{margin:0px;padding:0px;}li{display:inline;list-style:none;list-style-position:outside;text-align:center;font-weight:bold;float:left;}a:link{color:#336601;text-decoration:none;float:left;width:100px;padding:3px5px0px5px;}a:visited{color:#336601;text-decoration:none;float:left;padding:3px5px0px5px;width:100px;}a:hover{color:white;float:left;padding:3px3px0px20px;width:88px;text-decoration:none;background-color:#539D26;}a:active{color:white;float:left;padding:3px3px0px20px;width:88px;text-decoration:none;background-color:#539D26;}#nav{width:600px;height:30px;border-bottom:0px;padding:0px5px;position:absolute;z-index:1;left:198px;top:25px;}.list{line-height:20px;text-align:left;padding:4px;font-weight:normal;}.menu1{width:120px;height:auto;margin:6px4px0px0px;border:1pxsolid#9CDD75;background-color:#F1FBEC;color:#336601;padding:6px0px0px0px;cursor:hand;overflow-y:hidden;filter:Alpha(opacity=70);-moz-opacity:0.7;}.menu2{width:120px;height:18px;margin:6px4px0px0px;background-color:#F5F5F5;color:#999999;border:1pxsolid#EEE8DD;padding:6px0px0px0px;overflow-y:hidden;cursor:hand;}</style></head><body><divid="nav"><ul><liclass="menu2"onMouseOver="this.className=menu1"onMouseOut="this.className=menu2">首页<divclass="list"><ahref="#">我的Png</a><br/><ahref="#">我的Gif</a><br/><ahref="#">我的酷站</a><br/><ahref="#">我的日记</a><br/><ahref="#">我的相册</a><br/><ahref="#">我的保藏</a><br/></div></li><liclass="menu2"onMouseOver="this.className=menu1"onMouseOut="this.className=menu2">社区圈子<divclass="list"><ahref="#">我的CHINAY</a><br/><ahref="#">我的首页</a><br/><ahref="#">我的日记</a><br/><ahref="#">我的相册</a><br/><ahref="#">我的保藏</a><br/></div></li><liclass="menu2"onMouseOver="this.className=menu1"onMouseOut="this.className=menu2">我的短信<divclass="list"><ahref="#">我的CHINAY</a><br/><ahref="#">我的相册</a><br/><ahref="#">我的保藏</a><br/></div></li><liclass="menu2"onMouseOver="this.className=menu1"onMouseOut="this.className=menu2">账户办理<divclass="list"><ahref="#">我的CHINAY</a><br/><ahref="#">我的首页</a><br/><ahref="#">我的日记</a><br/><ahref="#">我的相册</a><br/><ahref="#">我的保藏</a><br/><ahref="#">我的日记</a><br/><ahref="#">我的相册</a><br/><ahref="#">我的保藏</a><br/></div></li></ul></div></body></html>
尺度之路www.ckuyun.com提醒:能够先修正部分代码后再运转
最近在做一个魔术网的div+css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性。
愤怒的大鸟 该用户已被删除
沙发
发表于 2015-1-18 07:31:31 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
柔情似水 该用户已被删除
板凳
发表于 2015-1-24 22:06:44 来自手机 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
第二个灵魂 该用户已被删除
地板
发表于 2015-2-2 15:18:49 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
只想知道 该用户已被删除
5#
发表于 2015-2-8 02:32:24 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
admin 该用户已被删除
6#
发表于 2015-2-24 05:17:07 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
简单生活 该用户已被删除
7#
发表于 2015-3-7 11:35:37 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
老尸 该用户已被删除
8#
发表于 2015-3-21 21:22:33 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-6-4 06:22

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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