校内网涂鸦板代码修改之各个位置变动隐藏（三）

关键词：
  • 通过涂鸦板代码图，大家可以看见，我把左侧导航条向左移了，使页面的主体宽度增加了不少页面本来就不宽，一个导航占掉了120像素，下面还没东西了，其他东西又太挤了，页面资源浪费严重~~ 所以我们要移动它们！下面就拿左侧导航条的移动方法来举例说明如何移动页面元素到任意位置
    main.css中找到关于左侧导航的部分
    分析页面结构，可以知道，一个大的层包含各个按钮，每个按钮又是一个小层
    下面说说外面的大层
    #sidebar {
    width:120px;
    position:relative;
    left:-120px; /*左移120像素*/
    }
    可以看到导航的默认宽度是120像素，恩，咱们开始移位置
    第二句 position:relative;这句说明本标签[id为sidebar的]与其原本位置的关系
    下面可以看到有left:-120px; 这说明现在的位置与原来相比左移了120像素[正好移出去~]
    说到这就得详细说明一下position这个属性了[本讲的重点]
    position属性可以有这几个值static | absolute | fixed | relative，常用的也就absolute和relative这俩
    -absolute是说，本标签和其父标签的位置关系
    -relative是说，以自己原来的位置为基准，移动
    定义了位置关系后，我们就可以利用 left，right，top，bottom 这4个属性开始定位

您有网站或博客、百度、校内空间吗？使用Google AdSense，让它为你带来一笔意外的收入

玩转校内，使用FireFox，抵御流氓插件、抗病毒，冲浪更快更爽更安全

发表时间：2007-10-27 | 评论 (0) | 复制本页地址 | 打印

相关文章

发表评论/ 全部评论

  • 用户名： （新注册）
  • 密 码 ：
  • 匿名发表:

推荐文章