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：根据内容是否超出元素框来决定是否显示滚动条。
这些属性可以与定位属性结合使用，以实现更多样化的布局效果。通过合理利用这些属性，可以灵活地控制元素在页面中的位置和行为。
当涉及到定位属性时，还有一些其他的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>
