-
:read-only选择器 “:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”查看全部
-
CSS生成内容 在Web中插入内容，在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。查看全部
-
CSS3外轮廓属性 外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。查看全部
-
CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性： transition-property:指定过渡或动态模拟的CSS属性 transition-duration:指定完成过渡所需的时间 transition-timing-function:指定过渡函数 transition-delay:指定开始出现的延迟时间查看全部
-
在CSS中创建简单的过渡效果可以从以下几个步骤来实现： 第一，在默认样式中声明元素的初始状态样式； 第二，声明过渡元素最终状态样式，比如悬浮状态； 第三，在默认样式中通过添加过渡函数，添加一些不同的样式。查看全部
-
就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。查看全部
-
自由缩放属性resize 为了增强用户体验，CSS3增加了很多新的属性，其中resize就是一个重要的属性，也是一个非常实用的属性，它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止，可以使用overflow属性的任何容器元素。在此之前，Web设计师为了要实现这样的UI效果，需要使用大量的脚本代码才能实现，这样费时费力，效率极低。 resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。但使用方法却是极其的简单，先从其语法入手。 resize: none | both | horizontal | vertical | inherit查看全部
-
说了这么多，怎么样的布局或者说HTML结构才是简单干净的呢？这里教大家一个快速测试的方法。你首先禁掉你页面中所有的样式（以及与样式相关的信息），在浏览器中打开，如果你的内容排列有序，方便阅读，那么你的这个结构不会差到哪里去。查看全部
-
Media Queries使用方法 了解完这些概念性的东西，同学们最想知道的是Media Queries要如何使用？下面我们一起来探讨其使用方法 Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。前面简单的介绍了Media Queries如何引用到项目中，但Media Queries有其自己的使用规则。具体来说,Media Queries的使用方法如下。 @media 媒体类型and （媒体特性）{你的样式}查看全部
-
media queries——媒体类型（二） 在实际中媒体类型有近十种之多，实际之中常用的也就那么几种，不过媒体类型的引用方法也有多种，常见的有：link标签、@import和CSS3新增的@media几种： link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。这种方式引入媒体类型时常跟着引用的样式文件走，如下所示。 <link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen” /> <linkrel=”stylesheet” type=”te查看全部
-
Media Queries——媒体类型（一） 随着科学技术不断的向前发前，网页的浏览终端越来越多样化，用户可以通过宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问你的网站。尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样，但至少要让你的Web页面能适配用户的终端，让他更好的呈现在你的用户面前。在本节中，将会学到如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端（或屏幕尺寸），从而让你的页面让用户有一个更好的体验。 Media Queries Media Queries是CSS3新增加的一个模块功能，其最大的特色就是通过CSS3来查询媒体，然后查看全部
-
伸缩布局（一） CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即使它们的大小是未知或者动态的，这里简称为Flex。 Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。 Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没查看全部
-
column-gap主要用来设置列与列之间的间距，其语法规则如下： column-gap: normal || <length> 取值说明 属性值 属性值说明 normal 默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。 <length> 此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。 例如：将内容分三列显列，列与列之间的间距为2em，实现代码为：column-count:3;column-gap: 2em;查看全部
-
多列布局——column-count column-count属性主要用来给元素指定想要的列数和允许的最大列数。其语法规则： column-count：auto | <integer> 取值说明： 属性值 属性值说明 auto 此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。 <integer> 此值为正整数值，主要用来定义元素的列数，取值为大于0的整数，负值无效。 例如：将列分成四列显示，代码如下：column-count:4;查看全部
-
多列布局——column-width column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示 ； column-width: auto | <length>查看全部
举报
0/150
提交
取消