【CSS】黑色幽默，兼容IE6的纯原生态的门户网站

最新推荐文章于 2024-04-26 20:51:15 发布
最新推荐文章于 2024-04-26 20:51:15 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： HTML&CSS 文章标签： css ie6 前端 解决方案 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yongh701/article/details/42773203
版权

本文的创作想法是从《【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的网站编写完毕，不依赖于任何库！



yongh701
关注
专栏目录
用html5构建兼容iE6的网页
09-29 512
几个月前我就打算开始学习html5，但是当时有一个非常扯淡的想法：“反正现在很多浏览器不兼容html5，学了实际用途也不会很大!”而且还有一些其他的事情比较牵扯精力(找理由…)!现在我终于意识到那时的那个想法有多么二了，赶紧亡羊补牢。 创建兼容ie6的html5页面 html5依然以.html或者.htm作为后缀。  精心开发5年的UI前端框架！  号称几乎没人去记过的DOC
将网站变成灰色，黑白色，兼容IE，谷歌CSS滤镜
PHP开发
05-07 7428
如果用传统的方法将网站变成黑白色非常的麻烦，需要更换页面的文件，并且要对图片进行更改。但如果自己的网站支持CSS的话，一切变得很简单。只要是符合w3标准的网页，在CSS文件的最前面加上一行代码就可以了，这段代码使用的是CSS滤镜，将网页中的色彩部分过滤掉。 以下是代码片段： html {filter:progid:DXImageTransform.Microsoft.BasicImage(gray...
【CSS】一种不用插件纯手写css的扁平化按钮悬停颜色变化的讨论
编程记录，亲测有效
03-08 3044
上次在《【CSS】扁平化都是纸老虎，看怎么抛弃前端框架在IE6扁平化》已经提及到扁平化按钮在IE6的实现方案，现在我再给出一种在IE8实现按钮扁平化的悬停的解决方法。悬停属性只能支持到IE8了，IE6它丫不支持我也没有办法了。这种方法我觉得自己的优点是，代码量就5行，然后，由于是纯手写的CSS，兼容绝大部分的浏览器，加载速度也快。具体效果如下图： 基本做到比较好的效果。手写CSS高仿Bo
【CSS】扁平化都是纸老虎，看怎么抛弃前端框架在IE6扁平化
编程记录，亲测有效
01-05 3350
Bootstrap确实是一个好的前端框架，但是这东西就是任性，只支持IE8以上的浏览器， 国外还有一些其他不错的框架，但是连WIN7默认的浏览器IE8都不支持，那留你何用，甚至Bootstrap这一优秀的框架在其V4版本也矫情起来了，开始不支持IE8， 把我大天朝的IE6放哪里去？ 扁平化总是给人高大上的样子，好像必须用前端框架实现不可，自己写前来根本无从下手， 其实根本不是， 都是CS
【JavaScript】兼容IE6可调可控的图片滑块
编程记录，亲测有效
02-18 2067
图片滑块其实也与图片轮播一样，无需这么多奇奇怪怪的代码就能够实现，只是布局有点复杂，而且这东西在Bootstrap里面也没有，在网页中，这个组件也越来越少见的，毕竟这个小小的组件太浪费网络资源了，实现的逻辑还比较复杂，如果不要被特别要求，能不做最好不好。 有时候，如果一个如同《【CSS】黑色幽默，兼容IE6的纯原生态的门户网站》（点击打开链接）的简单网页就能够交货，就不要卖弄你的前端技巧了。
【JavaScript】下拉列表select中在value传递多个值，取出其option显示值，并应用此作为导航
编程记录，亲测有效
03-21 1万+
对于下拉列表select，众所周知，其值就是选中的option中的value值，可是如果需要取出每一个option的显示值，那又如何做呢？虽然没什么必要取出option的显示值，但是如果有时候确实需要这个显示值，在javascript的脚本做点什么呢？另外，如果要再value处传递多个值呢？那又改如何呢？ 一、取出option的显示值 你可以先传递整个select过去脚本，假设传过去的形式参数
29天吐血整理前端学习路线，送给那些正在自学或准备自学前端的人！
最新发布
2401_84412050的博客
04-26 947
应用缓存( cache manifest )……
29天吐血整理前端学习路线，送给那些正在自学或准备自学前端的人
java_spring6的博客
04-27 121
当然刚开始敲代码的时候还是不要过分依赖自动补全功能，一开始就使用自动补全对你记忆一些属性时没有帮助的；踏实点学习，日后会有回报的。 [](()关于 CSS(3) 你需要了解的一些知识点 盒模型（标准 & IE ） flex、float、Normal Flow 等的理解 CSS 常用选择器 行内、内部、外部样式的区别 CSS 层叠规则 BFC 与 IFC 的了解 CSS3 的 transform、transition、animation 等属性的运用了解 响应式布局.
文章目录（三周年）
零度源码
05-15 8112
2020年5月71905.1412个前端必会 H5 问题及解决方法718 05.13 前端缓存最佳实践71705.12深圳腾讯前端面经分享2020年3月71603...
ie6支持css3属性js插件包(不再为兼容性头疼)
12-24
而现在有种更加完美的方法能兼容IE5、IE6、IE7的CSS选择器解析不一样问题。那就是： ie7 - js 本插件包包含 ie7.s,ie8.js,ie9.JS，可以让ie6支持到更多的css3属性， 另附上插件包使用说明和官方最新插件下载地址和...
easyui&jquery兼容版本(兼容IE8的最后版本)
12-07
3. **CSS和JavaScript调整**：由于IE8的CSS渲染引擎存在局限，可能需要对CSS样式进行特别调整，以确保布局和样式在IE8下正确显示。同时，JavaScript代码也需要遵循IE8的ECMAScript 5规范，避免使用ES6及以上版本的新...
致WEB前端开发者:IE6-IE11兼容性问题列表及解决办法
03-13
IE6-IE11 兼容性问题列表及解决办法 作为一名 WEB 前端开发者，了解 IE 浏览器的兼容性问题是非常重要的。在 IE6 到 IE11 的版本更新中，存在许多的变化和改进，这些变化可能会影响到我们编写的前端代码的兼容性。...
CSS3弹性布局怎么兼容IE（11）？
highboys的博客
12-01 9796
弹性布局（Flexbox）确实为我们构建复杂、灵活的布局带来了很大的便利，但是它的兼容性确让人很头痛，下面是我遇到的一个问题： 理想效果： IE11效果： html大概结构： 这里大致说一下css，input-container宽高没设死，由input决定，并设置position: relative;相对定位，并采用display: flex;弹性布局
【CSS】单行图片与文字垂直居中
热门推荐
编程记录，亲测有效
09-16 3万+
单行图片与文字垂直居中核心关键，是在img标签中的style属性加入vertical-align:middle;样式 如果不设置的话，单行图片与文字并排的话，文字默认是底部居中的。 注意如下的代码的img标签，没有设置任何的style属性， img 11111111111 222222222
【CSS】padding,border,margin与width宽度的关系
编程记录，亲测有效
09-23 2万+
padding,border,margin这三样东西不算难，算是在CSS中老生常谈的东西，但是要注意其对width的影响， 直接上一段极其简单的代码： margin_border_padding_and_width Div的实际宽度：px Div的含边线的宽度：px ssssssssss
【HTML】明明加了<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />却还是乱码的可能原因
编程记录，亲测有效
01-26 1万+
按理说，右键新建一个文本文档，并且把“新建文本文档.txt”改名成"1.html"， 然后再于里面写入： 中文 是一点问题没都没有了的， 可是，部分浏览器打开这个1.html却发现乱码，或者里面的表单传递值的时候发现，你为了不乱码，你就在标签中加入 毕竟网上都是这样说，这样在大多数情况也没有问题的，可是，如果你用notepad++打开这文件往里面一加这句话 如果你会发现
【CSS】对于超出div部分的处理
编程记录，亲测有效
04-25 7538
一个正常的前端攻城狮，一般情况不会把内容布置到div外面，但是如果这部分的内容，是用户输入的，然后是从数据库中取出来的，那样有内容超出div部分也是很正常的，尤其是这部分内容，是用户通过编辑器编辑的，便有可能出现这样的情况： 比如，限制一个宽350px，高100px的表格，用户用编辑器设置了一个400px x 400px的表格，就会溢出。
【HTML】一款不错的前端开发IDE——Aptana Studio
编程记录，亲测有效
04-11 6741
前端开发到底用什么工具去写代码。一直众所纷纭。首先是早已被抛到角落的FrontPage之后是现在已经渐渐被抛到角落的Dreamweaver，很多大神主张前端这么简单就应该直接用记事本去写，然后觉得记事本太蛋疼，改用NotePad，Sublime Text 2之类的，其实还有一款不错的前端开发IDE——Aptana Studio。虽然我之前一直在用Dreamweaver的代码视图写前端……以前则是用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值