慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

慕粉3225638

响应式布局的规范

查看全部

0 采集收起来源：Responsive布局技巧
2016-08-23
慕粉3225638

媒体查询在CSS3中得到了强大的扩展。使用这个属性可以让你的设计根据用户终端设备适配对应的样式。这也是响应式设计中最为关键的。可以说Responsive设计离开了Medial Queries就失去了他生存的意义。简单的说媒体查询可以根据设备的尺寸，查询出适配的样式。Responsive设计最关注的就是：根据用户的使用设备的当前宽度，你的Web页面将加载一个备用的样式，实现特定的页面风格。

查看全部

0 采集收起来源：Responsive设计（一）
2016-08-23
慕粉3225638

非常有意思的媒体查询

查看全部

0 采集收起来源：media queries——媒体类型（二）
2016-08-23
慕粉3225638

Media Queries是CSS3新增加的一个模块功能，其最大的特色就是通过CSS3来查询媒体，然后调用对应的样式。

查看全部

0 采集收起来源：Media Queries——媒体类型（一）
2016-08-23
慕粉3225638

随着科学技术不断的向前发展，网页的浏览终端越来越多样化，用户可以通过：宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问你的网站。尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样，但至少要让你的Web页面能适配用户的终端，让他更好的呈现在你的用户面前。在本节中，将会学到如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端（或屏幕尺寸），从而让你的页面让用户有一个更好的体验

查看全部

0 采集收起来源：Media Queries——媒体类型（一）
2016-08-23
Johnny_yujun

/*使用伪元素制作导航列表项分隔线*/ .nav li{ background:linear-gradient(red,black,red) no-repeat right/1px 20px; } /*删除第一项和最后一项导航分隔线*/ .nav li:last-child { background:none; }

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2016-08-23
Johnny_yujun

1.文本溢出，用“......”来标记溢出的文本内容。前提条件：强制文本在一行内显示（white-space:nowrap）及溢出的内容为隐藏（tex-overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。具体代码：white-space:nowrap;text-oveflow:ellipsis;overflow:hidden; 2.当每行内容超出边界时，文本内容应该怎样换行。 word-wrap:normal;表示控制连续文本换行 word-wrap:break-word;表示内容将在边界内换行

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2016-08-23
慕粉3225638

任何一个flexbox布局的第一步是需要创建一个flex容器。为此给元素设置display属性的值为flex。在Safari浏览器中，你依然需要添加前缀-webkit，

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2016-08-23
慕粉3225638

CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。 Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2016-08-23
慕粉3225638

这里讲的很好，说出了盒子的模型区别 1：标准W3C盒子模型宽=width+(padding-left)+(padding-right)+(margin-left)+(margin-right)+(border-left)+(border-right) 高=height+(padding-top)+(padding-bottom)+(margin-top)+(margin-bottom)+(border-top)+(border-bottom) 2： IE盒子模型宽=width+(border-left)+(border-right) 高=height+(border-top)+(border-bottom) 复制的前人的成果，希望能帮到你！

查看全部

0 采集收起来源：CSS3 盒子模型
2016-08-23
CAYL

transform:translate(-50%,-50%); 百分比表示的是相对于自身的高度和宽度来移动

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2016-08-23
慕粉3225638

图中可以看出padding属性和content属性层叠background-image属性，层叠background-color属性，这个是存在的，它们四者之间构成了Ｚ轴（垂直屏幕的坐标）多重层叠关系。但是border属性与margin属性、padding属性三者之间应该是平面上的并级关系，并不能构成Ｚ轴的层叠关系

查看全部

0 采集收起来源：CSS3 盒子模型
2016-08-23
慕粉3225638

非常有意思的代码跨越列方便多了

查看全部

0 采集收起来源：CSS3 跨列设置column-span
2016-08-23
1101931365

CSS生成内容在Web中插入内容，在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。 content配合CSS的伪类或者伪元素，一般可以做以下四件事情：功能功能说明 none 不生成任何内容 attr 插入标签属性值 url 使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源） string 插入字符串实例展示：在CSS中有一种清除浮动的方法叫“clearfix”。而这个“clearfix”方法就中就使用了“content”，只不过只是在这里插入了一个空格。如下所示： .clearfix:before, .clearfix:after { content:””; display:table; } .clearfix:after { clear:both; overflow:hidden; } 上面这个示例是最常见的，也是最简单的，我们再来看一个插入元素属性值的方法。假设我们有一个元素： <a href="##" title="我是一个title属性值，我插在你的后面">我是元素</a> 可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后： a:after { content:attr(title); color:#f00; }

查看全部

0 采集收起来源：CSS生成内容
2018-03-22
1101931365

outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit

查看全部

0 采集收起来源：CSS3外轮廓属性
2016-08-23

首页上一页 429 430 431 432 433 434 435 下一页尾页

0/150

提交

取消

开始学习

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

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