第八页 第3天的练习


下面我们做一个练习,请观看下面的例子,然后自己重新制作出相同的效果。你必须安装4.0版本的浏览器以便使该例正确显示。该例中只有一幅图象,其余均为HTML和串接样式表。

Book

O

ne of my

favorite things to do:

Walk into a used book store for the very first time. Feel myself drawn into the dark, holy silence of muffled pages turning and words humming. Breathe in the earthy, fermented air of leather bindings, yellowed paper, and comfortable dust.

Walk among the infinite words, thoughts, emotions, and memories, and wrap my arms around the ones that call to me. Touch the aging spines, peer at the insistent, mute words sprawled across every page. Bring them into my own life.

Continue the great chain of books.


下面是源代码:

<HTML>

 <STYLE TYPE="text/css">
 <!--
  .img     { margin-top: -14px;
             text-align: center }
  .titleO  { float: left;
             border-left-width: 3px;
             border-top-width: 3px;
             border-color: yellow;
             font-size: 80px;
             font-family: times, serif }
  .title1  { margin-top: 15px;
             margin-left: -10px;
             font-size: 36px;
             font-family: "arial narrow", arial, sans-serif }
  .title2  { margin-left: 125px;
             margin-top: -55px;
             font-size: 36px;
             font-family: "arial narrow", arial, sans-serif }
  .body    { margin-left: 100px;
             margin-right: 100px;
             text-indent: -30px;
             text-align: justify;
             font-size: 18px;
             line-height: 28px;
             font-family: "arial narrow", arial, sans-serif }
 -->
 </STYLE>

<HEAD>
<TITLE>Webmonkey: Stylesheets: Mulder's Stylesheets Tutorial: Day 3</TITLE>
</HEAD>

<BODY BGCOLOR="#ffffff" TEXT="#000000" link="#0000ff" Vlink="#660099">

<DIV CLASS=img><IMG SRC="book.gif" ALT="Book"
ALIGN=TOP WIDTH="165" HEIGHT="127"></DIV> <BR> <P CLASS=titleO>O</P> <P CLASS=title1>ne of my</P> <P CLASS=title2>favorite things to do:</P> <P CLASS=body> Walk into a used book store for the very first time. Feel myself drawn
into the dark, holy silence of muffled pages turning and words humming. Breathe in the earthy, fermented air of leather bindings, yellowed paper, and comfortable dust.</P> <P CLASS=body> Walk among the infinite words, thoughts, emotions, and memories, and wrap my arms around the ones that call to me. Touch the aging spines, peer at the insistent, mute words sprawled across every page. Bring them into my own life.</P> <P CLASS=body> Continue the great chain of books.</P> </body> </html>

(注意:由于不同的浏览器显示效果不同,所以你实际所看到的显示效果在IE中可能有所差别。)

小问题:如何只使用CSS和HTML而无须gif就制造出下落阴影的效果?答案见明天的课程。


□ 资料来源:sohu.com

本书由“E书时空”免费制作;
想要更多的免费电子图书,请光临
http://www.eshunet.com/