随笔分类 - CSS3
摘要：什么是层模型？ 什么是层布局模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。 如何让html元素在网
阅读全文
摘要：在Web中插入内容，在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img...
阅读全文
摘要：元素分类在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。常用的块状元素有：、、...、、、、、、 、常用的内联元素有：、、、、、、、、、、常用的内联块状元素有：、元素分类--块级元素什么是块级元素？在html中、 、、、 和 就是块级元素。...
阅读全文
摘要：only-child选择器“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。示例演示通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比...
阅读全文
摘要：last-of-type选择器“:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。示例演示通过“:last-of-type”选择器，将容器“div.wrapper”中最后一个段落元素背景设置为橙色（提示：这个段...
阅读全文
摘要：first-of-type选择器“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。示例演示：通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第...
阅读全文
摘要：结构性伪类选择器—nth-child(n)“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值...
阅读全文
摘要：结构性伪类选择器—first-child“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。示例演示通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。HTML代码： ...
阅读全文
摘要：结构性伪类选择器—root:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是。示例演示：通过“:root”选择器设置背景颜色HTML代码：:root选择器的演示CSS代码：:root { background:oran...
阅读全文
摘要：练习题根据所学知识，使用CSS3实现下图的导航菜单效果任务1、制作导航圆角提示：使用border-radius实现圆角2、制作导航立体风格提示：使用box-shadow实现立体风格3、制作导航分隔线提示：使用渐变与伪元素制作4、删除第一个和最后一个导航分隔线提示：使用伪元素删除第一个和最后一个分隔线...
阅读全文
摘要：background-origin设置元素背景图片的原始起始位置。语法：background-origin ： border-box | padding-box | content-box;参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。效果如下：需要注意的是，如果背景不...
阅读全文
摘要：text-shadow可以用来设置文本的阴影效果。语法：text-shadow: X-Offset Y-Offset blur color;X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之...
阅读全文
摘要：@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。语法：@font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径;}这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。比...
阅读全文
摘要：text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。语法：但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hid...
阅读全文
摘要：颜色之RGBARGB是一种色彩标准，是由红(R)、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数。语法：color：rgba(R,G,B,A)R、G、B三个颜色参数，正整数值的取值范围为：0 - 255。 百分数值...
阅读全文
摘要：为边框应用图片 border-image顾名思义就是为边框应用背景图片，它和我们常用的background属性比较相似。例如：background:url(xx.jpg) 10px 20px no-repeat;但是又比背景图片复杂一些。想象一下：一个矩形，有四个边框。如果应用了边框图片，图片该怎么...
阅读全文
摘要：》单行文本的溢出显示省略号(…)text-overflow:ellipsis-----部分浏览器还需要加宽度width属性。overflow: hidden;text-overflow: ellipsis;white-space: nowrap;》多行文本溢出显示省略号WebKit浏览器或移动端的页...
阅读全文
浙公网安备 33010602011771号