慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

Ace_____

5.Flex项目移到左边 flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; } 7.水平垂直居中在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2017-01-26
Ace_____

1.创建一个flex容器任何一个flexbox布局的第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex。在Safari浏览器中，你依然需要添加前缀-webkit， .flexcontainer{ display: -webkit-flex; display: flex; } 2.Flex项目显示 Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。 3.Flex项目列显示 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } 4.Flex项目移动到顶部如何将flex项目移动到顶部，取决于主轴的方向。如果它是垂直的方向通过align-items设置；如果它是水平的方向通过justify-content设置。 .flexcontainer{ -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; }

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2017-01-26
Ace_____

CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。 Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。 Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。综合而言，Flexbox布局功能主要具有以下几点：第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；第五，可以控制元素在页面上的布局方向；第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2017-01-26
门掩重关萧寺中

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。

查看全部

0 采集收起来源：CSS3选择器 ::before和::after
2018-03-22
门掩重关萧寺中

“:read-write”选择器主要用来指定当元素处于非只读状态时的样式。 ================ input[type="text"]:-moz-read-write{ border-color: #f36; } input[type="text"]:read-write{ border-color: #f36; }

查看全部

0 采集收起来源：CSS3选择器 :read-write选择器
2018-03-22
门掩重关萧寺中

“:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’” ============== input[type="text"]:-moz-read-only{ border-color: #ccc; } input[type="text"]:read-only{ border-color: #ccc; }

查看全部

0 采集收起来源：CSS3选择器 :read-only选择器
2018-03-22
门掩重关萧寺中

::selection用来匹配突出显示的文本(用鼠标选择文本时的文本)。 ============== ::-moz-selection { background: red; color: green; } ::selection { background: red; color: green; } ======== 1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。 2、Firefox 支持替代的 ::-moz-selection。

查看全部

0 采集收起来源：CSS3选择器 ::selection选择器
2017-01-26
门掩重关萧寺中

“:checked”表示的是选中状态 ================ input[type="checkbox"]:checked + span { opacity: 1; }

查看全部

0 采集收起来源：CSS3选择器 :checked选择器
2018-03-22
门掩重关萧寺中

“:disabled”选择器用来选择不可用表单元素。 ===================== input[type="text"]:disabled { background: rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.15); color: rgba(0,0,0,.15); }

查看全部

0 采集收起来源：CSS3选择器 :disabled选择器
2018-03-22
门掩重关萧寺中

“:enabled” ============================== input[type="text"]:enabled { background: #ccc; border: 2px solid red; }

查看全部

0 采集收起来源：CSS3选择器 :enabled选择器
2018-03-22
门掩重关萧寺中

“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。 ==================== .wrapper > div:only-of-type { background: orange; }

查看全部

0 采集收起来源：CSS3 only-of-type选择器
2018-03-22
门掩重关萧寺中

“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。 ================== .post p:only-child { background: orange; }

查看全部

0 采集收起来源：CSS3 only-child选择器
2017-01-26
门掩重关萧寺中

.wrapper > p:nth-last-of-type(3){ background: orange; } n可以是数字表达式关键词

查看全部

0 采集收起来源：CSS3 nth-last-of-type(n)选择器
2018-03-22
门掩重关萧寺中

.wrapper > p:last-of-type{ background: orange; }

查看全部

0 采集收起来源：CSS3 last-of-type选择器
2018-03-22
门掩重关萧寺中

“:nth-of-type(n)” ================ .wrapper > p:nth-of-type(2n){ background: orange; }

查看全部

0 采集收起来源：CSS3 nth-of-type(n)选择器
2018-03-22

首页上一页 330 331 332 333 334 335 336 下一页尾页

0/150

提交

取消

开始学习

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

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