`

flex做的有可能可以代替css+div布局的网页导航

    博客分类:
  • flex
阅读更多

     一直以来觉得css+div的布局太麻烦,flex中有人写了个iframe的控件,但还是不能满足布局的要求,主要是flex和网页交互的时候,因为层次的问题,网页会可能会遮住flex弹出的窗口,这也是我一直也来觉得flex和网页集成比较麻烦的问题,网上有http://code.google.com/p/flex-iframe/提供的iframe控件,但测试了下也还是不能满足交互的需求,于是自己动手在别人提供的代码基础上进行改造,我想如果用这种方式代替css+div布局的话,或许是一种好方法:演示地址:

http://www.minnblog.com/

分享到:
评论
13 楼 wulinshishen 2011-07-14  
什么时间公布源码啊?期待
12 楼 minn84 2011-05-27  
ibelink 写道
ibelink 写道
楼主,你是监听一个鼠标事件么,去改变iframe或者iframe所在的div的Z轴坐标。。。请问你是这么实现的么?


当然,flex的alpha值设为0,这样,即使iframe处于flex的底层,还是可以看到

你入门了,加入鼠标事件和层切换就可以实现了
11 楼 ibelink 2011-05-25  
ibelink 写道
楼主,你是监听一个鼠标事件么,去改变iframe或者iframe所在的div的Z轴坐标。。。请问你是这么实现的么?


当然,flex的alpha值设为0,这样,即使iframe处于flex的底层,还是可以看到
10 楼 ibelink 2011-05-25  
楼主,你是监听一个鼠标事件么,去改变iframe或者iframe所在的div的Z轴坐标。。。请问你是这么实现的么?
9 楼 minn84 2011-03-19  
depravedangel 写道
"只不过是加强了原先iframe组件嵌入多个网页时弹出的flex窗口被遮住的问题"

我只想知道一下这个怎么解决的,望指点,谢谢!

恩,确实非常简单,你先动动脑筋,看你需要多长时间解决这个问题,我们大家比较下,看谁的方案更优
8 楼 depravedangel 2011-03-18  
"只不过是加强了原先iframe组件嵌入多个网页时弹出的flex窗口被遮住的问题"

我只想知道一下这个怎么解决的,望指点,谢谢!
7 楼 minn84 2011-03-16  
xiaohun2008 写道
哥们能不能分享一下源码????,lig3162008@163.com

这个问题,现在对我来说很纠结,过一段时间吧,要分享的话,会向所有人公开!
6 楼 xiaohun2008 2011-03-15  
哥们能不能分享一下源码????,lig3162008@163.com
5 楼 2xusi 2011-03-14  
很 好, 就是没代码
4 楼 minn84 2011-02-15  
liuyar 写道
SEO怎么处理?

因为iframe本身嵌入的是网页,seo应该不成问题的,只不过到时在网上点击链接的时候,就直接打开了网页,也就可能失去了导航的意义,不过这也可以通过程序实现先跳转到主要中,再显示网页,减少了css的累赘,但是却增加了编程的工作量
3 楼 liuyar 2011-02-14  
SEO怎么处理?
2 楼 minn84 2011-01-14  
smithfox 写道
能介绍这个特别之处吗?
还是全flex呀?!

布局用的是全flex,只不过是加强了原先iframe组件嵌入多个网页时弹出的flex窗口被遮住的问题,css+div布局比较麻烦,对应不同的浏览器可能要写不同的css进行对应,用这种方式来布局的话,网页主页在浏览器间的兼容性就解决了,只需要把注意力放在显示的内容上
1 楼 smithfox 2011-01-14  
能介绍这个特别之处吗?
还是全flex呀?!

相关推荐

    div+css代替iframe框架并带全屏遮罩加载特效

    通过合理地组合和定位`div`,我们可以创建出复杂而美观的网页结构,同时避免了`iframe`可能带来的性能问题和兼容性挑战。 在构建框架时,我们通常会定义多个`div`来代表不同的页面或内容区域。例如,可以创建一个`...

    CSS竖式导航条(一).rar

    在网页设计中,导航条是页面布局的重要组成部分,它帮助用户快速访问网站的不同部分。"CSS竖式导航条(一).rar" 提供了一种使用CSS实现垂直方向的导航条设计方法,特别强调了对IE6、7、8浏览器的兼容性。这在早期...

    css布局总结

    **多列布局**通常指在一个容器内创建多个列的布局方式,可以采用Flex布局、Grid布局或者纯CSS来实现。 **全局布局**则是指整个页面的布局结构,一般涉及到头部、主体内容区域和底部等部分的设计。 #### 五、结论 ...

    div css布局解决浏览器兼容及优化等实用技巧

    在网页设计中,Div+CSS布局是现代网页开发的标准方式,它使得页面结构清晰,易于维护。然而,由于不同浏览器的解析方式存在差异,开发者常常需要处理浏览器兼容性问题。以下是一些关于如何利用Div+CSS解决浏览器兼容...

    css鼠标悬停图文展示效果.zip

    这意味着CSS代码可能包含了对这些较旧版本浏览器的兼容性处理,比如使用`filter`来实现透明度效果,或者使用`display: inline-block`代替`display: flex`来保持兼容性。 4. **响应式设计**:考虑到现代网页设计的...

    分享20条编写 CSS 代码的建议

    在编写CSS代码时,有一些约定和最佳实践可以帮助我们更高效地进行样式编写,提升代码的可维护性和性能。以下是20条CSS编写建议,涵盖了从简单的属性使用到布局优化的各个方面。 1. 谨慎使用外边距属性 在CSS中,...

    css浏览器兼容整理

    使用CSS reset库可以有助于标准化这些差异。 6. **IE6下绝对定位的容器内文本无法正常选择** - 这是一个已知的IE6问题。可以通过设置`position: relative;`和`z-index`来解决。 7. **CSS双线凹凸边框** - 可以...

    仿QQ+html5的聊天界面

    例如,我们可以使用`display:flex`实现元素的弹性布局,`position:absolute`或`position:relative`实现定位,`@media query`进行不同屏幕尺寸下的样式调整。 3. JavaScript:JavaScript是实现页面动态功能的核心...

    IE与FF的CSS兼容问题大集合

    **问题描述**:在不同DOCTYPE声明下,某些CSS属性的表现可能有差异。例如,在严格模式和混杂模式下,某些属性的行为会有所不同。 **解决方案**:始终为文档指定正确的DOCTYPE声明。例如,对于XHTML 1.0 Strict文档...

    移动端内容超出

    }`(相当于1rem = 10px),然后在元素样式中使用0.75rem代替7.5px,使布局更具响应性。 然而,仅仅使用rem可能不足以解决所有移动端内容超出的问题。以下是一些额外的解决策略: 1. **媒体查询**:CSS3的媒体查询...

    前端面试题vue,css.,javascript

    - **PostCSS:** 不是一种语言,而是一系列插件集合,可以根据未来 CSS 规范转换现有 CSS。 **7. CSS3 新特性:** - **圆角 (border-radius):** 允许为元素设置圆角。 - **多列布局 (multi-column layout):** ...

    jQuery实现垂直半透明手风琴特效源码.zip

    透明度可以通过`opacity`属性控制,垂直布局则可通过`display: flex`实现。同时,为展开和收起的面板设置不同的高度和可见性: ```css .accordion { display: flex; flex-direction: column; } .accordion-item ...

    用css截取字符实现文字自动截断隐藏溢出文本

    在网页设计中,文字内容在容器中完整显示是一种基本需求,但有时我们希望在内容超出容器宽度时自动隐藏多余的文本,仅显示前一部分,并以省略号(…)代替被隐藏的内容,这就是文字自动截断隐藏溢出文本的功能。...

    一些前端面试题.pdf

    **BFC**(Block Formatting Context)是CSS中的一种布局模式,可以控制元素的布局行为。当元素创建一个新的BFC时,其内部的子元素布局不受外部的影响。 ### 浏览器的重绘与回流 **重绘**(Repaint):只改变元素的...

    阿里巴巴2016前端开发工程师笔试.docx

    - **B**: 使用`translate`代替`left`和`top`可以减少重布局。 - **C**: 并非所有的移动设备都支持3D硬件加速,过度使用可能导致性能问题。 - **D**: 减少重绘和重排是优化浏览器渲染性能的关键。 **知识点总结:** ...

    web前端面试题

    - **Grid布局(display:grid)**:使用CSS Grid布局可以非常容易地创建复杂的网格布局。 #### 11. CSS在浏览器中的兼容问题及IE6的bug与解决方案 - **盒模型差异**:IE6使用的是不同的盒模型计算方式,可以通过`box-...

    浏览器兼容性问题

    - **问题描述**:实现Div元素的垂直居中在不同浏览器中也可能存在兼容性问题。 - **解决方法**:使用Flexbox或者Grid布局来实现垂直居中。 ##### 10. margin加倍的问题 - **问题描述**:在IE6及以下版本中,有时会...

Global site tag (gtag.js) - Google Analytics