仓酷云

标题: 来一发CSS圆角手艺 [打印本页]

作者: 冷月葬花魂 时间: 2015-1-16 00:17
标题: 来一发CSS圆角手艺
学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。
要一个宽度不流动的框，事变变得有些庞大了。宽度不流动，就意味着这个框在程度和垂直偏向都有充足天真的变更。

　　为何说这更难一些呢？由于它必要对四张图片的符合安装――每一个圆角用一张。每一个圆角都要自力出来，以便框可以在各个偏向舒展。因而，四张图片就意味着必要四个HTML工具来作为背景图片的载体。

　　有一些完成举措包含在款式表中利用“天生内容”，即便用：before和:after伪类来为独自的一个工具加上多张背景图。这类办法的成绩在于，在编写本书的时分，InternetExplore(IE)还不撑持“天生内容”，因些相称年夜数目的用户就将没法看到圆角效果。

　　那怎样办呢？假如一个流动的宽度已事后断定，那就可以很简单地利用本章上一节中给出的那种办法，只背景图片：一张用于显现顶部的摆布圆角，另外一张显现底部的摆布圆角。筹办好两个HTML工具来做图片载体并非困难。但是当请求完成宽度不流动的框时，为了让IE用户也能看到一样的计划效果，那就是加上分外的HTML代码了。

　　圆角化

　　以下是Web尺度的强人，也是本书的手艺编纂EthanMarcotte在办理BrowseHappy网站所面对如许的成绩时的做法（-15）　http://browsehappy.com

　　-15BrowseHappy是一个旨在匡助人们进修利用能代替InternetExplorer在Web尺度兼容的扫瞄器的网站

　　Ethan用了一个圆角框来显现用户“已切换利用”的某个兼容Web尺度的扫瞄器，包含软件称号和图标（-16）。

　　-16这个圆角矩形框能够往任何偏向扩大

　　Ethan没有给框设定流动的宽度，而利用了一种对后面提到过的“滑动门”手艺的变通办法，使妥当内容笔墨增加（或增年夜）时，框在程度和竖直偏向都能伸缩（-17）。

-17当笔墨变年夜时，框会在程度和竖直偏向扩大，同时能坚持圆角外形稳定

　　我们如今来基于Ethan所利用的手艺，构建另外一个示例，它将是一个具有真正天真性的框，能包容其外部的任何器材。

1.HTML代码布局

　　如我先条件到过的，要完成一个在每一个偏向都天真的框，面对的不幸现实是我们必要增加分外的代码。这些分外的代码是自力援用框的四角的图片所必需的，如许它才干依据必要在四个偏向扩大。

　　注重：由于有些中央已凌驾了本章要会商的局限，以是为了让例子复杂，这里对HTML代码做了一些修正。原本，这个圆角矩形框是一个“界说列表”工具的一部分，该列表还包含有“切换人”的姓名和别的信息。这是一个使用界说列表的伶俐又奇妙的办法－－能够往检察http://browsehappy.com的页面源码获知更多细节。

　　要服膺，我们应当利用起码的HTML工具来作为背景图片的载体，以下是我们创立的HTML代码：

<divclass="container">
<pclass="desc">Thisboxis:
<pclass="link"><ahref="/browsers/firefox/">Indestructible!</a>
</div>
　　一个作为容器的<div>和紧随厥后的一个段落工具将作为前两个载体。要凑足四个，我们将链接“Indestructible!"用第二个段落工具和（这里引进了一个有争议的分外HTML工具）一个工具包抄起来。这里我利用是由于，从手艺角度来说，我也盘算让它个链接表达一种夸大的意义。

　　同时，我悄然地加上这个工具。这是我盘算制止的事变，可是本例的情形下，我们必要这个第四个工具，以便引进创立圆角的需要背景图片（-18）。

　　-18我们建的框的HTML代码给我们供应了四个可用作背景图片载体的工具

　　布局图：

　　2.图片的战略

　　固然我们必要援用四次背景图片（一个角一次），但能够自创BrowseHappy网站所用的奇妙计划，它只必要用到两张GIF图片。我们先来看看图片自己，就可以了解这类办法了。

　　如-19所示，rounded-left.gif是一张9个像素宽的GIF图片，包含左上方和左下周遭角。我们将它创立得比预期的高良多，以便能包容年夜的内容量。

　　-19这张名为rounded-left.gif的图片包含了左上和左下圆角

　　再如-20，rounded-right.gif是一张相似的图片：它卖力显现右侧的高低两个图角，和上，右和下边线。这张图片和rounded-left.gif的高度不异，而且也比底本所需的尺寸要宽良多。

　　-20rounded-right.gif包含右上和右下圆角。这张图还带有框的高低边线

　　如今我们来定位这此图片――而且这里就是精巧的地方。图片rounded-left.gif将对齐于top以构成左上方的角（-21），然后再次被利用，对齐于bottom，构成左下方的角。

　　-21当依靠到顶边时，除非框增到充足年夜而被表露，不然图片上面的圆角是显现不出来的

　　只需框不会凌驾图片高，那末谁人没有效上的，埋没起来的圆角就不会显现（（这也注释了为何我们入手下手时将图片做得充足高）。响应的，关于rounded-right.gif，也会被利用两次――作为右上和右下圆角。

　　使用最好的判别力来决意将这些图片做很多高和多宽，固然次要是取决于框外部会放些甚么范例的内容。留出一些多作空间，以便对付料想以外的笔墨巨细和内容量。

　　如今我们持续操纵，给HTML代码使用款式，而且将一切的计划整合在一同。

　　3.使用款式

　　由于不想给框付与一个流动的宽度，而且还但愿那些圆角老是紧挨着框中的内容，以是浮动这个容器。将容器浮动能避免框主动变得和窗体（大概其他核心容器工具）一样宽。取而代之，框内里的内容的宽度将决意框舒展多宽。

.container{
float:left;
color:#666;
}
　　除将框左浮动，我们还设定了框中文本的基础色彩：深灰色。

　　接上去，依照我们的战略将这两张背景图片放到HTML代码中那四个可用的工具上。起首将右上角作为核心主窗口的背景，将rounded-right.gif依靠于其右上地位，利用图片的上半部分。

.container{
float:left;
color:#666;
background:url(img/rounded-right.gif)toprightno-repeat;
}
　　注重我们是经由过程将图片定位到工具的右上方来设置背景。

　　了局如-22，rounded-right.gif的下面部分显现出来成了全部容器的背景。

-22将图片对齐到右上角显现出了圆角效果

　　依照代码按次，容器以后的工具就是第一个段落，我们利用了一个class="desc"（desc暗示description）来标志它。然后我们将rounded-left.gif对齐到top和left，它的上半部分作左上圆角。这里我们还将工具的默许margin和padding都高为0。稍后我们再依据必要加上全适的padding值。

.container{
float:left;
color:#666;
background:url(img/rounded-right.gif)toprightno-repeat;
}
.desc{
margin:0;
padding:0;
background:url(img/rounded-left.gif)topleftno-repeat;
}
　　加上第二张背景图片后的了局见-23，左上圆角加好了。

　　-23将图片对齐于左上角后，部分圆角效果出来了。

　　接上去，增加左下圆角，经由过程给第二个段落（我们给它标志了class="link"）指定rounded-left.gif的上面部分作为背景。这张图的下面部分，我们之前经由过程将图片对齐于top和left来显现，如今则将它对齐于bottom和left，以显现出上面的圆角。利用的距离。第二个段落的三个侧边加了9px的padding,以此给内容和框的界限之间增加符合的距离。第二个段落的左边也加了9px的padding.这个值和图自己的宽度不异，以便让"Indestructible!"链接笔墨前面的圆角能显现出来。

.container{
float:left;
color:#666;
background:url(img/rounded-right.gif)toprightno-repeat;
}
.desc{
margin:0;
padding:9px9px09px;
background:url(img/rounded-left.gif)topleftno-repeat;
}
.link{
margin:0;
padding:0009px;
background:url(img/rounded-left.gif)bottomleftno-repeat;
}
　　到今朝为止的了局见-24，四个圆角中有三个已被加在了准确地位，还剩最初一个了。

-24经由过程重用rounded-left.gif可是对齐到下方，我们加上了第三个圆角

　　最初一张背景图将附着在嵌套在第二个段落工具内里的工具上。我们将rounded-right.gif对齐于bottom和right,显现图片的上面部分，别的好包含必定padding值，以便将框中的笔墨和边线有匀称的距离。年夜多半扫瞄器会将包抄起来的笔墨显现为斜体，以是我们还要掩盖这个属性，显现一般的字体。

.container{
float:left;
color:#666;
background:url(img/rounded-right.gif)toprightno-repeat;
}
.desc{
margin:0;
padding:9px9px09px;
background:url(img/rounded-left.gif)topleftno-repeat;
}
.link{
margin:0;
padding:0009px;
background:url(img/rounded-left.gif)bottomleftno-repeat;
}
.linkem{
display:block;
padding:09px9px0;
font-style:normal;
background:url(img/rounded-right.gif)bottomrightno-repeat;
}
.containera{
font-size:130%;
color:#e70;
}
　　一般情形，是一个内联工具，不会主动扩大直至和父容器宽度不异，以是不克不及用于背景图片的载体。但能过增加划定规矩display:block;，将酿成一个块级工具，强迫让它外部的任何内容都延长到框的界限，就可以办理这个成绩了。别的我们将框中的链接笔墨设置为橙色，而且比一般情形年夜――由于，不成损坏的链接就该是如许子。

　　-25是最初完成的框的效果，经由过程对齐两张背景图片，创立好了四个圆角。

　　-25这就是我们的制品，“牢不成破”的矩形框

　　4.牢不成破的特征

　　正如BrowseHappy例子那样的情形，请注重我们的圆角矩形框，依据其外部的笔墨巨细和内容量的变更，可以在一切偏向自在扩大和压缩。真实的牢不成破（-26）

　　-26不论有多年夜的笔墨仍是几内容，框都能够扩展再扩展
更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。

作者: 仓酷云 时间: 2015-1-16 11:22
标题: 来一发CSS圆角手艺
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweavermxXX很难理解。

作者: 深爱那片海 时间: 2015-1-18 13:20
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 精灵巫婆 时间: 2015-1-27 08:41
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 蒙在股里 时间: 2015-2-5 11:49
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 透明 时间: 2015-2-11 20:25
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 只想知道 时间: 2015-3-2 19:42
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 爱飞 时间: 2015-3-11 07:06
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 谁可相欹 时间: 2015-3-18 03:26
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

欢迎光临仓酷云 (http://ckuyun.com/)