4-3练习这样实现可以吗
来源：4-2 侧边栏导航跟随案例
蜀山有雨
2017-09-27 17:37:24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4-3</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.page{
background: url("http://climg.mukewang.com/59c9f7ce0001839219034033.png") center top no-repeat;
width: 100%;
height:4043px;
}
.line{
background-color:white;
height: 1px;width: 80%
}
.left{
width: 250px;height: 400px;
background-image: url("http://ww1.sinaimg.cn/mw690/6f8ccb76gy1fjy8p0qpkxj20cg0k8tet.jpg");
background-repeat: no-repeat;
background-size: 250px 400px;
position: fixed;
top:0;
bottom: 0;
left:0;
margin: auto 0;
}
.right{
width: 250px;height: 400px;
background: url("http://ww1.sinaimg.cn/mw690/6f8ccb76gy1fjy8ozkvuqj20ce0k6wng.jpg");
background-repeat: no-repeat;
background-size: 250px 400px;
position: fixed;
top:0;
bottom: 0;
right: 0;
margin: auto 0;
}
</style>
</head>
<body>
<div class="page">
<div class="left">
</div>
<div class="right">
</div>
</div>
</body>
</html>
2回答
-
Miss路
2017-09-27
.right {
width: 100%px;
下面的代码中有这个失误。
两种写法其实是一样的，都可以，只不过表达方式不一样，思路是一样的。
0 -
蜀山有雨
提问者
2017-09-27
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4-3</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.page{
background: url("http://climg.mukewang.com/59c9f7ce0001839219034033.png") center top no-repeat;
width: 100%;
height:4043px;
}
.line{
background-color:white;
height: 1px;width: 80%
}
.left{
width: 250px;height: 400px;
background-image: url("http://ww1.sinaimg.cn/mw690/6f8ccb76gy1fjy8p0qpkxj20cg0k8tet.jpg");
background-repeat: no-repeat;
background-size: 250px 400px;
position: fixed;
top:0;
bottom: 0;
left:0;
margin: auto 0;
}
.right{
width: 100%px;height: 100%;
background: url("http://ww1.sinaimg.cn/mw690/6f8ccb76gy1fjy8ozkvuqj20ce0k6wng.jpg") no-repeat center right fixed;
background-size: 250px 400px;
}
</style>
</head>
<body>
<div class="page">
<div class="left">
</div>
<div class="right">
</div>
</div>
</body>
</html>
left和right的不同实现方式，哪种更合理，符合规范
0
相似问题