乾坤大挪移 - Jimdo元素的绝对定位

     Jimdo有很多优点,它的自定义模板,就非常令人欣赏,这也是好多朋友玩它的兴趣点之一。不过,按Jimdo要求做出来的模板,所有的页面都是一个模样,显得比较呆板。其实,Jimdo也可以做出相对有点变化的页面,这就是本文要谈的绝对定位。

     从布局上说,对于个人网站,二分栏的结构是比较合理的,这是因为,Jimdo的广告盒下方,是可以在页面上直接编辑的,将它放到侧栏里,它的下方,就是一个编辑区,放些广告、最新内容等等,都非常方便,模板里也不会搞的很复杂。不过,这里存在一个问题,就是侧栏内容和主编辑区内容的搭配问题。因为广告盒下方的内容是所有页面都共用的,而主编辑区内容是每个页面都不一样的。如果侧栏内容太多,很多页面的主内容区会太空旷,反之,侧栏空白太多。

     本文要探讨的,就是只给侧栏加些适当的内容,然后通过乾坤大挪移-绝对定位的方法,在一些主要的页面,给侧栏下方添加一些不同的内容。这样,整个网站看上面就会丰富多彩一些。     
     以本站为例,右面的侧栏,我在Jimdo广告盒下方添加了Goolge自定义搜索条和最近博文,而在首页和其他一些主页面上(如友情链接、站长手记等),用绝对定位的方法,又添加了不同的内容。当然,这里只是起个抛砖引玉作用,感兴趣的朋友,可以根据这个原理,自由发挥。
     关于CSS的定位,简单的理解,相对定位就是相对于自己应该在的位置的定位,比如“left:1px”,就是相对于正常位置右移1个像素,而绝对定位,是相对于浏览器窗口的定位,“left:1px”就是在浏览器窗口距离左边1像素的位置。CSS的定位问题,请参阅文后引用及有关教材,这里只给出一些可行的代码。
     比如:

     <div style="position: absolute; left: 640px; width:280px;  top:1080px;">
     html代码
     </div>

     它的意思是:将“html代码“定位到距浏览器左边640px、上方1080px的地方,它的宽度是280px。这也是本站首页“友情链接”的实际代码。
     如果仅仅采用以上代码,当改变浏览器窗口大小,或者显示的分辨率不同时,以上元素会产生位移现象,解决的方法是在CSS中的container下面加入“position: relative; top: 0px;left:0px;”(无引号)代码。

     很明显,用本文介绍的方法,我们可以将一个元素添加到任何想放置的地方。

     友情提醒:请不要用这个方法遮盖Jimdo广告,否则后果自负。

附:CSS定位(摘自网络)

 

     CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。
  定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然,这个功能非常强大,也很让人吃惊。要知道,用户代理对 CSS2 中定位的支持远胜于对其它方面的支持,对此不应感到奇怪。
  另一方面,CSS1 中首次提出了浮动,它以 Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位,不过,它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。

 

一切皆为框
  div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容 ,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。
  您可以使用 display 属性 改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素(比如 <a> 元素)表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。
  但是在一种情况下,即使没有进行显式定义,也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素(比如 div)的开头。即使没有把这些文本定义为段落,它也会被当作段落对待:


<div>
some text
<p>Some more text.</p>
</div>

  在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联。
  块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式,因为没有可以应用样式的地方(注意,行框和行内框是两个概念)。但是,这有助于理解在屏幕上看到的所有东西都形成某种框。

CSS 定位机制
  CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
  除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 X(HTML) 中的位置决定。
  块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
  行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box) ,行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。
  在下面,我们会为您详细讲解相对定位、绝对定位和浮动。
CSS position 属性
  通过使用 position 属性 ,我们可以选择 4 中不同类型的定位,这会影响元素框生成的方式。
  position 属性值的含义:
  static
  元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
  relative
  元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
  absolute
  元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
  fixed
  元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
  提示: 相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。


CSS 定位属性
  CSS 定位属性允许你对元素进行定位。
  属性              描述
  position         把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
  top               定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
  right             定义了定位元素右外边距边界与其包含块右边界之间的偏移。
  bottom          定义了定位元素下外边距边界与其包含块下边界之间的偏移。
  left               定义了定位元素左外边距边界与其包含块左边界之间的偏移。
  overflow        设置当元素的内容溢出其区域时发生的事情。
  clip               设置元素的形状。元素被剪入这个形状之中,然后显示出来。
  vertical-align  设置元素的垂直对齐方式。
  z-index          设置元素的堆叠顺序。

Write a comment

Comments: 26
  • #1

    十W个WHY (Thursday, 01 April 2010 14:40)

    你好,我有个问题想问下啊,JIMDO免费版有没有存储图片的地方啊,
    其实我是想能够取得图片外链地址.

  • #2

    网上邻居 (Friday, 02 April 2010 22:31)

    十W个WHY: 你好!
    免费版的jimdo有500M的空间,只要使用jimdo的相册元素,在任何页面上都可以上传图片的。至于能不能用于外链,这个要问jimdo官方。

  • #3

    牧场的新手 (Saturday, 03 April 2010 14:37)

    图片外链也不一定要用Jimdo啊,可以用网盘吧……

  • #4

    138PHOTO (Sunday, 04 April 2010 05:19)

    <div style="position: absolute; left: 640px; width:280px; top:1080px;">
    html代码
    </div>
    请问这个代码是放在什么地方的呢 直接放在内容编辑区吗 还是要放在CSS里

  • #5

    网上邻居 (Sunday, 04 April 2010 08:18)

    牧场的新手: 你好!
    你说的也是,不过,这里讨论的是用jimdo存放图片的。
    其实,我那篇《画鱼名家叶崇贤先生作品精选》中的金鱼画,就是志门用于文章内链的图片,但是那些金鱼画,本身又是独立的非常漂亮的作品。

  • #6

    网上邻居 (Sunday, 04 April 2010 08:22)

    138PHOTO:你好!
    以上代码是放在页面上的,在页面上是直接看不到它的。如果想内容显示在本页,则放到主编辑区里,如果想在所有页面显示,则放到副编辑区(广告盒)下面。

  • #7

    牧场的新手 (Sunday, 04 April 2010 13:55)

    @网上邻居 6#:
    那就是说,要直接在编辑区加html元素?

  • #8

    网上邻居 (Sunday, 04 April 2010 21:19)

    是的。实际效果可以看一下本站主页、友情链接以及站长手记等页面,它们右侧栏下方跟其他页面是不一样的。这些内容可以是代码、图片、文字等。

  • #9

    美女私房菜 (Tuesday, 06 April 2010 15:57)

    我想问一下,我用的是JIMDO里的二分栏的模板,如何能使间距窄一些,就是两栏与分隔线那里的距离,不知这么说,楼主懂不懂,诚心请教!

  • #10

    网型网秀 (Wednesday, 07 April 2010 00:12)

    总算等到邻居更新了,这个也是我一直都要知道的,学习了。看来我也得更新下了,不是baidu排名都下降了

  • #11

    网上邻居 (Wednesday, 07 April 2010 00:38)

    美女私房菜:你好!
    明白你的意思。不过,你用的是系统模板,不好调整。如果是自定义的模板,只要CSS里调整width和padding(或margin)的数值即可。

  • #12

    网上邻居 (Wednesday, 07 April 2010 00:53)

    网型网秀:你好!
    我这个现在是更新的不多,这个是选题决定了的。加上只是业余爱好,知识也不够,很难写出有深度的东西。
    最近发现,我只写了三篇有关QQ的内容,虽然不知道博文的浏览量,但是百度的搜索量居然占每天整个IP的一半左右,如果你关注百度排名的话,这个信息可以供你参考。

  • #13

    138photo (Wednesday, 07 April 2010 13:42)

    邻居你好 我想把元素定位为紧靠底部 按你的文章尝试把那个什么TOP换成BOTTOM
    但好像不行 能否帮我写下这样的代码 实在是弄不明白

  • #14

    欢迎光临挖宝了!http://wabaole.jimdo.com (Thursday, 08 April 2010 11:24)

    又来学习新知道,高兴!!

  • #15

    138photo (Thursday, 08 April 2010 20:31)

    终于知道怎么用了,谢谢了.就是不知道不同浏览器有没有兼容的问题.

  • #16

    减肥药排行榜2010 (Monday, 12 April 2010 16:48)

    哎CSS没学好看了半天还有好多元素没理解

  • #17

    ysdiy (Thursday, 22 April 2010 20:22)

    邻居你好!我在《牧场的新手》那看到他的导航菜单很好,想请邻居帮忙看看,我弄了半天就是弄不好,请邻居帮忙来了!他的链接就在上面。他在上面有留言。谢谢!!!

  • #18

    syj712 (Saturday, 24 April 2010 00:03)

    还是看不懂

  • #19

    me8 (Monday, 03 May 2010 18:48)

    晕,贴上去什么也没变化

  • #20

    czzy (Sunday, 30 May 2010 07:07)

    请问如何去掉我网站上那个叉叉,说具体点儿:)
    谢谢:)

  • #21

    拓道者 (Wednesday, 18 August 2010 08:02)

    晕,贴上百度搜索后,想消都消不掉,不知如何是好,有没有办法消掉呀?

  • #22

    什么减肥药最有效 (Sunday, 07 November 2010 23:00)

    不错哦,学习了~~~

  • #23

    淘宝正品商城 (Monday, 04 April 2011 14:50)

    很详细 谢了

  • #24

    jsjzx (Monday, 06 June 2011 00:15)

    谢谢,真的是太有用了,正在学习中..........

  • #25

    什么减肥药最有效果 (Saturday, 11 June 2011 19:02)

    这是个不错的 博客

  • #26

    什么减肥药效果最好 (Thursday, 16 June 2011 23:05)

    真的很不错。谢谢了