PSD to CSS —— CSS布局实战新概念系列教程（3）
作者：ximicc 来源：ximicc博客 发布时间：2009-05-30 16:40:00
来看一下CSS：
#block_portfolio {
overflow:auto;
margin-bottom:20px;
}
#portfolio_items {
width:615px;
margin-right:25px;
float:left;
}
#text_column {
float:rightright;
width:310px;
}
#text_column h2#text_title {
text-indent:-9999px;
background-image:url(images/creatif.jpg);
background-repeat:no-repeat;
width:310px;
height:129px;
}
.mini_portfolio_item {
border:1px solid #a3a09e;
margin-bottom:10px;
}
.mini_portfolio_item .block_inside {
background:none; background-color:#e2dddc;
padding:25px 30px 15px 30px;
}
.mini_portfolio_item .thumbnail {
float:left;
margin-right:20px;
border:1px solid #979390;
}
1.首先因为整个内容模块采用的两列布局，所以我们还是要在主容器的样式#block_portfolio中设置overflow:auto；
2.接着在项目列表样式#portfolio_items中设置左浮动以及615px的宽度值，并定义25px的右边界，以避免其与右侧的主题简介粘得太近；
3.主题简介样式#text_column中只是简单的定义了右浮动和310px的宽度；
4.对主题简介模块中的H2元素应用text-indent图像替换文本技术；
最后是各个项目列表子项的样式定义：
1.首先是1px的黑色边框，10px的底边界用于间隔三个子项；
2.然后因为之前我们已经为.block_inside编写了一些CSS样式，在这里为了更好的符合第二内容模块的需要，我们对.block_inside中的一些属性进行重定义，主要包括背景图像、背景颜色和填充几个方面；
3.最后为子项中的缩略图定义左浮动以及边框；
原文地址：From PSD to HTML, Building a Set of Website Designs Step by Step
翻译整理：西米CC - The Beauty of CSS Design
本教程涉及素材打包下载：
0
投稿猜你喜欢
傅立叶级数的介绍我就不说了，自己也是应用为主，之前一直觉得很难懂，但最近通过自己编程实现了一些函数的傅立叶级数展开之后对傅立叶 级数展开的概- 函数 0. 显示当前时间命令：select now()。作用: 显示当前时间。应用场景: 创建时间，修改时间等默认值。例子：mys
- 蚁群算法简介蚁群算法（Ant Clony Optimization， ACO）是一种群智能算法，它是由一群无智能或有轻微智能的个体（Agen
- //创建成绩表 create table result( stu_
- 最近要做数据库同步,如果网上找了例子,成功,记录下来,下回再看。这个是网上找的一编文章。以下配置在本机上已经成功:实现功能：A为主服务器，B
- 1.简介(torch.nn下的)卷积层主要使用的有3类，用于处理不同维度的数据参数 Parameters：in_channels(int)
- 有一些问题可能会遇到同元素多列去重问题，下面介绍一种非常简单效率也很快的做法，用pandas来实现。首先我们看一下数据类型：G1 G2a b
- websocket网易聊天室?web微信?直播?假如你工作以后,你的老板让你来开发一个内部的微信程序,你需要怎么办?我们先来分析一下里面的技
- python程序结构python“一切皆对象”，这是接触python听到最多的总结了。在python中最基层的单位应该就是对象了，对象需要靠
- 如下表:AggregationTableIdName1赵2钱1孙1李2周如果想得到下图的聚合结果IdName1赵孙李2钱周利用SUM、AVG
- 1. 图像轮廓1.1 findContours介绍cv2.findContours(img, mode, method)mode:轮廓检索模
- 本文实例为大家分享了python批量下载抖音视频的具体代码，供大家参考，具体内容如下知识储备：博主是在Pycharm下进行的 文件夹：dou
- 本文为大家分享了mysql 8.0.15 安装配置方法，供大家参考，具体内容如下1.安装完成后在安装根目录下做一个my.ini文件my.in
- 本文通过Python3+PyQt5实现《python Qt Gui 快速编程》这本书13章程序Rich文本的行编辑，可以通过鼠标右键选择对文
- 如果开发者想在一个特定的应用程序中完全控制消息与事件的发送,只需要使用一个默认的"/"命名空间就足够了.但是如果开发者需
- 本文实例讲述了Python多线程原理与用法。分享给大家供大家参考，具体如下：先来看个栗子：下面来看一下I/O秘籍型的线程，举个栗子——爬虫，
- 因为自己在设计的时候就对这些东西经常不是很在意，以为是很小的事情，结果往往给自己搞出不少的麻烦。可能大家没有我这么粗心，不过还是想提醒一下跟
- 本文介绍了一系列安装教程，具体如下1.安装Python版本选择是3.5.1，因为网上有些深度学习实例用的就是这个版本，跟他们一样的话可以避免
- 1.MS SCRIPT ENCODE基本上没什么用了,一段JS就可以破解2.封装成DLL比较可行的方法,有通过VB封装成DLL的例子,而且无
- DesktopNexus 是我最喜爱的一个壁纸下载网站，上面有许多高质量的壁纸，几乎每天必上， 每月也必会坚持分享我这个月来收集的壁纸但是
