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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • ::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下,选择网站文本是深蓝的背景,白色的字体, 有的设计要求不使用上图那种浏览器默认的突出文本效果,需要一个与众不同的效果,此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。
    查看全部
  • CSS3中,我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。
    查看全部
  • :target 分析: 1、具体来说,触发元素的URL中的标志符通常会包含一个#号,后面带有一个标志符名称,上面代码中是:#brand 2、:target就是用来匹配id为“brand”的元素(id="brand"的元素),上面代码中是那个div元素。
    查看全部
  • <a href="##" title="我是一个title属性值,我插在你的后面">我是元素</a> 可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后: a:after { content:attr(title); color:#f00; }
    查看全部
    0 采集 收起 来源:CSS生成内容

    2018-03-22

  • 在CSS中有一种清除浮动的方法叫“clearfix”。而这个“clearfix”方法就中就使用了“content”,只不过只是在这里插入了一个空格。如下所示:.clearfix:before, .clearfix:after content:””; display:table; }
    查看全部
    0 采集 收起 来源:CSS生成内容

    2015-09-13

  • outline: [outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit 从语法中可以看出outline和border边框属性的使用方法极其类似。outline-color相当于border-color、outline-style相当于border-style,而outline-width相当于border-width,只不过CSS3给outline属性增加了一个outline-offset属性,其取值说明如下。
    查看全部
    0 采集 收起 来源:CSS3外轮廓属性

    2015-09-13

  • resize属性主要是用来改变元素尺寸大小的,其主要目的是增强用户体验。但使用方法却是极其的简单,先从其语法入手。 resize: none (用户不能拖动元素修改尺寸)| both(宽度和高度都能修修改) | horizontal (能修改宽度不能修改高度)| vertical (能修改高度不能修改宽度)| inherit
    查看全部
  • @media screen and (max-width : 800px) { /* 样式写在这里 */ }
    查看全部
  • 在Responsive布局中,可以毫无保留的丢弃: 第一, 尽量少用无关紧要的div; 第二,不要使用内联元素(inline); 第三,尽量少用JS或flash; 第四,丢弃没用的绝对定位和浮动样式; 第五,摒弃任何冗余结构和不使用100%设置。 有舍才有得,丢弃了一些对Responsive有影响的东东,那么有哪些东东能帮助Responsive确定更好的布局呢? 第一,使用HTML5 Doctype和相关指南; 第二,重置好你的样式(reset.css); 第三,一个简单的有语义的核心布局; 第四,给重要的网页元素使用简单的技巧,比如导航菜单之类元素。
    查看全部
  • TWT
    ol > li:nth-child(odd/2n+1)表示奇数,ol > li:nth-child(even/2n)表示偶数
    查看全部
  • “:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是,元素中设置了“readonly=’readonly’”
    查看全部
  • 屏幕分辨率 屏幕分辨简单点说就是用户显示器的分辨率,深一点说,屏幕分辨率指的是用户使用的设备浏览您的Web页面时的显示屏幕的分辨率,比如说智能手机浏览器、移动电脑浏览器、平板电脑浏览器和桌面浏览器的分辨率。Responsive设计利用Media Queries属性针对浏览器使用的分辨率来适配对应的CSS样式。因此屏幕分辨率在Responsive设计中是一个很重要的东西,因为只有知道Web页面要在哪种分辨率下显示何种效果,才能调用对应的样式
    查看全部
  • 什么是响应式设计呢?维基百科是这样对响应式作的描述:“Responsive设计简单的称为RWD,是精心提供各种设备都能浏览网页的一种设计方法,RWD能让你的网页在不同的设备中展现不同的设计风格。”从这一点描述来说,RWD不是流体布局,也不是网格布局,而是一种独特的网页设计方法。 流体网格是一个简单的网格系统,这种网格设计参考了流体设计中的网格系统,将每个网格格子使用百分比单位来控制网格大小。这种网格系统最大的好处是让你的网格大小随时根据屏幕尺寸大小做出相对应的比例缩放。 弹性图片指的是不给图片设置固定尺寸,而是根据流体网格进行缩放,用于适应各种网格的尺寸。而实现方法是比较简单,一句代码就能搞定的事情。 img {max-width:100%;}
    查看全部
  • 最大宽度max-width “max-width”是媒体特性中最常用的一个特性,其意思是指媒体类型小于或等于指定的宽度时,样式生效。如: @media screen and (max-width:480px){ .ads { display:none; } } 上面表示的是:当屏幕小于或等于480px时,页面中的广告区块(.ads)都将被隐藏。
    查看全部
  • @import可以引用样式文件,同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式,一种是在样式中通过@import调用另一个样式文件;另一种方法是在<head></head>标签中的<style></style>中引入,但这种使用方法在IE6~7都不被支持,如样式文件中调用另一个样式文件时,就可以指定对应的媒体类型。 @importurl(reset.css) screen; @importurl(print.css) print;
    查看全部

举报

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

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