<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Example</title>
<style type="text/css">
body {
margin:50px;
background:pink;
}
*{
margin:0;
padding:0;
}
section{
width:980px;
background:#f5f5f5;
box-shadow:0 0 1px rgba(0,0,0,.4) inset;
box-sizing:border-box;
padding:40px;
}
section::after{
content:"";
display:table;
clear:both;
}
article{
width:49%;
float:left;
position:relative;
}
article:first-child{
margin-right:2%;
}
h1{
font-size:32px;
margin-bottom:15px;
}
p{
font-size:15px;
color:#777;
}
h1, p{
width:65%;
margin-left:35%;
font-family:Georgia, "Times New Roman", Times, serif;
}
img{
position:absolute;
top:0;
}
</style>
</head>
<body>
<section>
<article>
<h1>Rip Van winkle</h1>
<p>Many years ago, at the foothills of the Kaatskill (Kat-skill) mountains, was a little village. In the village lived a simple, good-natured fellow named Rip Van Winkle. He was a kind neighbour, ready to help anyone. </p>
<img src="head1.png" alt="picture of Rip Van winkle">
</article>
<article>
<h1>Robinson Crusoe</h1>
<p>As Rip and his companion reached them, they stopped playing and stared at Rip with a fixed gaze. Rip was really frightened. His companion emptied the contents of the barrel into glasses and made Rip drink it.</p>
<img src="head2.png" alt="picture of Rip Van winkle">
</article>
</section>
</body>
</html>
代码是着样的，我在boby中设了背景，然后改了下margin的值，但是为什么是那个方框动了，不是那个背景动？
Nyears
相关分类