本文的创作想法是从《【Bootstrap】一个兼容IE8、谷歌等主流浏览器的受众门户式风格页面》(点击打开链接)与《【CSS】扁平化,支持IE6的含有方块超级链接的导航栏与含有支持IE8的下拉菜单的导航栏》(点击打开链接)两篇文章,改进而来的,Bootstrap虽好,但是不兼容IE6始终是一块心病,虽然有bsie6插件,但是这插件也不是对于所有组件的使用的,万一出现不兼容IE6问题,你改都不知道怎么改。最好的办法还是自己用css与javascript写出原生态的、兼容IE6浏览器的网页。而且,只会像《【CSS】扁平化都是纸老虎,看怎么抛弃前端框架在IE6扁平化》(点击打开链接)那样只会对组件的美化从微观上小打小闹是没用的,我们还要在宏观上会在IE6布局出扁平化的东西,因此也有了这篇文章。
一、基本目标
这篇文章所谓的“黑色幽默”,主要看我怎么把IE6玩烂,既然在市场总有一种门户式网站的需求与癖好,我们在IE6完全可以整出这样的网站:
我个人觉得这个网站兼职就是简约、时尚、高大上,当然如果对方还不喜欢这样简约,你就像《【CSS】扁平化都是纸老虎,看怎么抛弃前端框架在IE6扁平化》(点击打开链接)那样,对各个组件进行美化,对方绝对接受。
二、制作过程
好了,废话、吐槽就不多说了,下面看看每一部分怎么做出来,首先先贴出整个网页的代码,再一步一步地进行分析:
<!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=utf-8" />
<title>ie6</title>
</head>
<style>
.panel{
border:1px solid #000000;
}
.divbr{
clear:both;
height:10px;
}
.holddown{
float:left;
width:19.5%;
text-align:center;
}
</style>
<body>
<div style="width:95%; margin-left:auto; margin-right:auto;">
<div class="panel" style="line-height:100px; ">
<h1>标题</h1>
</div>
<div class="divbr"></div>
<div class="panel" style="line-height:24px;">
<div class="holddown" οnmοuseοver="holddownappear1()" οnmοuseοut="holddownhidden1()">
下拉菜单1▼
<div id="holddownlink1" style="display:none">
<a href="#">链接1</a><br />
<a href="#">链接2</a><br />
<a href="#">链接3</a><br />
<a href="#">链接4</a><br />
</div>
</div>
<div class="holddown" οnmοuseοver="holddownappear2()" οnmοuseοut="holddownhidden2()">
下拉菜单2▼
<div id="holddownlink2" style="display:none">
<a href="#">链接1</a><br />
<a href="#">链接2</a><br />
<a href="#">链接3</a><br />
<a href="#">链接4</a><br />
</div>
</div>
<div class="holddown">
<a href="#">链接1</a>
</div>
<div class="holddown">
<a href="#">链接2</a>
</div>
<div class="holddown">
<a href="#">链接3</a>
</div>
<div class="divbr" style="height:0%"></div>
</div>
<div class="divbr"></div>
<div style="float:left; width:1%; height:200px;"></div>
<div style="float:left; width:47%; height:500px;">
<div class="panel" style="height:200px;">
简约
</div>
<div class="divbr"></div>
<div class="panel" style="height:287px;">
时尚
</div>
</div>
<div style="float:left; width:3%; height:200px;"></div>
<div class="panel" style="float:left; width:47%; height:500px;">
高大上
</div>
<div style="float:left; width:1%; height:200px;"></div>
<div class="divbr"></div>
<div class="panel" style="line-height:100px; text-align:center;">
版权信息
</div>
</div>
</body>
</html>
<script>
function holddownappear1(){
document.getElementById("holddownlink1").style.display="block";
}
function holddownhidden1(){
document.getElementById("holddownlink1").style.display="none";
}
function holddownappear2(){
document.getElementById("holddownlink2").style.display="block";
}
function holddownhidden2(){
document.getElementById("holddownlink2").style.display="none";
}
</script>
1、页面整体布局
首先门户式的网站的首要特点就是左右两边要留白,不然能充满整个网站。虽然我个人更加喜欢整个网站没有一处留白,但据说这是大部分人的审美。
所以你首先要写出一个图层,然后所有东西都夹在这个图层之中:
<div style="width:95%; margin-left:auto; margin-right:auto;"></div>
这个图层占整个网页的95%,然后自动居中。
2、标题栏
也就是一个高100px的边框里面有字
<div class="panel" style="line-height:100px; ">
<h1>标题</h1>
</div>
这里的class=“panel”与上面style节点的.panel样式相对应:
.panel{
border:1px solid #000000;
}
这个panel里面就一句话,一个1像素的黑色边框,由于太多地方要用到这个样子,所以才单独开一个style节点的,就像用写<script>从来不写<script type="text/javascript">一样,这里面<style>也没有必要写成<style type="text/css">浪费时间,所有浏览器同时能够识别。
再加上style="line-height:100px;,是我继承这个panel的所有样式同时,再设定其高度为100px,用line-height而不用height是因为line-height设置高度之后,里面的文字顺带自动垂直居中。你要它水平居中,则再加上text-align:center的属性。
3、标题与导航栏之间
<div class="divbr"></div>
其中这句HTML语句与style中的css
.divbr{
clear:both;
height:10px;
}
相对应,关于图层与图层之间的间距,最好还是用图层来做
这个在《【CSS】关于div的对齐与网页布局》(点击打开链接)已经说过,不多讲了
4、导航栏
无论是《【Bootstrap】导航栏navbar在IE8上的缺陷与解决方案》(点击打开链接),还是之前的《【CSS】扁平化,支持IE6的含有方块超级链接的导航栏与含有支持IE8的下拉菜单的导航栏》(点击打开链接),导航栏一直是我的心病,主要是那个下拉菜单太难处理,这次终于能够在ie6下用纯生态的javascript实现了。在ietester下面用ie6测试,发现没有任何问题:
这个导航栏是所有网页组件的最难的一部分,首先导航栏的HTML部分是这样的:
<div class="panel" style="line-height:24px;">
<div class="holddown" οnmοuseοver="holddownappear1()" οnmοuseοut="holddownhidden1()">
下拉菜单1▼
<div id="holddownlink1" style="display:none">
<a href="#">链接1</a><br />
<a href="#">链接2</a><br />
<a href="#">链接3</a><br />
<a href="#">链接4</a><br />
</div>
</div>
<div class="holddown" οnmοuseοver="holddownappear2()" οnmοuseοut="holddownhidden2()">
下拉菜单2▼
<div id="holddownlink2" style="display:none">
<a href="#">链接1</a><br />
<a href="#">链接2</a><br />
<a href="#">链接3</a><br />
<a href="#">链接4</a><br />
</div>
</div>
<div class="holddown">
<a href="#">链接1</a>
</div>
<div class="holddown">
<a href="#">链接2</a>
</div>
<div class="holddown">
<a href="#">链接3</a>
</div>
<div class="divbr" style="height:0%"></div>
</div>
你首先要布置好这个导航栏,这个导航栏实际上是又5个class为“holddown”的于同一行左对齐的图层所构成,"holddown"的css如style节点所示:
.holddown{
float:left;
width:19.5%;
text-align:center;
}
每一个宽度占最外那个class为"panel"、行高为24px大图层的div的19.5%,不能占到20%是因为我们还要为大图层两边的边框留一点位置,否则最后一项“链接3”会换行
之后,对于下拉菜单的下拉链接holddownlink1、holddownlink2一开始隐藏的,它收到下方script节点的javascript控制,
<script>
function holddownappear1(){
document.getElementById("holddownlink1").style.display="block";
}
function holddownhidden1(){
document.getElementById("holddownlink1").style.display="none";
}
function holddownappear2(){
document.getElementById("holddownlink2").style.display="block";
}
function holddownhidden2(){
document.getElementById("holddownlink2").style.display="none";
}
</script>
一旦鼠标悬停onmouseover在“下拉菜单1”这个图层,holddownappear1()函数就会被执行,其下方的下拉链接holddownlink1()就会被显示,
一旦鼠标离开onmouseout在“下拉菜单1”这个图层,holddownhidden1()函数就会被执行,其下方的下拉链接holddownlink1()就会被显示,
“下拉菜单2”则同理。
导航栏还有最后一句<div class="divbr" style="height:0%"></div>是为了兼容,否则,一些浏览器的显示会出错,没有意义的
5、网页主体内容与版权信息
在网页主体内容与导航栏之间还有10px的间距,这个同理与标题与导航栏之间的间隙,不多说了。
<div style="float:left; width:1%; height:200px;"></div>
<div style="float:left; width:47%; height:500px;">
<div class="panel" style="height:200px;">
简约
</div>
<div class="divbr"></div>
<div class="panel" style="height:287px;">
时尚
</div>
</div>
<div style="float:left; width:3%; height:200px;"></div>
<div class="panel" style="float:left; width:47%; height:500px;">
高大上
</div>
<div style="float:left; width:1%; height:200px;"></div>
<div class="divbr"></div>
<div class="panel" style="line-height:100px; text-align:center;">
版权信息
</div>
然后网页主体内容的布局,我画个图就明白了,不多说了:
自此整个兼容IE6的网站编写完毕,不依赖于任何库!