打印

[讨论] 不用绝对定位改用浮动如何制作自适应宽度的按钮导航

weizeyan [楼主]

初级会员

帖子: 55
体力: 122
威望: 0
当前: 江苏连云港
离线: 4 天

专长 前端制作

1^# 大中小发表于 2008-5-17 18:25

下面是我写的固定宽度的按钮，大家继续

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>按钮自适应宽度</title>
<style type="text/css">
body{ background:url(http://weizeyan.128.tofor.com/weizeyan/js-css/webbg.jpg) top repeat-x; margin:0 auto; font:12px "宋体"; color:#0ff;}
.nav{ width:796px; margin:0 auto;}
 .nav li{ font-size:14px; margin:2px auto; display:block; list-style:none; float:left; text-align:center; width:500px;}
 .nav li a{color:#fff;text-decoration:none;float:left;width:500px;line-height:54px;background:url(http://weizeyan.128.tofor.com/weizeyan/js-css/a1.gif) center top no-repeat;} 
 .nav li a:hover{ font-weight:bold; background:url(http://weizeyan.128.tofor.com/weizeyan/js-css/a1.gif) center bottom no-repeat;}
</style>
</head>
<body>
<div class="nav">
 <ul>
   <li><a href="#" title="">网站首页</a></li>
   <li><a href="#" title="">网站首页</a></li>
   <li><a href="#" title="">网站首页</a></li>
 </ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

不在多在专

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

zidanezhicong

我爱阿仙奴

高级会员

帖子: 447
体力: 895
威望: 0
当前: 广东深圳

专长 前端制作

2^# 大中小发表于 2008-5-17 20:13

都不知道你想讨论什么！

我爱阿仙奴！

TOP

美橙vps独立IP月付189元

weizeyan [楼主]

初级会员

帖子: 55
体力: 122
威望: 0
当前: 江苏连云港
离线: 4 天

专长 前端制作

3^# 大中小发表于 2008-5-18 12:11

如果你不懂就别进来，谢谢

如果你不懂就别进来

不在多在专

TOP

请大家尊重和保护奥运知识产权。

zidanezhicong

我爱阿仙奴

高级会员

帖子: 447
体力: 895
威望: 0
当前: 广东深圳

专长 前端制作

4^# 大中小发表于 2008-5-18 12:28

如果你觉得很多人懂你说什么，就不会只有我会你的帖啦！我的原意是觉得你表达的不清晰，想叫你表达清楚。

我爱阿仙奴！

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

xeonwell

初级会员

帖子: 64
体力: 128
威望: 0
当前: 广东深圳
离线: 1 天

专长 JS,ASP,C#

5^# 大中小发表于 2008-5-18 12:34

不知道楼主说什么，希望没会错意
宽度改为相对宽度

.nav{ width:80%; margin:0 auto;}
.nav li{ font-size:14px; margin:2px auto; display:block; list-style:none; float:left; text-align:center; width:80%;}
.nav li a{color:#fff;text-decoration:none;float:left;width:100%;line-height:54px;background:url([img]http://weizeyan.128.tofor.com/weizeyan/js-css/a1.gif[/img]) center top no-repeat;}

TOP

mirycat

CK同伈鎖

版主

帖子: 4610
体力: 12045
威望: 362
当前: 上海黄浦
离线: 2 天

专长 AS,策划,项目管理

6^# 大中小发表于 2008-5-18 13:24

引用:

原帖由 weizeyan 于 2008-5-18 12:11 PM 发表
如果你不懂就别进来

论坛是大家的, 你是来求助的, 注意你的语气
同时你的表达的确有问题. 我也没看懂你说什么

My blog
中长篇奇幻 - 黄昏国度

TOP

jiangxin85

燃烧的海平面

高级会员

帖子: 640
体力: 593
威望: 0
当前: 北京海淀区

专长 前端制作

7^# 大中小发表于 2008-5-19 13:50

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">

</style>
<title>无标题文档</title>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#"><span>标题</a></span></li>
<li><a href="#"><span>一个标题</a></span></li>
<li><a href="#"><span>这是一个标题</a></span></li>
<li><a href="#"><span>这是一个很长很长的标题</a></span></li>
</ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

楼主是想要这样的效果吗？
不过你的态度确实

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

这就是签名吗

TOP

weizeyan [楼主]

初级会员

帖子: 55
体力: 122
威望: 0
当前: 江苏连云港
离线: 4 天

专长 前端制作

8^# 大中小发表于 2008-5-20 21:14

楼上的标签错位

楼上的标签错位，而且达不到切换的效果呢

不在多在专

TOP

jiangxin85

燃烧的海平面

高级会员

帖子: 640
体力: 593
威望: 0
当前: 北京海淀区

专长 前端制作

9^# 大中小发表于 2008-5-20 21:29

你在哪个浏览器下看错位呀?
我只是给你提供一个思路
你自己不会加个a:hover的样式吗

这就是签名吗

TOP

fuguojian1988

天天向网NET

银牌会员

帖子: 914
体力: 1868
威望: 0
当前: 河南商丘
离线: 1 天

专长 网页设计,平面,前端制作

10^# 大中小发表于 2008-5-21 00:27

我给楼主一个思路吧：

你如果做圆角的按钮的样式的话，可以分别制作两个有上下圆角的样式（一个左边的，一个右边的），中间可以制作按钮的本身，两边圆角和中间部分组合起来，中间设置的值是自适应就是啦，当输入的文字多了就撑大，少的话就自动收缩。。。两边的圆角样式保持固定的。

也不知道大家看懂没......就凑合着看吧

一个人的路，还是一个人走！

TOP