创意企业推荐 锐志网络 橡树动画 求创科技 黑蚁互动 猪八戒威客网 关键字推荐: 上海网页设计 网站建设 签名设计 
 
搜索 竞赛 产业 论吧 作品集 创企同盟 设计招聘 酷站 矢量库 图片库 设计网址 教育   
首 页设计资讯大赛征集平面设计UI设计CG/动画工业设计建筑环境数码影像教程区设计访谈 精品欣赏会员作品集
>> 论坛发布优秀教程申请个人教程专区
推荐:经典素材资源
滚动新闻:[6-10]融于意,形于展!---52design作品集、设计师网上联展!

央视风云ACG制作人才认证实训

水晶石-EA游戏定向班正式开课

2010如何设计精彩人生

SiteServer CMS模板大赛

全国青年设计艺术双年展征稿
当前位置: 首页 >> 教程 >> HTML/CSS教程 >>正文
需要掌握的八个CSS布局技巧
在线投稿  - 素材基地 - 论坛讨论 - 原创作品集 - 查看更多相关内容
时 间:2008-1-24 11:11:11   作者:   来 源:52design.com   浏览:
1.若有疑问立即检测

  在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS 都有检测工具可用,请见 http://validator.w3.org 。请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误;我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减。

  2.使用浮动功能时记得适当清除指令

  浮动是个危险的功能,未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况,请先确定您的做法是正确的。请参阅Eric Meyer 在Complex Spiral Consulting Web 网站上的教学。

  3.边界重合时利用padding或border来避免

  您可能会为了一点不应该出现的空间而焦头烂额,或者您需要一点点空间时,怎样都挤不出来。如果您有用到margin,那么很容易产生边界的重合;Andy Budd在他的网站上解释了可能的做法。

  4.尝试避免同时对元素指定padding/border以及高度或宽度

  Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题,但如果母元素需要指定高度与宽度时,最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时,在母元素套用padding以达效果。

  5.不要依赖min-width/min-height

  Windows版IE并不支援两种语法。但是在某种程度下,windows版IE可以达到相当于min-width/min-height的效果,所以只要对IE做点过滤功能,即可达到您想要的结果。

  6.若有疑问,先减少百分比

  有时候某些错误会使50%+50%成为100.1%,使网页出现问题。这时请尝试将这些值改为49%,甚至49.9%。

  7.记住“TRouBLed”写法

  Border,margin与padding的简写语法有特定顺序,从上方开始顺时针方向转动:top,right,bottom,left. 所以margin:0 1px 3px 5px;的结果是上方无边界,右边1像素,以此类推。记住“TRouBLe”,您就不会弄错次序了。

  8.只要不是零的值,都要指定单位

  CSS需要您对每个font,Margin等各种值指定单位。(唯一的例外是line-height)


本文链接:


52design素材资源库52design图片库52design酷站营

我爱设计网www.52design.com
(在线编辑:angel) 】【打印】【关闭】【设计论坛】【设计师作品集
免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有异议,请联络本站!
转载要求:文章作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站地址,且不准打上各自站点的水印。

经典设计欣赏 设计关键字:VI 新锐 包装 装帧 海报 地产广告 画册 名片 标志 软件界面 ICO 网页
希腊zyme的平面设计欣赏
希腊zyme的平
万达·锦华城楼书设计
万达·锦华城楼书
seb平面设计欣赏
seb平面设计欣
极具特色的鞋店设计
极具特色的鞋店设
Berrymatch品牌VI形象设计
Berrymat
楼书设计欣赏盛世豪庭
楼书设计欣赏盛世
韩国站点 素材资源 艺术摄影 游戏娱乐 影视网站 建筑家居 FLASH站 旅游购物 明星网站
设计门户 优秀企业 时尚品牌 象素站点 数码通信 设计公司 汽车网站 国外优秀 儿童网站
个性展示 网站教学 工 作 室 学校教育 卡通漫画 文化艺术 体育运动 美容健身 食品饮料
当日文章推荐 查看更多相关内容
VI设计| Berrymatch品牌VI形象设计 [1-24]摄影佳作| Kristian Schuller时 [1-24]
地产广告| 沸城《五感》系列地产广告 [1-23]会展| 2008上海市建筑学会年会暨上海市建 [1-23]
画册设计| 西玛设计公司样本设计作品 [1-23]插画艺术| Siq2002插画作品二 [1-23]
画册设计| 微软亚洲研究院的画册样本设计 [1-23]平面设计| Deloitte 平面广告 [1-22]
插画艺术| 碧波写实唯美插画欣赏 [1-22]平面设计| L&P 平面广告欣赏 [1-21]
海报设计| 电影《The Accidental [1-21]插画艺术| 韩国Negrim人物插画欣赏 [1-21]
会员作品集推荐 查看更多推荐会员作品
平面作品 | 插画作品 | 网页作品 | 包装作品 | 软件UI | 室内设计 | 数码摄影作品 | 建筑环境 | 工业设计 | 其他
Farmer卡通设计劲舞妙脆角新的手绘作品4新的手绘作品2新势力社会实践登录界面
色摄影圣军团乐队死神吸

数据载入中...
视觉焦点
优秀作品在线投稿
Berrymatch品牌VI形象设计
Berrym
Kristian Schuller时尚摄影
Kristi
沸城《五感》系列地产广告
沸城《五感》
西玛设计公司样本设计作品
西玛设计公司

站点新入
Photoshop CS3制作火红的特效线框字
Photos
photoshop打造镶金钻石文字效果
photos
展区
2009-02-06
韩国站点 素材资源 艺术摄影 游戏娱乐 影视网站 建筑家居 FLASH站 旅游购物 明星网站 个性展示 网站教学 工 作 室 学校教育
设计门户 优秀企业 时尚品牌 象素站点 数码通信 设计公司 汽车网站 国外优秀 儿童网站 文化艺术 体育运动 美容健身 食品饮料
网站名称:apop
网站地址:http://www.apop.jp/
加入时间:2010-3-7 20:03:22
网站名称:logooftheday
网站地址:http://logooftheday.com/
加入时间:2010-3-7 20:02:36
网站名称:ust
网站地址:http://www.ust.ac.kr/
加入时间:2010-3-7 19:53:27
网站名称:tweety-shop
网站地址:http://www.tweety-shop.com/
加入时间:2010-3-7 19:46:47
网站名称:inwalldesign
网站地址:http://www.inwalldesign.com/
加入时间:2010-3-7 19:45:33
网站名称:the15reasons
网站地址:http://www.the15reasons.com/
加入时间:2010-3-7 19:44:27
关于本站 | 联系方式 | 商业服务 | 合作伙伴 | 站点地图 | 免责声明 | 版权声明 | 在线投稿