长沙网站建设|长沙网站制作|长沙牛企网络


联系牛企

当前位置:牛企主页 > 新闻中心 > 网站建设 >

网站建设:CSS网页布局高级技巧

作者:网站建设    来源:网站制作    
布局
  CSS至关重要的作用, CSS的设计初衷.
  CSS布局和几年前table横行时的布局又不太一样, 在结构化语义化的HTML文档后面, CSS在格式化文档的渲染效果, 把结构化文档用表现化语言来描述. 简而言之, 就是CSS不需要表现性标签!
  CSS布局技术依赖于三个基本概念: 定位, 浮动, margin操纵. 布局技术之间没有本质的区别, 相同一种布局让100个前端开发工程师来做, 可能就有100种方法.
居中
  在table时代, align和Valign相当的好用, 而在CSS中却没有简单实现的方法,所以在标准化刚刚开始推广的时候, 很多重构项目中居中问题变成了阻碍标准化进步的绊脚石.
  1. 自动外补丁水平居中
  一般情况下水平居中比较容易实现, 只需要给要居中的容器设定宽度, 以及自动水平外补丁就可以了.
  比如HTML如下:
  <body>
   <div class="wrapper">
   </div>
  </body>
  CSS如下:
  body{}
  .wrapper{width:760px;margin:0 auto;}
  很简单不是吗? 但是有点小问题... 我们亲爱的IE家族里, IE5.x和IE 6不支持自动外补丁, 但是同样幸运的是, IE将 text-align:center 理解为所有东西居中, 而不只是文本. 哈哈, 可以利用这个Bug.
  将CSS改为:
  body{text-align:center;}
  .wrapper{width:760px;margin:0 auto;text-align:left;}
  这里就用到了一种Hack,不过不会影响其他浏览器的Hack就是好Hack,呵呵, 就先这么用着吧~
  等等, 好像Netscape那边也出问题了, 用Netscape 6将窗口缩小到小于容器宽度时, 容器的左边就会跑到屏幕外边去了, 而且还不会有滚动条...万恶的浏览器大战啊...
  再来改改我们的CSS:
  body{min-width:760px;text-align:center;}
  .wrapper{width:760px;margin:0 auto;text-align:left;}
  这样就基本上ok了.
【牛企网络】专注于高品质网站建设,网站制作服务,专业从事做网站业务,营销型网站建设、网站制作,网站设计,网站推广,网络营销,网站优化等业务。公司奉行“优化服务,求实创新”的运营宗旨,不断追求技术领先、服务领先、业绩领先的发展目标!服务热线188-0740-2334

加牛企微信
送网络营销宝典
牛企二维码

关键词: 网站建设公司 | 网站建设 | 网站制作 | 网站设计 | 网络推广 | 网络公司 | 网站优化 | SEO| www.csniuqi.com|
Copyright 2008-2015 版权所有 长沙牛企文化传播有限公司 湘ICP备19012123号-1 湘ICP备19012123号-6 地址:湖南市岳麓区银盆岭中联重科17栋二单元504

【牛企网络】专注于高品质网站建设服务,专业从事网站建设、网站制作、网站设计、企业网站建设、手机网站建设、营销型网站建设等。为做网站客户提供优质的价格保证!网络公司

在线客服系统