随笔分类 -  CSS3

1 2 下一页
full-page插件的使用
摘要：一、搭建full-page环境 1、依次下载jquery-3.0.0.min.js、jquery-ui-min.js和jquery.fullPage.js //因为full-page是基于jquery开发的，所以必须要有jquery的支持；另要设置easing参数，所以也必须要有jquery-ui的 阅读全文
posted @ 2016-07-01 17:10 框框A 阅读(1475) 评论(0) 推荐(0)
CSS3---绘制六边形
摘要：#hexagon { width: 100px; height: 55px; background: red; position: relative; } #hexagon:before { content: ""; position: absolute; top: -25px; left:... 阅读全文
posted @ 2016-03-18 11:37 框框A 阅读(1019) 评论(0) 推荐(0)
CSS3---last-of-type选择器
摘要：last-of-type选择器“:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。示例演示通过“:last-of-type”选择器，将容器“div.wrapper”中最后一个段落元素背景设置为橙色（提示：这个段... 阅读全文
posted @ 2015-05-04 21:35 框框A 阅读(207) 评论(0) 推荐(0)
CSS3---nth-of-type(n)选择器
摘要：nth-of-type(n)选择器“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非... 阅读全文
posted @ 2015-05-04 21:25 框框A 阅读(605) 评论(0) 推荐(0)
CSS3---first-of-type选择器
摘要：first-of-type选择器“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。示例演示：通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第... 阅读全文
posted @ 2015-05-04 21:21 框框A 阅读(297) 评论(0) 推荐(0)
CSS3---结构性伪类选择器—nth-last-child(n)
摘要：结构性伪类选择器—nth-last-child(n)“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。案例... 阅读全文
posted @ 2015-05-04 21:15 框框A 阅读(269) 评论(0) 推荐(0)
CSS3---结构性伪类选择器—nth-child(n)
摘要：结构性伪类选择器—nth-child(n)“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值... 阅读全文
posted @ 2015-05-04 21:12 框框A 阅读(365) 评论(0) 推荐(0)
CSS3---结构性伪类选择器—last-child
摘要：结构性伪类选择器—last-child“:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如，需要改变的是列表中的最后一个“li”的背景色，就可以使用这个选择器，ul>li:last-child{bac... 阅读全文
posted @ 2015-05-04 21:07 框框A 阅读(564) 评论(0) 推荐(0)
CSS3---结构性伪类选择器—first-child
摘要：结构性伪类选择器—first-child“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。示例演示通过“:first-child”选择器定位列表中的第一个列表项，并将序列号颜色变为红色。HTML代码： ... 阅读全文
posted @ 2015-05-04 21:03 框框A 阅读(285) 评论(0) 推荐(0)
CSS3---结构性伪类选择器—target
摘要：结构性伪类选择器—target:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。我们先来上个例子，然后再做分析。示例展示点击链接显示隐藏的段落。HTML代码：Brand content for BrandCSS代码：.menuSection{ displ... 阅读全文
posted @ 2015-05-04 21:00 框框A 阅读(889) 评论(0) 推荐(0)
CSS3---结构性伪类选择器—empty
摘要：结构性伪类选择器—empty:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。示例显示：比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。HTML代码：我是一个段落 ​CSS... 阅读全文
posted @ 2015-05-04 20:48 框框A 阅读(225) 评论(0) 推荐(0)
CSS3---结构性伪类选择器—not
摘要：结构性伪类选择器—not:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：form { width: 200px; margin... 阅读全文
posted @ 2015-05-04 20:04 框框A 阅读(400) 评论(0) 推荐(0)
CSS3---结构性伪类选择器-root
摘要：结构性伪类选择器—root:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是。示例演示：通过“:root”选择器设置背景颜色HTML代码：:root选择器的演示CSS代码：:root { background:oran... 阅读全文
posted @ 2015-05-04 19:59 框框A 阅读(195) 评论(0) 推荐(0)
CSS3---属性选择器
摘要：在HTML中，通过各种各样的属性可以给元素增加很多附加的信息。例如，通过id属性可以将不同div元素进行区分。 在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了... 阅读全文
posted @ 2015-05-04 19:56 框框A 阅读(155) 评论(0) 推荐(0)
CSS3---制作导航
摘要：CSS制作立体导航 Home About Me Portfolio Blog Resources Contact Me 阅读全文
posted @ 2015-04-29 11:14 框框A 阅读(278) 评论(0) 推荐(0)
CSS3---multiple backgrounds
摘要：多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。语法缩写如... 阅读全文
posted @ 2015-04-29 10:16 框框A 阅读(333) 评论(0) 推荐(0)
CSS3---background-size
摘要：设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。语法：background-size: auto | | | cover | contain取值说明：1、auto：默认值，不改变背景图片的原始高度和宽度；2、：成对出现如200px 50px，将背景... 阅读全文
posted @ 2015-04-29 10:08 框框A 阅读(176) 评论(0) 推荐(0)
CSS3---background-clip
摘要：用来将背景图片做适当的裁剪以适应实际需要。语法：background-clip ： border-box | padding-box | content-box | no-clip参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效... 阅读全文
posted @ 2015-04-29 10:04 框框A 阅读(161) 评论(0) 推荐(0)
CSS3---background-origin
摘要：设置元素背景图片的原始起始位置。语法：background-origin ： border-box | padding-box | content-box;参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。效果如下：需要注意的是，如果背景不是no-repeat，这个属性无效... 阅读全文
posted @ 2015-04-29 09:57 框框A 阅读(168) 评论(0) 推荐(0)
CSS3---文本阴影text-shadow
摘要：text-shadow可以用来设置文本的阴影效果。语法：text-shadow: X-Offset Y-Offset blur color;X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之... 阅读全文
posted @ 2015-04-29 09:55 框框A 阅读(183) 评论(0) 推荐(0)

1 2 下一页