我正在尝试建立一个具有4个主要div的网站(以后再介绍),其中3个是固定的,因此当我滚动时它们不会移动,并且其中一个不是固定的。我已经花了大约6个小时30分钟,用谷歌搜索可能的答案,检查了youtube,花了至少2个小时来查看stackoverflow帖子,但这些都没有真正向我指出正确的方向。
设计即时通讯希望获得:
来源(html):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="scripts.js"></script>
<title>Title</title>
</head>
<body>
<div class="menu">
<a href="#"></a>
</div>
<div class="contact"></div>
<div class="upper"></div>
<div class="main">
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
<div class="paragraph"></div>
</div>
</body>
</html>
来源(css):
/**/
html,body{
height: 100%;
}
body {
background-image: url("background.jpg");
}
div {
margin: 0px;
}
.menu {
background-color:lightgray;
color:black;
width: 200px;
height: 100%;
top:200px;
right: 0;
text-align: center;
position:fixed;
}
.contact {
background-color:lightgray;
color:black;
width: 200px;
height: 100%;
top: 200px;
left: 0;
text-align: center;
position:fixed;
}
.upper {
background-color: black;
width: 100%;
height: 200px;
position:fixed;
top:0px;
left:0px;
}
.main {
background-color: green;
width: 100%;
margin-top:200px;
height: 200vh;
left: ;
}
.paragraph {
background-color: red;
width: 100%;
height: 50vh;
}
我尝试更改.main div的宽度,但是无论我尝试使用什么div,都可以在.contact或.menu div下进行
.paragraph div进入.main div,一旦.main div正确定位,它就会保存一些文本和图像。我的源代码中div的大小完全不像我的设计中那样,但是我一直在尝试解决问题的方法。
.js文件当前仍然为空,因此我没有发布任何源文件。
欢迎任何帮助:链接;资料来源;注释; 如果您知道某些可能会指示我正确方向的信息,请发布!
编辑:我尝试使用包装器,但是对我来说效果不佳,我可能做错了什么,当我在浏览器中打开时,我发布的源代码看起来最像我的设计。
jsfiddle:http : //jsfiddle.net/zt1Lyaop/
我忽略了您现有的代码,并采用了新的HTML5和响应式方法来创建这种布局。我希望这可以帮助您更好地理解这个概念http://jsfiddle.net/7k9vhk4r/2/
关键是使用fixed
和relative
定位,以及根据百分比创建偏移量。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句