css导航菜单(包含横向子菜单)
强烈推荐一款CSS导航菜单,用到政府学校类网站上超级不错。
有点类似站长网菜单的味道,只不过颜色不一样而已,这种菜单还不是真正意义上的“下拉”菜单,应该叫滑出菜单<!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>
<mce:style><!--
body,td,th {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 12px;
color: #333333;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a {
color: #333333;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: none;
}
a:active{
color: #FF0000;
text-decoration: none;
}
#menu{
height:32px;
margin-top:8px; background-color:#990000;
}
#menu ul{
margin:auto; width:778px; height:32px;
list-style-type:none; padding:0px; margin-top:0px; margin-bottom:0px;
}
.m_li{
float:left; width:114px; line-height:32px; text-align:center; margin-right:-2px; margin-left:-2px;
}
.m_li a{
display:block; color:#FFFFFF; width:114px;
}
.m_line{
float:left; width:1px; height:32px;
line-height:32px; /*ff下有效(图片垂直居中)*/
}
.m_line img{
margin-top:expression(( 32 - this.height ) / 2); /*ie下有效(图片垂直居中)*/
}
.m_li_a{
float:left; width:114px; line-height:32px; text-align:center; padding-top:3px; font-weight:bold;
background-image:url(http://www.codefans.net/jscss/demoimg/200904/menu_bg2.jpg); position:relative; height:32px; margin-top:-3px; margin-right:-2px; margin-left:-2px;
}
.m_li_a a{
display:block; color:#FF0000; width:114px;
}
.smenu{
width:774px; margin:0px auto 0px auto; padding:0px; list-style-type:none; height:32px;
}
相关文档:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{position:relative; border:solid 1px #30F; height:600px; }
.box{ position:ab ......
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.main{position:relative;width:100%}
.left{position:absolute;width:200px;border:solid 1px red; height: ......
今天写了一个简单的网页,请看代码:错误的:
结论: rel是Relations的缩写 指关联到一个stylesheet(样式表单) 在标签中,“rel=stylesheet”,rel是关联的意思,关联的是一个样式表(stylesheet)文档,它表示这个link在文档初始化时将被使用。切忌漏写rel,否则引入的CSS无效! ......
'################################################
'## 功 能:获取文件名 ##
'## 输入参数:文件路径 &nb ......
css的dl dt dd的应用:
<!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= ......