仿 Windows 7 资源管理器风格的网页设计

最新推荐文章于 2021-06-05 04:04:07 发布
原创 最新推荐文章于 2021-06-05 04:04:07 发布 · 1.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#windows #javascript #ie #浏览器 #iframe #firefox

本文介绍了如何利用CSS和JavaScript实现Windows 7风格的网页设计，包括半透明标题栏、粗边框和导航菜单。通过设置不同浏览器兼容的CSS样式实现半透明效果，并针对IE6使用JavaScript进行hack。同时，文章展示了如何制作导航菜单，以及解决IE6中鼠标事件穿透问题的方法。

［用live writer发完，发现格式乱了，图片也看不到，你可以到http://www.liuhaifeng.com/2010/01/design-win7-alike-web-page.html 查看完整版］

 

Windows 7 的华丽界面吸引了不少爱美之人，我们网页上是否也可以做出类似的效果呢？答案当然是可以！事实上，我刚刚完成了这个设计，正好做个技术笔记。

我们要实现目标，主要是两部分，一是半透明的标题栏与粗边框，二是导航菜单。参考下图：

image Windows 7 资源管理器

半透明效果可以用一个额外的层来实现，这个层用CSS定义为半透明。当前主流的浏览器都支持半透明样式，但写法不一样。不过没关系，每种写法都写上，就可以兼容全部浏览器了。我用的代码(通过测试的浏览器为：IE6/xpsp2，IE8/win7, IE8兼容性视图/win7, Firefox3.5.7。如无特别说明，本代码均以这四种测试为准，其它浏

最低0.47元/天 解锁文章
CSS,JS - 仿windows资源管理器选择框
qq_24296409的博客
06-19 882
模仿Windows的文件选择框，使用Javascript和CSS完成。
Jsp文件操作— —简单设计一个Web浏览器的《文件管理程序》
weixin_42618684的博客
07-05 4117
人们在使用计算机的时候，经常利用资源管理器对文件和目录进行管理。本文的项目开发要设计一个简单的在线文件管理器，可以允许用户使用浏览器来管理文件和目录，通过指定的路径进行文件和目录的打开、创建、删除、显示属性等操作。总体设计：功能：1、创建一定路径下的目录和文件。2、删除一定路径下的目录和文件。3、浏览一定路径下的目录和文件属性。File类及相关属性：一、创建File对象要获取文件或目录的路径及相关...
类似windows资源管理器的js
03-01
类似windows资源管理器的js 博文链接：https://qaybpljplj.iteye.com/blog/225463
Win7仿Win8资源管理器(Better Explorer).rar
07-09
不需要安装 Windows 8 也可以使用 Ribbon 风格的资源管理器啦!Better Explorer这个小工具特别适合喜欢折腾 UI 体验的童鞋们。 Better Explorer 使用 Visual Studio 2010 Ribbon 技术开发。除支持当前系统资源管理器的所有功能外，还可以使用 Ribbon 工具栏中的快捷按钮直接执行主要的文件操作。说白了就是一个山寨版的资源管理器。不过，他增加了多标签(Tabs)浏览功能，这还算是一个亮点。 这个小工具当前正在开发、测试当中，作者承诺将跟进 Windows 8文件管理器的开发，提供更多新功能并逐步完善。不过，这东东确实是用来“看”的，等到作者开发完成的那一天，也许我们已经换新操作系统了…… 友情提示一下，Better Explorer 是个人开发，暂时没有简体中文语言支持，不过用来尝鲜还是不错的。另外，他只支持 Windows 7/Vista SP2，同时还需要安装 Visual C 2010 库和 .NET Framework 4.0。 该项目的主要目标是： - 添加 Ribbon控制的用户界面，像在Windows 8中(执行)- 添加选项卡的功能与使用标准IE浏览器控制(实施)- 添加额外的功能，如：改变Library的图标(Library的“条件”选项卡)(已实施)文件与文件和文件夹的操作(执行)同步命令promt更改文件夹图标(文件夹的“条件”选项卡)扩展跳转列表支持(Windows 7)(已实施)扩展搜索窗格在Vista(Windows7)的延伸，就像搜索条件“选项卡”。
html5模仿windows资源管理器,仿windows资源管理器
weixin_39915171的博客
05-31 1208
【实例简介】非常实用的入门程序，Windows资源管理，调取资源图片，鼠标右键新增、删除、修改文件夹和文件。【实例截图】【核心代码】#region 添加我的电脑TreeNode myComputer = new TreeNode();DirectoryClass myCom = new DirectoryClass();myCom.Name = "我的电脑";myCom.IsDirectory =...
visual c++ vc制作仿windows资源管理器web视图界面.zip
01-26
visual c++制作仿windows资源管理器web视图界面.zip
仿windows资源管理器风格的jQuery复选框美化插件
12-11
folderselect.js是一款基于jQuery的复选框美化插件，其设计灵感来源于Windows资源管理器的界面风格。该插件的主要特点是将数据结构以文件夹的形式进行展示，这在处理层次化数据时非常有用，如目录树或组织结构。用户...
仿Windows 7自带计算器风格的网页计算器
在仿Windows 7风格的网页中，图像资源的使用可以增强界面的真实感和美观度。例如，计算器的按钮可能使用了带有渐变和阴影效果的PNG图片，以模仿原生Windows控件的质感。此外，一些特殊功能按钮（如百分比、平方根等...
CSS仿Windows7风格导航菜单支持悬停效果
CSS仿Windows7风格的网站导航菜单是一种典型的前端网页设计实践，旨在通过纯CSS技术模拟经典操作系统——Windows 7的视觉界面与交互体验。该资源以“CSS仿Windows7风格的网站菜单.rar”为标题，明确指出了其核心功能...
仿Windows资源管理器的多级折叠菜单插件NavBar
“仿Windows资源管理器左侧样式的多级展开折叠菜单”是一种在现代前端开发中广泛使用的交互式导航组件，其设计灵感来源于Windows操作系统中的文件资源管理器左侧的树形目录结构。该菜单通过模拟真实系统界面的视觉与...
递归生成菜单html,一段递归生成类似Windows资源管理器一样效果的树状菜单的代码...
weixin_39737233的博客
06-05 190
function turnit(ss,ii,aa){if (ss.style.display=="none"){ss.style.display="";aa.style.display="";ii.src="minus.gif";}else{ss.style.display="none";aa.style.display="none";ii.src="plus.gif";}}function on...
Win7仿Win8资源管理器工具better-explorer.rar
09-19
界面完全模仿Ribbon风格的Win8资源管理器，但比系统自带的资源管理器要强大些，支持多标签功能，能大大的提高效率，操作上跟系统的资源管理器没什么两样。 还没用上Win8的用户，不妨尝鲜下。Better Explorer 只支持Vista/Win7
资源管理器（仿WINDOWS）
01-18
用C#实现的资源管理器，仿照了WINDOWS界面，实现了基本的资源管理器功能。
实现了WEB界面上的简单文件管理器 用于通过浏览器管理服务器上的文件
01-05
通过WEB页面实现一个简单的文件管理器，可以使用浏览器来管理服务器上所有磁盘下的文件和目录。 实现：文件和目录遍历；文件和目录的删除（单选、多选）、改名；目录的建立；文件的上传下载，所有目录和文件对应图标的获取以及如何在WEB界面上显示。 开发环境：Visual Studio 2010 Ext.NET Pro: 2.0.0 WebForm组件 DotNet 4.0 详细的说明文档参看：http://blog.youkuaiyun.com/coldwind811201/article/details/8466756
文件系统模拟 windows资源管理器模拟 源程序+实验报告
05-02
该系统是文件系统的模拟，外观上成功地模拟了windows的资源管理器。里面有源程序和实验报告。
html 实现资源管理器,HTML5,JavaScript：从外部窗口拖放文件(Windows资源管理器)
weixin_40006977的博客
05-30 466
这是一个非常简单的例子。它显示一个红色的方块。如果您将图像拖放到红色方块上，它将其附加到身体。我已经确认它在IE11，Chrome 38和Firefox 32中有效。有关更详细的说明，请参阅Html5Rocks文章。var dropZone = document.getElementById('dropZone');// Optional. Show the copy icon when dr...
PHP Web相片资源管理模块--JAlbum
Jaydon的博客
09-21 471
一个站点的资源管理总是很麻烦，我希望在站点里有一个像Windows的资源管理器一样好用的资源管理器对站点资源进行统一的管理。web内的资源管理和电脑上的资源管理有很多共同点和不同点。相同点有这个资源属于哪一个用户或组，资源的添加、修改、删除、查找等。有一个最大的不同点是电脑上的一个资源同事只有一个程序占用着它，而web上的资源就不一样一个资源可以同时被很多过页面占用。就比如说有一张图片A，两个页面1
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值