百度前端技术学院——零基础学院（7，8）

最新推荐文章于 2022-03-09 13:31:57 发布

qq_180714

最新推荐文章于 2022-03-09 13:31:57 发布

阅读量183

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_43632493/article/details/95776141

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

第七天到第八天：学习布局

静态定位： position: static;静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。
相对定位：position: relative;相对定位是我们将要看的第一个位置类型。它与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。
top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置。（top:10px是指从框顶部上面把框向下推10px,其他同理）
绝对定位：position: absolute;绝对定位的元素不再存在于正常文档布局流中。相反，它坐在它自己的层独立于一切。
这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能。
此时的top, bottom, left, 和 right，它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向。所以top:30px;left:30px我们说的绝对定位元素应该位于从“包含元素”的顶部30px，从左边30px。
定位上下文：哪个元素是绝对定位元素的“包含元素”这取决于绝对定位元素的父元素的position属性。如果所有的父元素都没有显式地定义position属性，那么所有的父元素默认情况下position属性都是static。结果，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且<html>元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在<html>元素的外面，并且根据浏览器视口来定位。绝对定位元素在HTML源代码中，是被放在<body>中的，但是在最终的布局里面，它离页面(而不是<body>)的左边界、上边界有30px的距离。我们可以改变定位上下文 —— 绝对定位的元素的相对位置元素。通过设置其中一个父元素的定位属性 —— 也就是包含绝对定位元素的那个元素（如果要设置绝对定位元素的相对元素，那么这个元素一定要包含绝对定位元素）。既当没有定义<body>的position时，绝对定位元素是相对于浏览器视口，当<body>的position定义为relative时，绝对定位元素相对于body定位。
介绍z-index：网页有一个z轴：一条从屏幕表面到你的脸的虚线。z-index 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0。
固定定位：position: fixed； 这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 <html> 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。这意味着您可以创建固定的有用的UI项目，如持久导航菜单。

实践部分

设计图如下：
在这里插入图片描述

步骤：
一、分出几个块
<header></header>首部，中间包括一个960px宽的剧中div，div里包括Logo和三个链接
<div class="banner"></div>宣传栏，含有一个轮显数字
<section></section>主要内容区，包括一个导航栏和宽度自适应的内容块
<footer></footer>底部，包含水印
二、遇到的问题
1：首先是<footer>没有固定在页面底部，而是处于了<section>的下方，主要是由于<section>部分还没有写好内容未撑开导致的，此时可以先不管<footer>的位置等到把<section>里的内容都写完就解决了，还有一个办法是将<footer>的position设置为absolute或者fixed。
2：轮显数字的问题，将2设置为<class="current">，然后在css中设置.current的样式。
3：主内容区域，分成两个部分<div class="info-box">导航栏<div class="panels">内容，
代码如下：

<div class="info-box">
          <ul>
                <li><a href="#" class="active">HOME</a> </li>
                <li><a href="#">PROFILE</a> </li>
                <li><a href="#">ABOUT</a> </li>
          </ul>
 </div>
 <div class="panels">
          <ul class="box">
                <li class="item">This is Content 1</li>
                <li class="item">Maybe Content 2</li>
                <li class="item">Content 3</li>
                <li class="item">Content 4</li>
                <li class="item">Content 5</li>
                <li class="item">Content 6</li>
                <li class="item">Content 7</li>
                <li class="item">Content 8</li>
                <li class="item">Content 9</li>
                <li class="item">Content 10</li>
          </ul>
 </div>

3-1：导航栏部分：注意当设置选中链接的颜色时，可能会出现颜色溢出（覆盖住了圆角框）此时在li的css样式中添加overflow: hidden解决。
3-2：布局部分：我选用了flex布局，代码如下：

.box {
    display: flex;
    flex-wrap: wrap;
    width: 960px;
    justify-content: space-between;
    margin-left: 150px;
    margin-right: 100px;
}
.item {
    border: 1px solid gainsboro;
    text-align: center;
    list-style-type: none;
    padding: 80px;
    margin: 1px;
    flex-grow: 1;
}

最后贴上全部代码：
https://github.com/qiqiaiqianqian/baiduxueyuan

qq_180714

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度前端技术学院——零基础学院（7，8）

第七天到第八天：学习布局静态定位： position: static;静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。相对定位：position: relative;相对定位是我们将要看的第一个位置类型。它与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。top, bott...
复制链接

扫一扫