揭秘CSS(第 1 版)
11.1.4 穿上马甲
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

解决跨浏览器问题

构建网页版WORD

布局设计

右栏布局

左栏布局

总体设计

穿上马甲

既然是网页版 word,就得穿上 word 的马甲,让人一眼看上去它就是真正的 word。其实,也非常简单。

CSS3 提供了 border-image 特性,只需搞一个 word 的截屏,再把它设置为 wrapper 容器的边框图像,就有了 word 的轮廓,看上去就像真正的 word 了。

由于图像边框会占据容器的空间,所以,需要调整容器的内边距,以便容器中的内容不会被边框图像所覆盖。CSS代码如下:

#wrapper {
    display: flex;
    border-image-source: url(img/word.png);
    border-image-slice: 201 4 31 4;
    border-image-width: 201px 4px 31px 4px;
    padding: 201px 4px 31px 4px;
}

上述代码中,容器 padding 属性的值,跟 border-image-width 属性的值完全相同。因为容器内边距的尺寸,由图像边框的宽度来决定的,实际上也就是切片的宽度。穿上马甲后的运行效果如图 11‑4 所示:

穿上word马甲
图11-4 穿上word马甲

乍一看,我们的网页版word已经真假难辨了,而仔细看,还是有差距。真正的 word,在内容溢出时,是在内容(目录和正文)上添加滚动条,内容滚动时,外轮廓保持不动。

而我们的网页版word,是在浏览器主窗口上添加滚动条,轮廓随内容一起滚动,稍微往下滚动一点,word 的轮廓就移出视线,看不出来它是 word 了。

乍一想,如果把 wrapper 容器的高度固定下来,让其跟浏览器窗口的高度相同,即把 wrapper 的 height 设置为 100% ,浏览器主窗口就不会有滚动条了。

#wrapper {
     …
     height: 100%;
}

而运行之后,结果并非如此,依然是在浏览器主窗口上添加滚动条。经过一番研究之后,终于找到答案:根据W3C规范,元素的百分比高度是基于其父元素的高度。例如,把一个 div 的高度设定为 height: 50%,而其父元素的高度是 100px,则这个 div 的高度就是 50px。

所以,要使 wrapper 容器的高度跟浏览器窗口的高度相同,必须先把 html 和 body 元素的 height 设置为 100% 才行。

html, body {
    height: 100%;
}

当然,还要把 nav 和 main 的 overflow 属性设置为 auto。这样,在内容发生溢出时,nav 和 main 才会自动出现滚动条。否则,还是在浏览器主窗口上添加滚动条。

nav, main {
    …
    overflow: auto;
}

此时运行,才符合的预期,滚动条加到 nav 和 main 容器上了,而浏览器主窗口上也没有滚动条了。运行结果如图 11‑5 所示:

网页版word
图11-5 网页版word

从上图可以看出,现在可以对 nav 和 main 的内容进行单独控制,互不影响。并且,无论谁在滚动,word 轮廓始终不动,是不是可以以假乱真了。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验