这是我自己跟着弄的,为什么*{}中有一行font-family属性会使得本来换行显示的图片(6张书籍图片)变成不换行了?不理解啊。。。。我鼓捣了半天才发现原来是这行代码。。。
把下面的代码复制到index.html文件里面打开,图片用的老师源码中的图片文件,没改名,不过注意引用路径(images文件夹中)。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>几米简介</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-size:12px;
color:#346667;
/*有下一行,则书籍图片部分才不会换行,为什么?*/
font-family:Arial, Helvetica, sans-serif,"宋体";
}
img{
margin: 10px 18px;
border: 1px solid #000000;
}
#aa{
background: url("images/t_book.gif") no-repeat #eff9f9;
border:4px solid #badbdb;
padding: 44px 15px 15px;
}
#header{width:762px;
border:4px solid #badbdb;
background:url(images/banner.gif) no-repeat;
height:92px;
text-align:right;
color:#fff;
}
#header a{color:#fff;
margin:0 5px;
}
#middle,#footer{
width:100%;
}
#footer{
text-align:center; padding:20px 0;
}
#content{
width: 770px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="content">
<div id="header">
<a href="#">联系我们</a>|<a href="#">站点地图</a>
</div>
<div id="middle">
<div id="aa">
<img src="images/book1.jpg" alt="book1" width="80" height="80"/>
<img src="images/book2.jpg" alt="book1" width="80" height="80"/>
<img src="images/book3.jpg" alt="book1" width="80" height="80"/>
<img src="images/book4.jpg" alt="book1" width="80" height="80"/>
<img src="images/book5.jpg" alt="book1" width="80" height="80"/>
<img src="images/book6.jpg" alt="book1" width="80" height="80"/>
</div>
</div>
<div id="footer">
copyright © 2004-2012 Jimmyspa.com All Rights Reserved.
</div>
</div>
</body>
</html>