布丁黑板报

首先说下inline、block、inline-block的区别inline：行内元素显示前后无换行符block：块级元素inline-block： 行内块元素重点说下inline-block这个属性。经过测试当display：inline-block的时候，本身为块元素的HTML标签（比如 div等）应用此样式在IE8+、chrome、firefox 会将块元素转换成行内元素，但

今天在APPUI设计群里 ，不少朋友在问  android APPUI设计、切图的常用尺寸到底是多少？很不清楚，所以老谭在此跟大家分享下。Android 系统就被设计为一个可以在多种不同分辨率的设备上运行的操作系统。对于应用程序来说，系统平台向它们提供的是一个稳定的，跨平台的运行环境，而关于如何将程序以正确的方式显示到它所运行的平台上所需要的大部分技术细节，都由系统本身进行了处理，无需程序

013年，APP界面设计已经越来越受到大家的关注和热捧！作为一个接触APP界面设计的老鸟，网站设计师们。一定得记住：用户体验设计放在首位！信息图：移动端APP设计指南APP界面设计指南|APP界面设计师必备信息图

据某媒体报道，2012年国内安卓手机市场占有率达到了36%！可以肯定是 Android 智能手机已经融入到了我们的生活。然而，Android 应用界面设计相对于iphone的界面设计来说，稍有逊色。于是，Android 团队宣布推出官方“安卓设计（ Android Design）网站，就 Android 的主要界面特征对开发者进行设计指导。Android的应用界面设计重点围绕三个总

iphone界面设计尺寸（640*960）px该Iphone界面设计是从苹果官方网站帮助中心提取过来，这也是我第一次帮公司产品设计iphone版的UI使用的尺寸。由于之前接触的比较少，只知道苹果手机的界面尺寸是640*960，其实真正的大小是320*480，因为人的视网膜关系，苹果公司放大了2倍。所以，我们在设计的时候，需要按照该图上的尺寸来放大2倍作为我们设计的尺寸。

IE下设置select的无法实现的。先改变select的尺寸可以设置select的宽高示例代码 select{ height:20px; width:80px;}test1我想尝试使用css来模拟实现可改变高度，其实ie67下可以通过设置font-size来实现改变select的高度，但是这个是个不是很靠谱的方法，我说下我实现的原理：第一步：就是在

/*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css *//* ============================================================================= HTML5 display definitions ==

关于清楚浮动下面这两篇可以参考。方法比较多了http://blog.sina.com.cn/s/blog_6c0785310100wwm9.htmlhttp://blog.sina.com.cn/s/blog_6c0785310100wwmg.html代码示例1.clearfix:after{content:”.”;display:block;height:0;clea

基本准则符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.文件规范1. html, css, js, images文件均归档至约定的目录中;2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名,

清除浮动对于任何CSSer来说都是基本中的基本，但我不愿称其为基础，因为最近我浏览网页看到各种充斥的清除浮动的方法后，才彻底明白，虽然各种方法被大量的使用，却甚为混乱。最糟糕的是很多有问题的流传版本的搜索排名都非常靠前，用神大人的话说就是：“错误的知识是毫无意义的”。然而，坊间流传的很多方法其实也称不上错误，而只是有些偏差而已——往往使用中不会出现问题，但是严格地说，它们是不准确的，难道我们搞

1. 用 firebug 或 console 来调试        在 Firefox 还没有推出 Developer Tools 时，大家一定是用 Firebug 来调试，2006 年 Firebug 第一版 release 出来，让 web 开发者可以更快速的了解网站调试，也可以通过 Firebug 来了解网站的性能。但是现今，Firefox 推出了自家 Develop

平台特点1 大屏幕，分辨率 1024×7682 再次强调没有固定的方向，必须四个方向都支持。3 可以外接键盘4 可以放置设备，与台式机同步iPhone与iPad的共同特点- 内存有限- 同时运行单个程序- 在设置功能里放置程序选项- 设备方向可以改变- 最小化的帮助，让用户直接就能看懂- 程序响应手势而不是鼠标- 运行源生程序、W

做移动UI设计的朋友们肯定都知道，移动客户端的界面上做效果的时候提前找所用的字体，特别注意在windows下设计的字体和实际UI界面上显示的效果很大的差别。博主谈到设计师可以提前和开发沟通好，就是告诉开发字体和字间距之类的需要自定义，请程序提前做好“准备”（一般字体和字的效果程序都是可以提前封装后，整个项目都可以导出自定义），如果提前沟通，这样会提高开发和设计的UI界面的效率。确实是这样啊

多网页中的 CSS 链接与引用是这样写的： @import url("http://www.abaonet.com/abc.css");  而很多网站使用的都是 link  　　而像 google 百度 163等网站它们都是直接写在网页中。　　当然使用链接 link 和导入 import 的好处就是易于维护，但当网速比较慢的时候，会出　　现

强制不换行 div{white-space:nowrap;}自动换行div{ word-wrap: break-word; word-break: normal; }强制英文单词断行div{word-break:break-all;} CSS设置不转行：overflow:hi

blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul {margin:0;padding:0}body,button,input,select,textarea { font:12px/1.5 tahoma,arial,'Hirag

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr

1、不要实用过小的图片做背景平铺。举例宽高都是1px的图片用做背景平铺太耗费资源。1px 背景图。拼一个200*200像素的区域需要渲染40000次。耗费可不是一点半点2、无边框。推荐的写法是 border:none。 border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源。不过有个特点border：0  占用空间比border：none 少三个字节3、慎用

〈link rel="stylesheet" type="text/css" media="screen" href="screen-styles.css">〈link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait-screen.css">//纵向放置的显示屏设备〈link r

前提修改文档声明，如有疑问，请看文章手机web2.0网页文档属性@media screen and (max-device-width: 320px){body{-webkit-text-size-adjust:none}}@media screen and (max-device-width: 480px){body{-webkit-text-size-adjust:no

“点九”是andriod平台的应用软件开发里的一种特殊的图片形式，文件扩展名为：.9.png智能手机中有自动横屏的功能,同一幅界面会在随着手机(或平板电脑)中的方向传感器的参数不同而改变显示的方向,在界面改变方向后,界面上的图形会因为长宽的变化而产生拉伸,造成图形的失真变形。我们都知道android平台有多种不同的分辨率，很多控件的切图文件在被放大拉伸后，边角会模糊失真。O

两种情况清除浮动包括清除子元素的浮动和清除上级元素的浮动，其中清除上级元素的浮动，只需设置clear为both就可以了，而清除子元素的浮动则可以用空标签法、clearfix方法或overflow方法。因清除上级元素的浮动比较简单，而空标签法清除子元素浮动会增加额外标签，所以在这里主要说clearfix方法、overflow方法及偶然发现的inline-block方法。为什么要清除浮

清除浮动，新手朋友往往不是很明白。如果不清除浮动对float进行闭合，在FF中往往会出错，本站有大量的文章进行过介绍。今天向大家推荐一个实例，非常简洁易用。给需要闭合的DIV（class为clearfix）加上如下的CSS样式即可：.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hid

原文：http://www.qianduan.net/?p=6572译自：http://www.divitodesign.com版权所有，转载请注明出处，谢谢。或许你知道，Internet Explorer 6 已经不是最先进的浏览器了。事实上，它已经八岁了，但是很多人还在使用这个不安全的浏览器。正因为如此，网页设计师不得不额外担心他们的网站在IE6下的表现。在CSS

来作为IE8的兼容方法，虽然微软将IE向标准迈进了一大步，而事实上IE8还存在一系列渲染的奇怪现象是不争的事实。谁让IE6那么多呢，或许2014年以后我们可以有更多的时间去关心IE8，而不是IE6或者IE7。> > meta http-equiv=”X-UA-Compatible” content=”IE=8″ /> > > meta http-equiv=”X-UA-Compatible

下面的代码都是经过测试的，然后总结下来的，不足之处还忘指正。也可以来我们的群交流：137684622测试环境：ietester IE9 firefox chrome case: 首位 background:属性 末尾 经过测试 末尾 属性值：\9 支持：IE所有版本 末尾 属性值：\0 支持：IE8 IE9 末尾 属性值：\0\9 支持

淘宝网的语音搜索也有了一阵子了，但似乎都没看到相关的博客或帖子在说这个如何实现，今天查了点资料，发现原来实现是如此简单，可能是因为太简单了，也就没有人讨论了吧。其实实现只需一句代码即可：x-webkit-speech一看到这句代码，想到了什么?对，这说明语音搜索只支持webkit内核浏览器，那么这段代码具体要放在哪呢?当然还有一些其他的参数，比如设置语音

最近的实践中，越来越觉得 li 标签中包含 a img 标签的时候会比较麻烦，需要注意。当然，问题还是一如既往的出现在 IE 下。以下为其中一例： css code:CSS Code: 　　ul { width:280px; }　　ul li { display:block; height:57px; width:277px; }其中 temp.

CSS技巧1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:

注：该效果可以在Safari, Chrome,Firefox和Opera在看到效果，IE上由于对HTML5的支持不完全，所以看不出效果。第一步：创建基本HTML和正方形首先添加基本的HTML结构以及构建基本的正方形，代码如下： Dudu： 最近咋没有美女发帖呢？我一定给个头条推荐,recommend!re

Zen HTML ElementsBased on HTML 5 specification draft.Root Elementhtmlhtml:xml xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">html:4t lang="ru">         http-equiv="

好久不用table 在这备注一下这个技巧吧border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。示例代码 table{border-collapse: collapse;} td{ border:1px solid #000;} 1 2 3 4

jQuery里提供了许多创建交互式网站的方法，在开发Web项目时，开发人员应该好好利用jQuery代码，它们不仅能给网站带来各种动画、特效，还会提高网站的用户体验。本文收集了15段非常实用的jQuery代码片段，你可以直接复制黏贴到代码里，但请开发者注意了，要理解代码再使用哦。下面就让我们一起来享受jQuery代码的魅力之处吧。1.预加载图片

有时候在写CSS的过程中，某些限制总是不起作用，这就涉及了CSS样式覆盖的问题，如下view plaincopy to clipboardprint?#navigator {        height: 100%;        width: 200;        position: absolute;        left: 0;

全局样式采用 HTML5 DOCTYPEviewport 保证在手机上能撑满全屏。且转屏不会出现问题。CSSfont-awesome.css 包含了需要的字体图标。IE 8 及之前版本 IE 的支持需引用以下几个文件。 jQuery直接用 Google 托管的就可以。

最近的一个页面中碰到的，本来想用 border 来模拟设计图的虚线效果，但是很明显 border 效果不如设计图来的好看。顺便研究了下 dashed 和 dotted 的区别。首先，从字面上来理解，dashed 和 dotted 都是指“虚线”，他们的不同在于：dashed：来自 dash（破折号），由 dash 组成的虚线dotted：来自 dot （点），由 dot 组成的

.box_round { -webkit-border-radius: 12px; /* Android ≤ 1.6, iOS 1-3.2, Safari 3-4 */ border-radius: 12px; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */

我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间.然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e­xpression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat.而我今天介绍DD_belatedPNG,只需要一个理

不少朋友想修改成新浪微博那种固定在浏览器窗口顶部的样子，其实很简单。第一步，固定顶部导航栏　　其实只需要给导航栏的div增加一个position属性，编辑/theme/sample-blue/base.css文件，在.header{} 　　加入position: fixed;z-index:999999;　　position实现了固定，z-index 使导航

首先，我们将目光投向了CSS规范，我想很多人和我一样很快就想到了position属性，说到定位，我们很容易想到这个属性。这个属性一共有四个选项：static、relative、absolute、fixed。很高兴，我们在阅读了相关的注释后，我们大概能看到fixed是比较符合我们的需求的： fixed: 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可