<!--html part-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="day4css.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="card">
<!-- < src="C:\Users\Administrator\Desktop\img.jpg" />-->
<div id="name">
<!--<img src="C:\Users\Administrator\Desktop\susie.jpg" />-->
<h1>苏轼</h1>
<p>唐朝著名诗人,又名苏东坡。</p>
</div>
</div>
</body>
</html>
/*css part*/
*{
padding: 0px;
margin:0px;
}
#card
{
width:500px;
height:700px;
border: solid 1px white;
padding:20px;
margin:20px;
overflow:hidden;
z-index:-1;
background-image: url("img.jpg");
background-repeat:no-repeat;
position:absolute;
left:500px;
top:400px;
}
#name
{
width:350px;
height:600px;
overflow:hidden;
pardding:20px;
position:relative;
left:20px;
top:70px;
/* right:50px;
buttom:0px;*/
background-image: url("susie.jpg");
background-repeat:no-repeat;
}
p
{
/* font-size:100px;
font-color:black;
font-style:oblique;
font-weight:bold;
position:relative;
top: 500px;
left:0px;*/
font-family: 楷体;
text-align:left;
position:relative;
top:400px;
font-size:30px;
font-weight:bold;
}
h1
{
font-family: 仿宋;
position:relative;
left:30px;
top:50px;
}
过程中遇到问题,以后注意:
1.使用microsoft edge 不能正确显示盒子内容,用ie;
2.link
day5:
盒子使用宽度和高度时:又border&padding非0时,为保证浏览器兼容性:用!important (ie会忽略),非ie会使用有important 的值。
fixed:随滑条保持与页面一样的位置。
加!DOCTYPE html