慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

qq_相信自己_25

项目移到左边： div{display：flex；flex-direction：row；justify-content：flex-start；} div{display：flex；flex-direction：column；align-items：flex-start；} 项目移动到右边： div{display：flex；flex-direction：row；justify-content：flex-end；} div{display：flex；flex-direction：column；align-items：flex-end；} 项目水平垂直居中： div{display：flex；flex-direction：row；justify-content：center；align-items：center；} 要记得加上浏览器的前缀

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2016-10-27
AGhosts

esize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。 resize: none | both | horizontal | vertical | inherit 取值说明： none:用户不能拖动元素修改尺寸大小。 both:用户可以拖动元素，同时修改元素的宽度和高度 horizontal:用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。 vertical:用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。 inherit:继承父元素的resize属性值。

查看全部

0 采集收起来源：自由缩放属性resize
2016-10-27
AGhosts

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) { /* 样式写在这 */ }

查看全部

0 采集收起来源：Responsive设计——不同设备的分辨率设置
2016-10-27
慕粉3724715

@importurl("http://www.w3cplus.com/demo/css3/base.css"); @importurl("http://fonts.googleapis.com/css?family=Yesteryear"); 请问这两个是什么，什么作用，麻烦详细解答，谢谢

查看全部

0 采集收起来源：切换背景图像综合练习题
2018-03-22
AGhosts

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，样式都不会被采用。如 <linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" /> 在Media Query中如果没有明确指定Media Type，那么其默认为all 另外在样式中，还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中，指定方式如下所示。 <linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" /> 上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。 Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀。

查看全部

0 采集收起来源：Media Queries使用方法
2018-03-22
AGhosts

1. 最大宽度max-width:指媒体类型小于或等于指定的宽度时，样式生效。如： @media screen and (max-width:480px){ .ads { display:none; } } 上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。 2.最小宽度min-width:指的是媒体类型大于或等于指定宽度时，样式生效。 @media screen and (min-width:900px){ .wrapper{width: 980px;} } 上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。 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 在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。 <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" /> 上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。

查看全部

0 采集收起来源：Media Queries使用方法
2018-03-22
AGhosts

常见的有：link标签、@import和CSS3新增的@media。 link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。 <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> ---------------------------------------------------------------------- @import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文件；另一种方法是在<head></head>标签中的<style></style>中引入。 @import url(reset.css) screen; ------------------------------------------------------------------------------------ @media是CSS3中新引进的一个特性，被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似也具有两方式。 @media screen { 选择器{/*你的样式代码写在这里…*/} }

查看全部

0 采集收起来源：media queries——媒体类型（二）
2018-03-22
AGhosts

布局 ---> display: flex; 方向 ---> flex-direction: row(横)||column(竖); 上下 ---> align-items: flex-start||center||flex-end; 左右 ---> justify-content: 同上设置主轴; align-items:设置副轴倒序 ---> row-reverse 兼容加-webkit-前缀

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2018-03-22
AGhosts

box-sizing属性定义盒元素尺寸的计算方法。其语法如下： box-sizing : content-box padding-box border-box inherit ; 取值说明如下。 content-box：默认值，计算方法为width/height=content，表示指定的宽度和高度仅限内容区域，边框和内边距的宽度不包含在内。 element width/height = border + padding + content width / height padding-box：计算方法为width/height=content+padding，表示指定的宽度和高度包含内边距和内容区域，边框宽度不包含在内。 border-box：计算方法为width/height=content+padding+border，表示指定的宽度和高度包含边框、内边距和内容区域。这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）。 inherit：表示继承父元素中box-sizing属性的值。

查看全部

0 采集收起来源：CSS3 盒子模型
2016-10-27
慕粉3724715

值描述 h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread 可选。阴影的尺寸。 color 可选。阴影的颜色。请参阅 CSS 颜色值。 inset 可选。将外部阴影 (outset) 改为内部阴影。

查看全部

0 采集收起来源：CSS3选择器 ::before和::after
2016-10-27
qq_相信自己_25

上面写错了，主轴水平时时row 用align-items；主轴垂直时用column 设置是justify-content！伸缩布局flexbox flexbox布局的特点： 1 屏幕和浏览器窗口大小发生改变也可以灵活调整布局； 2 可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小； 3 可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间； 4 可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围； 5 可以控制元素在页面上的布局方向； 6 可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。版本实例： 1 创建一个flex容器.flexcontainer{ display: -webkit-flex; display: flex; } 2 Flex项目显示 Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。列显示如下： .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } 3 Flex项目移动到顶部如何将flex项目移动到顶部，取决于主轴的方向。如果它是水平方向通过align-items设置；如果它是垂直方向通过justify-content设置。

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2016-10-27
曹越xyy

background-size: 1、auto：默认值，不改变背景图片的原始高度和宽度； 2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放； 3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上； 4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器； 5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

查看全部

0 采集收起来源：CSS3背景 background-size
2018-03-22
曹越xyy

background-clip：参数分别表示从边框（border-box）、或内填充(padding-box)，或者内容区域(content-box)向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。 http://img1.sycdn.imooc.com//5310065d0001c95103660166.jpg

查看全部

0 采集收起来源：CSS3背景 background-clip
2016-10-27
曹越xyy

background-origin:表示元素背景图片的起始位置：取值:border-box表示从边框开始显示背景图片，包含边框处； padding-box表示从内边距处开始显示背景图； content-box表示从从内容区域开始显示背景图；

查看全部

0 采集收起来源：CSS3背景 background-origin
2016-10-27
qq_相信自己_25

box-sizing: content-box | border-box | inherit 记住盒模型的区别。

查看全部

0 采集收起来源：CSS3 盒子模型
2016-10-27

首页上一页 371 372 373 374 375 376 377 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果