|
下面我们做一个练习,请观看下面的例子,然后自己重新制作出相同的效果。你必须安装4.0版本的浏览器以便使该例正确显示。该例中只有一幅图象,其余均为HTML和串接样式表。
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就制造出下落阴影的效果?答案见明天的课程。
|