A few paragraphs of article text.
A few paragraphs of article text.
A few paragraphs of article text.
A few paragraphs of article text.
A paragraph containing author information
如果我们需要完全控制页面布局，就必须利用CSS来影响足够多的元素：
首先，将整个文章的内容包含在一个“div”容器内、并适当按主体内容、标题……分段包含于各自的\"div\"容
器内。
A few paragraphs of article text.
A few paragraphs of article text.
A few paragraphs of article text.
A few paragraphs of article text.
从代码中可以看出，至少需要5个“容器”类代码，为了构成我们需要的圆角矩形，还需要做几个圆角图片。
首先来看看最终的外观：如图2
“我需要边界和拐角看起来和这个类似”，同时他告诉我们：“文章也许有不同的宽度和高度、而且他还不能肯定文章需要什么样的背景”，事实上、他也不能确定边框到底是什么样式。“能否给我们提供一种便与修
改的开放式方式来管理边框呢？”他问到。
我们已经将整个文章包含于“DIV”内，应用于左上角、顶端和左边。Header元素是默认的块级元素，我们将利用块级元素“继承”特性来设置宽度。使用
“ div ”来确定布局包含的段落来确定右下角布局。
左、上以及左上角部分：
右边以及右上角部分：
底部，以及左下角：
右下角部分：
接下来, 为包含整个文章的DIV容器设置边框和相对宽度：
div.Article { width:35%; border: 1px solid red; }
div.Article h2 { border: 1px solid blue; }
div.ArticleBody { border: 1px solid black; }
div.ArticleFooter { border: 1px solid blue; }
div.ArticleFooter p { border: 1px solid magenta; }
从上图中可以看到“类”：\" ArticleBody \"控制的“DIV”前后存在缺口(编者注：上下没有紧密结合，有距离)。
先忽略这个问题，继续修改完善样式表。
body {
background: #cbdea8;
font: 0.7em/1.5 Geneva, Arial, Helvetica, sans-serif;
} div.Article { background:
url(images/custom_corners_topleft.gif)
top left no-repeat;
width:35%;
} div.Article h2 { background:
url(images/custom_corners_topright.gif)
top right no-repeat;
} div.ArticleBody { background:
url(images/custom_corners_rightborder.gif)
top right repeat-y;
}
div.ArticleFooter { background:
url(images/custom_corners_bottomleft.gif)
bottom left no-repeat;
}
div.ArticleFooter p { background:
url(images/custom_corners_bottomright.gif)
bottom right no-repeat;
}
还好，比我们想像的要好，不过显而易见，我们需要为各自元素添加“padding”，以保证边框布局看起来更好一些。其次，上面提到的缺口问题也会得到解决。形成“缺口”的原因是插入“段落”时回车所至。应尽量避
免使用<>元素从而绕过这个问题。
假定一个回车符等于“1.5em”,相当于我们指定了“line-height”行高，因此我先为ArticleBody和ArticleFooter
容器设置 margin-top:-2em;。测试结果是大多数标准浏览器中都能正确地显示，
至于为什么设置 margin-top:-2em;，这个数值是经过不断的测试调整之后确定的。
继续完善样式表:
div.Article { background:
url(images/custom_corners_topleft.gif)
top left no-repeat; width:35%;
} div.Article h2 { background:
url(images/custom_corners_topright.gif)
top right no-repeat; font-size:1.3em; padding:15px; margin:0;
} div.ArticleBody { background:
url(images/custom_corners_rightborder.gif)
top right repeat-y;
margin:0; margin-top:-2em; padding:15px;
}
div.ArticleFooter { background:
url(images/custom_corners_bottomleft.gif)
bottom left no-repeat;
}
div.ArticleFooter p { background:
url(images/custom_corners_bottomright.gif)
bottom right no-repeat;
display:block; padding:15px; margin:-2em 0 0 0;
}
因篇幅问题不能全部显示，请点此查看更多更全内容