CSS/CSS3
baiding1123
这个作者很懒,什么都没留下…
展开
-
css+div+图片实现宽度自适应圆角框
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">自适应宽度圆角框.content{ height:146px; margin-top:0px; }.left{ height:146px; width:22px; flo原创 2012-12-26 23:25:47 · 3238 阅读 · 0 评论 -
第九章--bug和修复bug
第九章 bug和修复bug浏览器的表现不一致是大多数CSS开发人员面临的主要难题。所以在弄清楚各种bug是什么情况的时候,才能想办法对付它。 本章学习:☆如何跟踪css的bug ☆Haslayout属性☆hack和过滤器☆常见的浏览器bug和修复方法☆分级浏览器支持捕捉bug 在处理CSSbug的时候最好是假设自己做错了什么事,只有确定不原创 2013-10-02 10:50:14 · 1113 阅读 · 0 评论 -
实例研究
实例研究接下来你会看到有当今的两个最好的CSS设计师和开发人员创建的两个超棒的实例研究.在这个研究示例中我们学习以下主题:1.1080布局和网格2.高级CSS2和CSS3特性3.字体链接和更好地web排版4.用Ajax和JQuery郑家交互性可以访问roma.cssmastery.com体验这个示例的研究效果, 可以从www.friendsofed.com获原创 2013-10-02 10:52:02 · 957 阅读 · 0 评论 -
第二章--选择器
第二章:为样式找到应用目标(其实说的就是选择器(selector))2.1.常用的选择器类型选择器: 又称为元素选择器或简单选择器p{color:black;}h1{font-weight:bold;}后代选择器:用来寻找特定元素或者元素组的后代只是缩进块应用的后代段落元素,其他所有段落不受影响。blackquote p {padding-left:2em;}原创 2013-10-02 10:36:28 · 906 阅读 · 0 评论 -
CSS远距离翻转
远距离翻转时一种鼠标悬停事件, 他在页面的其他地方触发显示方式的改变。 实现方法是:在锚链接内嵌套一个或多个元素; 然后使用绝对定位对嵌套的元素分别进行定位。尽量显示在不同的地方,但是他们呢都包含在同一个父锚中,所以对于同一个鼠标悬停时间做出反应, 因此当鼠标悬停在一个元素上面时可以影响另一个元素的样式。baiding1123原创 2013-03-13 17:43:20 · 1275 阅读 · 0 评论 -
网页使用中文字体的两种解决方案
解决中文字体在网页中的使用,有两种办法。背景:英文的字体很好使用,因为只有26个大小写字母,以及一些符号,本身的字体文件就很小,不会对页面的加载造成多大的影响;但是中文的字体文件相当大,仅字体文件本身就5-6M,所以需要采取点手段才敢在网站中使用。目前了解到的方法有两种:第一种:使用有字库 ,http://youziku.com/ 只需要挑选字体,对于网站中没有的字体用户原创 2015-10-18 23:21:54 · 4665 阅读 · 0 评论 -
Flex布局 Flexbox属性详解
Flex布局官方称为CSS Flexble Box 布局模型是CSS3为了提高元素在容器中的对齐、方向、顺序,甚至它们是动态的或者不确定大小的新布局模型。Flex容器的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间。很多的设计师和开发者发现Flex布局很容易使用,它定位元素简单因此很多复杂的布局能够用很少的代码实现,引领更简单的开发过程。Flex布局的算法是基于方向的,不同于基于水平或者垂直的block和inline布局,这种Flex布局可以被用在小的应用组件中,而CSS3翻译 2015-08-15 00:40:13 · 11061 阅读 · 1 评论 -
CSS:hover 图片缩放
前段时间看到有些网站上有这种效果,鼠标悬停到图上它会自己收缩,于是尝试实现一下,CSS3的动画,定义了两个类,然后用JQ hover事件分别分别给标签添加对应的动画类名,不过效果不好,在迅速来回移动鼠标的时候,动画会衔接不上,突然变大的感觉,原因是在CSS动画中写死了变化的起始和终止时图片的缩放比例,只有完全放大或者缩小之后再进行后续的动画才会感觉流畅,但用户鼠标不可能在图上悬停超过0.5秒再离开原创 2015-09-17 11:48:43 · 3145 阅读 · 0 评论 -
CSS pointer-events属性
pointer-events:none 它意思是禁止鼠标事件的意思,圣诞节的时候需要在页面上用canvas弄个下雪之类的效果,canvas的z-index肯定设置到最高,但罩住住了所有页面的元素,被罩住的所有的元素和鼠标的交互失效了。所以当发现这pointer-events属性能够起到这么神奇作用的时候简直两眼放光。pointer-events:none;禁止了鼠标事件,包括链接, hov原创 2015-12-22 15:04:52 · 956 阅读 · 0 评论 -
使用Sass
需注明英文出处:http://alistapart.com/article/why-sass,——作者:DAN CEDERHOLM ——译者:若强我Sass对略微有点抵触,我更喜欢直接写css样式!我不需要使用它!此外,我确实不想给我的工作流程中增加额外的复杂的部分,因此我选择远离它。.这就我们的常规想法,但是Sass(以及其他css预处理程序)确实是一个强大的工具转载 2016-01-11 17:26:05 · 528 阅读 · 0 评论 -
手机端rem推荐的一种写法
:root { font-size: 16px;}// Or you can use html// html {// font-size: 16px;// }body { font-size: 1rem;}button { font-size: 0.875rem; // All the internal/external value us转载 2016-03-21 16:55:35 · 1413 阅读 · 0 评论 -
认识一波CSS高级选择器
/*有6个不同类型的属性选择器:*/[att=value]/*该属性有指定的确切的值。*/[att~=value]/*该属性的值必须是一系列用空格隔开的多个值,(比如,class=”title featured home”),而且这些值中的一个必须是指定的值”value”。*/[att|=value]/*属性的值就是“value”或者以“value”开始并立即跟上一个“-”字符*/[原创 2016-05-06 15:23:07 · 1228 阅读 · 0 评论 -
隐藏/修饰页面的滚动条
默认的页面滚动条很丑,很多情况下和页面风格完全不搭;也见到很多网站漂亮的滚动条,其实是隐藏掉默认的滚动条,然后自定义div和css,作出自己的滚动条,再配合js实现拖动和鼠标滚轮效果。(Hiding the scrollbar on an HTML page,but still being able to scroll)该修饰可以去掉div上的滚动条,div中的内容依然可以滚动,该属性只支原创 2016-05-27 16:14:49 · 6052 阅读 · 0 评论 -
试用sass
使用sass需要安装ruby,再安装sass. 安装命令:gem install sasssass文件名后缀是.scss.编译有四个选项,nested 默认选项,compact 简洁格式的,compressed压缩的,expanded没有缩进的。cmd切换到工作路径监听我的文件夹:sass --watch ./src:./css 或者监听文件:sass --watch src.原创 2016-01-12 00:18:41 · 557 阅读 · 0 评论 -
CSS进阶( Leveling up in CSS)
原文[:Leveling up in CSS] CSS seems easy at first. After all, it’s just styling, right? But, give it time. Soon, CSS will show you the true depths of its complexity. There are four things you can do翻译 2016-07-11 23:00:18 · 3567 阅读 · 0 评论 -
CSS tab选项卡(标签页)切换
在github上看到一篇 You dot need JavaScript 很多效果不需要js也能做到,比如手风琴的效果,轮播,弹出的对话框,工具提示,标签页的切换,多级的下拉菜单等等,css甚至还能做游戏! 之前就看到一个用css制作的轮播的例子,这次又遇到了,所以简单记录下。 观察了那篇github中的几个例子,不难发现凡是涉及到点击事件的都是通过隐藏的input和与之关联的label原创 2016-07-12 15:22:01 · 10978 阅读 · 0 评论 -
关于CSS需要知道的10件事
怎样写出可持续的CSS代码, 关于CSS你必须了解的10件事情:每个在大型项目中工作的人都应该知道对于大量增长的CSS资源保持可读性和可维护性是多么困难。样式的可重用性和松耦合。此外在响应式(RWD)web开发中还要处理持续增长的圈复杂度,从自己的项目中所积累的经验,我总结了10条非常重要的准则可以帮助你的样式更高效并且高度的持续和维护。翻译 2016-07-20 17:42:26 · 3222 阅读 · 0 评论 -
第八章--布局
第八章 布局CSS的主要好处之一是,他能过控制页面布局 而不需要表现性标记。 但是css布局被认为是难以理解的。 似乎每一个css作者都用自己的技术创建多列布局,而CSS开发人员常常不了解真正所用的技术的工作原理。 所谓的CSS 框架的出现进一步恶化了这种局面。 CSS框架试图在标记和表现之间建立强耦合来简化css的布局, 这种耦合式我们真正抛弃基于表格布局的主要原因。 这种CSS布局以“黑原创 2013-10-02 10:48:19 · 1540 阅读 · 0 评论 -
第五章--对连接应用样式
第五章 对链接应用样式在本章中,你将学习以下内容:☆基于层叠对连接选择器进行排序☆创建应用了样式的链接选择器☆使用属性选择器对外部链接应用样式☆使链接表现的像按钮☆创建已访问链接的样式☆创建纯CSS的工具提示5.1简单的链接样式最容易的办法就是使用锚类型选择器 a{color:red;}但是他可以用内部的内容也可以引用外部的链接所以用它不总是原创 2013-10-02 10:42:16 · 1354 阅读 · 0 评论 -
css+div+图片实现高度自适应圆角框
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">高度自适应的圆角框.content{ width:562px;}.top{ height:31px; background-image:url(images/1.PNG); back原创 2012-12-26 22:27:42 · 2825 阅读 · 0 评论 -
完全自适应的圆角框
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">完全自适应的圆角布局 .top{ padding-right:20px;/*在补白中显示背景图片,为图片预置宽度空间*/ background-image:url(im原创 2012-12-28 14:50:52 · 1132 阅读 · 0 评论 -
两侧高度相互适应的CSS+div布局
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">左右均能适应的布局.main{ width:200px; background:#C6F; }/*定义父元素的CSS样式*/.content1{ position:relative;原创 2012-12-19 14:13:43 · 1479 阅读 · 1 评论 -
三列布局中有一列高度固定
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">三列布局中有一列内容固定.main{ width:450px; background:#C3C; height:auto; text-align:center; }.conten原创 2012-12-19 21:10:46 · 713 阅读 · 0 评论 -
css div布局的简单页面
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">一个简单的页面body { font-family: "宋体"; font-size: 16px; color: #603; text-decoration: none;}ul{原创 2012-12-20 10:07:35 · 815 阅读 · 0 评论 -
能播放漂亮歌词的网页代码
音乐播放style="LEFT: -3px; WIDTH: 1002px; POSITION: absolute; TOP: 1px; HEIGHT: 449px" align=right src=a.swf width=1000height=449 type=application/octet-stream ;; quality="high" wmode="tra转载 2012-12-22 11:03:04 · 1392 阅读 · 0 评论 -
纯图片高度自适应圆角框的制作
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">复杂圆角框的制作.content{ width:480; }.top{ height:16px; background:url(images/top.PNG) no-repeat l原创 2013-01-14 17:20:41 · 1159 阅读 · 0 评论 -
流式和弹性图像
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">流式和弹性图像.news{ width:95%; margin:0 auto; text-align:center; background-color:#CCC; border:1p原创 2013-03-12 22:17:29 · 1029 阅读 · 0 评论 -
纯CSS按钮
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">纯CSS按钮a{display:block;width:6.6em;height:1.4em;line-height:1.4;text-align:center;textdeco原创 2013-03-12 21:49:33 · 1382 阅读 · 0 评论 -
高度相同的列Andy-Budd版
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">高度相同的列.wrapper{ width:100%; position:relative; margin:0 auto; overflow:hidden; text-align:c翻译 2013-03-12 22:08:05 · 937 阅读 · 0 评论 -
下拉菜单
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">Suckfish下拉菜单/*首先把外边距和内边距设置为零,去掉默认的项目符号。 向左浮动, 添加边框和背景颜色, 让列表也浮动。*/ul.nav,ul.nav ul{/*下拉菜单项和列表项完全相同转载 2013-03-12 21:55:54 · 874 阅读 · 0 评论 -
CSS学习笔记--第一章
笔记:CSS高级Web标准解决方案 2012 年暑假自学Andy Budd Simon Collison[著]Cameron Moll第一章 :基础知识学习css最好的方式就是从一开始直接使用它。1.设计代码的结构网页越来越有表现力, 但代码的维护越来越困难。 设计器虽然让布局摆脱了编辑的复杂性,但是却引入了自己一套复杂的标记, 而且找BUG很困难原创 2013-10-02 10:32:31 · 701 阅读 · 0 评论 -
第三章--可视化格式模型
第三章: 可视化格式模型要掌握的三个重要的CSS概念: 浮动 定位和盒模型。本章,学习以下内容:▼和模型的复杂性和特点▼如何,为什么使用外边距叠加▼绝对定位和相对定位的差异▼浮动和清理是如何工作的3.1盒模型概述盒模型在以前CSS学习过,只是在这本书里面把补白属性padding叫做内边距注意的一点: CSS2.1还包括outline属性。与border属原创 2013-10-02 10:38:33 · 797 阅读 · 0 评论 -
第六章--列表导航条
第六章 对列表应用样式和创建导航条 列表能够对相关的元素进行分组,并给他们添加意义和结构。人们天生喜欢列表。。。本章学习的内容: 用CSS对列表应用样式 使用背景图像作为项目符号 创建垂直导航条和水平导航条 使用滑动门标签也是导航 纯CSS下拉菜单 创建CSS图像映射 创建远距离翻转 使用定义列表6.1基本列表样式非常简单:原创 2013-10-02 10:43:45 · 2888 阅读 · 0 评论 -
第七章--表单和数据表格
第七章 对表单和数据表格应用样式表单是现代web应用程序中越来越重要的部分。 表单能完成系统交互,注册预定和复杂的各种活动。 表单可能很复杂跨越多个页面。过去用表格布局表单,但是在本章中讲的是用CSS布局复杂的表单。7.1 对数据表格应用样式花几分钟就时间设计数据表格可以大大改进可理解性和阅读信息的速度。7.1.1表格的特有元素 如果数据表对于视力没有问题的原创 2013-10-02 10:46:18 · 1653 阅读 · 0 评论 -
第四章--背景图像效果
第四章 背景图像效果web是一种视觉效果非常丰富的媒体,没有image就没有网页设计师。本章讲的是一系列示例解释如何使用背景图像创建各种有意思的有用的技术。 本章介绍的内容:○固定宽度和可变宽度的圆角框○滑动门技术○多个背景图像和border-radius属性○css投影○不透明度和RGBa○让PNG适用于老的IE版本○视差滚动○图像替换原创 2013-10-02 10:40:28 · 1453 阅读 · 0 评论 -
转载-精通CSS滤镜(filter)(实例解析)
CSS滤镜(filter)IE4.0以上支持的滤镜属性表 滤镜效果 描述 :Alpha 设置透明度 Blru 建立模糊效果 Chroma 把指定的颜色设置为透明 DropShadow 建立一种偏移的影象轮廓,即投射阴影 FlipH 水平反转 FlipV 垂直反转 Glow 为对象的外边界增加光效 Grayscale 降低图片的彩转载 2016-11-01 17:07:12 · 456 阅读 · 0 评论