一個傳統的頁面設計（希望對你有幫助）
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type=text/javascript>
function menuFix()
{
//menu菜單函數
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++)
{
sfEls[i].οnmοuseοver=function()
{
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function()
{
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function()
{
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].οnmοuseοut=function()
{
this.className=this.className.replace(new RegExp("( ?|^)sfhover//b"), "");
}
}
}
//firefox下層中內容換行函數
function toBreakWord(intLen, id){
var obj=document.getElementById(id);
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"<br>";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+= strContent;
obj.innerHTML=strTemp;
}
/*
//left菜單互換函數 ,好像不行
function leftOrRight()
{
var tt = document.getElementById("tt");
var ss = document.getElementById("ss");
tt.style.clear='left';
tt.style.float='left';
ss.style.float='right';
alert(ss);
}
window.οnlοad=menuFix();
*/
</script>
<script type="text/javascript" src="Js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
menuFix();
$("#test").click(function()
{
var txt = $("#test").val() ;
if(txt=="test")
{
$("#test").val("test2") ;
$("#ss").css("float","right");
$("#tt").css("float","left");
$("#tt").css("clear","left");
}else
{
$("#test").val("test") ;
$("#ss").css("float","left");
$("#tt").css("float","right");
$("#tt").css("clear","right");
}
}
);
});
</script>
<style type="text/css">
*{margin:0;padding:0;border:0;}
body{margin:0px auto 0px auto; text-align:center; font-size:13px; color: #16387c}
#nav { line-height: 24px; list-style-type: none; background:#666;}
#nav a { display: block; width: 80px; text-align:center;}
#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 { float: left; width: 80px; background:#CCC;}
#nav li a:hover{ background:#999;}
#nav li ul {
line-height: 27px;
list-style-type: none;
text-align:left;
left: -999em;
position: absolute;
float:left;}
#nav li ul li{ float: left; width: 80px; background: #F6F6F6; }
#nav li ul a{ display: block; width: 80px;text-align:center;}
#nav li ul a:link { color:#666; text-decoration:none;}
#nav li ul a:visited { color:#666;text-decoration:none;}
#nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00;}
#nav li:hover ul { left:auto;}
#nav li.sfhover ul { left:auto;}
#nav1 li {list-style:none; width:200px; margin-top:5px;padding:4px 6px;}
#nav1 li a {text-decoration:none; color:#666;}
#nav1 li a:hover {color:#000;}
.aa {border-top:4px solid #7BC110; background:#be6;}
.bb {border-top:4px solid #ff9900; background:#fc3;}
.cc {border-top:4px solid #ff66ff; background:#fcf;}
</style>
</head>
<body>
<!--Root-->
<div style="width:80%; height:100%; border:none; clear:both; text-align:center;margin-left: auto; margin-right: auto;">
<!--Head-->
<div style="height:85px; border:none; clear:both">
<div style="width:20%; height:85px; background-color:#ccd; float:left; border:none">Logo</div>
<div style="width:80%; height:85px; background-color:#0099FF; border:none; clear:right; float:right">Banner</div>
</div>
<!--Menu-->
<div style="width:100%; clear:both; background-color:#ccc; position:inherit;">
<ul id="nav">
<li><a href="http://www.Fly124.cn">系統首頁</a></li>
<li>
<a href="#">產品介紹</a>
<ul>
<li><a href="#">產品一</a></li>
<li><a href="#">產品一</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="#">服務介紹</a>
<ul>
<li><a href="#">服務二</a></li>
<li><a href="#">服務二</a></li>
<li><a href="#">服務二</a></li>
</ul>
</li>
</ul>
</div>
<div style="height:85%; clear:both">
<div id="ss" style="width:20%; height:100%; background-color:#ccc; float:left; border:none">
<ul id="nav1">
<li class="aa"><a href="#">CSS Templates Free Download </a></li>
<li class="bb"><a href="#">CSS WebSites Showcase </a></li>
<li class="cc"><a href="#">CSS Web Design Article </a></li>
</ul>
</div>
<div id="tt" style="width:80%; height:100%; background-color:#999; border:none; clear:right; float:right; word-wrap:break-word;
word-break:break-all;">
sadfjsajfdjklasjflaskjflkajflkafjlkasjfdkasljfdasssssssssssssssssssssssssssssssssssssssadfasl;123123sadfhasddfjhkkk123123kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk123123kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk123123123
</div>
</div>
<div style="width:100%; background-color:#3399FF;"><input type="button" id="test" value="test"/></div>
</div>
</body>
</html>
<script>
if(window.ActiveXObject){<!--IE瀏覽器-->
} else{
toBreakWord(100,"tt");
}
</script>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章