CSS&CSS3
文章平均质量分 86
霜月枫桥
Web前端软件工程师
展开
-
css3字体样式
一、font-family的使用font-family属性可以设置HTML文本的字体样式,eg.*{ font-family: Arial,"Microsoft YaHei";}注意:当字体名称中包括空格、#、$之类的符号,则使用''font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。也就是说,font原创 2017-01-04 18:50:17 · 976 阅读 · 0 评论 -
text-fill-color加text-stroke实现页面艺术字
语法:text-fill-color:text-fill-color会覆盖color所定义的字体颜色:代码text-fill-color:#f00;color:#000;效果如果你的浏览器支持text-fill-color,将看到我是红色* 在webkit下你将看到红色的文字text-fill-color打造镂空文字:代码转载 2017-01-16 15:38:36 · 1066 阅读 · 0 评论 -
css3弹性伸缩布局
css3提供了一种崭新的布局方式:Flexbox布局,即弹性伸缩布局模型(Flexible Box),该布局目前处于W3C的草案阶段,分为旧版本、新版本、新旧混合版本三个版本一、旧版本的弹性布局方案旧版本使用的示例如下: …… ……下面的属性都是写在div{ }中的。1、display属性值设为box或inline-boxbox原创 2017-01-15 21:04:18 · 1055 阅读 · 0 评论 -
CSS3的transform属性实现旋转正方体
代码如下: Document 1 2 3 4 5 6 ul{ position:relative; height:300px; width:300px; list-style:none; margin:100px auto; transfor原创 2017-07-31 10:34:45 · 3430 阅读 · 0 评论 -
css阴影box-shadow+text-shadow和轮廓outline
一、box-shadow 向框添加一个或多个阴影该属性是由逗号分割的阴影列表,每个阴影是由2——4个长度值、可选的颜色值以及可选的inset关键词来规定。省略长度的值是0。h-shadow 阴影的水平偏移量,是一个长度值,正值向右偏移,负值向左偏移v-shadow 阴影的垂直偏移量,是一个长度值,正值向上偏移,负值向原创 2017-01-09 19:39:17 · 1139 阅读 · 0 评论 -
css3传统布局+box-sizing+resize
一、页面布局可以分为:固定布局、流动/流体布局、响应式布局HTML布局有三种布局方式,分别为:表格、浮动float、定位position二、元素定位position属性值有:static、relative、absolute、fixed注意:绝对定位属性absolute和fixed的区别absolute绝对定位是相对于static定位以外的第一个父元素进行定位,拖动浏览器的滚原创 2017-01-15 21:02:57 · 665 阅读 · 0 评论 -
HTML、css、js控制页面元素的显示及个人对浮动的理解
一、HTML、jQuery、css都有自己的控制元素隐藏与显示的功能。HTML使用hidden属性jQuery使用hide(),show(),toggle(),fadeIn(),fadeOut(),fadeTo(),fadeToggle(),slideDown(),slideUp(),slideToggle()css控制元素的隐藏与显示,有display和visibility属性(原创 2017-01-04 18:51:07 · 1689 阅读 · 0 评论 -
css边框和背景设置
一、initialinitial 关键字用于设置 CSS 属性为它的默认值。initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。他和inherit类似,inherit是使用其父元素的对应属性。二、border-radius 圆角边框的设置border-radius可以设置四个值,分别是左上角、右上角、左下角、右下角。你也可以分开来使用,按原创 2017-01-09 19:37:20 · 618 阅读 · 0 评论 -
css3前缀、rem和浏览器css3支持版本
一、css3的样式,主流浏览器不同版本的支持度不同,可通过http://caniuse.com查看是否需要css3属性加前缀。二、前缀新版本的浏览器都不需要加前缀,加前缀是为了兼容老版本的浏览器,使老版本浏览器也可以使用css3样式。但是,现在的css3已经成为了行业标准,所有的高版本主流浏览器都可以使用css3,因此,部分主流浏览器已经不支持加前缀的css3样式。若你希望自己原创 2017-01-09 19:38:07 · 1107 阅读 · 0 评论 -
css表格和样式
一、border-collapse 设置表格的边框是否合并为一个单一的边框separate 默认值,边框会被分开collapse 边框会合并成一个单一的边框,会忽略border-spacing和empty-cells二、border-spacing 设置表格单元格边框之间的间距三、caption-原创 2017-01-09 19:38:38 · 638 阅读 · 0 评论 -
HTML元素水平居中方法详解
前言:有许多方法可以实现HTML页面元素水平居中显示,本篇博客我列举一下自己所知道的方法,如果有缺少的,欢迎大家回复。一、text-align适应范围:所有元素在块级元素,如div中,设置其 text-align:center; 可以使其文本内容居中。因此,若要实现子元素在父元素水平居中显示,便可以设置父元素的 text-align:center; 示例代码如下:原创 2017-07-28 10:07:42 · 1000 阅读 · 0 评论 -
设置页面元素垂直居中的几种方法
一、对于行内元素若该行内元素只有一行,且该行内元素父元素的高度一定,可以设置该行内元素的line-height属性,属性值为父元素的高度。二、对于块元素通过设置vertical-align属性实现垂直居中。1、在元素的中使用vertical属性。td{ vertical-align:middle;}2、对于普通的元素,首先设置该元素display原创 2017-02-07 11:22:35 · 6254 阅读 · 0 评论 -
display:flex 弹性伸缩布局详解
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。一、Flex布局是什么?Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。[css] view转载 2017-07-27 17:11:24 · 3886 阅读 · 0 评论 -
响应式布局总结
响应式布局的开发基础知识本章主要分为以下几个部分正确理解响应式设计响应式设计的步骤响应式设计需要注意的问题响应式网页布局实现原理第一:正确理解响应式布局响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本。打个比方来说:现在社会有很多响应产品,例如折叠沙发,折叠床等等,当我们需要把沙发放到一个角落的时候,此刻沙发就好比div吧,而角落转载 2017-06-07 17:08:03 · 777 阅读 · 0 评论 -
在页面超链接<a>前加上图标
在前台页面设计中,为了实现更好的页面效果,我们可以在超链接文字前加上合适的小图标,从而给用户更好的视觉体验。 Document a{ display:inline-block; width: 100px; height:40px; background: gray url(../img/logo.png) no-repeat fixed 10px center;原创 2017-02-07 16:16:32 · 10547 阅读 · 0 评论 -
css样式继承
什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始。文档树由HTML元素组成。文档树和家族树类似,也有祖先、后代、父亲、孩子和兄弟^_^。这很容易理解吧,笔者在这里就不一一赘述了。希望深入了解的朋友请google之。那么CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素。下面举个例子,有如下html代码片段:原创 2017-01-16 14:58:29 · 872 阅读 · 0 评论 -
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理,本文将对此做详细介绍。一.旋转 rotate用法:transform: rotate(45deg);共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度。二.缩放 scale用法:transform转载 2017-01-17 14:26:51 · 4304 阅读 · 0 评论 -
js控制多种css样式依次显示
js控制多种css样式依次显示,一共有两种方法,第一种是传统的方法,使用window自带的setTimeout(),第二种是使用addEventListener()。 $(function(){ $("#div2").click(function(){ $("#div2").css({"transform":"translate(200px,100px)原创 2017-01-18 10:31:58 · 1906 阅读 · 0 评论 -
前台开发——256种颜色的图谱对应16进制数值总结
红色和粉红色,以及它们的16进制代码。#990033#CC6699#FF6699#FF3366#993366#CC0066#CC0033#FF0066#FF0033..#CC3399..#FF3399#FF9999#FF99CC#FF0099#CC3366转载 2016-11-22 16:33:03 · 7611 阅读 · 0 评论 -
border-image,边框图片效果详解
border-image 设置边框图片的效果border-image-source //引入背景图片地址border-image-slice //切割引入的背景图片,只需要写数值,不需要带单位border-image-width //边框背景图片的宽度//如果你设置了边框的宽度border-width原创 2017-01-15 20:57:51 · 1628 阅读 · 0 评论 -
transition属性——css3过渡效果
transition 实现过渡效果:通过一些简单的css动作触发平滑过渡功能任何用户动作,都可以触发元素的过渡效果,例如伪类动作:hover、:focus、:active、:checked;例如点击事件等只要使元素(如图片)的样式发生改变,都可以触发该元素的过渡效果。包含属性如下:一、transition-property 指定过渡或动态模拟的css属原创 2017-01-15 21:00:03 · 2298 阅读 · 0 评论 -
animation属性——css3动画效果
animation css动画属性一、animation实现动画效果主要由两部分组成:1、通过类似flash动画中关键帧声明一个动画2、在animation属性中调用关键帧声明的动画二、主要步骤1、关键帧属性 @keyframes 声明一个关键帧属性的动画例如,在css中书写以下代码@keyframes myani{原创 2017-01-15 21:02:08 · 993 阅读 · 0 评论 -
columns属性——多列布局
columns[ˈkɑ:ləm] 多列布局与之相关的属性或子属性如下所示一、columns 集成column-width和column-count两个属性二、column-width 定义每列列宽度属性值如下所示:1、auto 默认值,自适应2、长度值 设原创 2017-01-15 21:03:28 · 11043 阅读 · 0 评论 -
linear-gradient和radial-gradient属性——css3渐变效果
一、线性渐变 linear-gradient 背景颜色渐变功能该属性一共有三个属性值,分别为:方位(可选)、起始色(必选)、末尾色(必选)方位可以如下取值:1、使用方位,如:to top; to top right; to right; to bottom; to bottom left; to left; to top left;to bottom原创 2017-01-09 19:39:58 · 2337 阅读 · 0 评论 -
transform属性——css3变形效果2D
一、transform 该属性允许我们对元素进行移动、缩放、旋转或倾斜transform的属性值如下所示:1、none 无变换2、translate 可使用长度值或百分数值,在水平方向、垂直方向或两个方向上translateX 平移元素translateY原创 2017-01-15 20:58:40 · 2312 阅读 · 0 评论 -
CSS创建三角形(小三角)的几种方法
你可以在很多地方看到三角形(小三角):tooltips提示框、下拉菜单、甚至在loading载入动画里。不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的。有一些不同的方法来设计并制作一个三角形,在本文中,我将介绍:点此查看实例展示编码 图片假如你已经有了三角形的图片,并且减少HTTP请求,那么将这个图片转换成一个BASE64字符串转载 2017-04-06 20:41:08 · 1415 阅读 · 0 评论 -
去除inline-block元素间间距的N种方法
一、现象描述真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: 间距就来了~~我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题:.space a { display: inline-block; padding: .5em 1em;转载 2017-05-30 16:38:47 · 436 阅读 · 0 评论 -
css3伪类选择器使用总结
伪类选择器分为结构性、子元素、 UI、动态和其它伪类选择器大部分伪类选择器如下图所示:root返回在下面的示例中:div > p:only-child{ color:red; //不变红}div > p:only-of-type{ color:red; //变红}原创 2016-12-26 19:44:50 · 7628 阅读 · 0 评论 -
transform属性——css3变形效果3D
由于3D是立体三维,在x、y轴的基础上一般会多出一个z轴,深入跃出轴。要使用transform实现3D效果,首先需要为该元素或该元素的直接父元素设置如下2个属性属性1、transform-style 该属性是指定嵌套元素如何在3D空间中呈现属性值: flat 默认值,表示所有子元素在2D平面呈现 preserve-3d 表示原创 2017-01-15 20:59:16 · 3885 阅读 · 0 评论