打印

[求助] 蓝色理想首页头部用DIV做帮忙.......

yongwangtv [楼主]

初级会员

帖子: 51
体力: 117
威望: 0
当前: 广东惠州
离线: 97 天

1^# 大中小发表于 2008-8-4 17:43

大哥门帮帮忙啊,做了半天做的一点都不象,请高人帮我在我的原代码上修改,成如附件图片上的.
初学,还很多不懂,请多多指教啊.

<!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:#555555;}
* {margin:0;padding:0;}
#toubu {width:780px;height:50px;border:1px solid #ffffff;margin:0 auto;background-color:#ffffff;
       font-size:12px;color:#ffffff;}
#toubu-logo {width:100px;height:27px;background-image:url(http://www.blueidea.com/img/common/logo.gif);margin:10px              5px;float:left;}
#toubu-shang {width:660px;height:30px;border:1px solid #000000;float:left;}
#toubu-shang ul{padding:8px 0px 0px 3px;}
#toubu-shang li{float:left;margin-left:15px;display:block;background-color:#888888;height:28px;}
#toubu-shang li a{text-decoration:none;}
#toubu-xia {width:660px;height:12px;margin-bottom:3px;margin-right:0px;background-color:#006699;}
</style>
</head>
<body>
<div id="toubu">
<div id="toubu-logo"></div>
<div id="toubu-shang">
<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="#">资源下载</a></li>
<li><a href="#">个人专栏</a></li>
<li><a href="#">CG绘画</a></li>
<li><a href="#">专题</a></li>
<li><a href="#">经典论坛</a></li>
<ul>
</div>
<div id="toubu-xia"></div>
</div>
</body>
</html>

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

[ 本帖最后由 yongwangtv 于 2008-8-4 17:50 编辑 ]

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

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

cuikai

银牌会员

帖子: 1617
体力: 2070
威望: 9
当前: 北京海淀区

专长 UI,前端制作

2^# 大中小发表于 2008-8-4 17:48

复制内容到剪贴板

代码:

<div class="blueidea_logo">

        <a target="_blank" href="http://www.blueidea.com"><img class="blueidea_logo" src="images/default/logo.gif"/></a>

        <div id="blueidea_nav">

            <a target="_blank" href="http://www.blueidea.com" class="bbs">主站</a>

            <a href="http://bbs.blueidea.com" class="current">经典论坛</a>

            <a target="_blank" href="http://case.blueidea.com" class="bbs">作品集</a>

            <a target="_blank" href="http://pages.blueidea.com" class="bbs">Think.Pages</a>

            <a target="_blank" href="http://blogbeta.blueidea.com" class="bbs">博客</a>

            <a target="_blank" href="http://wiki.blueidea.com" class="bbs">维基</a>

            <a target="_blank" href="http://desk.blueidea.com" class="bbs">桌面</a>

            <a target="_blank" href="http://blog.blueidea.com" class="bbs">聚合</a>

        </div>

    

    </div>

div.blueidea_logo {       style_1.css （行 684）
height:30px;
}

#blueidea_nav {             style_1.css （行 690）
color:#808598;
float:left;
}

#blueidea_nav a {style_1.css             （行 692）
color:#333366;
display:block;
float:left;
font-size:14px;
font-weight:bold;
height:22px !important;
padding:8px 10px 0;
}

#blueidea_nav a.current, #nav a.current:hover {                style_1.css （行 694）
background:#808598 url(../../images/default/jiantou.gif) no-repeat scroll center bottom;
color:#FFFFFF;
}

wordpress: www.uicss.cn

TOP

美橙vps独立IP月付189元 | 千千静听皮肤设计大赛

yongwangtv [楼主]

初级会员

帖子: 51
体力: 117
威望: 0
当前: 广东惠州
离线: 97 天

3^# 大中小发表于 2008-8-4 17:50

楼上请帮我在我的代码里改好吗

非常谢谢

TOP

掌握加薪筹码 IT薪资宝典给您答案！

wbina

初级会员

帖子: 35
体力: 83
威望: 0
当前: 安徽合肥
离线: 17 天

4^# 大中小发表于 2008-8-4 18:16

谢谢分享哈!
都是好心人呀

woo.my

TOP

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

yongwangtv [楼主]

初级会员

帖子: 51
体力: 117
威望: 0
当前: 广东惠州
离线: 97 天

5^# 大中小发表于 2008-8-5 08:37

555555555555555,这么简单的一块代码,没人帮忙写出来嘛,我是求学啊

TOP

yongwangtv [楼主]

初级会员

帖子: 51
体力: 117
威望: 0
当前: 广东惠州
离线: 97 天

6^# 大中小发表于 2008-8-5 13:07

哎,靠别人还不如靠自己........

自己琢磨了一晚上,终于有点象样了,请高人指点,我的布局思路有没有错,
或者还有没有更好的布局思路.

<!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:#616378;}
* {margin:0;padding:0;}
#toubu {width:770px;height:54px;border:1px solid #ffffff;margin:0 auto;background-color:#ffffff;
       font-size:12px;color:#ffffff;}
#toubu-logo {width:100px;height:27px;background-image:url(http://www.blueidea.com/img/common/logo.gif);margin:10px              
5px;float:left;}
#toubu-shang {width:660px;height:30px;float:left;margin-left:-9px;}
#toubu-shang ul{padding-top:4px;}
#toubu-shang li{float:left;margin-left:6px;height:25px;width:61px;background-color:#8c8ea3;}
#toubu-shang li.op{height:25px;width:45px;padding-left:1px;}
#toubu-shang li.op1{height:25px;width:75px;}
#toubu-shang li a{display:block;text-decoration:none;margin-top:6px;margin-left:7px;color:#ffffff;}
#toubu-shang li a.pp{margin-left:4px;}
#toubu-shang li a.pp1{margin-left:9px;}
#toubu-shang li a:hover{text-decoration:underline;}
#toubu-xia {width:648px;margin-top:5px;background-color:#666688;}
</style>
</head>
<body>
<div id="toubu">
<div id="toubu-logo"></div>
<div id="toubu-shang">
<ul>
<li class="ho"><a href="#">业界动态</a></li>
<li><a href="#">技术文档</a></li>
<li><a href="#">艺术设计</a></li>
<li><a href="#">摄影摄像</a></li>
<li class="op1"><a href="#">计算机技术</a></li>
<li><a href="#">资源下载</a></li>
<li><a href="#">个人专栏</a></li>
<li class="op"><a class="pp" href="#">CG绘画</a></li>
<li class="op"><a class="pp1" href="#">专题</a></li>
<li><a href="#">经典论坛</a></li>
<ul>
</div>
<div id="toubu-xia"></div>
</div>
</body>
</html>

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

[ 本帖最后由 yongwangtv 于 2008-8-5 13:19 编辑 ]

TOP

Hoowir

初级会员

帖子: 54
体力: 128
威望: 0
当前: 浙江宁波
离线: 18 天

7^# 大中小发表于 2008-8-5 20:45

不错，顶了

TOP

yongwangtv [楼主]

初级会员

帖子: 51
体力: 117
威望: 0
当前: 广东惠州
离线: 97 天

8^# 大中小发表于 2008-8-6 10:15

没有朋友指点,我的布局思路有问题,或者有更好更简单的布局思路吗?
热诚欢迎高手指点迷津哇....

TOP

i5u5

新手上路

帖子: 36
体力: 30
威望: 0
离线: 60 天

9^# 大中小发表于 2008-8-6 16:42

我从上看起就觉得怎么用的是a

下面才出现了li～

路过～

TOP