已经学习css3一个月了,通过对css3的深入学习,我对网页设计的理解就更深刻了,以前只会用简单的图片,定位等来制作网页,现在可以运用css3扩展的新内容来写出更好看的网页。

css3扩展内容中,我认为好用的有:动画,选择器,用户界面,多列布局等,运用这些可以使用户界面变得更加美观。在我看来媒体查询也比较好用,代码也比较简单。

媒体查询:媒体查询(media queries)是响应式设计(Responsive Web Design简称RWD)必不可少的一部分。媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color (等)。使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果。

代码:<meta name="viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

css3的学习的更多相关文章

  1. HTMl5/CSS3/Javascript 学习推荐资源

    HTMl5/CSS3/Javascript 学习推荐资源 前端的定义应该是数据内容的展示,在国内大家都觉得前端只是HTML+CSS+Javascript,但是实际上与展示有关的都是前端,所以Ruby/ ...

  2. css3 3d学习心得

    css3 3d学习心得 卡片反转 魔方 banner图 首先我们要学习好css3 3d一定要有一定的立体感 通过这个图片应该清楚的了解到了x轴 y轴 z轴是什么概念了. 首先先给大家看一个小例子: 卡 ...

  3. HTML5移动开发学习笔记之CSS3基础学习

    CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...

  4. 【HTML5&CSS3进阶学习02】Header的实现·CSS中的布局

    前言 我们在手机上布局一般是这个样子的: 其中头部对整个mobile的设计至关重要,而且坑也很多: ① 一般来说整个header是以fixed布局,fixed这个产物在移动端来说本身坑就非常多 ② 在 ...

  5. 【HTML5&CSS3进阶学习01】气泡组件的实现

    前言 气泡组件在实际工作中非常普遍,无论是网页中还是app中,比如: 我们这里所谓气泡组件是指列表型气泡组件,这里就其dom实现,css实现,js实现做一个讨论,最后对一些细节点做一些说明,希望对各位 ...

  6. Css3 - 全面学习

    css3实验.生成.学习网站 http://www.css3maker.com/ http://www.css3.me/ 查询前缀和兼容性 http://caniuse.com/ 1.文本阴影 < ...

  7. css3动画学习笔记

    具体学习地址:http://www.imooc.com/learn/33CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画; tranform: ...

  8. css3动画学习资料整理

    现在主流浏览器(先不管IE8,IE9吧),尤其是移动端浏览器基本都支持css3了,为了增强页面的表现力,css3动画必不可少了.这篇文章主要整理一下我在学习css3动画所查阅的一些好的资料,并附上两个 ...

  9. CSS3——transform学习

    CSS动画效果可以使用transform和Animation,前者较简单,先学习前者. transform有几个基本变换,平移.旋转.缩放.扭曲 一.translate平移 有translate2d和 ...

随机推荐

  1. UPS对电源故障的处理能力

    UPS对电源故障的处理能力 双变换在线式UPS由于其逆变器实时在线工作,因而能对所有的电源故障具有隔离和处理功能.由于目前电网情况发生了很大变化,真正的长时间断电只占所有电源故障的30%甚至更低,而非 ...

  2. Nodejs进阶:express+session实现简易身份认证

    本文摘录自<Nodejs学习笔记>,更多章节及更新,请访问 github主页地址.欢迎加群交流,群号 197339705. 文档概览 本文基于express.express-session ...

  3. 玩转Eclipse--如何使用eclipse可以更好的提高我们的工作效率

    工欲善其事必先利其器,更加了解我们的开发工具有利于提高开发效率,而合理使用快捷键可以使我们事半功倍,这里收集了eclipse中的几种常见设置,eclipse的优化以及非常全面的快捷键介绍,大家有用到的 ...

  4. Docker 架构详解 - 每天5分钟玩转容器技术(7)

    Docker 的核心组件包括: Docker 客户端 - Client Docker 服务器 - Docker daemon Docker 镜像 - Image Registry Docker 容器 ...

  5. Java匿名内部类使用与示例

    首先说为什么有匿名类 两个原因(产生的使命) 1.简化代码编写 某种情况下,类只需要扩展一个方法,没必要为了一个方法单独去写一个子类,然后然后调用子类,此时需要匿名类 2.在不同的包内的类内调用类的p ...

  6. phpcms添加视频

    phpcms添加视频分为三种情况,一种是在首页播放,一种是在列表页播放,另一种是在内容页播放.其中在首页播放和在列表页播放的区别就是catid值是固定的还是取得当前catid的区别.而在首页和列表页播 ...

  7. JAVA虚拟机环境变量设置

    转自: 网络    下载java环境变量设置所需的jdk并安装,下载地址:http://www.oracle.com/technetwork/cn/java/javase/downloads/jdk7 ...

  8. python 错误之SyntaxError: Missing parentheses in call to 'print'

    SyntaxError: Missing parentheses in call to 'print' 由于python的版本差异,造成的错误. python2: print "hello ...

  9. 蓝桥杯-n级台阶-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  10. Github开源:Sheng.RabbitMQ.CommandExecuter (RabbitMQ 的命令模式实现)

    [Github]:https://github.com/iccb1013/Sheng.RabbitMQ.CommandExecuter Sheng.RabbitMQ.CommandExecuter 是 ...