css - 随笔分类(第2页) - 大西瓜3721

float实例讲解

摘要：float实例讲解 float是个强大的属性，在实际前端开发过程中，人们经常拿它来进行布局，但有时，使用的不好，也麻烦多多啊。比如，现在我们要实现一个两列布局，左边的列，宽度固定；右边的列，宽度自动扩展。效果图见下：思路：利用div+float，div1为左边的列，div2为右边的列，将div 阅读全文

posted @ 2016-02-14 08:50 大西瓜3721 阅读(399) 评论(0) 推荐(0) 编辑

CSS+DIV之强化background属性

摘要：1.背景颜色属性(background-color)，设定背景颜色＝html中bgcolor属性。我来写一个红色背景的body，(也可以定义某个特定区域) 示例写法：body {} 2.背景图片属性(background-image)，设定背景图片=html中background属性，为body... 阅读全文

posted @ 2016-01-13 13:52 大西瓜3721 阅读(298) 评论(0) 推荐(0) 编辑

CSS中强大的EM

摘要：使用CSS也好久了，但一直都是在使用“px”来设置Web元素的相关属性，未敢使用“em”。主要原因是，对其并不什么了解，只知道一点概念性的东西，前段时间在项目中要求使用“em”作为单位设置元素，所以从头对“em”学习了一回。稍为有一点理解，今天特意整理了一份博文与大家一起分享，希望对童子们有些许的帮... 阅读全文

posted @ 2016-01-13 13:45 大西瓜3721 阅读(237) 评论(0) 推荐(0) 编辑

03.Web大前端时代之：HTML5+CSS3入门系列~H5功能元素

摘要：Web大前端时代之：HTML5+CSS3入门系列：http://www.cnblogs.com/dunitian/p/5121725.html2.功能元素1.hgroup对网页或区段（section）的标题进行组合2.figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure元素的... 阅读全文

posted @ 2016-01-13 09:22 大西瓜3721 阅读(197) 评论(0) 推荐(0) 编辑

CSS学习笔记——定位position属性的学习

摘要：今天学习之前剩下的一个问题：CSS的position属性。首先归纳出和position相关的问题：position作为一个属性，它一共有哪几个属性值？position常用的属性值有哪几个？分别有什么特点？第一个问题：position作为一个属性，它一共有哪几个属性值？对于position属性，... 阅读全文

posted @ 2016-01-12 09:52 大西瓜3721 阅读(265) 评论(0) 推荐(0) 编辑

兼容ie\firefox\chrome的cursor

摘要：cursor:hand 与 cursor:pointer 的效果是一样，都像手形光标。但用FireFox浏览时才注意到使用cursor:hand在FireFox、chorme里并被支持。cursor:hand ：IE完全支持。但是在firefox是不支持的，没有效果。cursor:pointer：是... 阅读全文

posted @ 2016-01-11 16:43 大西瓜3721 阅读(424) 评论(0) 推荐(0) 编辑

理解CSS3 transform中的Matrix(矩阵)

摘要：理解CSS3 transform中的Matrix(矩阵)byzhangxinxufromhttp://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=2427一、哥，我被你吓住了打架的时候会被块头大的吓住，学习的时候会被奇怪... 阅读全文

posted @ 2015-12-16 14:03 大西瓜3721 阅读(530) 评论(0) 推荐(0) 编辑

常用px,pt,em换算表

摘要：pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96... 阅读全文

posted @ 2015-12-15 09:01 大西瓜3721 阅读(505) 评论(0) 推荐(0) 编辑

CSS3/SVG clip-path路径剪裁遮罩属性简介

摘要：一、SVG属性和CSS3属性千丝万缕的关系CSS3新增属性除了我们现在用的比较多的border-radius,box-shadow,gradient,...之类，还有很重要的一个分支：SVG属性家族！所谓「SVG属性家族」是指原本SVG的标签属性可以直接使用CSS设置。比方说，之前介绍“SVG Sp... 阅读全文

posted @ 2015-12-14 15:20 大西瓜3721 阅读(1441) 评论(0) 推荐(0) 编辑

CSS和SVG中的剪切——clip-path属性和<clipPath>元素

摘要：CSS和SVG有很多共同之处。CSS有很多特性都是从SVG中引入过来的。其中就有“剪切”的特性。CSS和SVG都允许我们对一个元素进行非矩形的剪切。在这篇文章中，将介绍CSS和SVG中的剪切技术。特别声明：本文提供的DEMO可能在你的浏览器中不能正常的演示，你应该查看这个表格了解更多相关的信息。你在... 阅读全文

posted @ 2015-12-14 15:02 大西瓜3721 阅读(638) 评论(0) 推荐(0) 编辑

理解SVG坐标系统和变换：建立新视窗

摘要：在SVG绘制的任何一个时刻，你可以通过嵌套或者使用例如的元素来建立新的viewport和用户坐标系。在这篇文章中，我们将看一下我们如何这样做，以及这样做如何帮助我们控制SVG元素并让它们变得更加灵活（或流动）。这是SVG坐标系和变换系列的第三篇也是最后一篇文章。在第一篇中，包括了任何要理解SVG坐标... 阅读全文

posted @ 2015-12-14 14:08 大西瓜3721 阅读(293) 评论(0) 推荐(0) 编辑

理解SVG坐标系统和变换： transform属性

摘要：SVG元素可以通过缩放，移动，倾斜和旋转来变换-类似HTML元素使用CSS transform来变换。然而，当涉及到坐标系时这些变换所产生的影响必然有一定差别。在这篇文章中我们讨论SVG的transform属性和CSS属性，包括如何使用，以及你必须知道的关于SVG坐标系变换的知识。这是我写的SVG坐... 阅读全文

posted @ 2015-12-14 14:07 大西瓜3721 阅读(663) 评论(0) 推荐(0) 编辑

理解SVG坐标系和变换：视窗,viewBox和preserveAspectRatio

摘要：SVG元素不像HTML元素一样由CSS盒模型管理。这使得我们可以更加灵活定位和变换这些元素-也许一眼看上去不太直观。然而，一旦你理解了SVG坐标系和变换，操纵SVG会非常简单并且很有意义。本篇文章中我们将讨论控制SVG坐标系的最重要的三个属性：viewport，viewBox，和preserveA... 阅读全文

posted @ 2015-12-14 14:06 大西瓜3721 阅读(548) 评论(0) 推荐(0) 编辑

Art-Directing SVG图像viewBox属性

摘要：Art-Directing SVG图像viewBox属性作者：彦子日期：2015-06-02点击：992svg译者注：根据Google Dev文档的解释，Art Direction在这篇文章中的概念是比较狭义的：“基于设备的特性改变的图像，即可以利用picture元素完成的art direction... 阅读全文

posted @ 2015-12-14 13:54 大西瓜3721 阅读(311) 评论(0) 推荐(0) 编辑

理解SVG的viewport,viewBox,preserveAspectRatio

摘要：viewport表示SVG可见区域的大小，或者可以想象成舞台大小，画布大小。上面的SVG代码定义了一个视区，宽500单位，高300单位。注意这里的措辞是“单位”，不是“像素”。虽然说，width/height如果是纯数字，使用的就是“像素”作为单位的。也就是说，上面SVG的视区大小就是500px *... 阅读全文

posted @ 2015-12-10 09:27 大西瓜3721 阅读(389) 评论(0) 推荐(0) 编辑

我对CSS vertical-align的一些理解与认识（一）

摘要：一、关于今天，本文，及其他今天是个特殊的日子，因为今天是汶川地震两周年的日子，我很悲鸣；今天又是国际护士节，看到微博上护士照横流，我很欣慰。一段放松的YY后，进入正题。上个月21号，有位同行留言想让我讲讲vertical-align属性，我其实对vertical-align属性也是略知皮毛，要说岂敢... 阅读全文

posted @ 2015-11-25 09:34 大西瓜3721 阅读(274) 评论(0) 推荐(0) 编辑

HTML5,CSS3 与 Javascript 制作视频播放器

摘要：早一段时间，有一直研究 HTML5 和 CSS3 ，自己也做了不少 Demo ，只是 HTML5 Video 和 Audio 由于自己平时比较喜欢留意不同的播放器，因此特别想做一个自己喜欢的设计，考虑到会比较花时间，所以一直没有做出完整的 Demo 。刚好最近有灵感了，就下定决心做一个完整的视频播放... 阅读全文

posted @ 2015-10-28 17:14 大西瓜3721 阅读(363) 评论(0) 推荐(0) 编辑

用css控制cellspacing、cellpadding

摘要：用css控制cellspacing、cellpadding发表于2006 年 12 月 24 日由Silbo在table中控制单元格之间的间距要用到cellspacing、cellpadding，默认情况cellspacing、cellpadding均不为0，但经常的状况为了不让table单元格之间... 阅读全文

posted @ 2015-10-15 08:48 大西瓜3721 阅读(234) 评论(0) 推荐(0) 编辑

彻底弄懂css中单位px和em,rem的区别

摘要：国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？PX特点1. IE无法调整那些使用px作为单位的字体大小；2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；3. Firefox能够调整px和em，rem，但是96%以上的... 阅读全文

posted @ 2015-09-18 09:09 大西瓜3721 阅读(137) 评论(0) 推荐(0) 编辑

收集一些特殊的符号

摘要：■特殊符号：·⊙①？◎Θ⊙●○¤㊣㈱@の■□★☆◆◇◣◢ ◤◥▲△▼▽⊿◢ ▂ ▃ ▄ ▅ ▆ ▇ █ ▉ ▊▋▌▍▎▏■ ▓ 回 □ 〓≡ ↑↓→←↘↙♀♂┇┅‖$ @ * & # ※ 卍卐 ∞Ψ §∮ № ⌒ * ░ ▒ ▣ ▤ ▥ ▦ ▧ ▨ ▩ ▪ ▫ ▬ ◆ ◇ ◈ ◎ ● ◐ ◑... 阅读全文

posted @ 2015-09-15 09:57 大西瓜3721 阅读(2183) 评论(0) 推荐(0) 编辑

大西瓜3721

随笔分类 - css