html九宫格圆角正方形卡片,网页九宫格布局:应用透明的外圆角
网页制作poluoluo文章简介:在前面四篇文章中,我介绍了九宫格的原理及一个应用案例,本来已经告一段落了,但是那个布局还是有一定的局限性的。其最大的局限是不能应用四角圆角外面是透明的图片,而作为一个界面布局方式,如果不能应用透明的外圆角,那么这种布局的可扩展性就会大受影响,不能最大
前言:在前面四篇文章中,我介绍了九宫格的原理及一个应用案例,本来已经告一段落了,但是那个布局还是有一定的局限性的。其最大的局限是不能应用四角圆角外面是透明的图片,而作为一个界面布局方式,如果不能应用透明的外圆角,那么这种布局的可扩展性就会大受影响,不能最大化限度地得以推广。本文就是要从根本上解决这个问题。
我知道这个问题的根源在于:中间的左右边框列垂直同高产生的,因为它们的父级容器是box这个总容器,而不是一个独立的容器,而底部的左右两个角容器是向上负偏移到它们的上面的,遮挡住了背景色。所以当圆角容器中的图片采用半透明或透明的图片时,其透明部分就会显示出左右两侧边框的图片背景出来。
在制作前面的《牢不可破的九宫格布局》的模型时,我就已经发现了这个问题,当时制作圆角图片也是采用的透明的圆角图片,可是后来发现这个问题后,为了减少麻烦,我又将透明的圆角片的透明部分加上一个和总容器相同的背景色,来避免了这个问题。但这个方法最终不是解决的终极办法,在我们的日常工作中,采用半透明的圆角来定制界面是很有必要的,因此在那篇文章中仅仅只是逃避了问题,而没有从根本上解决问题。在文章发布之后,终于有细心的朋友在试用之后,提出这个问题,哈哈,看看终于是无法偷懒来回避这个问题了。
知道了问题的根源后,要解决它也是一件简单的事情。
因为我这篇文章是建立在《牢不可破的九宫格布局》这篇文章的基础上的,如果还没有看过那篇文章的朋友,不妨先看了它后再来看这篇文章。这将有助于你的消化!
看来,要解决这个问题,我需要将中间部分作一些结构上的修改。因为我希望它的左右边框容器是和内容区是垂直同高的,也就是当内容区的文字内容的高度发生变化时,其左右边框的高度跟着同步调整其高度。这就是一个典型的三列同高布局。但与平时看到的三列布局有点不同的是,我希望中间的内容区的宽度填满整个中间的宽度,但它不是100%的宽度,而是100%减去左右两列边框的宽度,而这个宽度并不是一个百分比,它们都是有固定像素值的。这需要运用到我在上一篇文章中提到的方法来进行的解决。
为此我需要改变一下原来的结构:
【结构层】
我给中间的左中右三个容器增加一个父级容器,并给它定义一个类名middle,那么,现在的中间区域的结构应该是这样的:
内容区< p>
网页制作poluoluo文章简介:在前面四篇文章中,我介绍了九宫格的原理及一个应用案例,本来已经告一段落了,但是那个布局还是有一定的局限性的。其最大的局限是不能应用四角圆角外面是透明的图片,而作为一个界面布局方式,如果不能应用透明的外圆角,那么这种布局的可扩展性就会大受影响,不能最大
【样式层】
我们再定义一下middle的样式,我们将原来的box的overflow:hidden;取消,将它加在middle容器上,让超出的部分截出隐藏。
.box{width:50%;margin:50px auto 0;background:#fff; }
.middle{overflow:hidden; zoom:1; }
这时需要特别指出的是,如果只是将middle这个容器设置为overflow:hidden的话,那么这个模型可以在IE6以上的所有浏览器中通过,但对于IE6来说,问题依然存在(你可以将此句删除,然后在IE6测试看看。)。最后加上zoom:1才能完美地解决这个问题。
基础模型的效果图如下:
图一
此基础案例也包括在下面的下载压缩包中。你可以下载到本机进行测试。
【案例应用】
为了更直观地测试透明圆角框效果,我在body中加了一张上下渐变的水平平铺的背景图片,并且出于简化模型的需要,我将圆角框的图片的外圆角改成了透明的gif图片(PS:你也可以将它换成png-24半透明的圆角图片,当然就要注意IE6的兼容性问题,需要JS代码来支持。支持代码在下面的播放器的案例中已经应用了,你略加修改就可以使用。)。你可以参照下面的实例来设计图片,在应用你自己的设计前,你需要修改样式表中图片的宽高值。
案例模型的效果截图如下所示:
图二
在上面的效果图中,可以看到在一个渐变背景下,其圆角框是透明的。你也以点击下面的“宽屏”、“全屏”按钮来测试当窗口放大时其透明圆角图片的完美应用。
本模型在以下浏览器中完美通过:
IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
html九宫格圆角正方形卡片,网页九宫格布局:应用透明的外圆角相关推荐
- 【冰极峰教程系列之五】:无hack并支持透明圆角框的全兼容九宫格布局
原创:冰极峰 转载请注明出处 时间:2009年7月19日 23:33:05 冰极峰教程系列之一:九宫格基本布局 冰极峰教程系列之二:牢不可破的九宫格布局 冰极峰教程系列之三:三层分离的完美九宫格 冰极 ...
- Android显示九宫图(自定义圆角,仿微信九宫格图)
详细解析Android显示九宫图(自定义圆角,仿微信九宫格图) 这是一个自定义九宫格图片框架,里面有设置圆角大小,还有当图片一张的时候控件自定义的大小,图片的间隔,四张图片的时候图片自定义为两行两列等 ...
- Layout 不可思议(一)—— CSS 实现自适应的正方形卡片
最近被一个布局问题给难住了,枉我一向自称掌握最好的前端技能是 CSS,写完博客就得敷脸去 需求是实现一个自适应的正方形卡片,效果如下: 顺便(开个坑)写个系列,总结那些设计精妙的布局结构 本次页面的 ...
- 计算机网页设计布局与排版研究,论计算机网页设计的布局与排版
王禹智 摘 要:网页设计是一种直观的视觉语言,需要对其进行布局与排版.虽然网页设计与平而设计之间存在一定的区别,但是其两者依然存在一定的相似之处,网页设计应该充分借鉴利用平而设计的原则与方法.网页设计 ...
- 响应式网页的布局设计
值得收藏的14款响应式前端开发框架 作为今年大热的设计趋势,响应式已然是设计师的标配技能.今天阿里的同学从响应式设计的布局类型.布局实现两方面深入讲解,有哪些实现布局的方式,该采用何种方式,都有相当专 ...
- html网页 table布局实例,HTML用Table表格对网页布局
HTML是用于开发网页的"超文本标记语言",今天我们一起来学习一下HTML+CSS网页布局中Table布局方式. 常见的网页布局用CSS而言一般有经典行布局.经典列布局.双飞翼布局 ...
- web网页 页面布局的几种方式(转)
web网页 页面布局的几种方式 转载 2017年06月16日 12:19:40 2218 网页基本布局方式: (1)流式布局 Fluid 流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同 ...
- 网页框架布局设计_实用的网页设计-框架和框架用法介绍
网页框架布局设计 Ah, frames. We hated them when Netscape first offered them up around 1995; we deplored them ...
- php制作公司五章,圆形印章和椭圆形印章,正方形印章,圆角正方形印章,圆角框
都是写死的,代码重复太多.没有搜到椭圆的文字均匀分布的,数学也不好,有哪位大神能算一下.圆角框就是重叠套起来的,度娘没找到php直接画圆角框的,太麻烦了,不过还好做出来了,有更方便的求推荐. func ...
最新文章
- 深入Windows原理杂记
- Go语言资源自动回收技术
- 组件化开发,制作Cocoapods Git库
- 【Linux 内核 内存管理】RCU 机制 ① ( RCU 机制简介 | RCU 机制的优势与弊端 | RCU 机制的链表应用场景 )
- 常用的webpack 配置
- 在Qt调用OpenCV库编写GUI程序
- 从基础末尾:CSS适用教程
- 【Docker】docker安装redis
- 有哪些经济学理论可以用在谈恋爱上?
- Form组件之详解字段
- strchr,wcschr 及strrchr, wcsrchr,_tcschr,_tcsrchr函数
- STM32 KEIL 下的 printf 函数
- G - 罐子和硬币 (思维题)
- [WCF] Contract
- 电容屏通用测试软件,测试屏幕触控的软件 屏幕触控检测软件
- Linux平台开源浏览器
- 【论文笔记】FlowNet:有监督的光流估计(optical flow estimation)网络
- OTA 差分升级包的制作
- Chrome浏览器所有页面崩溃
- luffcc项目-04-登录防水墙认证(滑动图片验证码)、在登录认证中接入防水墙、前端获取显示并校验验证码