天府星空网络科技成都网站制作公司，专业从事成都网站建设、成都网页制作、成都网站设计以精深技术为核心、以专业队伍为支撑。致力于为成都政府网站建设、成都公司网站建设、成都学校网站建设等提供高技术含量的成都网站设计服务。凭借多年的成都网页设计成功经验，公司已拥有数百例经典网站案例，是一家正规经营，诚实守信的专业成都网站建设公司
您当前的位置：天府星空网络科技有限公司! → 网站知识 → 网站建设知识 → 成都网站设计 → 知识内容

学习CSS制作网页总结的一些经验

作者：佚名  来源：本站整理  发布时间：2008-1-23 9:37:57

      绝对定位（absolute）

      10：float浮动：记住：“在标准浏览器中 浮动元素脱离了文档流 不占据外围容器空间” 明白了这点 你就会明白为什么IE和FIREFOX下表现的不同了。IE5.5、IE6浮动元素依然占据外围容器空间

      例如：怎么在IE下feeter正常 在firefox下就跑上去了呢？

      IE下 当float和text-align定义的方向一样时 出现双倍错误：

以下是引用片段：
      select{float:left;text-align:left;margin:0 10px;} 

      实际左边margin-left：20px；FF/OP：10px 解决：加上display：inline；

      11：彻底理解 “清除浮动”clear

      clear：none、left、right、both、

      表示当前框元素哪些边不应该挨着浮动框

      理解了10中float在不同浏览器下的表现 你也就知道如何去使用清楚了。

      12：背景图像的定位：只谈百分比 background:url(image-url.gif)no-repeat 20% 30% 20%：将图像X轴20%处与父元素X轴20%处重合 Y同理 top=0% bottom=100% left=0% right=100% center=50%

      13：滑动门/

      左右两个DIV 背景分别定义 一般左背景图像比较长; 左背景定位：left center 右背景定位：right center

      外部控制容器宽度一般小于等于两个背景和 这样当内容动态变化时候 右背景图像便感觉像在左背景图像上滑动，故名。

      这样也可以实现：<div id="nav"><ul><li><a href="index.html"><span>首页</span></a></li> </ul></div>

以下是引用片段：
css： 
#nav a{float:left;background:url("../images/navLeft.gif") no-repeat left top;padding:0;text-decoration:none; cursor:hand;}
#nav a span {float:left;display:block;background:url("../images/navRight.gif") no-repeat right top;padding:5px 36px 5px 40px;color:#ffffff} 

      原理相似，注意背景图像定位。

      14:完美的居中布局：

以下是引用片段：
      body{text-align：center；mini-width：760px；}
      div#wrapper{margin：0 auto；text-align：left；width：750px；} 

      mini-width IE并不认识 这是为老浏览器准备的，只是这个值比你需要的实际页面大就OK

      15:小图标有时会给页面增色不少 用前记得规划好 整到一张大图片上 这样可以减少服务器请求次数。

上一页  [1] [2] 

【公司简介】：
   天府星空网络科技成都网站制作公司，专业从事成都网站建设 成都网页制作 成都网站设计以精深技术为核心、以专业队伍为支撑。致力于为成都政府网站建设、成都公司网站建设、成都学校网站建设等提供高技术含量的成都网页设计服务。
   公司始终以不懈的努力、更高的目标来要求自己。凭借多年的成都网页设计成功经验，公司已拥有数百例经典网站成功案例，是正规的成都网站建设公司。
   成都网站建设的专业服务商，强大的成都网页制作技术团队，在网站设计等方面始终保持领先地位，并获得了网页制作公司业界的广泛赞誉和认同。公司重视网页制作质量，打造成都地区网站制作公司知名品牌，以优秀的网站设计技术，创一流的成都网站建设作品。建网站就找天府星空，助您马到成功！