CSS & CSS3
文章平均质量分 89
Wendy-lxq
这个作者很懒,什么都没留下…
展开
-
CSS技巧: CSS隐藏文字的方法(CSS text-indent: -9999px;)
版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明http://www.blogbus.com/ajhcc-logs/41836252.html建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义。在CSS中如何以图代字,找了一下CSS隐藏文字的方转载 2016-08-30 08:23:39 · 2497 阅读 · 1 评论 -
CSS3--利用transform属性制作时钟效果
首先简单总结一下transform这个属性,transform的含义是:改变,使…变形;转换。transform的常用属性: 1)rotate() 旋转函数 取值度数 deg 度数 Transform-origin 旋转的基点 2)skew() 倾斜函数 取值度数 skew原创 2017-01-11 10:24:25 · 6121 阅读 · 0 评论 -
CSS3--border-image整理
CSS3中的border-image是非常有用的,但是有点不太好理解,因为 border-image的实际功能是它的字面意思有点不太统一。从字面上来看border-image只是针对边框有效,但是在实际运用中非边框区域也可以进行添加。我一开始看到这个的时候不太理解,尤其是在border-width的设置,我看到其他文章中直接利用border-width加上border-image就可以实现,但是后原创 2017-01-06 11:00:06 · 731 阅读 · 0 评论 -
CSS3--文字阴影
CSS3设置文字阴影效果对文字字体设置阴影效果篇text-shadow样式,本来在CSS2版本中也有此属性,但在CSS3中文字阴影text-shadow再次被应用,丰富文字排版布局美化效果。在写网页的过程中,大标题可以采用颜色对比鲜明的"文字阴影"来使主题更突出。 这个属性可以给一个对象应用一组或多组阴影效果,方式如前面的语法显示一样,用逗号隔开。text-shadow: X-Of原创 2017-01-03 09:34:42 · 1199 阅读 · 0 评论 -
CSS3选择器--伪类
在前面介绍了CSS3选择器中的属性选择器和结构性伪类选择器,在结构性伪类选择器的文章中也提及了伪元素和伪类,那么本文会详细说明几个伪类的使用,但是侧重点在于before和after两个伪类的使用。 先列举伪类有什么,当然可能不是完整的,后面会一个一个举例说明如何使用。1)E:target 表示当前的URL片段的元素类型,这个元素必须是E2)E:disabled 表示不原创 2017-01-02 15:46:50 · 1317 阅读 · 0 评论 -
CSS3选择器--结构性伪类选择器
在学习结构性伪类选择器之前,先了解2个概念:CSS中的伪类选择器和伪元素:1、伪类选择器:CSS中已经定义好的选择器,不能随便取名 常用的伪类选择器是使用在a元素上的几种,如a:link|a:visited|a:hover|a:active2、伪元素选择器:并不是针对真正的元素使用的选择器,而是针对CSS中已经定义好的伪元素使用的选择器 C原创 2017-01-01 21:51:20 · 28428 阅读 · 1 评论 -
CSS3选择器--属性选择器
在此之前,大家应该学了一些基本的css选择器,比如简单的id选择器,class选择器,标签选择器,群组选择器,包含选择器等, 本篇文章主要是分享几个CSS3的属性选择器,属性选择器应用起来还是非常方便的。一、'匹配所有'的属性选择器 Element[attribute],只使用属性名,但是没有确定的任何属性值。例子如下,通过匹配属性为course的标签,就可以匹配所有属性原创 2017-01-01 09:42:05 · 1136 阅读 · 0 评论 -
解决CSS垂直居中的几种方法(基于绝对定位,基于视口单位,Flexbox方法)
在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用 text-align: center ;如果它是一个块级元素,就对它自身应用 margin: auto。然而如果要对一个元素进行垂直居中,可能光是想想就令人头皮发麻了。 多年以来,垂直居中已经成为了CSS领域的圣杯,它同样也是前端开发圈内广为流传的笑话。原因在于它同时具备以下几条特征:原创 2016-12-28 12:49:30 · 1938 阅读 · 2 评论 -
理解CSS clear:both/left/right的含义以及应用
前言: 感觉是刚过春招,又要开始秋招,对于技术渣渣、学历普通的我,忧愁再次降临。开始准备秋招路途中……来温故而知新,沉下心好好学习。貌似本人在清除浮动中第一次接触clear:left/right,平时只用到clear:both,好像也只见到这个,这就尴尬了。一、什么是浮动,标准文档流又是个啥 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从原创 2017-08-05 15:20:46 · 12942 阅读 · 7 评论 -
CSS3--利用transform和transition属性制作扇形导航
在前面,我们已经讲解了transform这个属性以及案例,那么本文会进一步结合transform和transition两个属性,并制作一个简单的案例进行说明。一、transition属性说明接下来简单分析一下transition这个属性的定义以及子属性。 1)ansition-property 要运动的样式 (all || [attr] || none) 2)t原创 2017-01-12 21:50:53 · 5180 阅读 · 0 评论 -
简易购物车的实现
网上关于购物车实现的代码非常多,今天看了一些知识点,决定自己动手写写,于是写了一个简易购物车,接下来讲解一下具体的实现。1、用html实现内容;2、用css修饰外观;3、用js(jq)设计动效。 第一步:首先是进行html页面的设计,我用一个大的div将所有商品包含,然后用不同的div将不同的商品进行封装,商品列表中我用了ul li实现,具体实现代码如下(代码中设计到都是网上随原创 2016-09-09 21:42:50 · 7654 阅读 · 3 评论 -
css3实现照片墙
在网站上经常可以看到照片墙的展示,于是动手用css3写了一个简单的照片墙。其实就是css3样式的一些新特效的使用。作品展示:接下来贴上实现的代码:html结构: 照片墙 照片墙 css修饰样式:body{ backgro原创 2016-09-24 15:11:14 · 5461 阅读 · 0 评论 -
利用滑动门原理制作圆角和渐变色按钮【css】
在说明方法之前,先看一下效果图: 在border-radius出现之前,实现圆角效果使用的是滑动门。滑动门是利用背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果。 要想让滑动门适用于多种场合,左右两个角必须透明,以此露出背景颜色,若是左右压中间,左右角的透明部分露出的是中间的颜色,所以只能改成中间压左右,中间部分可以重叠,已达到宽度自适应原创 2016-11-18 10:58:06 · 1660 阅读 · 0 评论 -
多种类型的导航条制作【css3,jquery】
导航条的使用很广,每个网站都会做出具有自己特色的导航条。最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下面有横线)等。每种导航条都有自己的特色,比如高亮显示的导航条看起来比较简单,但是视觉效果还不错,具有动画效果的导航条在视觉上也是有很好的效果。接下来将会一一介绍4种应用比较广的导航条,即:原创 2016-09-16 19:04:12 · 2854 阅读 · 0 评论 -
纯css制作旋转图片
看到一个不错的网站上制作了一个可以360旋转的图片,感觉效果不错,于是就自己用css制作了一个,效果图如下:具体实现代码如下: css制作旋转图片 .img-circle{ margin: 50px;//只是为了不显示在边缘上 font-size: 50px; t原创 2016-09-21 16:18:05 · 5655 阅读 · 0 评论 -
z-index详解
概念z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 层级关系的比较1. 对于同级元素,默认(或position:static)情况下文档流后面的元素会覆盖前面的。2. 对于同级元素,position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素,即z-转载 2017-02-08 20:18:38 · 790 阅读 · 0 评论 -
li标签的横向排列
li标签的使用很广泛,在各种选项卡的制作,导航栏等都用到,那么li标签的横向排列也是经常用到。<ul>标签下的项目<li>默认是纵向排列的,我们需要定义额外的CSS属性让其横向排列,li标签的横向排列有两种实现方法,现总结如下:1、使用float:left 在这里顺便解释几个css样式的使用。 1)list-style:none,这个属性...原创 2016-10-19 14:37:54 · 74465 阅读 · 6 评论 -
CSS3 弹性盒布局模型和布局原理
在CSS 3中,CSS Flexible Box模块为一个非常重要的模块,该模块用于以非常灵活的方式实现页面布局处理。 虽然可以使用其他CSS样式属性来实现页面布局处理,但是如果使用CSS Flexible Box模块中定义的弹性盒布局技术,可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式,即实现非常灵活的布局处理。 引入弹性盒布局模型的目的是原创 2017-02-09 14:00:26 · 9413 阅读 · 0 评论 -
CSS选择器的权重计算
刚好是在做面试题的时候,发现有一个题目时关于CSS选择器的权重计算,当时脑海中只知道:id>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,至于权重的计算其实没有多大的印象,所以就来总结一下,避免以后遇见了还是不太懂。作为前端开发人员,知道CSS选择器的权重还是非常重要的。 在讲解计算规则之前,先来大概再了解下具体的CSS选择器有哪些,才可以更方便的知道权原创 2017-02-28 16:42:55 · 4668 阅读 · 0 评论 -
【css3】CSS3动画(animation @keyframes)
通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。在讲解利用@keyframes做动画之前,我们先来看一个例子,即在一定时间内,将正方形进行移动,效果如下: 这里先附上代码,后面再来解释: div { width:100px;原创 2017-09-13 16:26:18 · 3714 阅读 · 0 评论