定位案例

最新推荐文章于 2024-06-06 20:07:02 发布
最新推荐文章于 2024-06-06 20:07:02 发布
阅读量26 收藏
点赞数
文章标签： css javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79726309/article/details/134753994
版权
相对定位

效果图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        ul,
        ol,
        li {
            list-style: none;
        }

        ul {
            width: 600px;
            height: 40px;
            background-color: orange;
            margin: 0 auto;
        }

        ul>li {
            float: left;
            width: 120px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }

        span {
            width: 0px;
            height: 0px;
            display: inline-block;
            border: 5px solid transparent;
            border-top: 5px solid gray;
            /* 只想要单独移动span;移动一点点 */
            position: relative;
            top: 2px
        }
    </style>
</head>

<body>
    <!-- 制作三角形 -->
    <ul>
        <li>上路1
            <span></span>
        </li>
        <li>中路
            <span></span>
        </li>
        <li>下路
            <span></span>
        </li>
        <li>打野
            <span></span>
        </li>
        <li>辅助
            <span></span>
        </li>
    </ul>
</body>

</html>
绝对定位 - 1

效果图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        ul,
        ol,
        li {
            list-style: none;
        }

        /* 大的盒子 */
        .bigbox {
            width: 600px;
            height: 400px;
            border: 10px solid gray;
            margin: 0 auto;
            /* 父元素添加定位 */
            position: relative;
        }

        /* 强制设置图片的宽度高度 */
        .bigbox>img {
            width: 100%;
            height: 100%;
        }

        p {
            width: 60px;
            height: 100px;
            background-color: rgba(0, 0, 0, .5);
            /* 设置文本样式 */
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            font-weight: bold;
            color: white;
            /* 定位 */
            position: absolute;
        }

        .lef {
            top: 150px;
            left: 0px;
        }

        .rig {
            top: 150px;
            right: 0px;
        }

        .bigbox li {
            width: 15px;
            height: 15px;
            background-color: red;
            margin:3px;
            float: left;
        }
        .bigbox ul{
            position: absolute;
            left:20px;
            bottom:20px
        }
    </style>
</head>

<body>
    <!-- 轮播图案例 
            轮播图里面布局:一个大的盒子,里面有一个图,还有左右两个耳朵, 以及焦点图
            左右耳朵;方向键
            焦点图:点击的时候,跳转到对应的图片上面
    -->
    <div class="bigbox">
        <img src="../img/q.jpg" alt="">
        <!-- 左右两个耳朵 -->
        <p class="lef">&lt;</p>
        <p class="rig">&gt;</p>
        <!-- 焦点图 -->
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

</body>

</html>
绝对定位 - 2

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;padding:0
        }
        img{
            vertical-align: middle;
        }
        /* 设置这个大的盒子 */
        .bigbox{
            width: 230px;
            height:290px;
            border:1px solid red;
            /* 居中 */
            margin: 100px auto;
            /* 定位 */
            position: relative;
        }
        /* 控制图片大小 */
        .bigbox>img{
            width: 100%;
            height: 100%;
        }
        .bigbox>div{
            width: 100%;
            height: 88px;
            background-color: rgba(0,0,0,.5);
            position: absolute;
            bottom:0px;
            color:white;
            text-align: center;
        }
        .p1{
            line-height: 42px;
        }
        .p2{
            width: 124px;
            height: 30px;
            border:1px solid white;
            margin: 0 auto;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <img src="../img/q.jpg" alt="">
        <div>
            <p class="p1">XXXXXXXXXXXXX</p>
            <p class="p2">查看详情</p>
        </div>
    </div>
</body>
</html>
绝对定位 - 3

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;padding:0
        }
        .bigbox{
            width: 270px;
            height:270px;
            border:10px solid gray;
            margin:100px auto;
            /* 父元素使用相对定位 */
            position: relative;
        }
        .bigbox>.dog{
            width: 100%;
            height:100%;
        }
        .tu1,.tu2{
            position: absolute;
            left:20px;
            bottom:20px;
        }
        /* 一块划过效果 */
        .tu2{
            display: none;
        }
        .bigbox:hover>.tu2{
            display: block;
        }
        /*第二块划过 */
        .bigbox:hover>.dog{
            opacity: 0.6;
        }
        p{
            position: absolute;
            top:10px;
            /* 隐藏 */
            display: none;
        }
        /* 第三块划过 */
        .bigbox:hover>p{
            display: block;
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <img src="../img/img001.jpg" alt="" class="dog">
        <!-- + -->
        <img src="../img/tu.gif" alt="" class="tu1">
        <img src="../img/tu2.gif" alt="" class="tu2">
        <!-- 文本区域 -->
        <p>
            <img src="../img/logo.gif" alt="">
            马上快要下课了我好开心呀,终于可以抽华子了呀.
        </p>
    </div>
</body>
</html>
绝对定位 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;padding:0
        }
        .bigbox{
            width: 1000px;
            height:800px;
            border: 10px solid gray;
            margin:20px auto;
            position: relative;
        }
        .red{
            width: 200px;
            height:200px;
            background-color: red;
            position: absolute;
            top:50%;
            margin-top:-100px;
            left: 50%;
            margin-left: -100px;

            
        }
    </style>
</head>
<body>
    <!-- 面试题: 要求让一个子元素,位于父元素里面是水平垂直正居中 
        使用定位: 父相子绝;
        1)给父元素添加相对定位
        2)给子元素添加绝对定位
            top:50%;
            left:50%;
            margin-top:-高度一半;
            margin-left:-宽度一半;
    
    -->
    <div class="bigbox">
        <div class="red"></div>
    </div>
</body>
</html>
固定定位

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;padding:0
        }
        .bigbox{
            width: 1000px;
            height: 1500px;
            background-color: aqua;
            margin:0 auto;
        }
        .chat{
            width: 300px;
            height: 300px;
            background-color: orange;
            text-align: center;
            position: fixed;
            /* 偏移属性 */
            bottom:20px;
            right: 20px;
        }
    </style>
</head>
<body>
    <div class="bigbox"></div>
    <!-- 切记,所有的固定定位的效果,都要再布局结束后再去添加 -->
    <div class="chat">
        <h1>*****聊天窗口</h1>
    </div>
</body>
</html>
案例

效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
        *{
            margin:0;padding:0
        }
        ul,ol,li{
            list-style: none;
        }
        .bigbox{
            width: 1000px;
            height:400px;
            border:10px solid gray;
            margin:0 auto;

        }
        .bigbox>ul{
            width: 200px;
            height:400px;
            background-color: red;
            /* 浮动 */
            float: left;
            position: relative;
        }
        .bigbox>div{
            width: 800px;
            height: 400px;
            background-color: orange;
            float: left;
        }
        /* 设置左侧列表样式 */
        .bigbox>ul>li{
            line-height: 80px;
            height:80px;
            text-align: center;
            
        }
        /* 设置二级菜单 */
        .bigbox>ul>li div{
            width: 800px;
            height:400px;
            font-size: 100px;
            font-weight: bold;
            background-color: green;
            position: absolute;
            left: 200px;
            top:0px;
            line-height: 400px;
            /* 都需要隐藏 */
            display: none;

        }
        /* 鼠标划过li的时候让二级显示 */
        .bigbox>ul>li:hover>div{
            display: block;
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <!-- 左侧列表 -->
        <ul>
            <li>电脑
                <div>我是电脑区域</div>
            </li>
            <li>笔记本
                <div>笔记本电脑区域</div>
            </li>
            <li>千锋教育
                <div>千锋教育区域</div>
            </li>
            <li>键盘</li>
            <li>鼠标</li>
        </ul>
        <!-- 右侧轮播图 -->
        <div></div>
    </div>
</body>
</html>

星星小团
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS 绝对定位 7 大应用场景实战案例分享
艾编程带你学前端博客
12-09 607
今天我们来分享web前端CSS定位中的position：absolute绝对定位的应用场景案例的相关场景！绝对定位是CSS中非常中啊哟的知识点，接下来我我们会通过7个不同的层面结合7个不同的案例来展开讲解！绝对定位元素的特性绝对定位元素常见用法合集。
CSS布局之定位—静态定位—相对定位—绝对定位—子绝父相—固定定位—定位元素的层级关系—案例（重：水平垂直居中）
小琳爱分享的博客
07-23 852
CSS布局之定位—静态定位—相对定位—绝对定位—子绝父相—固定定位—定位元素的层级关系—案例（重：水平垂直居中）
CSS定位详解及案例
小洋人最happy的专栏
07-05 2186
文章目录一、标准流1.1 概念1.2 不足二、定位2.1 概念2.2 static-静态定位2.3 relative-相对定位2.3.1 特点：2.3.2 示例一2.3.3 示例二2.4 fixed-固定定位2.4.2 特点2.4.2 示例2.5 absolute-固定定位2.5.1 特点2.5.2 子绝父相2.5.3 示例一2.5.4 示例二2.6 层叠关系2.6.1 元素层叠2.6.2 z-index特点：2.6.3 比较原则2.6.3.1 兄弟关系2.6.3.2 如果不是兄弟关系三、小结3.1 对照表
html定位属性及应用案例
qq_50748038的博客
08-04 2566
html定位属性，返回顶部和导航栏悬浮设置
Android手机定位案例代码
徐刘根的博客
03-23 7547
代码如下：package com.xuliugen.gpsdemo;import com.itheima.gpsdemo.R;import android.app.Activity; import android.location.Criteria; import android.location.Location; import android.location.LocationListener;
陪学读书会——《定位》第十六章-产品定位案例：奶球
07-13 1037
2018年，我们推出陪学读书会，一个专属于产品经理的读书会。每月我们为您精读一本书，一个月后我们会举办一次书友读书分享会。希望我们能够一起多读书，读好书！陪学读书会——《定位》第十六章-产品定位案例：奶球（点击即可听书） 简介：奶球（Milk Duds）是比阿特丽斯食品公司（Beatrice Foods）的品牌，它是一种用黄底棕字的小盒包装的糖果，人称“电影”糖果，但该公司却想把奶球的业务扩大到年...
视觉定位系统怎么实现定位及引导贴合的应用？视觉定位系统案例详解
可为测控的机器视觉专栏
02-19 2207
机器视觉系统可以起到人类视觉的作用，利用自动化科技来替代人眼，使质量进一步升级，不仅可以提高工作效率，而且减少了人工产生的不确定因素对质量控制效果的影响。由于客户的产品体积大，一个相机无法保证装配的精度，我们决定采用工业机器人+双相机方案，以相机引导机器人到达对应位置来实现定位及引导贴合的应用。机器人从最优装配位置取一块安装好的工件到相机拍照位置，通过定位工具训练工件，记录特征点的图像上的坐标与空间上坐标以及特征角度。计算运行时工件特征点与训练时保存的特征点在空间坐标上的差值，及特征角度的差值。
HTML+CSS实现定位小案例
菜鸟初养成的博客
07-22 1392
定位实现鼠标滑过图片等比例放大，显示在原尺寸图片的上方。 起始状态 实现状态 代码实现 <style type="text/css"> img{ border: 0; width: 100px; height: 75px; } .box{ width: 600px; height: 300px; margin: 100px auto; ...
DIV CSS绝对定位布局案例 position布局实例
qq_37204849的博客
06-21 1290
遇到以上的不规则案例布局，如果使用float、padding等浮动实现比较麻烦，但使用position绝对定位即可很好简单地实现。接下来DIVCSS5为大家介绍position绝对定位方法布局以上小的案例。 一、用到CSS样式和HTML标签及相应解释   -   TOP 1、要用到CSS样式单词及解释 position：绝对定位样式实现DIV定位布局其设置值absolute和rela
西门子200Smart角度定位案例程序高度计数器支持反转 威纶通触摸屏
m0_71247050的博客
05-22 948
西门子200Smart角度定位案例程序高度计数器支持反转 威纶通触摸屏 利用编码器确定电机的角度位置0-360°，显示的非常精确，且有断电保持功能，下次上电可以保存上次编码器状态。 指示精确不漂移， PLC：ST20 ST30 ST40 触摸屏：MT8070IH（可以指定触摸屏：威纶通 MCGS昆仑通态) 编码器型号为欧姆龙：EB62-CWZ5B 附带接线IO 以及功能实现介绍！ ID:695644035670721 ...
定位-三角形_定位案例_
10-01
200smartplc定位案例，运动控制三角形，
gps定位案例
08-07
一个可运行的GPS定位案例。代码清晰易懂，是一个不错的学习案例。GPS定位在室内会有弊端，最好在室外使用真机测试。
EPS FB掉话排查定位案例
02-15
EPS FB掉话排查定位案例
背景图片粘性定位案例图
03-14
其中含有粘性定位和锚点等
视觉定位案例，包括定位轮廓中点、车牌识别与定位、二维码检测与定位、和条形码定位
04-14
视觉定位案例，包括定位轮廓中点、车牌识别与定位、二维码检测与定位、和条形码定位。
CSS实现一个雨滴滑落效果
云加速
05-28 1490
这只是一个非常基础的示例，真实的雨滴滑落效果可能需要更复杂的动画和可能的JavaScript交互来实现更逼真的效果，比如雨滴的大小、速度、下落路径的随机性等。如果你想要一个更复杂的动画效果，你可能需要考虑使用SVG、Canvas或者WebGL等技术，并结合JavaScript来实现。使用纯CSS来实现一个真实的雨滴滑落效果可能会有些挑战，因为CSS主要关注于静态样式和简单的动画效果。然而，你可以使用CSS动画和@keyframes来模拟一个雨滴滑落的简化效果。这个示例中的雨滴是一个简单的圆形元素。
CSS 空间转换 动画
qq_67140973的博客
05-31 345
空间转换、视距 - perspective、空间转换 - 旋转、立体呈现 - transform-style、空间转换 - 缩放、动画 - animation、动画的基本使用、animation 复合属性、animation 拆分属性、多组动画
Python私教张大鹏 Vue3整合Tailwindcss之size样式类
Python私教
06-05 737
1到12是连续的数字，间隔1。12到64间隔4。最大的是96。支持2,3,4,5,6,12百分比。
【SCSS】use的详细使用规则
最新发布
正在解锁骑着骆驼去南极的世界
06-06 188
如果发现自己想要一次配置多个变量，将映射作为配置传递，或者在模块加载后更新配置，请考虑编写一个mixin来设置您的变量，然后再编写一个mixin来注入样式。但是，有时您可能想要选择不同的命名空间——您可能想要为经常引用的模块使用较短的名称，或者您可能正在加载具有相同文件名的多个模块。如果你想让一个成员对整个包而不是单个模块私有，只是不要从你的包的任何入口点转发它的模块（你告诉用户加载以使用你的包的样式表）。要加载带有配置的模块，使用。如果使用as *，给该模块中定义的变量赋值，将覆盖其在该模块中的值。
循环递增定位 案例
05-28
假设有一个包含多个字符串的列表，我们想要在循环中递增定位每个字符串并打印它们的位置。可以使用如下代码实现： ```python string_list = ['hello', 'world', 'python', 'is', 'awesome'] for i in range(len...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值