CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)

简介: CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)

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

  1. position:用于定义元素的定位方式。
  • static(默认值):元素遵循正常的文档流,不进行特殊的定位。
  • relative:相对定位,通过设置top、bottom、left、right等属性相对于元素在正常文档流中的位置进行偏移。
  • absolute:绝对定位,相对于最近的具有定位属性(relative、absolute、fixed、sticky)的父元素进行定位。
  • fixed:固定定位,相对于浏览器窗口进行定位,即使页面滚动,元素也会保持在固定位置。
  • sticky:粘性定位,在滚动过程中表现为相对定位和固定定位的混合。当页面滚动到指定位置时,元素将固定在该位置。
  1. top、bottom、left、right:与定位属性配合使用,用于指定元素相对于其定位父元素的偏移距离。可以使用像素(px)、百分比(%)或其他单位进行指定。
  2. z-index:用于控制元素在重叠文档流中的层叠顺序。值越大,元素越靠前显示。

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

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

  1. display:用于定义元素的显示类型。
  • block:块级元素,独占一行,默认宽度为其父元素的100%。
  • inline:内联元素,不会独占一行,宽度由内容决定。
  • inline-block:内联块级元素,不会独占一行,宽度由内容决定,但可以设置宽度、高度和margin等属性。
  • none:隐藏元素,元素不在文档中占据空间。
  1. float:用于将元素浮动到其容器的左侧或右侧。
  • left:元素向左浮动,后续元素会环绕在其右侧。
  • right:元素向右浮动,后续元素会环绕在其左侧。
  • none(默认值):元素不浮动。
  1. clear:用于控制元素在浮动元素旁边的行为。
  • left:不允许左侧有浮动元素。
  • right:不允许右侧有浮动元素。
  • both:不允许左右两侧有浮动元素。
  • none(默认值):允许出现浮动元素。
  1. 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属性可以进一步增强元素的布局和样式:

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

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

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

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

  1. 绝对定位(position: absolute):
  • 使用绝对定位的元素会完全脱离文档流,不会对其他元素造成影响。
  • 可以通过设置top、bottom、left、right属性来指定元素相对于其最近的已定位父元素的偏移量。也可以使用负值来偏移元素的位置。
  • 如果没有已定位的父元素,绝对定位元素将相对于文档的根元素进行定位。
  • 绝对定位常用于创建重叠布局、悬浮导航栏、弹出式菜单等效果。
  1. 相对定位(position: relative):
  • 相对定位的元素仍然占据原来的空间,并在正常文档流中保持位置。
  • 通过设置top、bottom、left、right属性来指定元素相对于自身在正常文档流中的位置进行偏移。
  • 相对定位的元素对其他元素的布局会产生影响,其他元素仍然会根据相对定位元素在正常文档流中的位置进行布局。
  • 相对定位常用于微调元素的位置、创建动画效果等。
  1. 固定定位(position: fixed):
  • 固定定位的元素会相对于浏览器窗口进行定位,始终保持在同一个位置。
  • 通过设置top、bottom、left、right属性来指定元素相对于浏览器窗口的偏移量。
  • 固定定位的元素不会随页面滚动而移动,适用于创建固定的导航栏、悬浮工具条等效果。
  • 在移动设备上,固定定位的元素常用于创建页头、页脚或菜单。

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

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

另外,需要注意以下几点:

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

导航栏的制作

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

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>
目录
相关文章
|
4天前
|
前端开发 定位技术 开发者
CSS基础-定位:static, relative, absolute, fixed
【6月更文挑战第10天】本文探讨了CSS四种定位方式:static、relative、absolute和fixed,强调理解它们的差异对前端开发者的重要性。static遵循正常文档流,relative通过偏移量调整位置但不脱离文档流,absolute完全脱离文档流并依附于最近的非static祖先元素,fixed则相对于浏览器窗口固定。文章列举了常见问题及避免策略,并提供了实战代码示例以直观展示四种定位的效果。掌握这些定位技术能提升布局效率和页面设计质量。
|
8天前
|
前端开发
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
15 0
|
8天前
|
前端开发 容器
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影(一)
Web网页制作-知识点(4)——CSS盒子模型、弹性盒模型(flex box)、文档流、浮动、清除浮动、定位、圆角、阴影一
22 0
|
9天前
|
存储 前端开发 Windows
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
|
10天前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
18 2
|
20天前
|
前端开发 Java
前端面试题01(css)
前端面试题01聚焦CSS,涵盖选择器优先级、隐藏元素方法、px与rem差异、重绘与重排解释、元素居中技巧及可继承属性。还探讨了CSS预处理器SASS和LESS的特性。文章提供实例代码展示居中布局的多种实现方式。鼓励读者点赞和支持。
14 0
|
21天前
|
前端开发
CSS 定位
CSS 定位
25 0
|
24天前
|
前端开发
前端 CSS 经典:SVG 描边动画
前端 CSS 经典:SVG 描边动画
29 0
|
24天前
|
前端开发
前端 CSS 经典:好看的文字阴影
前端 CSS 经典:好看的文字阴影
20 0
|
前端开发 流计算