css能力：怎样行使CSS让菜单横向
发布时间：2018-09-01 19:36:08 所属栏目：创业 来源：站长网
导读：在上面一节我们讲到的是垂直的导航.可是大多网站用的照旧横向的导航,那么就来跟我学下横领导航是怎样实现的.要怎么实现下面的结果.只要在列表项之间停止换行就行了,以是要把li转换为内联. HTML和CSS代码如下： Copy to Clipboard 引用的内容：[www.veryhuo
|
在上面一节我们讲到的是垂直的导航.可是大多网站用的照旧横向的导航,那么就来跟我学下横领导航是怎样实现的.要怎么实现下面的结果.只要在列表项之间停止换行就行了,以是要把<li>转换为内联.
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 - liehuo.net</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="listnav_horiz.css" /> </head> <body> <div id="navigation"> <ul> <li><a href="#">Recipes</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Buy Online</a></li> </ul> </div> </body> </html> body { padding: 1em; } #navigation { font-size: 90%; } #navigation ul { list-style: none; margin: 0; padding: 0; padding-top: 1em; } #navigation li { display: inline; } #navigation a:link, #navigation a:visited { padding: 0.4em 1em 0.4em 1em; color: #FFFFFF; background-color: #B51032; text-decoration: none; border: 1px solid #711515; } #navigation a:hover { color: #FFFFFF; background-color: #711515; } 说明： 建设一个div容器,然后在内里添加一个列表： Copy to Clipboard引用的内容：[www.veryhuo.com]
<div id="navigation"> <ul> <li><a href="#">Recipes</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Buy Online</a></li> </ul> </div> 在#navigation 容器里添加一些根基的信息,如字体的巨细.在CSS机关中这个容器还也许会添加一些特另外信息,如:确定这个导航在页面上的位置. Copy to Clipboard引用的内容：[www.veryhuo.com]
#navigation { font-size: 90%; } 接下来在<ul>工具,我们把默认的圆点破除和破除默认的缩进。
Copy to Clipboard 引用的内容：[www.veryhuo.com]
#navigation ul { list-style: none; margin: 0; padding: 0; padding-top: 1em; } 此刻是横领导航最重要的一部门,由于没有了这一步那就不叫横向了,^_^.配置<li>为内联元素,这样就停止了换行. Copy to Clipboard引用的内容：[www.veryhuo.com]
#navigation li { display: inline; } 最后再给导航增进些结果: Copy to Clipboard引用的内容：[www.veryhuo.com]
#navigation a:link, #navigation a:visited { padding: 0.4em 1em 0.4em 1em; color: #FFFFFF; background-color: #B51032; text-decoration: none; border: 1px solid #711515; } #navigation a:hover { color: #FFFFFF; background-color: #711515; } PS:假如你想让文本与边框的间隔大一点,那么你就要配置left padding和right padding.假如你想让项与项之间的间隔变大,那么你也要配置left margin 和right margin. 转自：www.ximumu.cn （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
