慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

qzuser_3302

read-only

查看全部

0 采集收起来源：CSS3选择器 :read-only选择器
2016-11-24
qzuser_3302

selection

查看全部

0 采集收起来源：CSS3选择器 ::selection选择器
2016-11-24
qzuser_3302

enable

查看全部

0 采集收起来源：CSS3选择器 :enabled选择器
2016-11-24
qzuser_3302

nth-of-type(n)

查看全部

0 采集收起来源：CSS3 nth-of-type(n)选择器
2016-11-24
qzuser_3302

first-of-type

查看全部

0 采集收起来源：CSS3 first-of-type选择器
2016-11-24
qzuser_3302

nth-child

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—nth-child(n)
2016-11-24
qzuser_3302

target

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—target
2016-11-24
慕粉2130563850

简单的说媒体查询Medial Queries可以根据设备的尺寸，查询出适配的样式。

查看全部

0 采集收起来源：Responsive设计（一）
2016-11-24
番茄酱_

M 回头再看，自己写出阴影效果

查看全部

0 采集收起来源：CSS3选择器 ::before和::after
2016-11-24
慕粉2130563850

常见的有：link标签、@import和CSS3新增的@media。一、<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> 二、@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> @media方法三、@media是CSS3中新引进的一个特性，被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似也具有两方式。（1）在样式文件中引用媒体类型： @media screen { 选择器{/*你的样式代码写在这里…*/} } （2）使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。 <head> <style type="text/css"> @media screen{ 选择器{/*你的样式代码写在这里…*/} } </style> </head>

查看全部

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

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

查看全部

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

在flex容器中设置：布局 ---> display: flex; 方向 ---> flex-direction: row(横向排列)||column(竖向排列); 上下 ---> align-items: flex-start（顶部）||center（居中）||flex-end（底部）; 左右 ---> justify-content:flex-start（顶部）||center（居中）||flex-end（底部）; 倒序 ---> row-reverse 兼容加-webkit-前缀

查看全部

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

111

查看全部

0 采集收起来源：什么是CSS3？
2016-11-24
慕工程2957023

exbox布局的特点： 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-11-24
慕粉2130563850

1. CSS2中，元素(例如div)的内边距(padding)和边框(border)会把元素自身撑大。想要个100*100px的div，都要事先计算，例如，内容80px + 内边距15px + 边框5px = 100px 2. CSS3中，新增 box-sizing 属性，如果设置元素为 box-sizing: border-box，那么元素的内边距(padding)和边框(border)不会再把元素自身撑大。例如，设置div为100*100px，那么无论div里内容、内边距、边框的宽高怎么变化，div的大小永远都是100*100px content-box后设置的width仅为元素内容的宽度；默认值，其让元素维持W3C的标准盒模型 border-box后设置的width为元素内容宽度+padding+border；

查看全部

0 采集收起来源：CSS3 盒子模型
2016-11-24

首页上一页 354 355 356 357 358 359 360 下一页尾页

0/150

提交

取消

开始学习

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

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