CSS款式表实例教程:screen新闻媒体种类的功效

日期:2021-03-16 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑


CSS @media 标准十分合适于将 HTML 或 XML 文本文档精准定位为总体目标輸出方式。现阶段,print 新闻媒体的应用十分广泛,与完成独立的 “可复印版本号” 相比,print 出示了更为干净整洁的方法来建立复印机友善的网页页面。screen 新闻媒体1直未获得充足运用,缘故将会是由于人们一般都觉得 screen 仅仅是 “默认设置的展现方法”。但是,就合理布局而言(尤指肯定合理布局),screen 新闻媒体种类具备关键的实际意义,款式表标准其实不关注新闻媒体种类,因而沒有涵盖这1点。
近期,我在建立某个 Ajax Web 运用程序流程全过程中遇到了1个无法处理的难题。和建立大部分 Web 运用程序流程1样,我必须在显示屏的固定不动部位建立1个页面构件。在我的程序流程(本技能)中,这个构件便是横跨信息内容显示信息地区底部的专用工具栏。针对我的具体运用程序流程,这个专用工具栏包括了各种各样子构件,能够对运用程序流程开展配备和互动;就这篇技能而言,我将它更换为1个静态数据的信息内容结合。这类简化不容易造成 CSS 难题。
一般,将元素放入 <frame><iframe> 元素内便可处理难题。可是,应用架构不但会损害运用程序流程的简易性,还减少顾客机 ECMAscript 在互动期内操纵 <div> 元素可视性性的工作能力。最好是的方式是对页面应用纯碎的 CSS 表明。
针对本篇技能,我建立了1个玩具式的文档查询运用程序流程,它能够载入 URL 或当地文档并应用序号的行和1个相近 wc 的引言显示信息载入內容。我期待访问器显示信息如图 1 所示的內容。

为建立这类外型,我应用以下的 HTML 模版:
<html> <head> <title>Using CSS media types</title> @CSS </head> <body> <div class="top"> @ITEMS </div> <div class="bottom"> @SUMMARY </div> </body> </html>
不必关注这类模版語言(其实不存在)的细节;其用意十分显著。我尝试应用的 CSS 为:
div.bottom { background-color: lightblue; position: absolute; bottom: 0px; left: 0px; right: 0px; height: 20px; } div.top { background-color: white; } li.odd { background-color: #EAEAFF; } li.even { background-color: #FCFCFC; }
十分简易,它将造成上面所示的显示屏截图。当您期待向下翻转 <div class="top"> 中序号的行时,难题出現了:

处理翻转难题的方式好像是应用 <div>fixed 而并不是 absolute 合理布局。
div.bottom { background-color: lightblue; position: fixed; bottom: 0px; left: 0px; right: 0px; height: 20px; } /* ...Rest of CSS styling */
这个微小的修改的确修补了玩具运用程序流程的屏幕上显示难题,可是如今,同1个网页页面的复印版本号中出現了1个让人不快的工件。为演试这个难题,我设定了1个极为短小的网页页面长度:

自然,我期待将各种各样新闻媒体以合适其显示信息特点的方式显示信息出来,但另外依然共享资源单独于新闻媒体(一些)的可视性特性。要另外完成正确地屏幕上显示和复印显示信息,我所需做的便是应用 @media 标准建立1个略微繁杂1点的款式表:
li.odd { background-color: #EAEAFF; } li.even { background-color: #FCFCFC; } @media screen { div.bottom { background-color: lightblue; position: fixed; bottom: 0px; left: 0px; right: 0px; height: 20px; } div.top { background-color: white; } } @media print { div.bottom { position: absolute; top: 0px; } div.top { position: relative; top: 20pt; } }
能够看到,奇偶数行的色调维持不会改变,可是 topbottom <div> 元素的特殊部位对于新闻媒体的不一样做了调剂。造成如图 4 的实际效果:

让人开心的是,显示屏依然维持其正确的显示信息情况。
上一篇:服务 / APP开发设计 返回下一篇:没有了