CSS
文章平均质量分 81
会飞的Pikachu
前端开发手册:https://github.com/dwqs/fedHandlebook
展开
-
《精通CSS》阅读备忘
最近阅读了《精通CSS: 高级Web标准解决方案》,书的内容不错,初学者可以用来入门,有经验的人也可以用来查漏补缺,上面对于浏览器兼容和常见bug的解决方案值得参考。选择器的层叠和特殊性对于同一个元素,可能会有多个规则,为了解决规则之间的冲突,CSS 会利用 层叠 给每个规则分配一个重要度:1、标有 !important 的用户样式 2、标有 !important 的作者样式 3、作者样式 4原创 2016-01-17 13:23:45 · 1629 阅读 · 1 评论 -
响应式设计三部曲
原文:Responsive Design in 3 Steps译文:响应式设计的三个步骤译者:dwqs现在,响应式Web设计无疑是非常流行的。如果你对响应式设计还不熟悉,可以看看我之前发表过的关于这方面的responsive sites。对于新人,responsive design可能听起来有点复杂,但实际上,它比你想的要简单的多。为了帮助你快速入门响应式Web设计,我写了一篇快速入门教程。我保证你通过三步就可以学会响应式设计的基本逻辑和媒体查询(media query)(假设你有基本的CSS知翻译 2015-01-04 09:54:55 · 1536 阅读 · 0 评论 -
CSS:响应式下的折叠菜单(条纹式)
原文:CSS: Responsive Navigation Menu 译文:CSS:响应式导航菜单 译者:dwqs写在之前,关于如何制作响应式的下拉菜单:响应式下的下拉菜单之前,我写了一篇关于怎么制作响应式的移动导航的教程。现在,我发现了一个新技巧,不用使用JavaScript就能实现响应式菜单,而是使用HTML 5清晰的语义标记。 这个菜单能居左、居中和居右对齐,不像之前文章提到的菜单需要靠点击在显示和隐藏之间进行切换。它也有一个标记显示激活/当前菜单项,并且它能作用在所有移动平翻译 2014-12-31 13:03:23 · 3849 阅读 · 0 评论 -
CSS:7个你可能不认识的单位
原文:7 CSS Units You Might Not Know About众所周知,当使用CSS技术的时候,很容被一些奇异问题给困住。而当我们面对新的问题时,这会让我们处于非常不利的位置。但是,伴随着Web的发展,新的解决方案也在慢慢成熟。因此,作为一个Web设计和前端开发人员,除了对我们使用的工具或属性非常了解并能熟练运用,已经别无选择了。这也意味着,对于那些特别的工具或属性,即使平常很少使用,但是当需要的时候,我们也能很好的把它运用到工作中。今天,我就介绍一些你之前可能不知道的CSS翻译 2014-12-05 14:14:32 · 1178 阅读 · 0 评论 -
CSS 3的display:盒类型详解
在CSS中,使用display属性来定义盒的类型。总体来说,盒类型分为两类:inline和block。如div默认是block,span默认是Inline。可以通过display修改默认的表现方式。<!DOCTYPR><html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>block and inline elements</title> <style ty原创 2014-12-05 09:22:50 · 1423 阅读 · 0 评论 -
CSS 3动画介绍
原文:A Beginner’s Introduction to CSS Animation译文:一个初学者对CSS动画的介绍译者:dwqs现在,越来越多的网站使用了动画,并且形式多样,如GIF、SVG、WebGL、背景视频等等。当在web中恰当使用动画时,它可以给网站注入活力和良好的交互性,给用户提供额外的一层反馈和体验。在这篇文章,我将向你介绍CSS动画,随着浏览器对动画支持的改善,一种高效率的做事方式变得越来越流行。考虑到基础知识,我将快速建立一个从正方形变成圆形的动画案例。先看看效翻译 2014-12-02 08:42:31 · 1175 阅读 · 0 评论 -
关于坛友的一个布局问题的解答
来源:http://www.ido321.com/1147.html需求:让select、ul、文字、button、text显示在一行中,效果戳:http://bbs.csdn.net/topics/390915380?page=1#post-398415668 我的实现如下HTML:<!DOCTYPE html><html> <head> <title>Test</title> <meta http-equiv="Content-Type" content原创 2014-11-06 14:23:41 · 1249 阅读 · 0 评论 -
CSS:权重和层叠规则决定了其优先级
来源:http://www.ido321.com/1063.html首先,给大家看一篇关于CSS优先级的示例:http://www.ido321.com/76.html一、基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数 ,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承二、CSS权重规则 在《页面重构中的模块化设原创 2014-10-20 13:36:34 · 1328 阅读 · 0 评论 -
百家搜索:在网站中添加Google、百度等搜索引擎
来源:http://www.ido321.com/1143.html看到一些网站上添加了各种搜索引擎。如Google、百度、360、有道等,就有点好奇,这个怎么实现?研究了一各个搜索引擎怎么传送关键字,找到了小窍门,于是乎,自家弄了一个百家搜索:效果:演示地址戳此:http://sousuodaquan.sinaapp.com/ps:在列表中添加了糯米汇(http://www.nuomihui.com)的站内搜索,仅用于演示,别无它用,特此声明。HTML代码:<div class="原创 2014-11-05 09:13:44 · 1991 阅读 · 0 评论 -
纯CSS制作冒泡提示框
来源:http://www.ido321.com/1214.html前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html在此基础上,今天分享一篇文章给大家,如果利用CSS制作冒泡提示框。先看2张效果图:CSS:/* 对话气泡 用法:使用.speech-bubble和.speech-bubble-DIRECTION类 <div class="speech-bubble speech-bubble原创 2014-11-18 11:55:14 · 5213 阅读 · 7 评论 -
教你利用iframe在网页中显示天气
css: 1: *{margin:0;padding:0;list-style-type:none;} 2: a,img{border:0;} 3: body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} 4: 5: /* demo */ 6: .demo{width:800px;margin:0 auto;} 7: .demo div{margin:40px 0 0 0;}html:原创 2014-10-05 01:31:22 · 4227 阅读 · 3 评论 -
问题:关于一个坛友的html布局实现
这个跟上次贴友分类菜单的实现类似html: 1: <body> 2: <div class="test"> 3: <div> 4: <img src="my.jpg" alt="test"> 5: <h3>图片标题</h3> 6: <span><a href="#">编辑</a> <a href="#">删除</a></span> 7:原创 2014-10-03 11:45:49 · 1191 阅读 · 0 评论 -
IE 8兼容:X-UA-Compatible的解释
来源:http://www.ido321.com/940.html来自StackOverFlow问题描述: 1: <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />1、这个到底是什么意思?2、一些示例使用”,”分离IE的版本,而一些使用”;“,哪个正确?3、我想知道IE=9; IE=8; IE=7; IE=EDGE顺序的含义。在文档中使用了<!DOCTYPE>答复:对于IE翻译 2014-10-11 13:00:13 · 1744 阅读 · 0 评论 -
响应式菜单制作
看看效果:PC端:QQ截图20150327215831移动端:QQ截图20150327215915一、HTML<div id="demo"> <span class="icon-menu" id="icon"></span> <ul class="nav"> <li>首页</li> <li>前端开发 <ul class="submenu">原创 2015-03-31 13:33:52 · 1236 阅读 · 0 评论 -
CSS3实现酷炫导航
上面是一个效果图,代码在下面: html<html><head> <meta charset="utf-8"/> <title>CSS3 实现的导航</title> <link type="text/css" rel="stylesheet" href="nav.css" /> <base target="_blank" href="http://www.ido3原创 2015-05-05 12:14:04 · 2592 阅读 · 0 评论 -
CSS:你未必知道的@规则
at-rule是一个声明,为CSS提供执行或怎么表现的指令。每个声明以@开头,后紧跟一个可用的关键字,这个关键字充当一个标识符,用于表示CSS该做什么。这是一个通用的语法,尽管每个at-rule有其它语法变体。常规规则常规规则遵循下面的语法:@[KEYWORD] (RULE);@charset 这个规则定义了浏览器使用的字符集,如果样式表包含非ASCII characters (e.g:UTF-8翻译 2015-07-07 11:32:45 · 1377 阅读 · 1 评论 -
CSS3:clip-path详解
我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果。显示nav被裁减的效果是一个不简单的任务,我看到图片的第一反应是创建一个相匹配的背景被部分裁剪的图像,然后把它设置为一个after元素。问题是,至少要解决响应式问题,并且响应式并不完全可控的。了解CSS属翻译 2015-07-07 11:31:23 · 5369 阅读 · 0 评论 -
CSS中的变量使用详解
CSS中的变量给了我们诸多优点:方便、代码重用、更可靠的代码库和提升防错能力。示例:root { --base-font-size: 16px; --link-color: #6495ed;}p { font-size: var( --base-font-size );}a { font-size: var( --base-font-size ); color: var( -翻译 2015-06-13 09:39:23 · 17127 阅读 · 2 评论 -
CSS3的content属性详解
CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个content属性,能够实现页面中的内容插入。插入纯文字content:”插入的文章”,或者content:none不插入内容 html:<h1>这是h1</h1><h2>这是h2</h2>cssh1::after{ content:"h1原创 2015-05-26 09:39:13 · 1777 阅读 · 2 评论 -
文60个有用CSS代码片段
1、垂直对齐如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑:.verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%);翻译 2015-05-26 09:43:41 · 2675 阅读 · 3 评论 -
初探CSS 4选择器
2014年1月,我写了一篇文章:The Current Generation of CSS3 Selectors,这篇文章的目的是介绍一些CSS3中新增的选择器。文中的选择器已经有了很多文档,并且也被大多数浏览器支持(包括IE9+)。由于Selectors Level 4 specification 目前已是工作草案状态,并且Editor’s Draft of the same spec也在进行中(翻译 2015-06-25 20:59:00 · 1749 阅读 · 0 评论 -
Trick:不用table,怎么等分DIV
在SF上,有人提出一个问题:不用table,如何把Div分成3行*3列。提供了三种思路:第一种方式html:<div id="box"> <div> <span>1</span> <span>2</span> <span>3</span> </div> <div> <span>4</span>原创 2015-06-01 13:17:50 · 1814 阅读 · 0 评论 -
trick::target实现选项卡切换
:target是什么?MDN是这样描述的::target The :target pseudo-class represents the unique element, if any, with >an id matching the fragment identifier of the URI of the document.在document中,可以设置锚链接,举个粟子:<a href="原创 2015-06-01 13:18:27 · 2113 阅读 · 0 评论 -
trick:CSS 3+checkbox实现JQuery的6个基本动画效果
在JQuery中,有六个基本动画函数:show()/hide()、fadeIn()/fadeOut()、slideUp()/slideDown()。这篇文章,就利用CSS3+checkbox实现这六个基本动画。show()/hide()的实现show()/hide()的实现主要控制元素的display属性。 html:<div id="box"> <input type="checkbox原创 2015-06-01 13:15:31 · 1533 阅读 · 0 评论 -
一些你不知道的CSS属性
Box-sizing尽管box-sizing在CSS3中才被引入,其有一个值是border-box,让元素的高和宽包含了填充和边框。.div { width: 150px; height: 100px; border: 1px solid #ccc; box-sizing: border-box;}Chrome 31+, IE8+, Firefox 31+,翻译 2015-05-14 08:35:51 · 1735 阅读 · 0 评论 -
CSS3模拟侧滑菜单
在APP应用上,常见的一种导航方式是侧滑导航,效果类似于这样: 用CSS3可以对其进行模拟,代码如下: HTML:<nav> <div id="toggleMenu"> <span id="hide"></span> <span id="show"></span> </div> <ul id="lis原创 2015-05-14 08:34:31 · 2494 阅读 · 0 评论 -
编写更好的CSS必备的40个工具
众所周知,CSS是非常棒的,它使网站看起来很漂亮,可以为网站添加动画,并让呈现和内容分离。去了解CSS的一切是非常难做到的,它只会变得更加困难,因为我们想让我们的代码跨浏览器兼容。 这里介绍了很多第三方工具,从简化工作流程到生成真正的CSS,这些工具都提供了我们需要的代码,并且比我们自己写出的代码运行的更快。PurePure并不是一个框架。相反,它只是集成一些已经应用到模块中的CSS代码,方便我们翻译 2015-05-05 12:15:13 · 2535 阅读 · 1 评论 -
常用的CSS Hack技术集锦
来源:http://www.ido321.com/938.html一、什么是CSS Hack?不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程,就叫CSS Hack。CSS Hack常见的有三种形式:CSS属性Hack、CSS选择符Hack以及IE条件注释Hack, Hack主要针对IE浏览器。1、属性级Hack:比如IE6能识别下划线”_”和星号” * “原创 2014-10-11 00:13:06 · 1491 阅读 · 1 评论 -
博客收录集的源代码分享,需要那就快来吧
原文:http://www.ido321.com/1112.html之前的博客收录集只是初版,还在修改,所以就不拿出来分享了。现在博客收录集的终版已经敲定:http://www.ido321.com/daohang/改版说明如下:1、增加了“我要上榜”板块:根据随机筛选和博主在本博客的活跃度匹予以展示,增加各收录博客的展示机会。2、统计每个分类的博客数目:每个分类在首页显示20个,超出部分已链接形式链接到对应的页面(文件名以类别前缀+more自动生成)。(见上图的Web开发)3、可以再博原创 2014-10-28 22:46:01 · 1296 阅读 · 2 评论 -
问题与对策:CSS的margin塌陷(collapse)
CSS及浏览器的设计者们希望我们在布局时,如果遇到上下两个并排内容块的安排,最好只设置其中每个块上或下margin的一处即可。w3school也规定:当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。原创 2014-08-25 08:35:31 · 3245 阅读 · 0 评论 -
问题:如何在固定大小的DIV层插入N多个图片
这是贴友问的一个问题,具体需求是:如何在固定大小的DIV层插入N多个图片,使其一行排列,超出层宽时出现滑动条?原以为利用overflow属性可以实现,但是测试失败。后来利用div层叠实现了效果。HTML代码: 1: <!-- 如何在固定大小的DIV层插入N多个图片,使其一行排列,超出层宽时出现滑动条? --> 2: <!DOCTYPE html> 3: <html> 4: <head> 5: <meta http-equiv="content-type"原创 2014-09-20 21:22:37 · 1726 阅读 · 0 评论 -
怎么限制Google自动调整字体大小
Google默认的字体大小是12px,当样式表中font-size<12px时,或者没有明确指定字体大小,则在chrome浏览器里字体显示是12px。最近在写代码玩的时候,我也碰到了在FF和chrome中显示的效果如下(左边是FF,右边是google,我没有设置字体大小)用text-size-adjust属性可以限制Google调整字体大小,我添加了如下的样式之后就正常了 1: body{ 2: font-size: 20px; 3: -webkit-tex原创 2014-09-19 22:24:43 · 1838 阅读 · 0 评论 -
问题:关于贴友的一个书本页面简单布局(html+css)的实现
贴友需求:以html+css仿照书本的页面实现布局效果(见图)html代码: 1: <!-- 我的博客:http://www.ido321.com --> 2: <!DOCTYPE HTML> 3: <html> 4: <head> 5: <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6: <title>Test</title>原创 2014-09-08 01:27:01 · 3883 阅读 · 0 评论 -
问题:贴友关于CSS效果的实现
今日在百度贴吧中,一贴有提出如下问题:原创 2014-09-06 08:51:19 · 936 阅读 · 0 评论 -
CSS换行:word-wrap、word-break和text-wrap区别
三、text-wrap:规定文本的换行规则。 text-wrap是CSS3属性,有4个取值: 1、text-wrap:normal:只在允许的换行点进行换行。 2、text-wrap:none:不换行。元素无法容纳的文本会溢出。 3、text-wrap:suppress:压缩元素中的换行。浏览器只在行中没有其他有效换行点时进行换行。 4、text-wrap:unrestricted:在任意两个字符间换行。原创 2014-09-18 17:10:41 · 3744 阅读 · 0 评论 -
一道关于CSS选择器优先级的题
<html> <head> <style type="text/css"> #redP p { /* 权值 = 100+1=101 */ color:#F00; /* 红色 */ } #redP .red em { /* 权值 = 100+10+1=111 */ color:#00F; /* 蓝色 */ }原创 2014-06-22 21:17:46 · 1407 阅读 · 0 评论 -
css 字间距离_css 字体字符间距设置
本文简单介绍下css 字间距,使用css来控制字与字之间距离,也叫css字间距方法。原创 2014-05-17 18:39:35 · 16958 阅读 · 0 评论 -
CSS 最核心的几个概念
sition 设置为 relative 的时候,元素依然在普通流中,位置是正常位置,你可以通过 left right 等移动元素。会影响其他元素的位置。而当一个元素的 position 值为 absolute 或 fixed 的时候,会发生三件事: 把该元素往 Z 轴方向移了一层,元素脱离了普通流,所以不再占据原来那层的空间,还会覆盖下层的元素。 该元素将变为块级元素,相当于给该元素设置了 display: block;(给一个内联元素,如 <span> ,设置 absolute 之后原创 2014-06-08 15:25:32 · 1225 阅读 · 2 评论 -
关于margin-right的应用问题
今天在群里面,有人抛出了一个关于css中margin-right没有效果的问题。CSS代码和HTML代码如下: .style1{width:400px;height:440px;background-color:red;border:5px solid silver;margin-top:20%;margin-right:30%;}原创 2014-06-06 14:41:59 · 3130 阅读 · 0 评论 -
javascript操作html元素CSS属性
下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline。 解决办法: 在IE里: document.styleSheets[0].rules[0].style.display = "inline"; 在firefox里:原创 2014-06-05 09:49:45 · 1380 阅读 · 0 评论