CSS属性：定位属性+案例讲解：博雅互动前端开发入门笔记（五）-阿里云开发者社区

CSS中的定位属性用于指定HTML元素在文档中的位置。常用的定位属性有以下几种：

position：用于定义元素的定位方式。

static（默认值）：元素遵循正常的文档流，不进行特殊的定位。
relative：相对定位，通过设置top、bottom、left、right等属性相对于元素在正常文档流中的位置进行偏移。
absolute：绝对定位，相对于最近的具有定位属性（relative、absolute、fixed、sticky）的父元素进行定位。
fixed：固定定位，相对于浏览器窗口进行定位，即使页面滚动，元素也会保持在固定位置。
sticky：粘性定位，在滚动过程中表现为相对定位和固定定位的混合。当页面滚动到指定位置时，元素将固定在该位置。

top、bottom、left、right：与定位属性配合使用，用于指定元素相对于其定位父元素的偏移距离。可以使用像素(px)、百分比(%)或其他单位进行指定。
z-index：用于控制元素在重叠文档流中的层叠顺序。值越大，元素越靠前显示。

这些定位属性可以结合使用，以实现更灵活的布局效果。需要注意的是，定位属性会改变元素的定位方式，可能影响到其他元素的布局。因此，在使用定位属性时要谨慎，并合理考虑页面结构和布局需求。

当涉及到定位属性时，还有一些其他的CSS属性可以与之配合使用，以进一步控制元素的位置和行为。

display：用于定义元素的显示类型。

block：块级元素，独占一行，默认宽度为其父元素的100%。
inline：内联元素，不会独占一行，宽度由内容决定。
inline-block：内联块级元素，不会独占一行，宽度由内容决定，但可以设置宽度、高度和margin等属性。
none：隐藏元素，元素不在文档中占据空间。

float：用于将元素浮动到其容器的左侧或右侧。

left：元素向左浮动，后续元素会环绕在其右侧。
right：元素向右浮动，后续元素会环绕在其左侧。
none（默认值）：元素不浮动。

clear：用于控制元素在浮动元素旁边的行为。

left：不允许左侧有浮动元素。
right：不允许右侧有浮动元素。
both：不允许左右两侧有浮动元素。
none（默认值）：允许出现浮动元素。

overflow：用于定义当内容溢出元素框时如何处理溢出部分。

visible（默认值）：内容不会被裁剪，可能会显示在元素框外。
hidden：内容被裁剪，超出元素框的部分将被隐藏。
scroll：显示滚动条，以便查看超出元素框的内容。
auto：根据内容是否超出元素框来决定是否显示滚动条。

https://web.qianguyihao.com/02-CSS%E5%9F%BA%E7%A1%80/09-CSS%E6%A1%88%E4%BE%8B%E8%AE%B2%E8%A7%A3%EF%BC%9A%E5%8D%9A%E9%9B%85%E4%BA%92%E5%8A%A8.html#%E5%89%8D%E8%A8%80

这些属性可以与定位属性结合使用，以实现更多样化的布局效果。通过合理利用这些属性，可以灵活地控制元素在页面中的位置和行为。

当涉及到定位属性时，还有一些其他的CSS属性可以进一步增强元素的布局和样式：

width、height：用于设置元素的宽度和高度。可以使用像素(px)、百分比(%)或其他单位进行指定。
margin：用于设置元素的外边距，控制元素与周围元素之间的空间。可以设置上下左右四个方向的外边距值，也可以通过缩写方式同时设置四个方向的外边距。
padding：用于设置元素的内边距，控制元素内容与边框之间的空间。同样可以设置上下左右四个方向的内边距值，也可以通过缩写方式同时设置四个方向的内边距。
border：用于设置元素的边框样式。可以设置边框的宽度、样式和颜色。
background：用于设置元素的背景样式。可以设置背景颜色、图片、重复方式等。
transform：用于对元素进行变换，如旋转、缩放、平移等效果。
transition：用于设置元素的过渡效果，可以使元素从一个状态平滑地过渡到另一个状态。可以控制过渡的属性、持续时间、延迟时间等。

这些属性可以与定位属性相互配合使用，通过调整元素的大小、外边距、内边距、边框样式和背景样式，以及应用变换和过渡效果，可以创建出各种独特的布局和视觉效果。请根据具体需求选择合适的属性来达到预期的效果。

CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位

当涉及到CSS的定位属性时，这里有更详细的说明：

绝对定位（position: absolute）：

使用绝对定位的元素会完全脱离文档流，不会对其他元素造成影响。
可以通过设置top、bottom、left、right属性来指定元素相对于其最近的已定位父元素的偏移量。也可以使用负值来偏移元素的位置。
如果没有已定位的父元素，绝对定位元素将相对于文档的根元素进行定位。
绝对定位常用于创建重叠布局、悬浮导航栏、弹出式菜单等效果。

相对定位（position: relative）：

相对定位的元素仍然占据原来的空间，并在正常文档流中保持位置。
通过设置top、bottom、left、right属性来指定元素相对于自身在正常文档流中的位置进行偏移。
相对定位的元素对其他元素的布局会产生影响，其他元素仍然会根据相对定位元素在正常文档流中的位置进行布局。
相对定位常用于微调元素的位置、创建动画效果等。

固定定位（position: fixed）：

固定定位的元素会相对于浏览器窗口进行定位，始终保持在同一个位置。
通过设置top、bottom、left、right属性来指定元素相对于浏览器窗口的偏移量。
固定定位的元素不会随页面滚动而移动，适用于创建固定的导航栏、悬浮工具条等效果。
在移动设备上，固定定位的元素常用于创建页头、页脚或菜单。

除了定位属性外，还可以使用z-index属性来控制元素的堆叠顺序。z-index值较大的元素将覆盖在其他元素之上。这在处理重叠元素时非常有用。

值得一提的是，使用定位属性时，需要慎重考虑其对文档流和其他元素的影响，以确保布局和视觉效果的一致性和可靠性。

另外，需要注意以下几点：

在使用定位属性时，最好使用比较精确的像素值来定位元素，而不是使用百分比等相对值。否则可能出现不同浏览器、不同设备上元素显示不一致的情况。
对于绝对定位和固定定位的元素，如果没有设置宽度和高度，那么它们的大小将自动调整为包含内容的大小。因此，如果需要为这些元素设置特定的尺寸，需要为它们设置显式的宽度和高度。
对于相对定位的元素，如果没有设置偏移量，则在正常文档流中保持不动。
在使用定位属性时，要记得考虑浏览器窗口大小、滚动条位置等因素的影响，以确保页面布局的稳定性和可靠性。
最后，使用定位属性时应该尽量避免滥用，以免造成代码的复杂性和难以维护性。

导航栏的制作

在此我们只讲基础知识的使用，不涉及浏览器的优化。

class==header这个div是顶部的通栏，我们在里面放一个1000px宽的div，作为通栏的版心，我一般把这个版心称为class=inner_c，c指的是center。

class=inner_c不需要给高，因为它可以被内容撑高。

现在我们需要在class=inner_c里放三个东西：左侧的logo、中间的导航栏、右侧的“加入我们”。

接下来我们开始做右侧的「加入我们」，「加入我们」的背景是带圆角的矩形，这个圆角，实现的方式有两种：要么切图，要么用CSS3实现（IE 7、IE 8不兼容）。我们暂时使用切图来实现。

我们最好把「加入我们」这个超链接放到div里，然后设置div的margin和padding，而不是直接设置的边距。

我们起个名字叫class=jrwm是没有问题的，这在工作当中很常见，如果写成class=join_us反倒很别扭。

暂时我们的做法是：

（1）给class=jrwm_box这个div里放一个class=jrwm的div。class=jrwm用来放绿色的背景图片。

（2）在class=jrwm里放一个超链接，并将超链接转为块级元素。

最终，导航栏的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            font-size: 14px;
            font-family: "Microsoft YaHei","SimSun";
            height: 8888px;
        }
        .header{
            height: 58px;
            background-color: #191D3A;
        }
        /*版心*/
        .inner_c{
            width: 1000px;
            margin: 0 auto; /*让导航条、内容区域等部分的版心在父亲里居中*/
        }
        /*导航条的logo*/
        .header .logo{
            float: left;
            margin-right: 40px;
        }
        .header .nav{
            float: left;
        }
        .header .nav ul{
            list-style: none; /*去掉列表前面的圆点*/
        }
        .header .nav ul li{
            float: left;
            width: 100px;
            line-height: 58px; /*让行高等于这一行的高度，保证里面的文字垂直居中*/
            border-left: 1px solid #252947; /*每个li之间有间隔线*/
        }
        .header .nav ul li.last{
            border-right: 1px solid #252947;/*最后一个li的右边加间隔线*/
        }
        .header .nav ul li a{
            display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
            height: 58px;
            text-decoration: none; /*去掉超链的下划线*/
            color:#818496;
            text-align: center;  /*让这个div内部的文本居中*/
        }
        .header .nav ul li a.current{
            color:white;
            background: #252947;
        }
        .header .nav ul li a:hover{
            color: white;
            background: #252947;
        }
        .header .jrwm_box{
            float: left;
            height: 58px;
            width: 100px;
            padding-left: 48px;
            padding-top: 12px;
        }
        /*放背景图片的div*/
        .header .jrwm_box .jrwm{
            height: 34px;
            background-image: url(images/jrwm.png);
            background-repeat: no-repeat;
            text-align: center; /*让这个div内部的超链接居中*/
        }
        .header .jrwm_box .jrwm a{
            display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
            line-height: 34px; /*让行高为背景图片的高度，可以保证超链接的文字在背景图片里垂直居中*/
            text-decoration: none; /*去掉超链的下划线*/
            color: white;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="inner_c">
            <div class="logo">
                <img src="images/logo.png " alt="">
            </div>
            <div class="nav">
                <ul>
                    <li><a href="#" class="current">首页</a></li>
                    <li><a href="#">博雅游戏</a></li>
                    <li><a href="#">博雅新闻</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">客服中心</a></li>
                    <li class="last"><a href="#">投资者关系</a></li>
                </ul>
            </div>
            <div class="jrwm_box">
                <div class="jrwm">
                    <a href="https://www.google.com/" target="_blank">加入我们</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

banenr图

"banner图"通常指的是网页或应用程序界面上的横幅广告或标识，用于吸引用户的注意和传达信息。它通常位于网页的顶部或侧边，具有鲜明的设计和吸引人的视觉效果。banner图可以包含文字、图像、标志、产品展示等内容，用于宣传、推广或增强品牌形象。它在网页设计和数字营销中起到重要的作用，帮助吸引用户的眼球并引导他们进行进一步的操作。

因为涉及到 js 的内容，这里先不讲内容区域轮播图的效果。

我们首先在导航条和banner图之间加一道墙，即class=cl，然后采用隔墙法对其设置clear: both;的属性。

然后设置banner的背景图片属性，添加banner图。

内容区域的制作

导航栏+banner+内容区域的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        /*清除浮动的影响*/
        .cl{
            clear: both;
        }
        body{
            font-size: 14px;
            font-family: "Microsoft YaHei","SimSun";
            height: 8888px;
        }
        .header{
            height: 58px;
            background-color: #191D3A;
        }
        /*版心*/
        .inner_c{
            width: 1000px;
            margin: 0 auto; /*让导航条、内容区域等部分的版心在父亲里居中*/
        }
        /*导航条的logo*/
        .header .logo{
            float: left;
            margin-right: 40px;
        }
        .header .nav{
            float: left;
        }
        .header .nav ul{
            list-style: none; /*去掉列表前面的圆点*/
        }
        .header .nav ul li{
            float: left;
            width: 100px;
            line-height: 58px; /*让行高等于这一行的高度，保证里面的文字垂直居中*/
            border-left: 1px solid #252947; /*每个li之间有间隔线*/
        }
        .header .nav ul li.last{
            border-right: 1px solid #252947;/*最后一个li的右边加间隔线*/
        }
        .header .nav ul li a{
            display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
            height: 58px;
            text-decoration: none; /*去掉超链的下划线*/
            color:#818496;
            text-align: center;  /*让这个div内部的文本居中*/
        }
        .header .nav ul li a.current{
            color:white;
            background: #252947;
        }
        .header .nav ul li a:hover{
            color: white;
            background: #252947;
        }
        .header .jrwm_box{
            float: left;
            height: 58px;
            width: 100px;
            padding-left: 48px;
            padding-top: 12px;
        }
        /*放背景图片的div*/
        .header .jrwm_box .jrwm{
            height: 34px;
            background-image: url(images/jrwm.png);
            background-repeat: no-repeat;
            text-align: center; /*让这个div内部的超链接居中*/
        }
        .header .jrwm_box .jrwm a{
            display: block; /*将超链接转为块儿，可以保证其霸占父亲的整行*/
            line-height: 34px; /*让行高为背景图片的高度，可以保证超链接的文字在背景图片里垂直居中*/
            text-decoration: none; /*去掉超链的下划线*/
            color: white;
        }
        .banner{
            height: 465px;
            background: url(images/banner.jpg) no-repeat center top;
        }
        .content{
            padding-top: 50px;
        }
        .content .product{
            height: 229px;
            border-bottom: 1px solid #DBE1E7;
        }
        .content .product ul{
            list-style: none;
        }
        .content .product ul li{
            float: left;
            width: 218px;
            margin-right: 43px;
        }
        .content .product ul li.last{
            margin-right: 0;
            width: 217px;
        }
        .content .product ul li img{
            width: 218px;
            height: 130px;
        }
        .content .product ul li.last img{
            width: 217px;
        }
        .content .product ul li h3{
            text-align: center;
            line-height: 38px;
            font-size: 14px;
            font-weight: bold;
        }
        .content .product ul li p.djbf{
            text-align: center;
            line-height: 16px;
        }
        .content .product ul li p.djbf a{
            font-size: 12px;
            color:#38B774;
            text-decoration: none;
            background:url(images/sanjiaoxing.png) no-repeat right 5px;
            padding-right: 12px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="inner_c">
            <div class="logo">
                <img src="images/logo.png " alt="">
            </div>
            <div class="nav">
                <ul>
                    <li><a href="#" class="current">首页</a></li>
                    <li><a href="#">博雅游戏</a></li>
                    <li><a href="#">博雅新闻</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">客服中心</a></li>
                    <li class="last"><a href="#">投资者关系</a></li>
                </ul>
            </div>
            <div class="jrwm_box">
                <div class="jrwm">
                    <a href="https://www.google.com/" target="_blank">加入我们</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 在导航条和banner之间隔一堵墙 -->
    <div class="cl"></div>
    <div class="banner"></div>
    <!-- 内容区域 -->
    <div class="content inner_c">
        <div class="product">
            <ul>
                <li>
                    <p><img src="images/pro1.jpg" alt="" /></p>
                    <h3>BPT宣传片</h3>
                    <p class="djbf">
                        <a href="#">点击播放</a>
                    </p>
                </li>
                <li>
                    <p><img src="images/pro2.jpg" alt="" /></p>
                    <h3>BPT宣传片</h3>
                    <p class="djbf">
                        <a href="#">点击播放</a>
                    </p>
                </li>
                <li>
                    <p><img src="images/pro3.jpg" alt="" /></p>
                    <h3>BPT宣传片</h3>
                    <p class="djbf">
                        <a href="#">点击播放</a>
                    </p>
                </li>
                <li class="last">
                    <p><img src="images/pro4.jpg" alt="" /></p>
                    <h3>BPT宣传片</h3>
                    <p class="djbf">
                        <a href="#">点击播放</a>
                    </p>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

CSS属性：定位属性+案例讲解：博雅互动前端开发入门笔记（五）

CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位

导航栏的制作

banenr图

热门文章

最新文章

相关课程

相关电子书

相关实验场景

CSS属性：定位属性+案例讲解：博雅互动 前端开发入门笔记（五）

CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位

导航栏的制作

banenr图

热门文章

最新文章

相关课程

相关电子书

相关实验场景

CSS属性：定位属性+案例讲解：博雅互动前端开发入门笔记（五）