Css 如何使用定位属性网站_Css_Positioning_Webpage

Css 如何使用定位属性网站

css

Css 如何使用定位属性网站,css,positioning,webpage,Css,Positioning,Webpage,我正试图建立一个网站，但在应用职位属性时，我感到困惑。。 1.-我想在顶部创建一个导航栏，使用网站页面的20%和宽度：100%和固定位置 2.-在导航栏下方有图像滑块，其中一些图片的宽度为网页的100%，高度为网页的60%。 3.-下面应该是页脚，宽度为100%，高度为20%，但我希望你可以向下滚动一点所以我试过这样的方法。。我非常感谢你的建议。。我用%定义宽度和高度，因为如果浏览器窗口被调整大小，我想调整网页的大小谢谢 <head> <style> .body

我正试图建立一个网站，但在应用职位属性时，我感到困惑。。 1.-我想在顶部创建一个导航栏，使用网站页面的20%和宽度：100%和固定位置 2.-在导航栏下方有图像滑块，其中一些图片的宽度为网页的100%，高度为网页的60%。 3.-下面应该是页脚，宽度为100%，高度为20%，但我希望你可以向下滚动一点

所以我试过这样的方法。。我非常感谢你的建议。。我用%定义宽度和高度，因为如果浏览器窗口被调整大小，我想调整网页的大小

谢谢

<head>
  <style>

.body {
margin: 0 0 0 0;

    .navigation {
    background-color: lightyellow;
    width:100%;
    height:20%;
    position:fixed;
    }

    .slider{
    position: absolute;
    top:20%
    height:60%;
    width:100%
    background-color: lightgreen;
    }

    .footer{
    position:relative;
    top:80%;
    color:lightblue;
    height:20%;
    width:100%
    }

  </style>
</head>

<body>
        <div class="navigation">
        </div>

        <div class="slider">
        </div>

        <div class="footer">
        </div>
</body>


.身体{
保证金：0；
.导航{
背景颜色：浅黄色；
宽度：100%；
身高：20%；
位置：固定；
}
.滑块{
位置：绝对位置；
最高：20%
身高：60%；
宽度：100%
背景颜色：浅绿色；
}
.页脚{
位置：相对位置；
最高：80%；
颜色：浅蓝色；
身高：20%；
宽度：100%
}

除了一些打字错误和缺少的神奇的

html，body:100%

之外，您几乎完全正确，这为您定义身高提供了参考点

您有
```
.body
```
，但应该只有
```
body
```
在
```
.slider
```
样式中缺少两个
```
；
```
导致其他样式被忽略
您将
```
.slider
```
的高度定义为20%，但希望为60%

您在

页脚

样式中使用了

颜色：浅蓝色

而不是

背景：浅蓝色

这就是您需要的：

html, body {
  height: 100%;
}

body {
  margin: 0;
}

.navigation {
  background-color: lightyellow;
  width:100%;
  height:20%;
  position:fixed;
}

.slider {
  position: absolute;
  top:20%;
  height:20%;
  width:100%;
  background-color: lightgreen;
}

.footer {
  position: relative;
  top: 80%;
  background-color: lightblue;
  height: 20%;
  width: 100%;
}

注意：不太清楚你想要一点滚动是什么意思，但是如果你真的想要滚动，你可以使页脚超过20%。

你能提供一个小提琴链接让这更清楚一点吗？谢谢！这很有帮助：）…我会投票支持你的答案，但我的声誉还很低