前言
无论如何,学到这里,我可以自豪的告诉自己,我HTML5与CSS3学完了,不管我现在还记得住多少,我确确实实将他们学完了,还做了不少demo。
回想几个月前,我一直在纠结自己应该学习HTML5与CSS3,我应该加强js与css,却一直没有任何产出!
但是,我最近在两个星期就完成了HTML5与CSS3的初步学习,就此慢慢迈入HTML5与CSS3的大门,而且重新找回了学习的感觉,这些都为一个目标:
两年内,我要成为国内优秀的前端工程师!
我就发现理想与目标的力量是不可评估的,自从我有了明确的目标后,感觉做什么事都比较有干劲,我相信不久的将来我一定可以实现自己的目标!!!
好了,会话结束,我们来看看今天的主角:Media Queries
Media Queries
在CSS中,与媒体相关的样式定义是从CSS2.1开始的,CSS2.1定义了各种媒体类型,包括显示器、便携设备、电视剧等。
CSS3加入了Media Queries模块,该模块允许添加媒体查询(media query)表达式,用以指定媒体类型,然后根据媒体类型选择应该使用的样式。
比如:允许我们在不改变内容的情况下在样式表中选择一种页面的布局精确的适应不同的设备,从而改变用户体验。
我们知道在不同设备中浏览器窗口尺寸可能是不同的,若是只针对某个尺寸定制化网页,在其他设备就会惨不忍睹;
若是根据不同的尺寸制作不同的网页,又工作量过大,为了解决以上问题,便有了我们今天的Media Queries。
使用该模块,我们只需要为不同的尺寸编写不同的样式,然后根据浏览器尺寸选择样式即可。
基本应用
1 <!DOCTYPE html>
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title></title>
6 <style type="text/css">
7 #container { width: 960px; margin: auto; }
8 #wrap { width: 740px; float: left; }
9 p { line-height: 600px; text-align: center; font-weight: bold; margin: 0 0 20px 0; }
10 #main { width: 520px; float: right; background: yellow; }
11 #sub01 { width: 200px; float: left; background: orange; }
12 #sub02 { width: 200px; float: right; background: green; }
13
14 /*--窗口1000px以上--*/
15 @media screen and (min-width: 1000px)
16 {
17 #container { width: 1000px; }
18 #wrapper { width: 780px; float: left; }
19 #main { width: 560px; float: right; }
20 #sub01 { width: 200px; float: left; background: orange; }
21 #sub02 { width: 200px; float: right; background: green; }
22 }
23 /*--窗口640px以上、999px以下--*/
24 @media screen and (min-width: 1000px) and (max-width: 999px)
25 {
26 #container { width: 640px; }
27 #wrapper { width: 640px; float: none; }
28 #main { width: 420px; float: right; }
29 #sub01 { width: 200px; float: left; background: orange; }
30 #sub02 { width: 100%; float: right; background: green; }
31 }
32 /*--窗口639px以下*/
33 @media screen and (min-width: 1000px) and (max-width: 999px)
34 {
35 #container { width: 100%; }
36 #wrapper { width: 100%; float: none; }
37 #main { width: 100%; float: right; }
38 #sub01 { width: 100%; float: left; background: orange; }
39 #sub02 { width: 100%; float: right; background: green; }
40 }
41
42 </style>
43 </head>
44 <body>
45 <div id="container">
46 <div id="wrapper">
47 <p id="main">
48 main</p>
49 <p id="sub01">
50 sub01</p>
51 </div>
52 <p id="sub02">
53 sub02</p>
54 </div>
55 </body>
56 </html>
因为不好在手机端做测试,我这里就不截图了,这块知识点应该得到重视,具体应用时,需要好好的查询下资料。
总结
从得知团队解散开始,我的心态经历了落寞、经历了压力,但在此过程中我看清了自己,我知道了自己的目标,知道了自己的理想!
于是从上上周陆陆续续的开始学习到今天,终于初步将HTML5与CSS3学习结束了!
通过本次学习大概知道了他们都做了些什么事情,我可以利用他们做些什么事情。
学习过程中其实感受到了HTML5+CSS3将要带来的变革,相信不用多久就会出现能媲美app的网站,并且会越来越多!!!
后续计划
这次只是初步学习,接下来会较深入的学习,希望能彻底掌握HTML5和CSS3,这次5.1放假给自己规划了一个任务,便是实现以下网站功能:
http://www.zhinengshe.com/index.html
我这里只做前端功能,做得好就都做了,做得不好便只做首页吧!!!希望通过实践能稍微巩固下最近所学的知识!!!
分享到:
相关推荐
CSS3中的Media Queries经常被用来制作前端的响应式设计页面,这里整理了一份CSS3中的Media Queries学习笔记,包括IE8中的兼容问题解决,需要的朋友可以参考下
邮件css web css 手机css!邮件css web css 手机css!邮件css web css 手机css!
CSS3实现烟花特效-图片+css
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
原生抽奖页面(炫酷抽奖),js+html+css!原生抽奖页面(炫酷抽奖),js+html+css!原生抽奖页面(炫酷抽奖),js+html+css!原生抽奖页面(炫酷抽奖),js+html+css!原生抽奖页面(炫酷抽奖),js+html+css!原生抽奖...
NULL 博文链接:https://liuna718-163-com.iteye.com/blog/1832739
css3参考手册,走过路过不要错过哈。css3参考手册 css3参考手册
iecss3.htc css3圆角支持文件
HTML5+CSS3学习总结.docx
主要介绍了CSS3媒体查询基本学习教程,包括基本的语法和逻辑操作符,以及媒体查询可检测的特性与利用viewport禁止用户缩放等部分的内容,需要的朋友可以参考下
一个css与css3都有效的code,如果浏览器不支持css3,那么只会以css的样式显示。最常见的就是圆弧角。一个只在css3中有效的code,如果浏览器不支持css3,那么其显示效果就不会出现。 css3和css,在编写code的时候,...
css3总结文档, 一些常用的写法 css3总结文档, 一些常用的写法 css3总结文档, 一些常用的写法
354个CSS3特效源码,涵盖几乎所有网页常见CSS3特效,支持PC端和移动端。
《HTML5+CSS3+jQuery应用之美》由韩国专业视觉设计师倾力奉献其多年商业网站设计与制作的从业经验,通过八大商业案例,以HTML5搭建结构、CSS3设置样式、jQuery实现动态应用这三者相结合的实际应用方式,详细讲解它们...
坚持了近半年,这本全新的CSS参考手册终于面世了。内容涵盖CSS2.1和大部分CSS3。 绝非苏沈小雨版的CSS2.0手册,前端开发必备。 列举手册的几个特征: 内容包括CSS2.1和大部分CSS3 所有手册内容都写有对IE6, IE7,...
css3在手持设备高速发展的带动下,在网页设计者和开发者孜孜不倦的追求下不断发酵,而它对于网站的最大好处莫过于对智能手机、平板电脑等的支持,使得用户通过...本文将为你介绍如何用css3来帮网站打开移动设备之门。
IE8及低版本浏览器不支持CSS3 media queries的解决方法
css2|css3 css2|css3 css2|css3 css2|css3 css2|css3 css2|css3 css2|css3 css2|css3 css2|css3
纯css3 3D旋转科技球体动画特效 纯css3 3D旋转科技球体动画特效