偷下懒，css就不单独写出来了··· <div style="position:absolute; left:0; top:0;width:200px; height:400px; background:#ccc;">asd</div> <div style="background:#f60; margin:0 300px 0 200px; height:200px;"></div> <div style="position:absolute; right:0; top:0;width:300px; height:400px; background:#000;"></div>
很显然 这个问题已经困扰着我们很久 HTML下的input总是给我们带来无尽的烦恼 好在我们有强大的CSS 所以 也就应了那句话 兵来将挡 水来土掩 CSS部分： body{ margin:20px; font-size:12px; } .input{ float:left; *margin:-1px 0; } span{ float:left; margin-top:-3px; } HTML部分： <div style="height:25px; line-height:25px; "> <input type="radio" name="radiobutton" value="radiobutton" /><span>我肯定是和单选按钮垂直居中的</span> </div> 当然 我在body里设置margin是为了看的方便 另外 这是字体在12px的情况下 如果是14px应该直接给radio来个vertical-align:middle就可以了 至于margin：-1px 0；是因为input在万恶的IE下上下都会多出1px的高度
CSS部分： #menu { clear: both; margin: 0; padding: 0; } #menu ul { position: relative; top: 5px; margin: 0; padding: 0; float: left; font: bold 1.4em ‘Trebuchet MS’, Tahoma, Arial, Sans-serif; width: 850px;/* 775px; */ border: 1px solid #808080; border-width: 0 0 4px 0; list-style: none; } #menu ul li{ display: inline; } #menu ul [...]
这是先前在keso的博客上看到的 CSS部分： body{ font-size:12px; } div{ color:#fff; } #m{ padding-left:150px; } #middle{ position:absolute; margin:0 auto; width:470px; background:red; } #left{ float:left; width:140px; height:30px; background:green; } #right{ float:right; width:140px; background:blue; } #all{ width:770px; margin:0 auto; background:#ffa200; color:#000; } #footer{ clear:both; background:#808080; color:#fff; } HTML部分： <div id="all"> <div id="m"> <div id="middle"> 中栏<br /> ·IT人的出路系列思考（三）: 提升学习能力与可持 .. [...]
CSS部分： .bottom{ margin:0 auto; width:960px; height:200px; background:#66CC00; } .under{ position:absolute; margin:-25px 0 0 600px; width:300px; height:250px; background:#e8e8e8; color:#fff; } .top{ position:absolute; right:5px; bottom:5px; width:300px; height:250px; background:#0066FF; } HTML部分： <div class="bottom"> <div class="under"> <div class="top"></div> </div> </div> 不知道用float的办法 能不能把登陆区域放到右边去··· 抽空琢磨一下
Demo1:http://apples-to-oranges.com/goodies/css-for-bar-graphs/ Demo2:http://alistapart.com/d/accessibledata/example-barchart.html Demo3:http://apples-to-oranges.com/blog/post/css-for-bar-graphs/?id=55 Demo4:http://www.maxdesign.com.au/presentation/percentage/ Demo5:http://cssglobe.com/lab/csschart/ Demo6:http://www.jgc.org/blog/2005/12/css-absolute-positioning-scatter-plot.html Demo7:http://www.cssplay.co.uk/menu/barchart.html Demo8:http://www.standards-schmandards.com/exhibits/barchart/ 原文：http://sixrevisions.com/css/css_techniques_charting_data/
点击链接有虚线的问题 在很多细节方面会影响用户对产品的使用体验 作为web csser总是想方设法地去取消点击链接的虚线 从而提高用户体验 于是onfocus="this.blur()" 来了 于是 a{blr:expression(this.onFocus=this.close());}也来了 更有甚者htc js等等方法接踵而至··· 但是csser终究还是钟爱css··· 不知道有多少哥们儿在多少个夜晚里为了用纯css的手段去解决这个问题而挑灯夜战 更有甚者 为之而寝食不安 神魂颠倒··· 那今天 CSS神作 终于出现： <style type="text/css"> .wrap{position:relative;} .btns{zoom:1;} .btns *{outline:0;zoom:1;} .btns button::-moz-focus-inner{border-color:transparent!important;} </style> <div class="wrap"> <div class="btns"> <button type="button">确定</button><button type="button">取消</button> <a href="#">确定</a><a href="#">取消</a> </div> </div> .btns *{outline:0;zoom:1;} btns下所有的元素outline的值都为0 取消其虚线 zoom：1在这里意义貌似不大 可以取消 .btns button:-moz-focus-inner{border-color:transparent!important;} 是为btns下的按钮而单独设置的 .wrap{position:relative;} 关键是这句 [...]
CSS3 仍遥遥无期，还是指日可待，这不是一个技术问题，而是人们什么时候可以彻底放弃那些不符合 W3C标准的旧浏览器的问题。CSS3 备受期待是肯定的，CSS Tricks 网站做了一次投票调查，票选备受期待的 CSS 功能，一共有7000人参与，结果如下。有趣的是结果的前三名非常的接近。 #1) 圆角 (22.0%, 1,541 票) 这个功能已经在诸如 Mozilla, Webkit 等浏览器广泛使用，对 Web 设计者来说无疑是最受期待的，然而 IE 仍然没有要支持这个功能的迹象。 #2) 多背景(22.0%, 1,523 票) 这个功能是我最期待的，但向后兼容会是一个很大的问题。 #3) @font-face (21.0%, 1,424 票) Firefox 的最新版本将支持该功能，Safari，Opera 甚至 IE 也将支持或已经支持该功能，我们会看到该功能的广泛应用，只是字体的版权问题会很麻烦。 #4) 动画与渐变(12.0%, 818 票) Webkit 在这方面是领头军，动画也是设计的一部分，也该属于 CSS。这些会慢慢实现，当 Webkit 之外的浏览器也开始支持这个功能，我们会看到很多令人惊讶的效果。 #5) 渐变色 (8.0%, 535 票) 定义一个固定色背景很简单，但渐变色就没有那么简单了，渐变色很适合通过代码实现，Webkit 又在这方面抢了先。 #6) Box 阴影(4.0%, [...]
这篇blog本应该诞生于在两天前 但都因一些事给耽搁了 今天给补上 高度自适应一直是一个困扰着csser的问题 今天在这里向各位介绍一个较为简单的解决高度自适应的方法 我们以两列情况的布局为例 如下图： 我要的布局效果是 不管左侧【我的组件】和右侧【公司介绍】哪个内容多 哪个高度高 都以高的为准 在网上找了一些相关资料 解决办法比较多 但个人觉得还是用负外边界和内补丁相结合的办法来解决最简单也最为实用 说一下具体的做法： ①两列div最外面设置一个box 并设置超出部分隐藏 overflow:hidden 并设置宽度width（这个宽度的具体值视左右两列的宽度而定） ②left和right这两个div都设置margin-bottom:-9999px;padding-bottom:9999px; 基本上做到以上两点 我们的问题就可以很漂亮的搞定了 一切尽在我们掌握中 看起来很完美 是吗？ 事情并非我们所想象 网上的很多实例 都是针对两列均为背景色而言 并没有像我上图那样左侧一列div有边框 因为在实际工作布局所需效果中 我们往往需要给左列的div加个边框啊什么的 那好啊 要边框的话 我们就加border好了 这不是so easy吗？恩 是的 起初 我也很你是一样的想法 但当我真正把border加上去后 问题出现了 左列的div只有左上右三个边框 没有底边框 咦？这是怎么回事呢？我想 问题的原因应该是margin-bottom:-9999px;padding-bottom:9999px;这个造成的 我不想多加追究了···我很忙 我要搞定这个问题··· 我曾经试过很多种办法 我想既然左列的div设置了margin-bottom:-9999px;padding-bottom:9999px; 导致底边框不能显示 那我就在左列div里再加一个div 再对这个div设置border不就行了吗？恩 是的 我重写CSS 预览 [...]
