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>
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
