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。

很简单不是么?若是在以往,我们可能要通过很复杂的表格布局才能实现类似的效果:

标签:教程,布局,css,psd
0
投稿

猜你喜欢

  • javascript定时变换图片实例代码

    2024-04-17 10:24:14
  • Python绘制loss曲线和准确率曲线实例代码

    2021-05-21 07:15:13
  • Vue组件通信方法案例总结

    2023-07-02 16:51:58
  • python strip() 函数和 split() 函数的详解及实例

    2021-07-03 09:34:56
  • 详解MySQL数据库--多表查询--内连接,外连接,子查询,相关子查询

    2024-01-24 05:20:34
  • Python操作串口的方法

    2021-11-24 07:09:10
  • Python实现密钥密码(加解密)实例详解

    2022-09-10 12:03:37
  • 认识那些被忽略的SQL Server注入技巧

    2009-01-20 13:15:00
  • 小白学Python之实现OCR识别

    2022-02-12 20:35:48
  • TensorFlow神经网络创建多层感知机MNIST数据集

    2022-03-29 20:09:19
  • oracle使用sql语句增加字段示例(sql删除字段语句)

    2024-01-22 03:22:39
  • oracle 合并查询 事务 sql函数小知识学习

    2023-07-13 15:07:28
  • Python执行Linux系统命令的4种方法

    2023-08-10 19:04:50
  • golang语言实现的文件上传与文件下载功能示例

    2023-06-19 00:05:31
  • 详解Django之auth模块(用户认证)

    2021-12-11 21:09:20
  • SQL Server如何保证可空字段中非空值唯一

    2024-01-17 07:19:03
  • Python3操作YAML文件格式方法解析

    2021-05-22 03:57:10
  • electron-vue利用webpack打包实现多页面的入口文件问题

    2024-05-13 10:39:51
  • 基于事件冒泡、事件捕获和事件委托详解

    2024-04-28 09:43:33
  • Python从零开始创建区块链

    2021-02-12 12:21:14
  • asp之家 网络编程 m.aspxhome.com