bmycn 的个人博客 http://bmycn.blogcn.com 又一个 WordPress 站点 Fri, 07 Oct 2011 16:40:56 +0000 en hourly 1 http://wordpress.org/?v=3.0 CSS半透明层的实现非透明文字层和半透明图片层立体效果 http://bmycn.blogcn.com/articles/css%e5%8d%8a%e9%80%8f%e6%98%8e%e5%b1%82%e7%9a%84%e5%ae%9e%e7%8e%b0%e9%9d%9e%e9%80%8f%e6%98%8e%e6%96%87%e5%ad%97%e5%b1%82%e5%92%8c%e5%8d%8a%e9%80%8f%e6%98%8e%e5%9b%be%e7%89%87%e5%b1%82%e7%ab%8b.html http://bmycn.blogcn.com/articles/css%e5%8d%8a%e9%80%8f%e6%98%8e%e5%b1%82%e7%9a%84%e5%ae%9e%e7%8e%b0%e9%9d%9e%e9%80%8f%e6%98%8e%e6%96%87%e5%ad%97%e5%b1%82%e5%92%8c%e5%8d%8a%e9%80%8f%e6%98%8e%e5%9b%be%e7%89%87%e5%b1%82%e7%ab%8b.html#comments Fri, 07 Oct 2011 16:40:56 +0000 ericy http://bmycn.blogcn.com/?p=181  CSS半透明层的实现，主要就是灵活运用filter中alpha的效果，使两层之间产生立体效果。

 在本示例中，最低层的是一张图片，上边是一个透明度被定义为60%的Div层，层内是文字，因为上面的曾非100%透明，因此可以看到下层的图片，也就是文字层盖住的地方半透明显示下面图片，没用盖住的地方，还是完整显示下面的图片，形成立体效果。

 例子代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> CSS半透明层的实现</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<style>
#container {
position: absolute;
top: 20px;
left: 20px;
width: 400px;
height: 300px;
background: url(images/pic.jpg) no-repeat;
}
#container .textblock {
filter: alpha(opacity=60);
opacity: 0.6;
margin-top: 50px;
margin-left: 50px;
width: 280px;
background: #ffffff;
border: 1px solid #007101;
padding: 0.5em;
font: 80%/1.6 Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id="container">
<div>
<p> CSS半透明层的实现，主要就是灵活运用filter中alpha的效果，使两层之间产生立体效果。
</p>
<p>在本示例中，最低层的是一张图片，上边是一个透明度被定义为60%的Div层，层内是文字，因为上面的曾非100%透明，因此可以看到下层的图片，也就是文字层盖住的地方半透明显示下面图片，没用盖住的地方，还是完整显示下面的图片，形成立体效果。
</p>
</div>
</div>
</body>
</html>

]]> http://bmycn.blogcn.com/articles/css%e5%8d%8a%e9%80%8f%e6%98%8e%e5%b1%82%e7%9a%84%e5%ae%9e%e7%8e%b0%e9%9d%9e%e9%80%8f%e6%98%8e%e6%96%87%e5%ad%97%e5%b1%82%e5%92%8c%e5%8d%8a%e9%80%8f%e6%98%8e%e5%9b%be%e7%89%87%e5%b1%82%e7%ab%8b.html/feed 0 [转]2011年网页设计趋势分析与预测 http://bmycn.blogcn.com/articles/%e8%bd%ac2011%e5%b9%b4%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e8%b6%8b%e5%8a%bf%e5%88%86%e6%9e%90%e4%b8%8e%e9%a2%84%e6%b5%8b.html http://bmycn.blogcn.com/articles/%e8%bd%ac2011%e5%b9%b4%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e8%b6%8b%e5%8a%bf%e5%88%86%e6%9e%90%e4%b8%8e%e9%a2%84%e6%b5%8b.html#comments Fri, 12 Aug 2011 06:23:13 +0000 ericy http://bmycn.blogcn.com/?p=180         设计与开发之间本有一线界限，但当时代步入又一个十年，这个线变得更加模糊甚至感觉不到它的存在。使用PS设计网页版面，足矣?或许五年前是吧!现在的互联网用户要求越来越多。没有内涵的华丽很快就会被丢弃。如果你追求华而不实的设计，那么相信你很快会被时代遗弃。2011年不再属于单纯的华丽而是注重功能。新的一年或者未来十年的设计趋势是响应设计(responsive design)、持续联系(constant connection)和虚拟现实(virtual reality)。

　　作为设计师的你，2011年会作神马打算?真正的设计师设计的东西不是为了哗众取宠而是在艺术和功能上做到两全其美。。肤浅的赞赏易得肤浅的设计也易被遗忘。出色的设计师犹如造梦师，给用户创造一个梦境，让用户感觉到如此真实而不知道自己是在梦中。这样的梦需要几个元素：优秀的配色，直观的设计，良好的交互性和快的响应速度。此外，永远不要低估简约的力量。2011年，你的设计不但要考虑笔记本、台式电脑，还要考虑智能手机、上网本和平板电脑等设备。你都准备好了吗?

　　2011年网页设计趋势有何变化?一起关注11个网页设计趋势热点：

　　1. 更多的CSS3 + HTML5

　　这是期待已久的事情。在过去的几年设计师已经开始关注和使用CSS3+HTML5，但在2011年CSS3+HTML5将会得到更广泛的应用。网页设计师最终会抛弃Flash。Flash不再是昔日的王者，新技术(指CSS3+HTML5)将会取而代之。2011年，Flash渐行渐远，魔术师“HTML5”成为舞台的主角：

　　

　　

　　当然，说HTML5代替Flash为时还早。从上面的两幅截图你可以知道Flash和HTML5还是有差距的。因此，2011年两者会各自保持属于自己的位置。不过2010年以前网页设计师滥用Flash的现象会慢慢减少。现在很少设计师会整个网站都是用Flash设计，他们会在一些可用的地方使用HTML5替代Flash，使网站变得简单运行更快速。然而，目前HTML5还不能够取代Flash，Flash的某些效果HTML5暂时还不能够实现。

　　然而最值得人兴奋的是CSS3的应用越来越广，在某些地方甚至超越PS(Adobe表示有鸭梨)，因为利用CSS3来实现文字阴影、图片圆角和图片透明实在是easy job。如果你还不会，是时候去了解CSS3和HTML5。

　　2. 简单的配色方案

　　没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式。不要老是黑白灰神马的，太不给力了。多点考虑绿、黄或者红作为你的网页主色调。当然，颜色最好保持使用2到3种。调整颜色的透明度，或许会给你意想不到的效果。比如：

　　

　　只是简单的绿色，通过调节透明度设计出如此美观的Twitter可视化工具。可要知道：这个网页只是用了XHTML/CSS和Javascript，给力吧!

　　

　　红色绝对经典，如果配色做得好给人的视觉冲击就更……上面的网站独特的红色和易友好的文字设计让人不得不为之折服。

　　3. 移动互联网时代的到来

　　智能手机，ipad和上网本随处可见，OMG，2011年这个现在将会更加明显。这意味着你的设计需要考虑更多的设备。

　　创建适合移动设备的网站不是简单地在原有的设计去掉华丽的元素，那将会是没有灵魂的设计。尽管在原有的设计再设计一个支持移动设备网站是件痛苦的事情。幸运的是，新的技术让一切变得更简单。

　　在使用CSS3的情况下，设计移动网页方便多了。最重要的是你可以修改一个CSS文件完成整个网站修改以符合用户使用不同设备进行浏览网页。

　　你也可以设计一个移动设备专属的网站，但相信那个网站不久还是要改版的，以现在科技产品的发展速度来看。越来越多的移动网站包括原始网站的浏览选项。如果你不提供这个选项或者你的原始网站没有针对移动网络标准优化，那你并未准备好迎接移动互联网时代的到来。据相关预测，智能手机销量将会超越个人PC。赶快准备好，迎接移动设备大军的来临。

　　4. Parallax Scrolling

　　先来解释下Parallax Scrolling，Parallax scrolling 是让多层背景以不同的速度移动，形成运动视差 3D 效果，虽然纯属视觉效果，但在内容滚动时形成的视觉体验仍然非常出色。2011年的网页设计趋势热点就是要创造这样的深度视觉效果。Parallax Scrolling可以通过一些简单的CSS技巧或jQuery插件来实现(示范站点：站点1 站点2)。Parallax scrolling运用于网页设计的次要元素中可以起到很好的效果：如header、footer或者背景。不过最好不要运用于网站导航，那显得有点不伦不类。

　　

　　Old Pulteney Row to the Pole 在网站背景使用了Parallax Scrolling特效，打开该网站然后往下拉即可看到效果。

　　5. 设计需考虑更多的触屏设备

　　触屏技术应用越来越广泛，触屏设备随处可见。这意味着，你的导航设计不再只是鼠标导航，你必须要要考虑你的设计适合触屏设备。请问你的设计做到指尖导航了吗?

　　作为设计师，我们更喜欢鼠标。当鼠标悬停的时候链接会变得高亮，然而触屏没有所谓的悬停。你将会在设计中如何向触屏设备访客展示链接?

　　同样，如何才能做到方便你的游客仔细阅读您的网站?这可能在浏览器标准上存在争议，或者水平滚动触屏可能更加合适。将网站设计类似于杂志的布局更有利于游客浏览你的网站。

　　最后，你必须考虑在你的网页设计中使用流体布局(liquid layouts)。2011年，你需要处理的重点不再是屏幕分辨率问题，而是如何做到使访客从垂直到水平阅读你的网站都会清晰。你的设计必须做到灵活以应付任何的挑战。否则你将会成为过去式。

　　

　　Baby sees the iPad Magic, Copyright Steve Paine, Flickr

　　6. 深度判析

　　深度判析是关于在网页设计使用维数，这样可以使你的网页变得更加真实。如果运用得恰当，那将会是一个虚拟的3D效果，就像3D电影阿凡达那样。尽管3D技术还没有去到网站设计，你仍然尝试使用维数进行设计。

　　

　　Plántate提供了一个可旋转的3D地球，灵活利用阴影和层等手段。

　　

　　Jordon活动页，3D元素清晰简单，设计非常醒目。(貌似已经撤掉)

　　7. 大背景图

　　大背景图的网页设计应用在2011年将会更加明显。这些背景图像一般是高分辨率，覆盖这个网站。高清照片是一个迅速抓住你的读者的好方式，可以产生极具冲击力的视觉效果-游客的视线会不自觉地落在宽大的背景上。

　　当然背景图的色彩、内容等都十分讲究，任何情况下都不要破坏用户的体验，不然再漂亮的照片也是枉然。图片类型趋向于一些比较柔和、略带透明的一类，不要影响到网站文字的阅读，讲究协调，易于阅读。

　　

　　上面的网站使用了高分辨率的图片作为网站的背景，网站主色调是黄色。

　　

　　This site adds playful animation with its grand scale imagery. Warning: auto-play music.

　　8. 不拘谨于顶级域名

　　严格意义上这一点与网页设计无关，但这一点也是发展的趋势，将出现更多创造性的域名。.com域名的吸引力越来越少，主要是你很难再找到一个比较短的.com域名。2011年人们开始将视线慢慢转移到.me、.co和.cc等身上。想想域名的发展，抢先一步，不然你很可能再次错失先机。

　　

　　.me 用在个人展品陈列页、博客是非常不错的。

　　

　　另一个.me域名的示范

　　9. QR: Quick Response

　　如果你注意现在越来越多的名片、杂志或者其他地方出现方形条形码，证明你已经看到2011年的这个趋势热门。但它跟网页设计何干呢?实在匪夷所思。

　　这个方形的条形码被称为QR，全称为Quick Response(在“QR Code读取器QuickMark”介绍过)。使用你的手机拍摄一张唯一的条形码的照片，像魔术一样，手机上读取QR的软件就会打开条形码相关的网站。最美妙的事情是你可以将QR应用到很多地方。应用QR到你的网站，目的是让浏览者拥有一个你的移动网页的快捷方式。你还可以通过在您的网址上放置一个特殊的推介代码QR追踪你的访客。 哈哈，你完全可以使用QR作为你的头像，然后到别人的网站留言、评论。2011年的移动媒体优势更加凸显，而利用这点优势的网页设计是最明智的选择也是将来的发展趋势。

　　

　　上面是软矿博客的QR . 如果你也想创建一个，猛点击这里。

　　10.缩略图设计(Thumbnail Design)

　　Google已经向浏览用户推出它们的浏览预览技术。过去我们只能通过点击链接才能看到网页的内容，现在你只需点击放大镜然后将鼠标悬停在链接上就可以预览该链接的网页内容。

　　如果你的设计是基于Flash，会存在这样的一个问题，预览将无法显示你的设计元素。

　　2011年的一般互联网用户变得更加精明，他们更希望看到更多人性化的导航设计。

　　

　　11. 持续联系/ Life Stream

　　Lifestreaming, 一种在线记录个人日常活动的网络应用，包括直接通过视频feed或通过聚焦一个人的网络在线内容，比如博客日志，在社会性网络上面的更新，在线相册，聊天内容甚至只是一些喜欢的网站的链接等等。

　　最后一点，不是最不重要的一点，是网页设计更加注重人与人之间持续联系，如Life Stream。互联网本身是原始的，枯燥无味的，是人类通过这个开放的平台分享他们的一切才变得多姿多彩。将来人们还会而且加强如lifestreaming的形式进行人与人之间的交流互动。作为网页设计师，你必须了解这个趋势和应对这个趋势。

　　2011年，个人博客在Twitter feeds更活跃(不只是连接到Twitter页面的链接)，人们会通过Foursquare互相传递即时信息，where are u and what are u doing。毋庸置疑，2011年将会带我们走进一个更交心的互联网时代。

　　

　　个人网站，使用了 lifestreaming。

　　

　　一个商业网站，在一个页面上综合大量信息。

     （来源:websbook 作者:websbook）

]]> http://bmycn.blogcn.com/articles/%e8%bd%ac2011%e5%b9%b4%e7%bd%91%e9%a1%b5%e8%ae%be%e8%ae%a1%e8%b6%8b%e5%8a%bf%e5%88%86%e6%9e%90%e4%b8%8e%e9%a2%84%e6%b5%8b.html/feed 0 扬华素质网辅导员博客扬华博客系统首页 个人博客首页 http://bmycn.blogcn.com/articles/%e6%89%ac%e5%8d%8e%e7%b4%a0%e8%b4%a8%e7%bd%91%e8%be%85%e5%af%bc%e5%91%98%e5%8d%9a%e5%ae%a2%e6%89%ac%e5%8d%8e%e5%8d%9a%e5%ae%a2%e7%b3%bb%e7%bb%9f%e9%a6%96%e9%a1%b5-%e4%b8%aa%e4%ba%ba%e5%8d%9a%e5%ae%a2.html http://bmycn.blogcn.com/articles/%e6%89%ac%e5%8d%8e%e7%b4%a0%e8%b4%a8%e7%bd%91%e8%be%85%e5%af%bc%e5%91%98%e5%8d%9a%e5%ae%a2%e6%89%ac%e5%8d%8e%e5%8d%9a%e5%ae%a2%e7%b3%bb%e7%bb%9f%e9%a6%96%e9%a1%b5-%e4%b8%aa%e4%ba%ba%e5%8d%9a%e5%ae%a2.html#comments Thu, 04 Aug 2011 08:59:31 +0000 ericy http://bmycn.blogcn.com/?p=174  

 

 

 作品名称：扬华素质网辅导员博客扬华博客系统首页 个人博客首页

设计者：ericy

时间：2010年12月

说明：信息发布管理、业务管理系统

演示地址：http://blog.yanghua.net/

备注：首页效果浓缩图

]]> http://bmycn.blogcn.com/articles/%e6%89%ac%e5%8d%8e%e7%b4%a0%e8%b4%a8%e7%bd%91%e8%be%85%e5%af%bc%e5%91%98%e5%8d%9a%e5%ae%a2%e6%89%ac%e5%8d%8e%e5%8d%9a%e5%ae%a2%e7%b3%bb%e7%bb%9f%e9%a6%96%e9%a1%b5-%e4%b8%aa%e4%ba%ba%e5%8d%9a%e5%ae%a2.html/feed 0 界面设计的三大原则及细节分析 http://bmycn.blogcn.com/articles/%e7%95%8c%e9%9d%a2%e8%ae%be%e8%ae%a1%e7%9a%84%e4%b8%89%e5%a4%a7%e5%8e%9f%e5%88%99%e5%8f%8a%e7%bb%86%e8%8a%82%e5%88%86%e6%9e%90.html http://bmycn.blogcn.com/articles/%e7%95%8c%e9%9d%a2%e8%ae%be%e8%ae%a1%e7%9a%84%e4%b8%89%e5%a4%a7%e5%8e%9f%e5%88%99%e5%8f%8a%e7%bb%86%e8%8a%82%e5%88%86%e6%9e%90.html#comments Thu, 11 Nov 2010 00:00:00 +0000 ericy http://bmycn.blogcn.com/diary,34093942.shtml 人和机器的互动过程(Human Machine Interaction)中，有一个层面，即我们所说的界面(interface)。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面是用户与程序沟通的唯一途径，要能为用户提供方便有效的服务.。
用户界面设计的三大原则是：置界面于用户的控制之下、减少用户的记忆负担、保持界面的一致性。详细说来有以下几点。  

1.简易性  

界面的简洁是要让用户便于使用、便于了解、并能减少用户发生错误选择的可能性。  

2.用户语言  

界面中要使用能反应用户本身的语言，而不是游戏设计者的语言。  

3.记忆负担最小化  

人脑不是电脑，在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆极不稳定、有限，24小时内存在25％的遗忘率。所以对用户来说，浏览信息要比记忆更容易。  

4.一致性  

是每一个优秀界面都具备的特点。界面的结构必须清晰且一致，风格必须与游戏内容相一致。  

5.清楚  

在视觉效果上便于理解和使用。  

6.用户的熟悉程度  

用户可通过已掌握的知识来使用界面，但不应超出一般常识。  

7.从用户的观点考虑  

想用户所想，做用户所做。用户总是按照他们自己的方法理解和使用。  

通过比较两个不同世界(真实与虚拟)的事物，完成更好的设计。如：书籍对比竹简。  

8.排列  

一个有序的界面能让用户轻松的使用。  

9.安全性  

用户能自由的作出选择，且所有选择都是可逆的。在用户作出危险的选择时有信息介入系统的提示。  

10.灵活性  

简单来说就是要让用户方便的使用，但不同于上述。即互动多重性，不局限于单一的工具(包括鼠标、键盘或手柄)。  

11.人性化  

高效率和用户满意度是人性化的体现。应具备专家级和初级玩家系统，即用户可依据自己的习惯定制界面，并能保存设置。  

本文链接：http://www.blueidea.com/design/doc/2010/8088.asp　   

 

]]> http://bmycn.blogcn.com/articles/%e7%95%8c%e9%9d%a2%e8%ae%be%e8%ae%a1%e7%9a%84%e4%b8%89%e5%a4%a7%e5%8e%9f%e5%88%99%e5%8f%8a%e7%bb%86%e8%8a%82%e5%88%86%e6%9e%90.html/feed 0 西南交通大学研究生学术论坛 http://bmycn.blogcn.com/articles/%e8%a5%bf%e5%8d%97%e4%ba%a4%e9%80%9a%e5%a4%a7%e5%ad%a6%e7%a0%94%e7%a9%b6%e7%94%9f%e5%ad%a6%e6%9c%af%e8%ae%ba%e5%9d%9b.html http://bmycn.blogcn.com/articles/%e8%a5%bf%e5%8d%97%e4%ba%a4%e9%80%9a%e5%a4%a7%e5%ad%a6%e7%a0%94%e7%a9%b6%e7%94%9f%e5%ad%a6%e6%9c%af%e8%ae%ba%e5%9d%9b.html#comments Tue, 12 Oct 2010 00:00:00 +0000 ericy http://bmycn.blogcn.com/diary,33562687.shtml  
200903研究生学术论坛首页效果图_nEO_IMG


作品名称：西南交通大学研究生学术论坛


设计者：ericy


时间：2009年3月


说明：信息发布管理


备注：首页效果浓缩图

]]> http://bmycn.blogcn.com/articles/%e8%a5%bf%e5%8d%97%e4%ba%a4%e9%80%9a%e5%a4%a7%e5%ad%a6%e7%a0%94%e7%a9%b6%e7%94%9f%e5%ad%a6%e6%9c%af%e8%ae%ba%e5%9d%9b.html/feed 0 扬华素质网班级管理系统及班级主网站首页蓝色调模板 http://bmycn.blogcn.com/articles/%e6%89%ac%e5%8d%8e%e7%b4%a0%e8%b4%a8%e7%bd%91%e7%8f%ad%e7%ba%a7%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f%e5%8f%8a%e7%8f%ad%e7%ba%a7%e4%b8%bb%e7%bd%91%e7%ab%99%e9%a6%96%e9%a1%b5%e8%93%9d%e8%89%b2%e8%b0%83.html http://bmycn.blogcn.com/articles/%e6%89%ac%e5%8d%8e%e7%b4%a0%e8%b4%a8%e7%bd%91%e7%8f%ad%e7%ba%a7%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f%e5%8f%8a%e7%8f%ad%e7%ba%a7%e4%b8%bb%e7%bd%91%e7%ab%99%e9%a6%96%e9%a1%b5%e8%93%9d%e8%89%b2%e8%b0%83.html#comments Tue, 12 Oct 2010 00:00:00 +0000 ericy http://bmycn.blogcn.com/diary,33562848.shtml
201007扬华素质网班级管理系统首页效果图_nEO_IMG

201007扬华素质网班级管理系统班级主网址首页效果图_nEO_IMG
 


作品名称：扬华素质网班级管理系统及班级主网站首页蓝色调模板


设计者：ericy


时间：2010年7月


说明：信息发布管理、业务管理系统


备注：首页效果浓缩图

]]> http://bmycn.blogcn.com/articles/%e6%89%ac%e5%8d%8e%e7%b4%a0%e8%b4%a8%e7%bd%91%e7%8f%ad%e7%ba%a7%e7%ae%a1%e7%90%86%e7%b3%bb%e7%bb%9f%e5%8f%8a%e7%8f%ad%e7%ba%a7%e4%b8%bb%e7%bd%91%e7%ab%99%e9%a6%96%e9%a1%b5%e8%93%9d%e8%89%b2%e8%b0%83.html/feed 0 [转] DIV+CSS常见错误汇总 http://bmycn.blogcn.com/articles/%e8%bd%ac-divcss%e5%b8%b8%e8%a7%81%e9%94%99%e8%af%af%e6%b1%87%e6%80%bb.html http://bmycn.blogcn.com/articles/%e8%bd%ac-divcss%e5%b8%b8%e8%a7%81%e9%94%99%e8%af%af%e6%b1%87%e6%80%bb.html#comments Wed, 25 Aug 2010 00:00:00 +0000 ericy http://bmycn.blogcn.com/diary,33699977.shtml 应用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误：


CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一，通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。


　　1. 检查HTML元素是否有拼写错误、是否忘记结束标记


　　即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。


　　2. 检查CSS是否正确


　　检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。


　　3. 确定错误发生的位置


　　如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。


　　4. 利用border属性确定出错元素的布局特性


　　使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。


　　5. float元素的父元素不能指定clear属性


　　MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。


　　6. float元素务必指定width属性


　　很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。另外指定元素时尽量使用em而不是px做单位。


　　7. float元素不能指定margin和padding等属性


　　IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。


　　8. float元素的宽度之和要小于100%


　　如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。


　　9. 是否重设了默认的样式?


　　某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。


　　10. 是否忘记了写DTD?


　　如果无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD：


以下是引用片段：


　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


来源:http://www.002pc.com/master/College/Page/css/2008-10-06/2118.html

]]> http://bmycn.blogcn.com/articles/%e8%bd%ac-divcss%e5%b8%b8%e8%a7%81%e9%94%99%e8%af%af%e6%b1%87%e6%80%bb.html/feed 0 西华升腾科技有限公司 http://bmycn.blogcn.com/articles/%e8%a5%bf%e5%8d%8e%e5%8d%87%e8%85%be%e7%a7%91%e6%8a%80%e6%9c%89%e9%99%90%e5%85%ac%e5%8f%b8.html http://bmycn.blogcn.com/articles/%e8%a5%bf%e5%8d%8e%e5%8d%87%e8%85%be%e7%a7%91%e6%8a%80%e6%9c%89%e9%99%90%e5%85%ac%e5%8f%b8.html#comments Thu, 12 Aug 2010 00:00:00 +0000 ericy http://bmycn.blogcn.com/diary,33562659.shtml
200807西华升腾科技有限公司首页效果图_nEO_IMG
 


作品名称：西华升腾科技有限公司


设计者：ericy


时间：2008年7月


说明：信息发布管理


备注：首页效果浓缩图

]]> http://bmycn.blogcn.com/articles/%e8%a5%bf%e5%8d%8e%e5%8d%87%e8%85%be%e7%a7%91%e6%8a%80%e6%9c%89%e9%99%90%e5%85%ac%e5%8f%b8.html/feed 0 自由概念 http://bmycn.blogcn.com/articles/%e8%87%aa%e7%94%b1%e6%a6%82%e5%bf%b5-3.html http://bmycn.blogcn.com/articles/%e8%87%aa%e7%94%b1%e6%a6%82%e5%bf%b5-3.html#comments Thu, 12 Aug 2010 00:00:00 +0000 ericy http://bmycn.blogcn.com/diary,33562729.shtml


200906自由概念首页效果图_nEO_IMG
 

作品名称：自由概念

设计者：ericy

时间：2009年6月

说明：信息发布管理（ericy个人网站，文学、设计）

备注：首页效果浓缩图

 

]]> http://bmycn.blogcn.com/articles/%e8%87%aa%e7%94%b1%e6%a6%82%e5%bf%b5-3.html/feed 0 西藏自治区中小企业信息服务平台 http://bmycn.blogcn.com/articles/%e8%a5%bf%e8%97%8f%e8%87%aa%e6%b2%bb%e5%8c%ba%e4%b8%ad%e5%b0%8f%e4%bc%81%e4%b8%9a%e4%bf%a1%e6%81%af%e6%9c%8d%e5%8a%a1%e5%b9%b3%e5%8f%b0.html http://bmycn.blogcn.com/articles/%e8%a5%bf%e8%97%8f%e8%87%aa%e6%b2%bb%e5%8c%ba%e4%b8%ad%e5%b0%8f%e4%bc%81%e4%b8%9a%e4%bf%a1%e6%81%af%e6%9c%8d%e5%8a%a1%e5%b9%b3%e5%8f%b0.html#comments Thu, 12 Aug 2010 00:00:00 +0000 ericy http://bmycn.blogcn.com/diary,33562762.shtml
200910西藏自治区中小企业信息服务平台首页效果图_nEO_IMG
 


作品名称：西东篱把酒黄昏后藏自治区中小企业信息服务平台


设计者：ericy


时间：2009年10月


说明：信息发布管理、业务管理系统


备注：首页效果浓缩图

]]> http://bmycn.blogcn.com/articles/%e8%a5%bf%e8%97%8f%e8%87%aa%e6%b2%bb%e5%8c%ba%e4%b8%ad%e5%b0%8f%e4%bc%81%e4%b8%9a%e4%bf%a1%e6%81%af%e6%9c%8d%e5%8a%a1%e5%b9%b3%e5%8f%b0.html/feed 0