来看看：CSS Sprite操纵:用CSS处置圆角

搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。
网页制造poluoluo文章简介：我处置圆角的版本是由内置的相对定位的四个div构成，每一个div都有独一的圆角图片作CSSSprite操纵。
开端先容
固然，我晓得如今有不计其数个关于用CSS处置圆角的教程，但不论怎样说，我仍旧想把这篇文章展现给您。也但愿您会发明这篇文章会十分有效。必要重点指出的是，这篇教程完全地使用初级CSS手艺，可是，我会全力使初学者看起来复杂。CSS3在这里还没有失掉完整的使用，以是，晓得如今，我会坚持W3C考证的无效。

• 看一下演示
  

我们将如何来处置?
我处置圆角的版本是由内置的相对定位的四个div构成，每一个div都有独一的圆角图片作CSSSprite操纵。我们将会如许做:

登录/注册后可看大图

是甚么体例招致这项手艺体现得这么了不得呢（Whatmakesthistechniquecool）?
经由过程可变的宽度和高度处置毗连的元素的才能。没有极限。（Theabilitytomakerounded-borderedelementswithfluidwidthandheight.Nolimitswhatsoever.）这项手艺，正如我之条件到的，是与CSSSprites分离操纵完成的。假如您不晓得这是项如何的手艺大概说不晓得怎样利用它，那末请先浏览我之前的文章。CSSsprites都学会了吗?那我们就入手下手吧!
第一步:创立我们的Sprite
1、为矩形圆角图片处置选择一款编纂器(在这个案例中我选择的是Firework).

登录/注册后可看大图

2、切割而且导出圆角到当地一时地位(我们将会在以后用到).

登录/注册后可看大图

3、新创立一个文件，将圆角导进到这个新文件中，复制三次，然后扭转这三个新切片失掉别的的三个圆角。

登录/注册后可看大图

4、分解四个圆角为一张图片,并用1px的红线来辨别它们.

登录/注册后可看大图

5、导出分解图片，sprite也就半途而废了。

网页制造poluoluo文章简介：我处置圆角的版本是由内置的相对定位的四个div构成，每一个div都有独一的圆角图片作CSSSprite操纵。

第二步:HTML代码
起首，我们会给容器div一个.roundedBox
类:
<divclass="roundedBox"></div>
如今，我们必需再增添四个div，这会在未来创立圆角的时分用到。以后必需给每一个加载一个类.corner，同时也标识一个类来指定它们格子的地位。
<divclass="roundedBox">
<strong>MycontentinroundedBoxType1</strong>
<divclass="cornertopLeft"></div>
<divclass="cornertopRight"></div>

<divclass="cornerbottomLeft"></div>
<divclass="cornerbottomRight"></div>
</div>
统统弄定?嗯，让我们把注重力再转移到CSS代码下去。
第三步:CSS代码
如你所知,(大概您会在这里疾速进修到)相对定位元素一般都按照绝对定位的父元素举行定位。.Ifthiselementisnotdefined,theywilltakeastheirparentrelatively-positionedelement,thebodytag.假如这个父元素没法界定，那末它会往比来作绝对定位的谁人父元素，直至body标签。哈?!-好了，假如到此为止您仍没有把握，不必忧虑，我们将在第二部分懂得它。（翻译得有点拗，附上原文：Ok,ifyoudidn’tgetthis,don’tworry,you’llcatchitinansecond.）
让我们先来界说下一切的圆角：
一切的圆角都必需界说相对定位，而且说明高度跟宽度。我的圆角界说的宽度跟高度都是17px.

登录/注册后可看大图

.corner{
position:absolute;
width:17px;
height:17px;
}
假如您是第一次切割矩形圆角，那末宽度跟高度极可能会纷歧样(咄!)。
如今入手下手界说div容器款式:
.roundedBox{position:relative;}
任何界说有类.roundedBox的元素内，相对定位元素城市相对这个元素举行定位，而不是标签body。我们也必需设置一些padding值，假如没有设置，圆角将会掩盖我们的文本，这一定不是我们想要的效果。主要提醒:top和bottompadding值必需等价于圆角的height。left和rightpadding值必需等价于圆角的宽度。正如您已晓得的，我的圆角宽度跟高度是相称的，因而，四个边角的padding值也是相称的:
.roundedBox{position:relative;padding:17px;margin:10px0;}
我也经由过程margin给我们的div流出了必定的清闲
最初，让我们对没有圆角作独自界说
我们会对每一个圆角作相对定位设置，而且定位背景图的地位(依据我们的sprite):
.roundedBox{position:relative;padding:17px;margin:10px0;}

.corner{position:absolute;width:17px;height:17px;}

.topLeft{top:0;left:0;background-position:-1px-1px;}
.topRight{top:0;right:0;background-position:-19px-1px;}
.bottomLeft{bottom:0;left:0;background-position:-1px-19px;}
.bottomRight{bottom:0;right:0;background-position:-19px-19px;}
您大概已注重到，我们的款式仍旧还没有下载sprite。我们一样平常不会往界说它们的缘故原由是，我们会利用别的的办法。

网页制造poluoluo文章简介：我处置圆角的版本是由内置的相对定位的四个div构成，每一个div都有独一的圆角图片作CSSSprite操纵。

圆形盒模子1(蓝色)
HTML代码：
<divclass="roundedBox"id="type1">
<strong>MycontentinroundedBoxType1</strong>

<divclass="cornertopLeft"></div>
<divclass="cornertopRight"></div>
<divclass="cornerbottomLeft"></div>
<divclass="cornerbottomRight"></div>
</div>
我们必需给容器div界说一个ID为#type1，用来实行特别背景。
CSS代码：
起首，我们得给#type1婚配一个背景致，使之交融于sprite中的圆角:
#type1{background-color:#CCDEDE;}

登录/注册后可看大图

以后，经由过程界说.corner类来帮忙圆形盒模子载进Sprite款式:
#type1{background-color:#CCDEDE;}
#type1.corner{background-image:url(../images/corners-type1.gif);}

登录/注册后可看大图

好了，我们的第一个圆角矩形半途而废了！预览圆角矩形模子1(蓝色)
圆形盒模子2(绿色)/圆形盒模子3(紫色)
模子1，模子2跟模子3的独一不同就是它们的色彩，以是我们也仅仅只修正这些。
模子2(绿色)
HTML代码：
<divclass="roundedBox"id="type2">
<strong>MycontentinroundedBoxType2</strong>

<divclass="cornertopLeft"></div>
<divclass="cornertopRight"></div>
<divclass="cornerbottomLeft"></div>
<divclass="cornerbottomRight"></div>
</div>
CSS代码(仅仅修正sprites的色彩及背景致)

登录/注册后可看大图

#type2{background-color:#CDDFCA;}
#type2.corner{background-image:url(../images/corners-type2.gif);}
预览圆角矩形模子2(绿色)
模子3(紫色)
HTML代码：
<divclass="roundedBox"id="type3">
<strong>MycontentinroundedBoxType3</strong>
<divclass="cornertopLeft"></div>

<divclass="cornertopRight"></div>
<divclass="cornerbottomLeft"></div>
<divclass="cornerbottomRight"></div>
</div>
CSS代码(仅仅修正sprites的色彩及背景致)

登录/注册后可看大图

#type3{background-color:#D3CADF;}
#type3.corner{background-image:url(../images/corners-type3.gif);}
预览圆角矩形模子3(紫色).都学会了吗？好，如今我们再进一步进修。

网页制造poluoluo文章简介：我处置圆角的版本是由内置的相对定位的四个div构成，每一个div都有独一的圆角图片作CSSSprite操纵。

模子4(白色边框)
模子4跟模子1、2、3又有甚么区分呢？边框和色彩，让我们来办理这些要素吧。
HTML代码：
<divclass="roundedBox"id="type4">
<strong>MycontentinroundedBoxType4</strong>
<divclass="cornertopLeft"></div>

<divclass="cornertopRight"></div>
<divclass="cornerbottomLeft"></div>
<divclass="cornerbottomRight"></div>
</div>
CSS代码(在sprite中给您的边角的边框都添上边框，并使.roundedBox类的背景及边框交融sprite。)

登录/注册后可看大图

#type4{background-color:#CCACAE;border:1pxsolid#AD9396;}
#type4.corner{background-image:url(../images/corners-type4.gif);}

登录/注册后可看大图

好了，这个就是截图效果。我们的边角还不克不及准确地掩盖#type4边框。以是我们必需改正它们的定位来掩盖初期的定位款式。让我们做到这一点:
#type4{background-color:#CCACAE;border:1pxsolid#AD9396;}
#type4.corner{background-image:url(../images/corners-type4.gif);}
#type4.topLeft{top:-1px;left:-1px;}
#type4.topRight{top:-1px;right:-1px;}
#type4.bottomLeft{bottom:-1px;left:-1px;}
#type4.bottomRight{bottom:-1px;right:-1px;}
好了，这就是我们完成的模子4。预览圆角矩形模子4(白色边框).Wearealmostthere,don’tquitnow:p模子
5(垂直突变)
好了，模子5会必要更多的事情量，我们应当如许:

• 修正高低边角的高度(由突变度决意(dependingonyourgradient))。
  
• 修正高低边角的背景图定位(由突变度决意)。
  
• 经由过程反复平展1px的背景图片来创立容器div的突变效果。
  
• 值得注重的是，我们必需给内容设置一个巨细，大概给容器设置一个最小高度(由突变度决意)。
  

让我们入手下手吧。
HTML代码(跟之前的一样)：
<divclass="roundedBox"id="type5">
<strong>MycontentinroundedBoxType5</strong>
<divclass="cornertopLeft"></div>
<divclass="cornertopRight"></div>

<divclass="cornerbottomLeft"></div>
<divclass="cornerbottomRight"></div>
</div>
CSS代码：
我的突变是从上到下垂直的。以是我们必需增添上边角的高度，和变动下边角的背景图地位。当您看到我的新的sprite就会分明为何会这么处置。就是上面这张:
我的div中的背景图片是如许的:
1px的宽度，它切实其实是存在的。我的下边角有一条实心色彩，恰好能够婚配div的背景致。少措辞多举动。我们来持续界说容器div:
#type5{background:#FECBCAurl(../images/roundedbox-type5-bg.png)repeat-x00;min-height:110px;}
给容器设置的背景色彩是我从底部边角中吸收的。然后将背景图片按x偏向举行反复。最初我给它设置一个最小高度，正如我之前所说的，突变才不会保守。最初来加上一切的边角(我将文件的范例修正为.png格局的图片，为的是能失掉更好的突变质量):
#type5{background:#FECBCAurl(../images/roundedbox-type5-bg.png)repeat-x00;min-height:110px;}
#type5.corner{background-image:url(../images/corners-type5.png);}
如今，我增添上边角的高度(这是由突变最初到达的色彩地位决意的):
#type5{background:#FECBCAurl(../images/roundedbox-type5-bg.png)repeat-x00;min-height:110px;}
#type5.corner{background-image:url(../images/corners-type5.png);}
#type5.topLeft,
#type5.topRight{height:140px;}
最初，我改正下下边角的背景图定位:
#type5{background:#FECBCAurl(../images/roundedbox-type5-bg.png)repeat-x00;min-height:110px;}
#type5.corner{background-image:url(../images/corners-type5.png);}
#type5.topLeft,
#type5.topRight{height:140px;}
#type5.bottomLeft{background-position:-1px-142px;}
#type5.bottomRight{background-position:-19px-142px;}
全体完成!-预览圆角矩形模子5(垂直突变)
IE6版本
这项手艺在这一使人厌恶的扫瞄器中是有成绩的。我们必需给容器(.roundedBox,or#type1,#type2,等等)断定宽度跟高度。假如您没有界说它，那末它会保守到盒模子以外。利用IE6前提式正文法来界说它。
最初的设法
我但愿这项手艺对您会有帮组，而且不会显得太难。垂直突变、通明的角落，只需多加实习，您的脑壳会变得加倍好用，也会加倍简单界说款式。

当遇到几个选择器共享一个声明的时候，可以分组放在一起，每个选择器必须以逗号隔开。例：h1,h2,h3,h4{colorred;}选择器分组时要将每个选择器路径写全，分组结尾不能有逗号。

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

滚动条)层属性--溢出(visible/hidden/scroll/auto)

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

滚动条)层属性--溢出(visible/hidden/scroll/auto)