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>Documenttitle>
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

banenr图

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

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

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

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

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


DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <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>

    
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207

相关阅读:
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站
 docker安装可视化工具portainer中文版
 appium
使用 JavaScript 的响应式计数器动画
 prometheus安装和oracle告警配置
 Java面试题-0919
Wireshark TS | 应用传输缓慢问题
 6.认识Java的API 使用Java函数库
 为什么MySQL选择REPEATABLE READ作为默认隔离级别？
Acwing 802. 区间和
原文地址：https://blog.csdn.net/shaozheng0503/article/details/133896465

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

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

导航栏的制作

banenr图

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