PSD to CSS —— CSS布局实战新概念系列教程
作者：ximicc 来源：ximicc博客 发布时间：2009-05-30 16:40:00
1.11 – 添加缎带修饰
网页局部模块中右上角的蓝色缎带修饰是这个网站界面设计中的一个亮点，只要合理的运用CSS、PNG透明图片和绝对定位属性，这个效果实现起来也不是很难。首先我们要做的还是制作图片，该图仍然包含透明背景区域、并以PNG-24格式保存。
接下来把图片添加到HTML中：
<div class="block">
<img src="images/ribbon_featured.png" class="ribbon"/>
<span class="block_inside">
...
我们通过第二行中的<img>标签把这张图片放入网页。注意我在图片上应用了名为ribbon的类样式，而且其位置是在block容器和block_inside容器之间，而不是在block_inside容器里面！这么做的原因是为了避免与之前设置的overflow:auto混淆而产生样式冲突，而现在<img>添加的位置只是稍微影响了布局，其最终的效果呈现主要借助于下列CSS：
程序代码
.block {
border:1px solid #a3a09e;
background-color:#ffffff;
margin-bottom:20px;
position:relative;
}
.ribbon {
position:absolute;
top:-3px;
rightright:-3px;
}
1.首先为block容器设置相对定位position:relative，这样一来其下级元素中的绝对定位属性就会以block容器为参照，而不是整张页面了；
2.接着在设置缎带修饰图片位置的时候，让其在右边缘和上边缘分别溢出3px。
很简单不是么？若是在以往，我们可能要通过很复杂的表格布局才能实现类似的效果：
0
投稿猜你喜欢
- ASP中转换unicode编码为GB编码方法：<％ function urldecode(encodestr)
- 这篇论坛文章（赛迪网技术社区）根据网友的个人实践扼要的讲解了将MySQL 5.0下的数据导入到MySQL 3.23中的具体方法及步骤，详细内
- 最近发现数据库服务器压力很大，CPU经常达到100％。查看进程，发现有大量的sp_cursorclose;1进程信息。网上查了下，出现sp_
- 很多人可能发现，无论是在sql 2000， 还是在 sql 2005 中，都没有提供字符串的聚合函数， 所以， 当我们在处理下列要求时，会比
- 一、什么是索引 减少磁盘I/O和逻辑读次数的最佳方法之一就是使用【索引】 索引允许SQL Server在表中查找数据而不需要扫描整个表。 1
- MySQL低调宣布它将不再把MySQL企业版服务器作为一个tar包发布，而这距离这个公司宣布将MySQL分为免费版和付费版的时间还不到一年。
- 语法：CREATE TRIGGER trigger_name trigger_time trigger_eventON tbl_name F
- 301和302 Http状态有啥区别？301，302 都是HTTP状态的编码，都代表着某个URL发生了转移，不同之处在于：301 redir
- js浮点数计算有时是不准确的，比如7*0.8 == 7*8/10的值为false，因为7*0.8=5.6000000000000005，乘出
- '把pattern 又修改了下'code
- 有些时候（如开发聊天程序），我们需要将将滚动条（scrollbar）保持在最底部，比如聊天窗口，最新发出和收到的信息要显示在最下方，如果要看
这是Smashing Magazine花费几个月的时间研究编写的2009 年Web设计风格与潮流，Smashing Magazine 的编辑- 在实际的工作和学习中，许多人的SQL Server 2005数据库日志文件可能会发生损坏，例如硬件故障、计算机非正常重启或关机等等。在SQL
- 1.样式的重用性CSS布局的网页最大的特点就是样式的可重用性,利用class选择符重复将某个样式属性多次在网页中使用，以减少不断定义样式属性
- 这段时间常给来面试的同学用《 你是一个职业的页面重构工作者吗？ 》中三个部分的不同阶段去做自测，发现很多人都自我感觉良好，给我的回答基本都是
- 判断某一个表的记录总数，对于一个开发者来说是最再常见不过的事，我想大家都常用的作法就是:以下为引用的内容：select count(*) f
- 第一类工厂相当于mootools的Native方法，用于创建一些具有扩展能力的类，但这些类并没有继承能力，此类工厂也不能以某个类作为蓝本创建
- ASP编写完整的一个IP所在地搜索类的修正文稿修正了查询方法，查询的方法和追捕的一致；只是追捕会自动更正IP。还有个函数的书写错误，也已经修
- 在当今企业环境中，保证数据安全不是可有可无的工作。频繁曝光的入侵和欺骗事件、萨班斯•奥克斯利法案、HIPAA法案规定和爱国
- 阅读之前：在看文章具体内容之前，希望你可以 先打开IE8,打开http://www.taobao.com,然后在地址栏里输入：javascr
