five blockquote css style

blockquote.style1 {
font: 14px/20px italic Times, serif;
padding: 8px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
background-image: url(images/openquote1.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style1 span {
display: block;
background-image: url(images/closequote1.gif);
background-repeat: no-repeat;
background-position: bottom right;
}




blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}



blockquote.style3 {
font: 18px/30px normal Tahoma, sans-serif;
padding-top: 22px;
margin: 5px;
background-image: url(images/openquote3.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 65px;
}
blockquote.style3 span {
display: block;
background-image: url(images/closequote3.gif);
background-repeat: no-repeat;
background-position: bottom right;
}



blockquote.style4 {
font: 14px/20px italic Times, serif;
padding-left: 70px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 10px;
background-color: #dadada;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(images/openquote4.gif);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}



blockquote.style5 {
font: 12px/18px normal "Courier New", sans-serif;
padding-left: 70px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #000;
color: white;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(images/openquote5.gif);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style5 div {
padding-right: 50px;
display: block;
background-image: url(images/closequote5.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

--
we drink green tea

Playing with BLOCKQUOTE and CSS

Using the blockquote tag can result in really boring looking quotations. After all, the standard format for blockquoted text is to be indented on the right and left about 40px. That's it. But with CSS we can do better. We can create blockquoted text that pops from your Web page and makes your quotes a useful design element, and not just more indented text.
Add a Border

A simple way to improve blockquoted text is to add a border around it. This tells your readers that they are looking at something special. For example, this CSS will put a 2 pixel wide black border around all blockquotes in a document:

blockquote { border : 2px solid #000; }

And as with any CSS border, you can make it dotted or dashed, make it wide or narrow, and change the color to make it match your page.
Blockquote Widths

But don't just stop with the border, the width of a blockquote can be defined with CSS. If you don't define it, the browser will define it, and that can result in a blockquote that takes up your entire screen. It's a good idea to define the width of your quotations, and this style call will define all blockquotes as 200px wide:

blockquote { width: 200px; }
Aligning Your Blockquotes

Once you have a narrower blockquote, you'll want your other text to wrap around it and move up to it without crowding. This style sheet will define all blockquotes as 200 pixels wide, and floating on the right, so all text will flow around them to the left:

blockquote { width: 200px; float: right; }

But you'll also want to play with the margins and padding on your quotations if you're going to float them in the page so that there is not an excess of whitespace near your quotations:

blockquote { width: 200px; float: right; margin: 0px; padding: 10px; }
Blockquote Backgrounds

One of the easiest ways to get your quotations to stand out is to change the color of the background. Now, with CSS you can use an image as a background or you can simply change the color. Sometimes changing the color is all that is required to bring attention to your blockquote:

blockquote { background-color: #ccc; }
Add in Quotes to Your Blockquote

If you're using blockquote as it's supposed to be used, then you may need quotations to precede and follow the quotation. And with CSS2 you can do this (try this out in an XHTML compliant browser, like Mozilla or Firefox):

blockquote { quotes: "\201C" "\201D"; } blockquote:before { content: open-quote; font-weight: bold; } blockquote:after { content: close-quote; font-weight: bold; }
Putting it All Together

And here's what your entire completed style sheet looks like:
blockquote {
border : 2px solid #000;
width: 200px;
float: right;
margin: 0px;
padding: 10px;
background-color: #ccc;
quotes: "\201C" "\201D";
}
blockquote:before { content: open-quote; font-weight: bold; }
blockquote:after { content: close-quote; font-weight: bold; }
--
we drink green tea

blockquote border css tutorial

<html>
<head>
<style type="text/css">
img
{
position:absolute;
top:25%;

right:40%

}
@media print{
p a:after {
content:attr(href) ;



}
p a:before {

content:attr(class) ;


}}
p:first-letter {

font-size: 1.2em;

background-color: black;

color: white;
text-transform:uppercase

}
blockquote {



border : 2px solid #000;
color: #555;
text-transform:uppercase;


}
</style>
</head>
<body>

<h1>这是标题</h1>
<img class="normal" src="1.jpg" />
<p>hihi一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。
<a tabindex="7" class="foget" href="http://reg.163.com/RecoverPasswd1.shtml?from=mail126" target="_blank">忘记密码？</a></p>
<blockquote>
zhou xin inadfjaljgoaufoaifa
dfalfklafjagaga dfaf
</blockquote>
</body>
</html>

--
we drink green tea

Setting a Simple Initial Cap

Recipe 1.4 Setting a Simple Initial Cap

Problem You want a paragraph to begin with an initial cap. Solution Mark up the paragraph of content with a p element: <p>Online, activity of exchanging ideas is sped up. The distribution of messages from the sellin of propaganda to the giving away of disinformation takes place at a blindingly fast pace thanks to the state of technology...</p> Use the pseudo-element :first-letter to stylize the first letter of the paragraph, as shown in Figure 1-7: p:first-letter { font-size: 1.2em; background-color: black; color: white; text-transform:uppercase}

--
we drink green tea



--
we drink green tea

Setting a Simple Initial Cap

Recipe 1.4 Setting a Simple Initial Cap Problem You want a paragraph to begin with an initial cap. Solution Mark up the paragraph of content with a p element: <p>Online, activity of exchanging ideas is sped up. The distribution of messages from the sellin of propaganda to the giving away of disinformation takes place at a blindingly fast pace thanks to the state of technology...</p> Use the pseudo-element :first-letter to stylize the first letter of the paragraph, as shown in Figure 1-7: p:first-letter { font-size: 1.2em; background-color: black; color: white; }

--
we drink green tea

Enforcing Font Sizes

Problem

You want to override control over font sizes.

Solution

Use the !important rule to override a user's style sheet rules:

P {   font-size: 12px !important;  }

Discussion

The !important rule consists of an exclamation mark (!) followed immediately by the word important.

In some browsers, a user can have a style sheet set up for browsing the Web that enables him to set font sizes (and other CSS properties) to his liking. However, as a designer of a web document, you might want to make sure your designs render in the manner you planned. The !important rule gives you a little insurance that your designs remain intact. (However, the nature of the medium means that designs are never precise or "pixel-perfect" from one display to another.)

Although you as the designer write the !important CSS rules, the user also can write these rules in his own style sheet. And in the CSS 2 specification, !important rules the user writes override any !important rules the designer writes.

See Also

--
we drink green tea

Inserting URLs After Links

Problem

You need to display URLs of links in an article when a web page is printed.

Solution

Instruct the browser to print the URLs of links in a paragraph by using the :after pseudo-element:

p a:after {   content: " <" attr(href) "> " ;  }

Discussion

Selector constructs such as :after are known as pseudo-elements. The browser interprets the selector as though additional elements were used to mark up the web document.

For example, by using the following CSS, you can make the first letter of a paragraph two-em units in size:

p:first-letter {   font-size: 2em;  }

You use the :after selector (or the :before selector) to insert generated content after (or before) an element. In this Recipe, the value of the href attribute, which contains the URL information, is placed after every anchor element in a p element.

To have brackets appear around the URL, place the quotes around the brackets. To add a buffer of space between the anchor element and the next inline content, put one space in front of the left bracket and one after the right bracket, then insert the URL using the attr(x) function. Whatever attribute is replaced for x, CSS finds the attribute in the element, returning its value as a string.

Another example of the power of this pseudo-element involves returning the value of abbreviations and acronyms in a buzzword-laden document. To accomplish this, first put the expanded form of the word or phrase in the title attribute for abbr or acronym:

<p>The <acronym title="World Wide Web Consortium">W3C</a>   makes  wonderful things like <abbr title="Cascading Style   Sheets">CSS</abbr>!</p>

Then, in the CSS rules, tell the browser to return the value for the title attribute:

abbr:after, acronym:after {   content: " (" attr(title) ") ";     }

Currently, generating content through pseudo-elements works only in Netscape 6+, Mozilla, and Safari browsers

--
we drink green tea

2011经济趋势与企业战略决策

==============================================================================

2011经济趋势与企业战略决策

2011年1月14-15日(上海)

==============================================================================
运筹帷幄、决战2011，"郎阚天下"新年必听的第一堂课

十二五先机在哪里？2011年开篇布局如何谋划？世界经济的困局会怎样影响中国？中
国经济将如何发展？企业如何应对？问题重重，纷繁复杂。。。怎么办？
==============================================================================
如何突围？！
全球金融危机的阴云未散，美国的量化货币宽松政策、希腊、冰岛、芬兰、西班牙等欧洲
国家债务危机又迭出不断！中国人民币的被逼升值、出口贸易摩察不断、央行加息、银行
贷款收紧、石油能源产品价格暴涨、农产品暴涨。。。中国经济航母向何处去？您的企业
向何处去？如何突围？

怎样突破？！
十二五规划，经济发展要转型，而战略重点和路径是什么？扩大内需的策略；推进城镇化
的模式；发展现代产业体系的领域；增强科技创新能力的方向等又在哪里？而您的企业面
临的是机会还是威胁，该如何主动应对实现突破呢？
------------------------------------------------------------------------------
费用说明：
□嘉宾席：3800元/人（含听课费，教材费）
□贵宾席：5800元/人(前排就坐，并由主讲老师当场Face TO Face解答企业一个问题和赠
送投融资论坛视频一套。)
□团体席：3人套票9000元；5人套票12500元；10人套票20000元

谁应该参加：
董事长、总裁、总经理、财务总监等

主办单位：同彰财经（上海）研究中心
协办单位：M-M-C管理学院

全国统一服务热线：400-8899,628
华东地区专线：021-5109,9475
广东地区专线：020-3452,0981
电邮：chinaipo@163.com
==============================================================================
研讨会内容：

第一部分：2011经济趋势，企业怎么办？
主讲：郎咸平（1月14日全天）
◆要点：
1、下一轮发展，演变的轨迹会是怎样， 谁将成为新的崛起、主宰；谁又将沉沦、被淘汰
出局；
2、股市投资、楼市投资、金市投资。。。您的投资放在哪个篮子里，放在哪里的篮子里，
才能最保值、最增值！
3、通货膨胀，将可能如何演绎？何时囤货，囤多少？又何时握有现金？CPI风险、利率风
险、汇率风险，如何规避？
4、汇率还会上升，以多大的幅度上升？外贸型企业如何应对？
5、利率上升，存款准备金提高，流动性会发生怎样的变化？宽松货币格局会逆转吗？标志
是什么？
6、城镇化发展，会带动哪些行业，房地产企业投资该如何进退，商业地产、住宅地产、工
业地产，谁最有前景？
7、稀土的战争、铁矿石的战争、钾盐的战争。。。资源争夺战，您的企业是否该参与？如
何参与？通过期货市场，还是通过兼并收购？策略如何定？
8、制造业企业：如食用油加工企业、棉纺企业、金属材料加工企业等，如何应对原材料上
涨？如何保持足够的价格发言权？

第二部分：资本市场动荡，企业怎么办？
主讲：阚治东（1月14日下午分场）
1、国际资本市场波动解读以及会如何演变？中国资本市场是否一枝独秀？
2、中国创业板、香港创业板、美国创业板（NSDQ），到哪里上市较好？如何选择？
3、国际板推出的影响会怎样？B股有机会吗？
4、风险投资喜好什么样的企业？有什么判断标准？
5、中国私募股权基金发展面临的机遇和挑战在哪里？
6、企业上市如何决策，是否要上市？在哪里上市？何时退出？

第三部分：经济转型，企业怎么办？
主讲：王德培（1月15日上午）
◆要点：
1、十二五，国家经济转型，哪些行业将最有希望先转先行先成功；
2、您的企业适合转型吗、如何转型、又如何达到转型成功？
3、早转、晚转，何时开始最好！早转可能成为先烈，晚转可能成为被动，如何决策？
4、内需启动，哪些行业最受益，中国的增长动力会以怎样的路径发展？

第四部分：政府调控，企业怎么办？
主讲：严介和（1月15日下午）
◆要点：
1、政府调控，哪些方面出重拳；
2、政商谈判秘诀和政府公关之道；
3、中国BT模式鼻祖震撼解读从BT到BOT的发展历程；
4、太平洋的资本运营空前揭秘；
5、"常在河边走，就是不湿鞋"的企业经营风险规避；
6、企业并购重组、产业转型、低成本扩张的经典案例；
7、太平洋短短一年内资产飙升上百亿元的独特盈利模式之奥秘；
8、太平洋招招致胜的企业文化金牌架构；
9、严氏"一流企业做文化"的深度探析；
10、"赔5万不如赔8万，掘取第一桶金"入选哈佛的经典案例亲自解读；
11、太平洋独特的材财管理模式探秘；
12、"从司机到总裁、电梯里提拔员工"的辨才之道；
==============================================================================
专家介绍：
◆郎咸平:
1986年获得沃顿商学院金融学博士学位，曾经执教于沃顿商学院、密歇根州立大学、俄亥
俄州立大学、纽约大学等。现任香港中文大学教授。曾担任世界银行公司治理顾问，深交
所公司治理顾问，�洲开发银行的中国银行改革治理顾问，香港政府财经事务局公司治理
项目顾问。

专家荣誉：
国内媒体评为中国2001年-2003年全国财经人物，2003年荣登世界经济学家名人录， 公认
为世界金融学的顶级学者。唯一从2005年开始发布的经济、金融、企业经营预测都准确的
专家，业界均称"中国经济跟着郎咸平预测而演变"

◆阚治东：中国创业投资行业和证券行业的领袖人物，众多财富神话的缔造者。
1990年，阚治东先生创立申银证券公司，并担任总裁、法人代表，后将万国证券合并，任
申银万国证券公司总裁，法人代表。在阚治东先生领导下，申银万国自成立以来连续多年
成为国内规模最大、盈利能力第一的证券公司。期间，阚治东先生领导团队创造了许多中
国证券金融领域的"第一"，包括：第一个A股发行，第一个A股、H股同时发行，第一个B
股发行，第一个证券营业部，第一个股票指数，第一个证券研究所，主持了中国证券行业
第一起兼并收购等等。
1999年，创立深圳市创新科技投资有限公司（深创投），并担任总裁。阚治东先生在深创
投集团期间领导的创业投资项目已有34家在国内外证券交易所上市，上市地点包括上海、
深圳主板、深圳中小板、香港主板及创业板、美国纽交所、纳斯达克、OTCBB、韩国KOSDAQ
、澳大利亚证交所、德国证交所、加拿大证交所、新加坡证交所等等。所投资的上市企业
取得数倍至数十倍的投资收益。其中包括：金证股份（投资收益20倍）、中材科技（投资
收益22倍）、科陆电子（投资收益28倍）、同洲电子（投资收益31倍）、潍柴动力（投资
收益74倍）等等。
2005年，创立深圳市东方现代产业投资管理有限公司，并担任总裁。阚治东先生与尉文渊
先生（上海证券交易所第一任总经理）共同领导团队利用自有资本投资了包括华锐风电、
上海新生源等多个优质项目，目前总投资增值已经超过25.64倍。
阚治东先生先后担任中国证券业协会常务理事，上海证券业协会会长，上海证券交易所副
理事长，深圳证券交易所理事、深圳市创业投资同业公会第一任会长等职。并获得了中国
优秀青年企业家、上海青年企业家金鹰奖、中国最活跃风险投资人等荣誉称号。

◆王德培：上海福卡经济预测研究所所长，中国经济体制改革研究会副会长，享受国务院
特殊津贴，领衔完成国家发改委、亚洲开发银行、中国电信、宝钢集团、证券机构等单位
的大型咨询课题。参与研讨国家十二五规划，担任央视财经频道、上海第一财经预测、解
读十二五规划专家。

◆严介和: 中国太平洋建设集团创始人，华佗论剑首席专家，《新论语》撰稿人，2005年
胡润中国富豪榜第二名，首届中国企业十大杰出管理人物，首届内地十大华商领袖，中国
经济十大新闻人物，亚太最具创造力华商领袖。
==============================================================================

参加回执（传.真：020-62351993 021-51062638）

现本公司报名参加《2011经济趋势与企业战略决策》会议，请给予确认。

公司名称_______________________________________________________________________

培训联系人_______________ 联系电话______________________ 传真__________________

移动电话_______________ 电子邮箱_____________________________________________

参加人数_______ 费用总计______元

参加人一 _______________ 职位 _______________ 手机：________________________

参加人二 _______________ 职位 _______________ 手机：________________________

参加人三 ________________ 职位 _______________ 手机：________________________

参加人四 _______________ 职位 _______________ 手机：________________________

参加人五 _______________ 职位 _______________ 手机：________________________

付款方式： （请选择打"√"） □1、电汇 □2、现金 □3、支票
发票种类：□咨询费 □会务费
===================================================================================
调查：调查：本次峰会您最感兴趣的内容（可多选）
□ 2011经济趋势预测 □ 经济转型的机会分析 □ 资本市场热点
□ 十二五经济解读 □ 股市、房市、金市投资策略 □ 企业上市决策

div 与span的区别

　SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。

　　下面以一个实例来说明这两个属性的区别。

　　代码：

　　＜span＞SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，＜span＞标识符允许你将一个段落分成不同的部分。 

　　还有一个标识符具有类似的功能，＜div＞DIV也被用来在HTML文件中建立逻辑部分。但与＜div＞SPAN不同，＜div＞工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。

　　效果：

　　SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕你的HTML代码中的其它元素，这样你就可以为它们指定样式了。在此例中，标识符允许你将一个段落分成不同的部分。 

　　还有一个标识符具有类似的功能，DIV也被用来在HTML文件中建立逻辑部分。但与SPAN不同，工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。

--
we drink green tea

printer-friendly

If you were to try to print out a web page exactly as it appears on your screen, chances are you would end up wasting a lot of ink and paper printing unnecessary page elements, or worse yet, the content you printed would be illegible.

That's why links to "printer-friendly" versions of web pages are all over the Internet, especially on news and business sites. When you click this kind of link, you are given a web page design or shell that contains the same text as what you see on your screen, but in a minimal version that is, well, friendlier (or easier) to print.

To create this printer-friendly version of the text, you traditionally would either have to manually convert the web page content to a new, stripped-down page, or use a script dynamically to generate a separate page design. With CSS, however, you can "automagically" redesign documents when they are printed, thereby eliminating the need to code a separate, printer-friendly version as well as saving on server resources typically required to generate the page.

Support for print-media CSS is fairly commonplace these days. Currently, the browsers that support this aspect of the technology include Internet Explorer 4+ for Windows, Internet Explorer 4.5+ for Macintosh, Navigator 6+, Safari, and Opera.

There are print-only properties associated with CSS. However, these properties have limited support among the browsers on the market; Opera 5 and 7 are the only browsers that support more than two of these kinds of properties (15 printing properties out of the 16 in the specification). Because of this reality and the nature of this book to focus on practical, cross-browser nature of CSS, the recipes in this chapter are geared to styling the contents of the page rather than dealing with the theory of CSS printing properties.

--
we drink green tea

css @media 例子

@media版本：CSS2　 兼容性：IE5+

 
语法：
 
@media  sMedia { sRules }
 
说明：
 
sMedia : 　指定设备名称。请参阅附录：设备类型
sRules : 　样式表定义
 
指定样式表规则用于指定的设备类型。请参阅link对象的media属性（特性）。
 
示例：
 
// 设置显示器用字体尺寸
@media screen {
BODY {font-size:12pt; }
}
 
// 设置打印机用字体尺寸
@media print {
@import "print.css"
BODY {font-size:8pt;}
}

--
we drink green tea

css media type tutorial

Media Types allow you to specify how documents will be presented in different media. The document can be displayed differently on the screen, on the paper, with an aural browser, etc. 

---

Media Types

Some CSS properties are only designed for a certain media. For example the "voice-family" property is designed for aural user agents. Some other properties can be used for different media types. For example, the "font-size" property can be used for both screen and print media, but perhaps with different values. A document usually needs a larger font-size on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on paper.

---

The @media Rule

The @media rule allows different style rules for different media in the same style sheet.

The style in the example below tells the browser to display a 14 pixels Verdana font on the screen. But if the page is printed, it will be in a 10 pixels Times font. Notice that the font-weight is set to bold, both on screen and on paper:

<html> <head> <style> @media screen   {   p.test {font-family:verdana,sans-serif;font-size:14px;}   } @media print   {   p.test {font-family:times,serif;font-size:10px;}   } @media screen,print   {   p.test {font-weight:bold;}   } </style> </head> <body> .... </body> </html>

See it yourself ! If you are using Mozilla/Firefox or IE 5+ and print this page, you will see that the paragraph under "Media Types" will be displayed in another font, and have a smaller font size than the rest of the text.

--
we drink green tea

media="screen" /media="print"

<link rel="stylesheet" type="text/css" media="screen" href="mysite-screen.css"
/>
<link rel="stylesheet" type="text/css" media="print" href="mysite-print.css" />　　


　　如果需要支持老版本的浏览器，那你就必须坚持使用css1的媒体描述符screen和print。它们是相互排斥的，因此在为屏幕显示而生成页面的时候，浏览器会忽略掉打印样式表，反之亦然。所以，每个样式表都需要包含相同的样式选择器，但是有不同的规则声明，以便为不同的输出设备分别生成页面样式。 screen (缺省值)，提交到计算机屏幕；
print， 输出到打印机；
projection，提交到投影机；
aural，扬声器；
braille，提交到凸字触觉感知设备；
tty，电传打字机 (使用固定的字体)；
tv，电视机；
all，所有输出设备。

--
we drink green tea

laying picture in css using div and li

The first thing we ought to do is take a look at the markup with which we'll be working. Here are the first two sets of images and information in the document:

<div class="pic ls"><a href="orig/img01.jpg" class="tn"><img    src="tn/thumb01.jpg" alt=""></a><ul>  <li class="title">The Ferrett's Daffodil</li>  <li class="catno">03F01</li>  <li class="price">$79.95</li>  </ul></div>  <div class="pic pt"><a href="orig/img02.jpg" class="tn"><img    src="tn/thumb02.jpg" alt=""></a><ul>  <li class="title">At Lunch</li>  <li class="catno">03F02</li>  <li class="price">$59.95</li>  </ul></div>  

Whitespace Blues

Take a close look at the markup: Notice how the ul element has been moved right up against the link before it, and the div's closing tag is after it. This was done to avoid certain whitespace-triggered bugs in older versions of Explorer. It's unfortunate, but whitespace is still significant to some older browsers, and sometimes adding or subtracting whitespace can fix mysterious layout problems.

That's a lot of classes, and we ought to find out what they all mean. Fortunately, we have a style guide.

• pic marks any div that contains a picture and its associated information. This helps keep these divs separate from any others that might be used.

• ls means the picture has landscape orientation (it's wider than it is tall), whereas pt refers to a portrait orientation (taller than wide).

• tn marks a link as being the hyperlink that's wrapped around the thumbnail image.

• title marks the picture's title, catno its catalog number, and price… okay, that one is fairly obvious.

The really important classes are ls and pt, as we'll see soon enough, but all of them will come in handy. For example, we'll use those classes to set the height and width of the images. These aren't expressed in the HTML, as you can see. We know that our landscape thumbnails are 128 pixels wide by 96 pixels tall (with the portraits being 96x128), but we'll have to say so in the CSS before the project is done.

To get started, let's add some basic body and footer styles. For the body element, we'll just add a light tan background and some margins. We know we'll be using float a lot, and we want the footer to show up after the images, so we'll clear it. These actions are illustrated in .

<style type="text/css">  body {background: #EED; margin: 1em;}  div#footer {clear: both; padding-top: 3em;    font: 85% Verdana, sans-serif;}  </style> 

--
we drink green tea