仓酷云

标题: 来谈谈：HTML5和CSS3 Media Queries呼应式Web计划计划 [打印本页]

作者: 谁可相欹 时间: 2015-1-15 23:12
标题: 来谈谈：HTML5和CSS3 Media Queries呼应式Web计划计划
更好的控制页面布局。不用多说。
破洛洛文章简介：经由过程CSS3MediaQuery完成呼应式Web计划.
十一长假已然已往了一泰半。明天倒真是明朗的不可，向窗外看往几近能够看到阳光穿过凉快的氛围一缕缕洒落上去的模样。自从不再是先生，对每一年的几回长假就非常爱惜，千方百计让每天都只管过的丰满一些；夜里闭上眼，满头脑就都是Drupal、博客、咖啡、任务号召、北方公园。..大概必要出门走一走了。
OK入手下手说正派的了。在之前一篇译文中，我们懂得了呼应式Web计划的观点、构成要素和基础的完成思绪。明天持续相干话题，我们将夙昔文先容过的"弹性结构布局"这方面动身，经由过程一个详细的实例来深切进修。
现在的屏幕分辩率，小至320px（iPhone），年夜到2560px乃至更高（年夜显现器），变更局限极年夜。除利用传统的台式机，用户会愈来愈多的经由过程手机、上彀本、iPad一类的平板设备来扫瞄页面。这类情形下，流动宽度的计划计划将会显得更加分歧理。页面必要有更好的顺应性，其结构布局要做到依据分歧的设备及屏幕分辩率举行呼应调剂。接上去，我们将懂得一下如何经由过程HTML5和CSS3MediaQueries（前言查询）相干手艺来完成跨设备跨扫瞄器的呼应式Web计划计划。
典范效果预览
起首，我们来看看本篇典范的最后的效果演示。翻开该页面，拖拽扫瞄器边框，将窗口渐渐减少，同时察看页面布局及元素结构是如何基于宽度变更而主动呼应调剂的。

更多典范
我（原文作者）利用mediaquery的体例计划了一些WordPress模板，好比Tisa、Elemin、Suco、iTheme2、Funki、Minblr和Wumblr等。
概述
我们将典范页面的父级容器宽度设置为流动的980px，关于桌面扫瞄情况，该宽度合用于任何宽于1024像素的分辩率。我们经由过程mediaquery来监测那些宽度小于980px的设备分辩率，并将页面的宽度设置由"流动"体例改成"液态"，结构元素的宽度跟着扫瞄器窗口的尺寸变更举行调剂。当可视部分的宽度进一步减小到650px以下时，次要内容部分的容器宽度会增年夜至全屏，而侧边栏将被置于主内容部分的下方，全部页面变成单栏结构。

HTML代码
我们将把注重力会合在页面的次要结构方面，并利用HTML5标签来加倍语义化的完成这些布局，包含页头、次要内容部分、侧边栏和页脚：

<divid="pagewrap"><headerid="header"><hgroup><h1id="site-logo">Demo</h1><h2id="site-description">SiteDescription</h2></hgroup><nav><ulid="main-nav"><li><ahref="#">Home</a></li></ul></nav><formid="searchform"><inputtype="search"></form></header><divid="content"><articleclass="post">blogpost</article></div><asideid="sidebar"><sectionclass="widget">widget</section></aside><footerid="footer">footer</footer></div>

复制代码

HTML5.js
IE是永久的话题；关于我们利用的HTML5标签，IE9之前的版本没法供应撑持。今朝的最好办理计划还是经由过程html5.js来匡助这些旧版本的IE扫瞄器创立HTML5元素节点。在我们的页面HTML代码中挪用该JS文件：

复制代码

CSS
HTML5块级元素款式
起首还是扫瞄器兼容成绩。固然我们已能够在低版本的IE中创立HTML5元素节点，但仍是必要在款式方面做些事情，将这些"新"元素声明为块级：

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}

复制代码

次要布局的CSS
疏忽细节，我们还是将注重力会合在年夜成绩上。正如在前文"概述"中提到的，默许情形下页面庞器的流动宽度为980像素，页头部分（header）的流动高度为160像素；次要内容部分（content）的宽度为600像素，左浮动；侧边栏（sidebar）右浮动，宽度为280像素。

#pagewrap{width:980px;margin:0auto;}#header{height:160px;}#content{width:600px;float:left;}#sidebar{width:280px;float:right;}#footer{clear:both;}

复制代码

停止今朝的效果演示
今朝我们只是开端完成了页面布局的HTML和默许布局款式，固然，其实不包含那些与话题有关的细节完成成绩。正如能够在今朝的演示中看到的，因为还没有做任何mediaquery方面的事情，页面还不克不及跟着扫瞄器尺寸的变更而改动结构。
</p>
你用什么用的熟练就用什么，讲究的是效率，客户永远不管你用什么，页面就要好看，功能就要好用，还有时间和成本的问题。

作者: 小妖女 时间: 2015-1-17 20:42
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 冷月葬花魂 时间: 2015-1-26 21:13
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

作者: 灵魂腐蚀 时间: 2015-2-4 22:37
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

作者: 再现理想 时间: 2015-2-10 23:08
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: admin 时间: 2015-3-1 18:04
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

作者: 仓酷云 时间: 2015-3-10 23:21
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 山那边是海 时间: 2015-3-17 16:09
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 只想知道 时间: 2015-3-24 14:21
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

欢迎光临仓酷云 (http://ckuyun.com/)