易截截图软件、单文件、免安装、纯绿色、仅160KB

CSS 菜单系列:用 UL 制作横向导航菜单-入门版

用 UL 制作菜单现在非常流行,那我们也凑凑热闹,第一讲就说说用 UL 制作导航菜单的方法,这一讲是入门版,只是实现基本功能,欢迎各位发布自己的实现方式。
我们先定一下 HTML 代码:
<ul id="menu">
<li><a href="http://www.codebit.cn">CodeBit.cn</a></li>
<li><a href="http://www.yitu.org">YITU.org</a></li>
<li><a href="http://www.yahoo.com">Yahoo.com</a></li>
<li><a href="http://www.google.com">Google.com</a></li>
</ul>
用 UL 做导航菜单之所以被广泛采用,优点很明显,代码清晰,布局方便。
下面我们就开始写 CSS ,让原本纵向显示的内容,横着排:
设置一些公共样式:
代码:
<style type="text/css">
#menu {
font:12px verdana, arial, sans-serif; /* 设置文字大小和字体样式 */
}
#menu, #menu li {
list-style:none; /* 将默认的列表符号去掉 */
padding:0; /* 将默认的内边距去掉 */
margin:0; /* 将默认的外边距去掉 */
}
</style>
因为我们现在这个是独立讲解,所以需要设置一些公共样式,如果您在 body 或其他地方已经重设了默认效果,这段可以去掉。
让文字横着排:
代码:
<style type="text/css">
#menu li {
float:left; /* 往左浮动 */
}
</style>
设置链接样式:
代码:
<style type="text/css">
#menu li a {
display:block; /* 将链接设为块级元素 */
padding:8px 50px; /* 设置内边距 */
background:#3A4953; /* 设置背景色 */
color:#fff; /* 设置文字颜色 */
text-decoration:none; /* 去掉下划线 */
border-right:1px solid #000; /* 在左侧加上分隔线 */
}
</style>
我们用内边距的方式,让每个菜单变得宽一些,如果你的菜单是中英文混排的,建议设置单个菜单的高宽,这样可以避免中英文字符行高不一致导致的高度误差。设置固定高度的方式:
代码:
<style type="text/css">
#menu li a {
display:block; /* 将链接设为块级元素 */
width:150px; /* 设置宽度 */
height:30px; /* 设置高度 */
line-height:30px; /* 设置行高,将行高和高度设置同一个值,可以让单行文本垂直居中 */
text-align:center; /* 居中对齐文字 */
background:#3A4953; /* 设置背景色 */
color:#fff; /* 设置文字


相关文档:

如何让浮动层加margin后不换行 Div+CSS教程

此文为网上收集~
给客户做站的时候遇到的问题,div层加了margin后 总宽度超过父级层宽度 就自动换行了 如何让浮动层加margin后不换行呢?
下面看浮动层加margin后换行的例子:
比如说有个DIV宽度为380px,它里面有一个菜单列表,每个宽度为60px,margin-right为20px。如果就按照下面的HTML结构来做的话,那么这个菜单列表能 ......

css和javascript在IE和Firefox中二十三个不同点

一、document.formName.item(“itemName”) 问题
问题说明:IE下,可以使用 document.formName.item(“itemName”) 或 document.formName.elements ["elementName"];Firefox下,只能使用document.formName.elements["elementName"]。
解决方法:统一使用document.formName.elements["elementName" ......

全站的所有资源通用一个css 样式 边框大小 css使用js

* {
 margin:0;
 padding:0;
 font-size:13px;
 *font-size:11px;
 font-family:Verdana, Arial, 宋体,Helvetica, sans-serif;
 /*scrollbar-face-color:#dff9fe;
 scrollbar-highlight-color:#FFFFFF;
 scrollbar-3dlight-color:#9adae7;
 scrollbar-darkshadow-co ......

纯CSS无图实现DIV边框平滑阴影

<!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>CSS边框阴影< ......

CSDN中自定义css的使用

可以在博客的配置页面的自定义css栏中填入css样式代码来自定也blog的风格
csdn blog的页面架构基本是由div实现的,整个页面主要由三个div组成,它们的id分别是:
csdnblog_header, csdnblog_sidebar, csdnblog_content。
所以,定义它们的主体样式可以这样:
#csdnblog_header
{
    //头部的风格
}
# ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号