13-1 看不懂哦···求分析··
1 回答
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>几米简介</title>
<!--内部样式表开始-->
<style type="text/css">
*{
margin:0;
padding:0;
font-size:12px;
color:#346667;
font-family:Arial, Helvetica, sans-serif,"宋体";
} /*这行主要是通配符的设置，字体的大小，字体的颜色，字体的样式（这里有几种字体）*/
a{
text-decoration:none;
} /*设置链接默认的样式为无下划线，这里不仅仅是文本链接，还有图片链接*/
a:hover{
text-decoration:underline;
} /*设置链接在鼠标悬停时的样式为有下划线*/
h2{
line-height:30px;
font-size:14px;
margin-bottom:5px;
} /*设置h2的样式*/
p{
line-height:24px;
text-indent:26px;
margin-bottom:5px;
} /*设置所有段落的默认样式：行高我24px，文本缩进26px，以及段落结束的底端有5个像素的间距（类似word文档的段与段之间间距）*/
#wrap{
width:770px;
margin:0 auto;
} /*设置id为wrap的外层的盒子宽度为770px，居中显示*/、
#header{
width:762px;
border:4px solid #badbdb;
background:url(../images/banner.gif) no-repeat;
height:92px;
text-align:right; color:#fff;
} /*设置id为header部分的样式，这里使用了一些代码的简写，背景图片的路径有问题，所以案例中显示不出来*/
#header a{
color:#fff;
margin:0 5px;
} /*这种写法为【子选择符】的写法，设置id为header里面的超链接字体的颜色为以及对其上右下左的间距，因为header部分的背景图片显示不出来，所以这里的文字看不见吗，设置另外一个颜色就可以看到了【联系我们】【站点地图】。*/
#mainbody,#footer{
width 100%;
} /*id分别为mainbody和footer的宽度为100显示，这两个部分是嵌套在wrap之中的*/
#footer{
text-align:center;
padding:20px 0;
} /*设置footer（版权信息）的文本对其方式，左右内间距20px，上下内间距为20px*/
.content{
background:#eff9f9;
padding:44px 15px 15px;
border:4px solid #badbdb;
} /*这里的类主要是对内容部分的样式进行了设置，背景颜色，内间距，边框样式*/
.profile{
background:url(../images/t_profile.gif) no-repeat #eff9f9;
} /*这里的类设置背景图片以及重复方式，也是因为路径问题，图片没有显示出来*/
.book{
background:url(../images/t_book.gif) no-repeat #eff9f9;
} /*名称为book的类设置了背景图片以及重复方式，图片没有显示出来*/
.book img{
border:1px solid #b1adaa;
margin:10px 18px;
} /*设置book里面的img（图片）的边框，颜色样式以及外间距*/
</style>
<!--内部样式表结束-->
</head>
<body>
<div id="wrap"> <!--最外层的容器相关属性查看前面的设置，其中一级节点div的类名称分别为header，mainbody，footer，在mainbody中包含二级节点的div的类名称为content profile以及content book-->
<div id="header"><a href="#">联系我们</a>|<a href="#">站点地图</a></div> <!--头部分，这里通过header设置了背景图片，以及嵌套的超链接的样式-->
<div id="mainbody"> <!--主题内容部分，该部分嵌套在wrap中，这里的宽度就是外层wrap部分的宽度-->
<div class="content profile"> <!--这个div添加了两个类，前面的content设置了基本的样式，后面的prolil设置了背景图片，之所以这么设置因为后面还有一个地方需要设置和这里相同的背景图片，当然这里可以直接设置在content中。-->
<h2>:: 关于幾米 ::</h2>
<p>幾米，一位用画笔描绘梦想、吸引无数读者画迷为之疯狂，知名度迅速窜升的当红绘本作家，同时却也是一个腼腆善良的中年男子，偏好简单的居家生活，低调而淡泊。</p>
<p>幾米的个性害羞内向，不擅长用言语表达，他用敏锐细腻的心去感受周遭的人与事，将情感、思绪藉由「绘画」传达他对大千世界的看法，作品风貌多变，创作力源源不绝，因此看幾米的作品，就像是走入他的内在，幾米的故事引领着每一位欣赏他作品的人看到并相信世界上的美与善，同时也反应了现代人生活中的点点滴滴，因此每个人都能在他的故事找到一个映照和寄托，或许这就是幾米作品的迷人之处。</p>
<p>幾米，绘本作家，文化大学美术系毕业，曾在广告公司工作十二年，后来为报纸、杂志等各种出版品画插画 。1998年开始创作，发表《森林里的秘密》和《微笑的鱼》，拿下当年度中国时报开卷最佳童书、
民生报好书大家读年度最佳童书，以及联合报读书人最佳童书奖。 1999年出版《向左走．向右走》，开创出成人绘本的新型式，兴起一股绘本创作风潮。本书获选为1999年金石堂十大最具影响力的书，并已改
编成电影、电视剧。之后陆续推出《听幾米唱歌》、《月亮忘记了》、《森林唱游》、《我的心中每天开出一朵花》等作品，展现惊人的创作力和多变的叙事风格。 2001年出版《地下铁》，获选2002年金鼎奖
推荐优良图书，并改编成音乐剧和电影。次年《照相本子》、《1.2.3.木头人》和《我只能为你画一张小卡片》获选2002年行政院新闻局推介中小学生优良课外读物图书类推荐读物。2002年《布瓜的世界》甫上
市便登上各大书店畅销排行榜第一名。 2003、2004年陆续出版《幸运儿》、《你们我们他们》、《又寂寞又美好》、《履历表》、《遗失了一只猫》等作品，内容风格上更形突破。2005年的《小蝴蝶小披风》
和《失乐园》开始经营角色，多变的故事节奏有不同于以往的阅读趣味。 作品风靡两岸三地，美、法、德、希腊、韩、日、泰等国皆有译本。学界和媒体多次以「幾米现象」为主题分析评论。 2003年Studio Voice杂
志选为亚洲最有创意的五十五人之一。 </p>
</div>
<div class="content book"> <!--这个div主要来存放图片，比你高为图片添加了超链接-->
<a href="#"><img src="http://img1.sycdn.imooc.com//536c9dc30001135400800080.jpg" width="80" height="80" /></a>
<a href="#"><img src="http://img1.sycdn.imooc.com//536c9de300012a0500800080.jpg"width="80" height="80" /></a>
<a href="#"><img src="http://img1.sycdn.imooc.com//536c9dfe0001b81b00800080.jpg" width="80" height="80" /></a>
<a href="#"><img src="http://img1.sycdn.imooc.com//536c9fa00001f6dd00800080.jpg" width="80" height="80" /></a>
<a href="#"><img src="http://img1.sycdn.imooc.com//536c9fad0001f29800800080.jpg" width="80" height="80" /></a>
<a href="#"><img src="http://img1.sycdn.imooc.com//536c9fb90001d71b00800080.jpg" width="80" height="80" /></a>
</div>
</div>
<div id="footer">copyright © 2004-2012 Jimmyspa.com All Rights Reserved.</div> <!--版权部分-->
</div><!--id为wrap的最外层div结束-->
</body>
</html>举报
0/150
提交
取消
