24小时在线 - 古典小说 - 文学小说 - 关于我们
您的当前位置:首页 > web开发 > Html/Css >

【CSS】黑色幽默,兼容IE6的纯纯天然的门户网站

来源:比特技术 编辑:比特技术网 时间:2018-05-19点击:
导读:【CSS】黑色幽默,兼容IE6的纯原生态的门户网站本文的创作想法是从《【Bootstrap】一个兼容
【CSS】黑色幽默,兼容IE6的纯原生态的门户网站

本文的创作想法是从《【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" onmouseover="holddownappear1()" onmouseout="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" onmouseover="holddownappear2()" onmouseout="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" onmouseover="holddownappear1()" onmouseout="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" onmouseover="holddownappear2()" onmouseout="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的网站编写完毕,不依赖于任何库!



来源:比特技术在线(www.byte.online),欢迎分享本文,转载请保留出处!
http://www.byte.online/a/webkaifa/Html_Css/2018/334810.html
责任编辑:比特技术网

    打赏

    取消

    感谢您的支持,我会继续努力的!

    扫码支持
    扫码打赏,你说多少就多少

    打开支付宝扫一扫,即可进行扫码打赏哦

    网友评论:

    Copyright © www.byte.online 比特技术在线 版权所有 粤ICP备15038486号-3
    本站所有资料来源于网络,由个人收集整理,仅限于个人学习和研究,如果侵犯您的权益请联系我们删除!
    Top