6.0w+
社区成员
- 全部
- 问答
CSS导航问题?>
在CSS里写了一个样式
.nav{ width:100%;background-image:url(01.gif); height:31px; }
.nav ul{ padding:0px; margin:0px;}
.nav li{ float:left;display:block; height:21px; text-align: center; width:14%; padding-top:10px;background-image:url(01-1.gif);font-size:12px;}
.nav a{color:#ffffff; text-decoration:none; font-weight:bold;}
.nav a:visited{color:#ffffff;text-decoration:none;font-weight:bold;}
.nav a:hover{color:#ffffff; text-decoration:underline;font-weight:bold;}
想让菜单多了,可以换行,请高手赐教,(注:在IE6下可以,IE7不行)
.nav{ width:100%;background-image:url(01.gif); height:31px; }
.nav ul{ padding:0px; margin:0px;}
.nav li{ float:left;display:block; height:21px; text-align: center; width:14%; padding-top:10px;background-image:url(01-1.gif);font-size:12px;}
.nav a{color:#ffffff; text-decoration:none; font-weight:bold;}
.nav a:visited{color:#ffffff;text-decoration:none;font-weight:bold;}
.nav a:hover{color:#ffffff; text-decoration:underline;font-weight:bold;}
想让菜单多了,可以换行,请高手赐教,(注:在IE6下可以,IE7不行)
...全文
当前发帖距今超过3年，不再开放新的回复
发表回复
xxmhl 2008-03-10
贴出来了啊!真晕,没人回复啊,??????????//
xxmhl 2008-03-10
<!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>Untitled Page</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品产品产品产品</a></li>
<li><a href="#">商机</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">bbs</a></li>
<li><a href="#">产品产品产品产品</a></li>
<li><a href="#">商机</a></li>
<li><a href="#">资讯资讯资讯资讯资讯</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">bbs</a></li>
<li><a href="#">产品产品产品产品</a></li>
<li><a href="#">商机</a></li>
<li><a href="#">资讯资讯资讯资讯资讯资讯资讯资讯</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">bbs</a></li>
</ul>
</div>
<body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品产品产品产品</a></li>
<li><a href="#">商机</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">bbs</a></li>
<li><a href="#">产品产品产品产品</a></li>
<li><a href="#">商机</a></li>
<li><a href="#">资讯资讯资讯资讯资讯</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">bbs</a></li>
<li><a href="#">产品产品产品产品</a></li>
<li><a href="#">商机</a></li>
<li><a href="#">资讯资讯资讯资讯资讯资讯资讯资讯</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">bbs</a></li>
</ul>
</div>
<body>
myvicy 2008-03-10
很面熟的...
兔子党-连长 2008-03-10
把你的html代码也帖下吧。。。
css ul li导航菜单居中问题解决方法 昨晚群里一个朋友帮忙解决的问题，之前没有遇到过，题目如下： 不改变html结构，使导航菜单垂直...复制代码代码如下: ”nav”> <li><a>home</li> <li><a>advice</li> <li><a>page</li> <li><a>people</li> <li><a>servi
CSS精致的导航菜单悬浮效果 本文的导航菜单完全由css制作完成，鼠标悬浮上去，看看效果怎么样，若是好赶紧收藏吧。 <div class='sucaihuo'> <a href="http://www.sucaihuo.com"><span>首页</span></a> ...
CSS 导航栏 使用CSS你尅转换成好看的导航栏而不是枯燥的HTML菜单。 导航栏=链接列表 作为标准的HTML基础一个导航栏是必须的。 导航栏基本上是一个链接链接，所以使用<ul>和<li>元素非常有...
div+css实现带箭头的面包屑导航栏 主页>栏目页>文章页面 主页/栏目页/文章页面 可以告诉访问者他们目前在网站中的位置以及如何返回的DOM叫面包屑导航栏 但是。。。。。。 你不觉得这个不好看吗？ 如果哪一天，你们公司的UI给你一张图，图里的面包屑...
纯CSS实现导航栏下划线跟随滑动效果 老规矩先上张图，如何使用纯 CSS 制作如下效果？ 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，... <li>导航栏</li> <li>光标小下划线跟随</li> <li>PURE CSS<
CSS+HTML如何写一个类似于淘宝的简单导航栏？ 今天我们来做一个类似于淘宝网站的导航栏，我以天猫超市、聚划算、天猫作为今天的例子 开发工具:VsCode ...首先我们先理一下编程思路，假设我们要做三个导航栏，我们就要对里面的字体大小、字体...css部分代码 首先，初...
CSS实现导航栏 1.知识点 列表 浮动 伪类 背景 文本格式化 盒子模型 2.效果 3.代码 <!DOCTYPE html> <html lang="en"> <head>...meta name="viewport" content="width=devic...
CSS 分页导航 分页导航对于搜索引擎或电子商务网站，常常将信息分页显示，...实际上，CSS 分页导航的制作方法也很简单。分页导航一般包括上一页、页码、下一页三部分。首先，创建一个容器，来包裹分页导航的链接。如：<d...
css3实例教程 一款纯css3实现的环形导航菜单 之前为大家介绍了好几款导航菜单，今天...复制代码代码如下:”container”> <h1> Cool Open/Close menu in full CSS</h1> <input type=”checkbox” id=”menu_opener_id” class=”menu_opener”> <label for
CSS+HTML 顶部导航栏实现 导航栏的实现、固定顶部导航栏、二级菜单实现 效果图： 代码实现： &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; .top{ /* ...
CSS 制作垂直导航 垂直导航CSS 垂直导航主要用于网站的侧边栏导航，使用侧边栏的好处是可以节约空间。因此，一些内容多，而又喜欢简约的网站，常常以侧边栏的方式进行展示。默认情况下，列表及列表项 li 元素都是块级元素，每个列表项...
CSS+DIV制作导航条 --导航条--> <li><a href="#">A</a></li> <!---------------------------------------------> <li><a href="#">B</a><!--二级--> <ul> <li><a href="#">B1</a><!--3级--> <ul> <li><a href="#">B12</a></li> ...
html+css 导航条 变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>162-a标签伪类选择器练习&... ma
如何应用ul、li标签 创建css横向导航菜单？ 或者由单元格内的文字所组成，由于人们不再推荐用表格来定位任何非表格的页面内容，所以很多制作Web的人正在寻找新的方法，用结构化的XHTML标记和CSS格式来创建导航条。这样的创建方式也更对搜索引擎蜘蛛友好，这对...
不可思议的CSS导航栏下划线跟随效果 先上张图，如何使用纯 CSS 制作如下效果？ 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。... <li>导航栏</li> <li>光标
CSS导航栏设置 CSS导航栏设置导航栏设置 导航栏设置 <ul id="nav"> <li><a href="#">主页</a></li> <li><a href="#">商品</a></li> <li><a ...
HTML+CSS 导航 以下为导航实现集合，仅此记录；日后将逐渐更新不同样式导航。 导航制作：一般利用ul &amp;amp;amp; li 实现。 一、水平导航 1、（水平靠左）实现方式：行内元素实现； 1）代码如下： &amp;amp...
CSS实现的一个简单时尚的左侧导航 简单的左侧导航 代码如下： 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>测试</title>...
纯CSS实现导航栏下划线跟随的示例代码 本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码，分享给大家，具体如下： 效果： 代码： html： <ul> <li>aaaa</li> <li>bbbbbbb</li> <li>cccc</li> <li>dddd</li> <li>eeee</li> </ul> css： ul...
css实现导航切换 css实现导航切换 效果图： 代码如下，复制即可使用： <!DOCTYPE html> <html> <head> <title>css实现导航切换</title> <style...
css实现导航菜单下拉效果 通过css也可以实现简单的导航栏效果，一些不会写js的下伙伴不用担心了。先上HTML部分 <nav> <ul class="level"> <li><a href="">...
纯css3实现的竖形无限级导航 今天给大家带来一款纯css3实现的竖形无限级导航。这款导航菜单可以是无限级。一起看下效果图： 实现的代码。 html代码： 复制代码代码如下: <div xss=removed> ”W1-h16″> <ul> ”has-sub”><a>Menu 1</a> <ul> ”...
CSS 实现面包屑导航 面包屑导航CSS 面包屑导航（Bread Crumbs Navigation）是一种辅助和补充的导航方式，非常适合展示站点的层级关系，能帮助用户明确当前所处的位置，并方便地提供返回的路径。面包屑的概念来自童话故事“汉赛尔和...
