作者leochen0818 (米拔)
看板Web_Design
标题Re: [问题] 请问在 header做横向导览列
时间Fri Mar 28 21:22:39 2014
※ 引述《SophiaH (Sophia)》之铭言:
: 学习网设的新手想请教在 header ID 用 table 做一列数栏
: 的表格放导览按钮後, 在下方 content ID 里有报价表的表格也会被上方
: 的 table CSS 影响到, 在滑动浏览报价表时出现 hover 滑鼠变换影像
: 看起来似乎上方 header 不应该用 table 做导览..
: 最近看过一本 CSS 的书也提到用 ol 建横排导览, 所以前天有试过
: 可是没定位在我想放的位置 (我想放左上 logo 图档的右边),
: 我有试在 style CSS 加上 float : right 之後就只
: 是定在 logo 下方的右边 (不往上移)..想请问用这方法该怎麽调动定位 ?
: 又或者 header 那里应该用其他方法做导览吗 ?
: 谢谢先进指导先..
小的不才,菜得很,但多少知道要如何解决你的问题,
就厚着脸皮写一下我的做法,
正如我推文所说,如果能PO上你的原始码给大家看看,
相信一定会有更精确的做法提供给你参考,
至於目前就先照着你字面上的意思来看要怎麽解决好了。
首先,在header里面的导览列,个人倾向於使用「清单」的方式来制作,
简单、清楚、又快速。
所谓「清单」就是使用<ul><li><li></ul>的方式来制作,例如:
<header>
<ul>
<a herf="!@#$@#^"><li>home</li></a>
<a herf="13513"><li>mail</li></a>
<a herf="125135"><li>about</li></a>
</ul>
</header>
如此一来,只要在CSS样式里面调整一下就很好用了,例如:
header{text-align:right;float:right;}
header a{color:#FFF;brabrabra...}
(有很多字懒的打,相信你懂我意思@@)
(另外此为个人喜好&HTML5的写法,勿战,如果是XHTML1.0请江header改成DIV即可)
至於另外一种做法是,使用「定位」调整,不过大同小异。
此种做法是,你可能在header里不是使用背景图片来制版,
又或者已经放了一些东西不好改,
就可以考虑在header後面再加一个导览列的DIV,
一样用清单排好,CSS调好之後,
再利用position里面的relative调整位置,
如此一来比较能够调整到你要的位置,
大致上就是这样,
以上。:)
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 36.224.85.234
※ 文章网址: http://webptt.com/cn.aspx?n=bbs/Web_Design/M.1396012962.A.81D.html
1F:推 jizz56:good! 03/28 23:54
2F:推 SophiaH:谢谢 leo 大大指导, 我的原始码没有做到"用position里面的 03/29 18:45
3F:→ SophiaH:relative调整" 等再试过後如还不行再贴原始码上来. 谢谢 03/29 18:47
4F:→ leochen0818:大大不敢当,一起加油!!:) 03/29 21:50