页面顶部制作
在css文件中写入如下代码：
/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover{}
/*页面层容器*/
#container {width:800px;margin:10px auto}
#container {width:800px;margin:10px auto}：指定整个页面的显示区域。
width:800px指定宽度为800像素，这里根据实际所需设定。
margin:10px auto，则是页面上、下边距为10个像素，并且居中显示。
接下来，我们开始制作TOP部分，TOP部分包括了LOGO、菜单和Banner，代码如下
<div id="menu"> <ul> <li><a href="www.125jz.com">首页</a></li> <li class="menuDiv"></li> <li><a href="#">博客</a></li> <li class="menuDiv"></li> <li><a href="#">设计</a></li> <li class="menuDiv"></li> <li><a href="#">相册</a></li> <li class="menuDiv"></li> <li><a href="#">论坛</a></li> <li class="menuDiv"></li> <li><a href="#">关于</a></li> </ul> </div> <div id="banner"></div>
为什么要这么写呢，因为对菜单使用列表<li>形式，可以在以后方便对菜单定制样式。
<li class="menuDiv"></li>
插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式，例如预览图中的竖线分隔。
然后我们在css.css中再写入以下样式：
/*页面头部*/
#header {background:url(logo.gif) no-repeat}
样式说明：给页面头部分加入一个背景图片LOGO，并且不作填充。
在css.css中写入以下代码：
#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;}
list-style:none：取消列表前的点。
margin:0px：是删除UL的缩进。
#menu ul li {float:left;}
这里的 float:left 是让内容都在同一行显示，因此使用了浮动属性(float)。
预览效果如下：
在#menu ul li {}再加入代码margin:0 10px
#menu ul li {float:left;margin:0 10px}
margin:0 10px的作用就是让列表内容之间产生一个20像素的距离(左：10px，右：10px)，预览的效果如下：
接下来固定菜单的位置，把代码改成如下：
/*利用padding:20px 20px 0 0来固定菜单位置*/
#menu {padding:20px 20px 0 0}
/*添加float:right使得菜单位于页面右侧*/
#menu ul {float:right;list-style:none;margin:0px;}
#menu ul li {float:left;margin:0 10px}
菜单选项之间还有一条竖线，怎么办呢？
别忘了，我们早就已经留好了一个空的<li class=”menuDiv”></li>，要想加入竖线就使用它了，代码：
.menuDiv {width:1px;height:28px;background:#999}
保存预览一下，竖线已经出来了？
不过，菜单选项的文字却在顶部，我们再修改成以下代码：
#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}
效果基本上已经实现了，剩下的就是修改菜单的超链接样式，在css.css中添加以下代码：
#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
#menu ul li a:hover{}
最后的效果如下：
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2371.html
微信扫一扫 
支付宝扫一扫