你也可以的，Div Without Table

2011/8/30 11:11:41中文系列评论(0)浏览(2149)

目标效果：

首先要创建Html页面：

页面总共由8大块div 构成。

按照从左到右，从上到下的原则来分的

1：divWholeScreen

2：divPageBox

3：divTitle

4：divOuterUpperLeft

5：divOuterUpperRight

6：divOuterLowerLeft

7：divOuterLowerRight

8：divContent

Html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Web Page Layout Without Tables</title>
    <meta name="author" content="Jeff Nygren" />
    <meta name="description" content="Demonstration of Tableless Web Page Layout" />
    <link href="TablelessLayout.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <div class="divWholeScreen" align="center">
      <div class="divPageBox">
         <div class="divTitle"><h1>Tableless Layout</h1></div>
         <div class="divOuterUpperLeft">
            <div class="divInnerLL"></div>
         </div>
         <div class="divOuterUpperRight">
            <div class="divInnerUL"></div>
         </div>
         <div class="divOuterLowerLeft">
            <div class="divInnerLR"></div>
         </div>
         <div class="divOuterLowerRight">
            <div class="divInnerUR"></div>
         </div>
         <div class="divContent">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
            nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
            fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
            culpa qui officia deserunt mollit anim id est laborum.
            <br />
            <br /><br />
            <div class="divMyGoal">
                This was my goal!!
            </div>
         </div>
      </div>
   </div>
</body>
</html>

直接浏览：效果如下：

看来要做的还不少。

1：设置下Body的背景颜色

body
{
   background-color:#EEFFCC;
}

2：因为各个浏览器的body的 margin 都不一致。所以手动将margin 设置为0，但是在divWholeScreen里面设置，当然如果只是将margin设置为0，直接在body元素上设置也是一样的。

.divWholeScreen
{
   margin:0px;
}

3：设置下divPageBox的宽度，基本上大型网站的宽度都是固定的，为什么，因为在不同分辨率下，如果让宽度也自动伸缩的话，界面会变化，所以宁可出现滚动条，也不希望界面元素位置发生大的变动，同时也设置下border，background-color。

.divPageBox
{
   width:800px;
   min-height:350px;
   text-align:left;
   border:solid 1px Black;
   background-color:#EEEEEE;
}

效果如下：

4：要开始设置标题了。

首先，标题的宽度要固定，文本要居中：

.divTitle
{
   width:400px;
   text-align:center;
}

效果如下：

可是为什么没有居中？？

OK，看下border。

可以看到text-align:center; 的确起了作用，文本的确居中了，但是因为width:400px;

为了让title 的div元素居中，需要设置margin;

修改divTitle的css：

.divTitle
{
   width:400px;
   text-align:center;
   margin-left:auto;
   margin-right:auto;
}

值得注意的是必须设置margin-left 和margin-right. 读者可以自己尝试下只设置margin-left 的效果。

效果如下：

5：设置divOuterUpperLeft

.divOuterUpperLeft
{
   width:150px;
   height:150px;
   background-color:Yellow;
}

比较简单，设置下宽度和高度，和背景，效果如下：

因为divOuterUpperLeft 属于文档流，所以布局系统会认为后面的内容应该在divOuterUpperLeft 之后呈现，解决这个问题的方式有很多种，可以设置float:left;效果如下：

因为我们需要将左上角固定住。所以选择position:absolute;

修改代码为：

.divOuterUpperLeft
{
   position:absolute;
   top:20px;
   left:20px;
   width:150px;
   height:150px;
   background-color:Yellow;
}

效果如下：

如果你将浏览器放大：效果如下：

可以看到虽然设置了position:absolute; 但是它布局找的父元素是body。所以需要手动修改divPageBox为它的布局参考父元素。设置divPageBox的 position:relative就可以了，代码如下：

.divPageBox
{
   position:relative;
   width:800px;
   min-height:350px;
   text-align:left;
   border:solid 1px Black;
   background-color:#EEEEEE;
}

可以看到left，和top参考的就是divPageBox 元素了。

同样道理，为divOuterUpperRight, divOuterLowerLeft, divOuterLowerRight也加上吧。

.divOuterUpperRight
{
   position:absolute;
   top:20px;
   right:20px;
   width:150px;
   height:150px;
   background-color:Blue;
}
.divOuterLowerLeft
{
   position:absolute;
   bottom:20px;
   left:20px;
   width:150px;
   height:150px;
   background-color:Lime;
}
.divOuterLowerRight
{
   position:absolute;
   bottom:20px;
   right:20px;
   width:150px;
   height:150px;
   background-color:Red;
}

效果如下：

好了，接着设置4个div中的4个小的div：

.divInnerUL
{
   position:absolute;
   top:10px;
   left:10px;
   width:60px;
   height:60px;
   background-color:Maroon;
}
.divInnerUR
{
   position:absolute;
   top:10px;
   right:10px;
   width:60px;
   height:60px;
   background-color:Green;
}
.divInnerLL
{
   position:absolute;
   bottom:10px;
   left:10px;
   width:60px;
   height:60px;
   background-color:Navy;
}
.divInnerLR
{
   position:absolute;
   bottom:10px;
   right:10px;
   width:60px;
   height:60px;
   background-color:Olive;
}

效果如下：

OK。基本已经实现了。现在还需要设置内容divContent。

首先需要设置的是宽度，总宽度是800，左右两个div。150 *2。接着还有一些margin。所以设置width为370，设置下background-color，和padding.font-size：

代码如下：

.divContent
{
   padding:15px;
   width:370px;
   background-color:White;
   font-size:larger;
}

效果如下：

因为4个div已经脱离了标准布局流了，所以divContent 直接靠左。可以通过设置margin-left:200px;

代码如下：

.divContent
{ 
   margin-left:200px;    
   padding:15px;
   width:370px;
   background-color:White;
   font-size:larger;
}

效果如下：

还差最后一步，设置This was my goal!(divMyGoal)

.divMyGoal
{
   padding:6pt;
   color:#FFF000;
   background-color:#000040;
   font-size:larger;
   font-weight:bold;
}

效果如下：

不错，基本实现了效果了。

目标是：

需要让This was my goal!!到右边去。

所以设置：position:absolute;bottom 和right 都是0.

.divMyGoal
{
   position:absolute;
   bottom:0px;
   right:0px;
   padding:6pt;
   color:#FFF000;
   background-color:#000040;
   font-size:larger;
   font-weight:bold;
}

效果如下：

还是上面的那个问题，divMyGoal 布局参考的元素是divPageBox。

所以需要设置divContent 的positon:relative;这样divMyGoal参考的元素就是divContent了。

.divContent
{
   position:relative;
   margin-left:200px;
   padding:15px;
   margin-bottom:20px;
   width:370px;
   background-color:White;
   font-size:larger;
   clear:both;
}

最终效果如下：

当然，让一个元素靠边还有另一种方法，例如float:right。也是可以的。

.divMyGoal
{
   /*
   position:absolute;
   bottom:0px;
   right:0px;
    */
   
   float:right;
   
   padding:6pt;
   color:#FFF000;
   background-color:#000040;
   font-size:larger;
   font-weight:bold;
}

参考文章：webpage_layout_no_tables

作者: LoveJenny 发表于 2011-08-30 06:22 原文链接

关键字你也可以的,div without table

推荐.NET配套的通用数据层ORM框架：CYQ.Data 通用数据层框架

IT技术博客

你也可以的，Div Without Table

发表评论

公告信息

文章搜索

文章分类

文章档案

最新文章

最新评论

阅读排行榜

评论排行榜

友情链接