4-3编程
来源：4-2 侧边栏导航跟随案例
慕标1176061
2017-11-24 21:32:16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
.page{
width:100%;
height:1500px;
background:url(http://climg.mukewang.com/59c9f7ce0001839219034033.png) center top no-repeat;
}
.one{
width:100px;
height:150px;
background: red no-repeat;
position: absolute;
left: 0px;
top: 50%;
}
.two{
width:100px;
height:150px;
background: red no-repeat;
position: absolute;
right: 0px;
top: 50%;
}
</style>
</head>
<body>
<div class="page">
<div class="one">Web前端攻城狮</div>
<div class=“two”>Java攻城狮</div>
</div>
</body>
</html>
1回答
-
sherryliu
2017-11-25
1.左右两边div是基于父元素.page定位的，所以.page应该加上position:relative;
2.左右两边div在垂直方向上是居中的，所以.one和.two应该加上margin-top:-75px;
3.background:red;不要加no-repeat;0
