校内模板代码修改之各个位置变动隐藏

yhmjom858

通过涂鸦板代码图，大家可以看见，我把左侧导航条向左移了，使页面的主体宽度增加了不少页面本来就不宽，一个导航占掉了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个属性开始定位 ---------------------------------可爱的分割线----------------------------------------- 比如，我想相对于现在的位置，把这个层向左移100像素，上移50像素 那么可以这样写 position:relative; left:-100px; top:-50px; 如果我想右移、下移呢 那么写成 position:relative; left:100px; top:50px; 可以看到，left这些属性后面跟的值得意思是，距某边框的像素 left:-100px;就是距左边框向左100像素，那就是左移了~ 正100呢？就是距左边框向右100像素，就是右移 上下同理 ---------------------------------可爱的分割线----------------------------------------- 再比如，我想让B层与他的父标签[设为A层]的顶端对齐，左端对齐，怎么办呢？ position:absolute; left:0; top:0; 搞定，absolute就是与父标签相对的位置，既然相对父标签左和上都是0，那不就对齐了么~ 也可以移出去，比如left:-100px;这样就相对于A层左边框向左100像素 不过移出父标签时要注意一点，那就是确定父标签没有这么一句 overflow:hidden;这句的意思是，如果有内容出了本标签的范围，那么隐藏出去的部分 如果有，取消，或者改成overflow:visible;否则移出去的部分就消失了~~ 为什么要强调这点呢？大家来看移出父标签的最典型应用 看看左侧其他学校好友下面，大部分同学是不是都有很大的空白呢？ 我看许多人把留言板变宽放下面了，没问题，不过你也可以在那个空白的地方放些装饰物，比如挂件、时钟、天气预报、图片什么的 怎么做呢？ 在万恶的涂鸦板里面 把你要加的资源放入一个层里面，如下 <div>这里是你的资源</div> 然后移动吧~~移出万恶的涂鸦板吧~~ [先取消涂鸦板和右列的overflow，默认是hidden] 这里有两种方法 一是给层一个唯一的id 比如<div id=aaa>内容</div>，这个aaa随便起，只要在你的主页中没有重名就行 然后再css文件中用如下代码移动 #aaa{ position:XXXX; top:XXXpx; left:XXXpx;} OK 东西动了吧~ 二是直接在涂鸦板中这样写 <div style="position:XXXX; top:XXXpx; left:XXXpx;">内容</div> 两者一个意思

ok873544

偶的天啊!相当的，非常的，一定的，要回贴的。


















【AD】欢迎大家访问www.xiaonvsheng.net小女生