2019独角兽企业重金招聘Python工程师标准>>>
Ethan 用了一个圆角框来显示用户“已经切换使用”的某个兼容Web标准的浏览器，包括软件名称和图标（图5-16）。
我们现在来基于Ethan所使用的技术，构建另一个示例，它将是一个具有真正灵活性的框，能容纳其内部的任何东西。
1.HTML代码结构
如我先前提到过的，要实现一个在每个方向都灵活的框，面临的不幸事实是我们需要添加额外的代码。这些额外的代码是独立引用框的四角的图片所必须的，这样它才能根据需要在四个方向扩展。
注意：因为有些地方已经超过了本章要讨论的范围，所以为了让例子简单，这里对HTML代码做了一些修改。本来，这个圆角矩形框是一个“定义列表”对象的一部分，该列表还包括有“切换人”的姓名以及其它信息。这是一个运用定义列表的聪明又巧妙的方法－－可以去查看http://browsehappy.com 的页面源码获知更多细节。
要谨记，我们应该使用最少的HTML对象来作为背景图片的载体，以下是我们创建的HTML代码：
结构图：
再如图5-20 ，rounded-right.gif 是一张类似的图片：它负责显示右边的上下两个图角，以及上，右和下边线。这张图片和rounded-left.gif 的高度相同，并且也比原本所需的尺寸要宽很多。
只要框不会超过图片高，那么那个没有用上的，隐藏起来的圆角就不会显示（（这也解释了为什么我们开始时将图片做得足够高）。相应的，对于rounded-right.gif，也会被使用两次——作为右上和右下圆角。
运用最好的判断力来决定将这些图片做得多高和多宽，当然主要是取决于框内部会放些什么类型的内容。留出一些多作空间，以便应付意料之外的文字大小和内容量。
现在我们继续操作，给HTML代码应用样式，并且将所有的设计整合在一起。
3.应用样式
因为不想给框赋予一个固定的宽度，并且还希望那些圆角总是紧挨着框中的内容，所以浮动这个容器。将容器浮动能防止框自动变得和窗体（或者其他外围容器对象）一样宽。取而代之，框里面的内容的宽度将决定框伸展多宽。
结果如图5-22，rounded-right.gif 的上面部分显示出来成为了整个容器的背景。
图5-25是最后完成的框的效果，通过对齐两张背景图片，创建好了四个圆角。
文章知识点与官方知识档案匹配，可进一步学习相关知识Python入门技能树首页概览211389 人正在系统学习中 相关资源：软件测试管理中软件项目需求分析总结_需求分析小结-其它代码类…
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！