CSS使用标签来创建导航菜单(滑动门教程)
发布时间：2018-08-29 03:35:22 所属栏目：经验 来源：站长网
导读：利用标签来创建导航菜单,是一个比较流行的方法.那就跟木木一起来学一下如何使用标签来创一个导航菜单. 效果图: HTML和CSS代码如下： Copy to Clipboard 引用的内容：[www.veryhuo.com]!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w
|
利用标签来创建导航菜单,是一个比较流行的方法.那就跟木木一起来学一下如何使用标签来创一个导航菜单. 效果图:
HTML和CSS代码如下： Copy to Clipboard 引用的内容：[www.veryhuo.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <head> <title>Lists as navigation</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="tabs.css" /> </head> <body id="recipes"> <div id="header"> <ul> <li class="recipes"><a href="#">Recipes</a></li> <li class="contact"><a href="#">Contact Us</a></li> <li class="articles"><a href="#">Articles</a></li> <li class="buy"><a href="#">Buy Online</a></li> </ul> </div> <div id="content"> <h1>Recipes</h1> <p>Lorem ipsum dolor sit amet, … </p> </div> </body> </html> body { font: .8em/1.8em verdana, arial, sans-serif; background-color: #FFFFFF; color: #000000; margin: 0 10% 0 10%; } #header { float: left; width: 100%; border-bottom: 1px solid #8DA5FF; margin-bottom: 2em; } #header ul { margin: 0; padding: 2em 0 0 0; list-style: none; } #header li { float: left; background-image: url("images/tab_left.gif"); background-repeat: no-repeat; margin: 0 1px 0 0; padding: 0 0 0 8px; } #header a { float: left; display: block; background-image: url("images/tab_right.gif"); background-repeat: no-repeat; background-position: right top; padding: 0.2em 10px 0.2em 0; text-decoration: none; font-weight: bold; color: #333366; } #recipes #header li.recipes, #contact #header li.contact, #articles #header li.articles, #buy #header li.buy { background-image: url("images/tab_active_left.gif"); } #recipes #header li.recipes a, #contact #header li.contact a, #articles #header li.articles a, #buy #header li.buy a { background-image: url("images/tab_active_right.gif"); background-color: transparent; color:#FFFFFF; } （编辑：源码门户网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
