CSS 制作与操作(5)

在编写HTML的整体结构，实际上只需要一个div作为圆角框的容器。里面有一个h3标记和 p标记

Fixed Rounded

这是一个固定宽度的圆角框，增多可以自由会被破坏。

这是一个固定宽度的圆角框，由角不会被破坏。

单背景图像的带边框的固定宽度圆角框

如果边框特殊到只有一个像素宽。或者边框虽然不是1像素宽，但它本身是一种单色。就可以使用CSS的边框属性来做中间段的边框。这样就不需要3个背景图像了。

固定宽度圆角框

fixed width CSS Box

这是一个固定宽度的圆角框，件得到的。

这是第二段文字，这是一个样例方向可以无限伸展。

不固定宽度的圆角框

不同的方式1，可变：含义是这个圆角框本身在网页上的宽度是固定的，但是在制作网页地时候 。只要简单的设定该圆角框的宽度，就能产生效果 。使用绝对单位。

2，流动方式：含义是圆角框的宽度是跟着浏览器的窗口宽度的变化而变化的。使用百分比或者auto实现。例如标准流中的div的宽度就是自动伸展的。

3，弹性方式：含义是圆角框的宽度在文字 大小不变的情况下，宽度不变，而文字大小发生变化的时候，宽度也随之改变。使用相对单位例如em来设置

对于流动方式来说，一行的文字 不要设的太多一般在40个字

“4图像”单色不固定宽度圆角框

基本思路就是整体背景色用div的背景色，然后4个图像分别作为某一元素的背景放置在适当 的位置。

而在HTML中。一共只有3个元素，即div h3,p因此，必须要在HTML中增加一个冗余的标记。这里有很锪选择。可以为标题增加一个a 标记，连接到详细的页面。或者在div外面套一层div，或者在p标记里面套一层span.这样就可以一个元素控制一个圆角。 必须准备好4个圆角

background: #cba276 url('images/right-top.gif') no-repeat right top; width: 70%; padding: 0; margin:0 auto; } #rounded h3 { background: url('images/left-top.gif') no-repeat; padding: 20px 20px 0; font-size: 170%; color: #FFF; margin: 0; } #rounded p { margin: 0; text-indent:2em; background: url('images/left-bottom.gif') no-repeat left bottom; } #rounded span{

padding: 10px 20px 18px; color: #1B220F; display:block; 因 为span是行内元素这里要设置为块级元素。 background:url('images/right-bottom.gif') no-repeat right bottom; }

Unfixed Round

这是一个不固定宽度的圆角框设置为不同的宽度，也同样适用。

圆角没有出现在圆角框的右下角的。是因为p样式中设置了padding:因此span变成块级元素后，它的范围就是p段落所占据的矩形除去padding以后的范围。 只需要在p中对padding的设置移动到span中就可以了。

“5图像”二维滑动门经典圆角框 首先准备图像。在Photoshop 或Fireworks中绘制一800*600的圆角矩形。并进行切片。分为right-top.gif，right,right-bottom,left-top,left-bottom这五部分

1，搭建HTNL结构。代码中临时设置了一些实线，边框。用来确认各个盒子的大小 和位置，后面再去掉。

background: #FFFF99; font: 12px/1.5 Arial; }

.rounded { width:90%;

border: 1px solid red; }

.rounded h3 {

border: 1px solid blue; }

.rounded .main {

border: 1px solid black; }

.rounded .footer {

border: 1px solid blue; }

.rounded .footer p {

border: 1px solid magenta; }

Article header 这是一行文本，这里作为样例，显示在圆角框。
这是一行文本，这里作为样例，显示在圆角框。

这是一行文本，这里作为样例，显示在圆角框。
这是一行文本，这里作为样例，显示在圆角框。

放置背景图像

background: #FFFF99; font: 12px/1.5 Arial; }

.rounded {

background:url(images/left-top.gif) top left no-repeat; width:90%; }

.rounded h3 {

background: url(images/right-top.gif) top right no-repeat; }

.rounded .main {

background: url(images/right.gif) top right repeat-y; }

.rounded .footer {

background: url(images/left-bottom.gif) bottom left no-repeat; }

.rounded .footer p {

background: url(images/right-bottom.gif) bottom right no-repeat; }

Article header 这是一行文本，这里作为样例，显示在圆角框。
这是一行文本，这里作为样例，显示在圆角框。

这是一行文本，这里作为样例，显示在圆角框。
这是一行文本，这里作为样例，显示在圆角框。

这是版权信息文字。

出现了两个问题，1，是文字没放在圆角框中，第二是右侧的边框有两个裂缝。 设置样式并修复缺口。 .rounded {

background: url(images/left-top.gif) top left no-repeat; width:90%; } …… 此处隐藏：1728字，全部文档内容请下载后查看。喜欢就下载吧 ……