|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
时间：2008-05-06 关键字: css学习与探讨
自己在开始编写java后台之前，大多时间都在多页面，当然很多的页面框架都已经有了现成的模板，我只能再次基础之上学习，使用，有时候甚至不需要知道为什么，拿过来就用，现在想想确实有一些替自己惋惜，渐渐的我发觉Css的魔力以及使用起来的灵活性比亚于我们所使用的c，c++，java等中高级语言，虽然他只是一个样式表语言，但是它所蕴含的技巧与内容，还有待我们学习深究，我最近做了一个菜单，本人感觉里面就有很多的技巧东西，呵呵拿出来和大家探讨，希望我们共同学习，共同进步， 下面先把我们的html代码列出来 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>13styles.com Menu</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="menucontainer"> <div class="menu"> <ul> <li><a href="http://hi.baidu.com/wangwenjun0609.com" target="_blank">Home</a></li> <li><a href="#" target="_self">About us</a></li> <li><a class="drop" href="#" target="_self">Services</a> <table> <tr> <td> <ul> <li><a href="#" target="_self">Design</a></li> <li><a href="#" target="_self">Strategy</a></li> <li><a href="#" target="_self">Analysis</a></li> </ul> </td> </tr> </table> </li> <li><a href="#" target="_self">Support</a></li> <li><a href="#" target="_self">Forums</a></li> <li><a href="#" target="_self">Contact Us</a></li> </ul> </div> </div> </body> </html>
/*menu container*/
.menucontainer{background: #fff url(images/bgOFF.gif) no-repeat bottom left;}
/*basic menu styling*/
.menu {float:left;font-family: arial,verdana,sans-serif;width:100%;position:relative;font-size:11px;font-weight:bold;
background:url(images/bgOFF.gif) repeat-x bottom left;border-top:4px solid #B30000;}
.menu ul {padding:0;margin:0;list-style-type:none;float:left;position:relative;}
.menu ul li {float:left;position:relative;display:inline;background:url(images/bgDIVIDER.gif) no-repeat bottom right;}
/*style of main items normal state*/
.menu ul li a, .menu ul li a:visited {float:left;display:block;text-decoration:none;color:#000;width:auto;color:#666;padding:0px 16px 0px 16px;line-height:40px;height:40px;}
/*hide sub nav items*/
.menu ul li ul {display:none;}
/*clear the main nav bg*/
.menu ul li ul li{background:none;}
/*style for table of sub nav items*/
table {margin:-1px;border-collapse:collapse;font-size:11px;}
/*specific to non IE browsers*/
/*main nav over state*/
.menu ul li:hover a {color:#B30000;background: transparent url(images/bgON.gif) bottom left repeat-x;}
/*show drop-down list*/
.menu ul li:hover ul {display:block;position:absolute;top:36px;margin-top:1px;left:0;width:100%;border-top:1px solid #fff;}
/*drop-down on state*/
.menu ul li:hover ul li a {display:block;background:#e3e3e3;color:#333;height:auto;line-height:16px;padding:2px 16px 2px 16px;width:120px;border-top:1px solid #fff;}
/*sub drop-down over state*/
.menu ul li:hover ul li a:hover {color:#fff;background: #B30000 url(images/sub-arrow.gif) no-repeat;background-position: 4px 8px;}
好了，大家可以试试看了啊，希望我们多多探讨啊 下载附件
声明：JavaEye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
时间：2008-05-06
为什么没有人探讨，发表一些看法呢~我也想学习一点只是啊
|
| 返回顶楼 | |
|
时间：2008-05-06
引用 <li><a class="drop" href="#" target="_self">Services</a>
<table> <tr> <td> <ul> <li><a href="#" target="_self">Design</a></li> <li><a href="#" target="_self">Strategy</a></li> <li><a href="#" target="_self">Analysis</a></li> </ul> </td> </tr> </table> </li> 写出这种代码还怎么谈css？ |
| 返回顶楼 | |
|
时间：2008-05-06
请问怎样算谈，还希望你能指点！
|
| 返回顶楼 | |
|
时间：2008-05-09
好像是html代码呢
|
| 返回顶楼 | |
|
时间：2008-05-12
为什么需要一个TABLE呢？
|
| 返回顶楼 | |
|
时间：2008-05-12
因为好玩啊~
|
| 返回顶楼 | |
|
时间：2008-05-12
css的精神是：
html代表语义，而css全盘负责布局、显示效果。 再用table来布局是很让cssers讨厌的。 |
| 返回顶楼 | |
|
时间：2008-05-12
直接用ul li a不好吗？这样代码更好玩.
|
| 返回顶楼 | |
|
时间：前天
mornstar 写道 css的精神是：
html代表语义，而css全盘负责布局、显示效果。 再用table来布局是很让cssers讨厌的。 我也从公司里的高人那里得知table不是像楼主这样用的 |
| 返回顶楼 | |
