DIV教程之XHTML+CSS制造的尺度网站导航菜单
其实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属性。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
页:
[1]