为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
十天精通CSS3_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • 第八节 Responsive设计——不同设备的分辨率设置 1.1024px显屏 @media screen and (max-width : 1024px) { /* 样式写在这里 */ } 2.800px显屏 @media screen and (max-width : 800px) { /* 样式写在这里 */ } 3.640px显屏 @media screen and (max-width : 640px) { /* 样式写在这*/ } 4.iPad横板显屏 @media screen and (max-device-width: 1024px) and (orientation: landscape) { /* 样式写在这 */ } 5.iPad竖板显屏 @media screen and (max-device-width: 768px) and (orientation: portrait) { /* 样式写在这 */ } 6.iPhone 和 Smartphones @media screen and (min-device-width: 320px) and (min-device-width: 480px) { /* 样式写在这 */ }
    查看全部
  • 布局 ---> display: flex; 方向 ---> flex-direction: row(横)||column(竖); 上下 ---> align-items: flex-start||center||flex-end; 左右 ---> justify-content: 同上; 倒序 ---> row-reverse 兼容加-webkit-前缀
    查看全部
  • 第七节 Responsive设计——meta标签 meta标签被称为可视区域meta标签,其使用方法如下。 <meta name=”viewport” content=”” /> content属性值 描述 width      可视区域的宽度,其值可以是一个具体数字或关键词device-width height      可视区域的高度,其值可以是一个具体数字或关键词device-height initial-scale   页面首次被显示时可视区域的缩放级别,取值为1.0时将页面按实际显示,无缩放 mininum-scale  可视区域的最小缩放级别 maxinum-scale 可视区域的最大缩放级别 user-scalable  指定用户是否可以对页面进行缩放,yes表示允许,no表示禁止。 IE9以下浏览器使用方法: media-queries.js(http://code.google.com/p/css3-mediaqueries-js/) respond.js(https://github.com/scottjehl/Respond) <!—[if lt IE9]> <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> ​<![endif]>
    查看全部
  • 第六节 Responsive布局技巧 不要用: 1, 尽量少用无关紧要的div; 2,不要使用内联元素(inline); 3,尽量少用JS或flash; 4,丢弃没用的绝对定位和浮动样式; 5,摒弃任何冗余结构和不使用100%设置。 要用: 1,使用HTML5 Doctype和相关指南; 2,重置好你的样式(reset.css); 3,一个简单的有语义的核心布局; 4,给重要的网页元素使用简单的技巧,比如导航菜单之类元素。
    查看全部
  • 4.屏幕分辨率。屏幕分辨简单点说就是用户显示器的分辨率,比如说智能手机浏览器、移动电脑浏览器、平板电脑浏览器和桌面浏览器的分辨率。 5.主要断点。主要断点在Web开发中是一个新词,但对于Responsive设计中是一个很重要的一部分。简单的描述就是,设备宽度的临界点。在Media Queries中,其中媒体特性“min-width”和“max-width”对应的属性值就是响应式设计中的断点值。简单点说,就是使用主要断点和次要断点,创建媒体查询的条件。而每个断点会对应调用一个样式文件(或者样式代码)。
    查看全部
  • 第四节 Responsive设计(一) Responsive设计简单的称为RWD,是精心提供各种设备都能浏览网页的一种设计方法,RWD能让你的网页在不同的设备中展现不同的设计风格。 RWD不是流体布局,也不是网格布局,而是一种独特的网页设计方法。 响应式设计要考虑元素布局的秩序,而且还需要做到“有求必应”,那就需要满足以下三个条件:网站必须建立灵活的网格基础;引用到网站的图片必须是可伸缩的;不同的显示风格,需要在Media Queries上写不同的样式。 要想灵活的使用Responsive,仅满足这几个条件还是不够的,我们必须对Responsive有一个全面的了解,那么要了解Responsive,就得先了解他的一些术语: 1.流体网格。流体网格是一个简单的网格系统,这种网格设计参考了流体设计中的网格系统,将每个网格格子使用百分比单位来控制网格大小。这种网格系统最大的好处是让你的网格大小随时根据屏幕尺寸大小做出相对应的比例缩放。 2.弹性图片。弹性图片指的是不给图片设置固定尺寸,而是根据流体网格进行缩放,用于适应各种网格的尺寸。 img {max-width:100%;} 3.媒体查询。根据用户终端设备适配对应的样式。这也是响应式设计中最为关键的。
    查看全部
  • 3.多个媒体特性使用 Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说,一个Media Query中可以包含0到多个表达式,表达式又可以包含0到多个关键字,以及一种媒体类型。 当屏幕在600px~900px之间时,body的背景色渲染为“#f5f5f5”,如下所示。 @media screen and (min-width:600px) and (max-width:900px){ body {background-color:#f5f5f5;} } 4.设备屏幕的输出宽度Device Width 在智能设备上,还可以根据屏幕设备的尺寸来设置相应的样式(或者调用相应的样式文件)。 <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" /> 5. not关键词 使用关键词“not”是用来排除某种制定的媒体类型,也就是用来排除符合表达式的设备。换句话说,not关键词表示对后面的表达式执行取反操作,如: @media not print and (max-width: 1200px){样式代码} 上面代码表示的是:样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。 6.only关键词 only用来指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。 其主要有:支持媒体特性的设备,正常调用样式,此时就当only不存在;表示不支持媒体特性但又支持媒体类型的设备,这样就会不读样式,因为其先会读取only而不是screen;另外不支持Media Queries的浏览器,不论是否支持only,样式都不会被采用。
    查看全部
  • 第三节 Media Queries使用方法 Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的渲染效果。通过min/max来表示大于等于或小于做为逻辑判断,而不是使用小于(<)和大于(>)这样的符号来判断。 @media 媒体类型and (媒体特性){你的样式} 1. 最大宽度max-width “max-width”是媒体特性中最常用的一个特性,其意思是指媒体类型小于或等于指定的宽度时,样式生效。如: @media screen and (max-width:480px){ .ads { display:none; } } 2. 最小宽度min-width
    查看全部
  • 媒体类型的引用方法也有多种,常见的有:link标签、@import和CSS3新增的@media几种 1. link方法 通过link标签中的media属性来指定不同的媒体类型。如下所示。 <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> 2.@import方法 @import可以引用样式文件,同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式,一种是在样式中通过@import调用另一个样式文件;另一种方法是在<head></head>标签中的<style></style>中引入,但这种使用方法在IE6~7都不被支持,如样式文件中调用另一个样式文件时,就可以指定对应的媒体类型。 @importurl(reset.css) screen; @importurl(print.css) print; 在<head>中的<style>标签中引入媒体类型方法。 <head> <style type="text/css"> @importurl(style.css) all; </style> </head> 3. @media方法 @media是CSS3中新引进的一个特性,被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似也具有两方式。 (1)在样式文件中引用媒体类型: @media screen { 选择器{/*你的样式代码写在这里…*/} } (2)使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。 <head> <style type="text/css"> @media screen{ 选择器{/*你的样式代码写在这里…*/} } </style> </head>
    查看全部
  • 第一节 Media Queries——媒体类型 CSS3中的Media Queries模块来让一个页面适应不同的终端(或屏幕尺寸),从而让用户有一个更好的体验。 Media Queriese有两个重要部分,第一个是媒体类型,第二个是媒体特性。 一、媒体类型 常用:all(全部)、screen(屏幕)、print(页面打印或打印预览模式) 值     设备类型 All     所有设备 Braille    盲人用点字法触觉回馈设备 Embossed  盲文打印机 Handheld  便携设备 Print    打印用纸或打印预览视图 Projection  各种投影设备 Screen   电脑显示器 Speech   语音或音频合成器 Tv     电视机类型设备 Tty     使用固定密度字母栅格的媒介,比如电传打字机和终端
    查看全部
  • animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率,简单点说就是动画的播放方式。
    查看全部
  • animation-duration主要用来设置CSS3动画播放时间,其使用方法和transition-duration类似,是用来指定元素播放动画所持续的时间长,也就是完成从0%到100%一次动画所需时间。单位:S秒 语法规则 animation-duration: <time>[,<time>]* 取值<time>为数值,单位为秒,其默认值为“0”,这意味着动画周期为“0”,也就是没有动画效果(如果值为负值会被视为“0”)。
    查看全部
  • Keyframes被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。 @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } } 在一个“@keyframes”中的样式规则可以由多个百分比构成的,如在“0%”到“100%”之间创建更多个百分比,分别给每个百分比中给需要有动画效果的元素加上不同的样式,从而达到一种在不断变化的效果。 经验与技巧:在@keyframes中定义动画名称时,其中0%和100%还可以使用关键词from和to来代表,其中0%对应的是from,100%对应的是to。
    查看全部
  • Keyframes被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。 @keyframes changecolor{ 0%{ background: red; } 100%{ background: green; } } 在一个“@keyframes”中的样式规则可以由多个百分比构成的,如在“0%”到“100%”之间创建更多个百分比,分别给每个百分比中给需要有动画效果的元素加上不同的样式,从而达到一种在不断变化的效果。 经验与技巧:在@keyframes中定义动画名称时,其中0%和100%还可以使用关键词from和to来代表,其中0%对应的是from,100%对应的是to。
    查看全部
  • transition-delay属性和transition-duration属性极其类似,不同的是transition-duration是用来设置过渡动画的持续时间,而transition-delay主要用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行。 有时我们想改变两个或者多个css属性的transition效果时,只要把几个transition的声明串在一起,用逗号(“,”)隔开,然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点:第一个时间的值为 transition-duration,第二个为transition-delay。 例如:a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}
    查看全部

举报

0/150
提交
取消
课程须知
1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下,建议使用 chrome、safari、firefox、opera浏览器学习本课程。
老师告诉你能学到什么?
1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!