为什么这个会错位?
上一篇 / 下一篇 2006-08-25 12:36:04 / 个人分类：test
查看( 812 ) /
评论( 2 )
我想要那行字和菜单一样平
pangf.PNG
这个是我要得效果.PNG
CODE:
<!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>飞扬黑软新站测试[HTML]</title>
<style type="text/css">
<!--
/*- Global Settings--------------------------- */
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
h2 {
font: bold 20px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
/*- Menu Tabs J--------------------------- */
#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:9pt;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background:url('tableftJ.gif') no-repeat left top;
margin:0;
text-decoration:none; padding-left:5px; padding-right:0; padding-top:0; padding-bottom:0
}
#tabsJ a span {
float:left;
display:block;
background:url('tabrightJ.gif') no-repeat right top;
color:#24618E; padding-left:6px; padding-right:15px; padding-top:5px; padding-bottom:4px
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}
#tabsJ #current a {
background-position:0% -42px;
}
#tabsJ #current a span {
background-position:100% -42px;
color:#FFF;
}
#nav {
width:210px;
line-height: 18px;
list-style-type: none;
text-align:left;
/*定义整个ul菜单的行高和背景色*/
}
/*==================一级目录===================*/
#nav a {
width: 190px;
display: block;
padding-left:20px;
/*Width(一定要)，否则下面的Li会变形*/
}
#nav li {
background:#bbde79; /*一级目录的背景色*/
float:left;
BORDER-RIGHT: #8c8c8c 1px solid;
BORDER-TOP: #dbfe99 1px solid;
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
PADDING-BOTTOM: 2px;
BORDER-LEFT: #dbfe99 1px solid;
CURSOR: hand;
COLOR: black;
PADDING-TOP: 4px;
BORDER-BOTTOM: #8c8c8c 1px solid;
/*float：left,本不应该设置，但由于在Firefox不能正常显示
继承Nav的width,限制宽度，li自动向下延伸*/
}
#nav li a:hover{
background:#d5d5d5; /*一级目录onMouseOver显示的背景色*/
}
#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}
/*==================二级目录===================*/
#nav li ul {
list-style:none;
text-align:left;
}
#nav li ul li{
BORDER-RIGHT: #cccccc 1px solid;
BORDER-TOP: white 1px solid;
FONT-SIZE: 11px;
PADDING-BOTTOM: 2px;
BORDER-LEFT: white 1px solid;
CURSOR: hand;
PADDING-TOP: 2px;
BORDER-BOTTOM: #cccccc 1px solid;
BACKGROUND-COLOR: #eeeeee; /*二级目录的背景色*/
}
#nav li ul a{
padding-left:1px;
width:160px;
/* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/
}
/*下面是二级目录的链接样式*/
#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul li a:hover {
background:#d5d5d5;
text-decoration:none;
font-weight:normal;
/* 二级onmouseover的字体颜色、背景色*/
}
/*==============================*/
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}
#nav ul.collapsed {
display: none;
}
-->
#PARENT{
width:300px;
padding-left:20px;
}
#PARENT2{
width:300px;
padding-left:300px;
padding-top:20px;
}
-->
</style>
<script type=text/javascript><!--
var LastLeftID = "";
function menuFix() {
var obj = document.getElementById("Nav").getElementsByTagName("li");
for (var i=0; i<obj.length; i++) {
obj[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}
function DoMenu(emid)
{
var obj = document.getElementById(emid);
obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
if((LastLeftID!="")&&(emid!=LastLeftID)) //关闭上一个Menu
{
document.getElementById(LastLeftID).className = "collapsed";
}
LastLeftID = emid;
}
function GetMenuID()
{
var MenuID="";
var _paramStr = new String(window.location.href);
var _sharpPos = _paramStr.indexOf("#");
if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1)
{
_paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);
}
else
{
_paramStr = "";
}
if (_paramStr.length > 0)
{
var _paramArr = _paramStr.split("&");
if (_paramArr.length>0)
{
var _paramKeyVal = _paramArr[0].split("=");
if (_paramKeyVal.length>0)
{
MenuID = _paramKeyVal[1];
}
}
/*
if (_paramArr.length>0)
{
var _arr = new Array(_paramArr.length);
}
//取所有#后面的，菜单只需用到Menu
//for (var i = 0; i < _paramArr.length; i++)
{
var _paramKeyVal = _paramArr[i].split('=');
if (_paramKeyVal.length>0)
{
_arr[_paramKeyVal[0]] = _paramKeyVal[1];
}
}
*/
}
if(MenuID!="")
{
DoMenu(MenuID)
}
}
GetMenuID(); //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果
menuFix();
--></script>
</head>
<body>
<h2> 飞扬黑软新站测试</h2>
<div id="tabsJ">
<ul>
<li id="current">
<a href="index.asp"><span>首页</span></a></li>
<li><a href="down.asp"><span>下载</span></a></li>
<li><a href="fypic.asp"><span>图片</span></a></li>
<li><a href="DJ_main.asp"><span>娱乐</span></a></li>
<li><a href="http://bbs.feiy8.com/"><span>论坛</span></a></li>
<li><a href="payment/VIPPay.html"><span>服务 </span></a></li>
<li><a href="about.asp"><span>关于 </span></a></li>
</ul>
</div>
</div>
<div id="PARENT">
<ul id="nav">
<li><a href="#Menu=ChildMenu1" onclick="DoMenu('ChildMenu1')">我的网站</a>
<ul id="ChildMenu1" class="collapsed">
<li><a href="http://www.netany.net" target="_blank">www</a></li>
<li><a href="http://www.netany.net" target="_blank">www</a></li>
<li><a href="http://www.netany.net" target="_blank">wwt</a></li>
</ul>
</li>
<li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">我的帐务</a>
<ul id="ChildMenu2" class="collapsed">
<li><a href="http://www.netany.net" target="_blank">支付</a></li>
<li><a href="#">网上支付</a></li>
<li><a href="#">登记汇款</a></li>
<li><a href="#">在线招领</a></li>
<li><a href="#">历史帐务</a></li>
</ul>
</li>
<li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">网站管理</a>
<ul id="ChildMenu3" class="collapsed">
<li><a href="#">登录</a></li>
<li><a href="http://www.netany.net" target="_blank">管理</a></li>
<li><a href="#">管理</a></li>
<li><a href="#">管理</a></li>
</ul>
</li>
<li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">网站管理</a>
<ul id="ChildMenu4" class="collapsed">
<li><a href="#">登录</a></li>
<li><a href="http://www.netany.net" target="_blank">管理</a></li>
<li><a href="#">管理</a></li>
<li><a href="#">管理</a></li>
</ul>
</li>
</ul>
</div>
<div id="PARENT2">
fdgsdf
</div>
</body>
</html>pangf.PNG
这个是我要得效果.PNG
test.rar
(2006-08-25 12:36:04, Size: 12.2 kB, Downloads: 4)
TAG:
-
Cloud.Strife发布于2006-08-25 14:58:25
-
代码好乱，眼花了:giddy:
写了个简单的例子CODE:
<!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" lang="zh-CN">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="all">
div,ul,li{
margin: 0;
padding: 0;
border: 0;
}
#content{
width: 200px;
font: 12px Arial,Helvetica,sans-serif;
}
#content ul{
list-style: none;
}
#content li{
margin-bottom: 0 !important;
margin-bottom: -3px;
height: 20px;
background: #F63;
line-height: 20px;
position: relative;
}
#content a{
display: block;
}
#content a span{
width: 200px;
color: #000;
display: block;
position: absolute;
left: -2000px;
top: 0;
}
#content a:link,#content a:visited{
color: #000;
text-decoration: none;
}
#content a:hover{
background: #000;
color: #FFF;
text-decoration: none;
}
#content a:hover span{
position: absolute;
left: 205px;
top: 0;
}
</style>
</head>
<body>
<div id="content">
<ul>
<li><a href="#"><span>我的网站说明</span>我的网站</a></li>
<li><a href="#"><span>我的帐务说明</span>我的帐务</a></li>
<li><a href="#"><span>网站管理说明</span>网站管理</a></li>
<li><a href="#"><span>网站管理说明</span>网站管理</a></li>
</ul>
</div>
</body>
</html>
-
ntsys
发布于2006-09-22 23:23:55
-
谢谢楼上，本人刚刚学习DIV+CSS作的第一个站