B站coderwhy前端html+css学习笔记 day10

最新推荐文章于 2022-11-12 18:31:39 发布
原创 最新推荐文章于 2022-11-12 18:31:39 发布 · 884 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #html

本文详细介绍了CSS中的cursor属性，包括不同样式的应用场景，以及position属性的四种定位方式：static、relative、absolute和fixed，通过实例展示了它们在页面布局中的应用，如商品展示、二维码弹出和侧边栏悬浮效果。同时强调了脱离标准流的元素特点及层叠概念。

一、cursor

可以设置鼠标指针在元素上面时的显示样式

1.常见设值

  • auto:

浏览器根据上下文决定指针的显示样式，比如根据文本或者非文本切换指针样式

  • default:

箭头效果

  • pointer

小手效果

  • text

竖线效果

  • none

什么效果都无

二、css属性-定位

1、标准流（Normal Flow）

默认情况下，元素都是按照标准流进行排布

从左到右，从上到下按顺序摆放好

默认情况下不存在层叠情况

在这里插入图片描述

可以通过margin、padding来进行位置调整，但是会影响其他元素位置

2、css属性-position

取值：

  • static：静态定位(默认，按照标准流定位)

  • relative：相对定位

    • 元素按照标准流定位
    • 可以通过left、right、top、bottom进行定位
    • 定位参照对象是元素自己原来的位置

  • absolute：绝对定位

    在这里插入图片描述

    • 元素脱离normal flow

    • 可以通过left、right、top/bottom来定位

    • 定位参照对象为最邻近的定位祖先元素

    • 如果找不到这样的祖先元素，参照对象是视口

    • 子绝父相：

      • 在大部分情况下，子元素的绝对定位都是相对于父元素进行定位
      • 如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案为：父元素设置相对定位，子元素设置绝对定位，简称“子绝父相”。

    • 考拉商品展示图片案例

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .beauty-left{
            position: relative;
            display: inline-block;
        }

        .beauty-left ul{
           
            position: absolute;
            bottom: 10px;
            width: 280px;
            
            text-align: justify;
            text-align-last: justify;

            /* 居中显示 */
            left: 0;
            right: 0;
            margin: 0 auto;


           
        }

        .beauty-left ul li{
            display: inline-block;
            width: 80px;
            height: 18px;
            padding: 11px 0;
            margin: 10px 0;
            
            font-size:12px;
            color: #333;
            background-color: #fff;

            /* 覆盖父元素的justify */
            text-align: center;
            text-align-last: center;

            border: 1px solid #ededed;
            border-radius: 20px;
            box-shadow: 0 0 0 1px rgba(0,0,0,.1);

        }

        .beauty-left ul li a:hover{
            color:#ff1e32;
        }
    </style>
    
</head>
<body>

    <div class="beauty-left">
        <a href="#">
            <img src="../../img/考拉商品介绍.jpg" alt="_blank">
        </a>
        <ul>
            <li><a href="#">大牌腕表</a></li>
            <li><a href="#">流行配饰</a></li>
            <li><a href="#">黄金珠宝</a></li>
            <li><a href="#">眼镜烟具</a></li>
            <li><a href="#">施华洛世奇</a></li>
            <li><a href="#">DW</a></li>
        </ul>

    </div>
</body>
</html>

      效果图如下：利用绝对定位让下面的六个链接实现放在图片底部的效果，并且鼠标悬浮下面六个连接上可以变红

      在这里插入图片描述

  • 二维码案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .phone{
            position:relative;
                        
            /* 方便观察 */
            margin-left: 200px;

        }

        .phone .code span{
            display: block;
            text-align: center;
            margin-bottom: 3px;
        }

        .phone .code{
            position:absolute;
            top:20px;
            /* left: -90px; */
            transform: translate(-50%);
            left: 50%; 

            padding: 5px;
            margin-top: 20px;
          
            border: 1px solid #ededed;

            display: none;
        }
          
        .title{
            font-size: 14px;
        }

        .arrow{
            position:absolute;
            top: -6px;
            left: 0;
            right: 0;
            margin: 0 auto;
            /* transform: translate(-50%); */
            /* left: 50%; */

            width: 10px;
            height: 10px;

            border-top: 1px solid #ededed;
            border-left: 1px solid #ededed;
            
            transform: rotate(45deg);
            background-color: #fff;
        }

        .title:hover+.code{
             display: block;
        }

        .title:hover{
             color: #f00;
        }

    </style>
</head>
<body>
    <a class="phone" href="#">
        <span class="title">手机考拉</span>
       
        <span class="code">
            <span class="arrow "></span>
            <img src="../../img/考拉二维码.png">
            <span>下载APP</span>
            <span>领1000元新人礼包</span>
        </span>
    </a>
    
</body>
</html>

效果如下：点击"手机考拉"时，下面的二维码会弹出

在这里插入图片描述

  • fixed：固定定位（相对于浏览器视口，可以脱离标准流）

    • 侧边栏案例

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* reset */
        body{
            padding: 0;
            margin: 0;
        }

        a{
            text-decoration: none;
            color: #333;
        }

        /* 具体样式，先整体在局部 */
        .right-aside{
            position: fixed;
            top: 100px;
            right: 30px;
  
            border:1px solid #eaeaea; 
        }
        /* a元素的边框 */
        a{
            display: block;
            width: 62px;
            height: 48px;
            padding: 12px 0 0;
            text-align: center;
            font-size:12px;
            
            border-bottom:1px solid #eaeaea;
        }

        a.top{
            border-bottom: none;
        }

        /* 图标设置 */
        i{
            display:block;
            width: 20px;
            height: 20px;
            margin: 0 auto;
            /* background-color: #0f0; */
        }

        i.resign{
            background-image: url(../../img/考拉侧栏签到.png);
        }
        i.shopping{
            background-image: url(../../img/考拉侧栏购物车.png);
        }
        i.app_icon{
            background-image: url(../../img/考拉侧栏app.png);
        }
        i.top_icon{
            background-image: url(../../img/考拉侧栏top.png);
        }

        /* 侧栏悬浮 */
        .text{
            display: none; 

            position: absolute;
            left: -130%;
            bottom: 80%;

            padding: 5px 10px;


            border: 1px solid #eaeaea;
            color: #333;
        }
        .resign:hover .text{
            display: block;
         } 

        .arrow{
            width: 8px;
            height: 8px;
            
            position:absolute;
            right: -7%;
            bottom: 40%;

            border-top: 1px solid #eaeaea;
            border-right: 1px solid #eaeaea;
            
            transform: rotate(45deg);
            background-color: #fff;
        }

        a:hover{
            color:#ff1e32;
            background-color: #eaeaea;
        }

        a:hover i.resign{
            background-image: url(../../img/考拉侧栏签到红.png);
        }
        a:hover i.shopping{
            background-image: url(../../img/考拉侧栏购物车红.png);
        }
        a:hover i.app_icon{
            background-image: url(../../img/考拉侧栏APP红.png);
        }
        a:hover i.top_icon{
            background-image: url(../../img/考拉侧栏top红.png);
        }


    </style>
</head>
<body>
    <div class="right-aside">
        <a href="#" class="resign">
            <i class="resign"></i>
            <span>签到</span>
            <span class="text">
                每日签到<br>
                赢考拉豆
                <span class="arrow"></span>
            </span>
            
            
        </a>
        <a href="#">
            <i class="shopping"></i>
            <span>购物车</span>
        </a>
        <a href="#">
            <i class="app_icon"></i>
            <span>APP</span>
        </a>
        <a  class="top" href="#">
            <i class="top_icon"></i>
            <span>TOP</span>
        </a>
    </div>
</body>
</html>

      效果如下：当鼠标在选项上时，可以实现悬浮效果：字体变红，图片变红，补充信息悬浮出来

      请添加图片描述
      在这里插入图片描述

脱离标准流的元素（脱标元素）

固定定位，绝对定位，浮动

特点：可以随意设置宽高，高度默认由内容决定，不在给父元素汇报宽高元素。

3.position总结

在这里插入图片描述

三、元素的层叠

在这里插入图片描述
在这里插入图片描述

coder_66l
关注
尚硅谷web前端HTML5+CSS3笔记
qq_52380174的博客
12-19 5212
HTML/CSS笔记#自用#尚硅谷#李立超
Html5 + Css3笔记详细汇总大全
weixin_50637054的博客
04-10 8192
Html5 + Css3笔记详细汇总大全
B站coderwhy前端html+css学习笔记
coder_66l的博客
12-01 621
day4加油
B站coderwhy前端html+css学习笔记 day9
coder_66l的博客
12-09 277
盒子模型+定位布局
B站coderwhy老师Vue课程上课课件代码笔记资料
09-11
B站视频地址： https://www.bilibili.com/video/BV15741177Eh?from=search&seid=291894933216424179 B站视频是免费的，讲的很好，这里放一份资料，方便大家学习。
coderwhy--前端知识整合包--htmlcss05
Princesk的博客
09-24 579
coderwhy–前端知识整合包–html/css05 一、css属性-display 块级元素由来：display:block(所有浏览器默认添加，块级元素本就是行内级元素是因为浏览器默认添加上面那个) 1、常见取值 block：将元素设置为块级元素 inline：将元素设置为行内级元素 none：隐藏元素 inline-block：可以设置宽高的行内级元素，可以再同一行显示，具有块级元素和行内级元素特点 <head> <style> <!--这是一个选中变色效果--
coderwhy--前端知识整合包--htmlcss07
Princesk的博客
09-24 463
coderwhy–前端知识整合包–html/css07 一、浮动float 1、定位方案： normal flow：标准流 float：浮动 绝对定位：absoulte position 浮动和绝对定位都会让元素脱离标准流已达到灵活布局效果 2、常见取值 none、left、right 3、浮动规则 浮动元素会脱离标准流（若浮动元素跟标准流元素的行内级位置冲突，标准流的元素会跟在浮动元素之后），朝着向左或向右方向移动知道自己的元素边界紧贴着其他块（一般是父元素）或者其他浮动元素边界 层叠关系：定位元
html+css前端学习笔记.zip
最新发布
01-01
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
html+css学习笔记 前端 CSS html
11-02
学习了一个月的前端笔记
web前端期末结课大作业 html+css+javascript网页设计实例 企业网站制作
11-15
期末结课大作业 html+css+javascript网页设计实例 企业网站制作，资源里面有网页的HTML文件、CSS文件、JAVASCRIPT文件和网页中的图片文件，用于大学web网页课程设计参考以及相关从业人员参考学习
【coderwhy前端笔记 - 阶段一 HTML+CSS】（一）HTML
hippyoo的博客
11-09 1650
主要记录HTML的相关元素，包含使用的软件及小工具
coderwhy--前端知识整合包--htmlcss04
Princesk的博客
09-24 995
coderwhy–前端知识整合包–html/css04 1、列表元素（HTML） 有序列表：ol、li(块级元素两个块、一个数字一个内容) 无序列表：ul、li 定义列表：dl、dt、dd dl定义列表直接子元素dt和dd、 dt：列表中每一项项目名、一个dt一般紧跟着多个dd dd：列表中每一项具体描述对dt描述的补充 dt与dd常见组合：事务名称、描述，问题答案、类别名归属于这类的各种食物 <dl> <dt></dt> <dd></dd&
coderwhy--前端知识整合包--htmlcss06
Princesk的博客
09-24 526
coderwhy–前端知识整合包–html/css06 一、css-cursor（光标） 设置数百在元素上的显示的样式 cursor值：（常见） auto浏览器根据上下文自动决定指针样式 default：有操作系系统决定，一般是小箭头 pointer：小手 text：文本竖线 二、css-定位position 1、标准流 (1)简介 默认情况下元素都按照normal flow进行排布（标准流、常规流、正常流、文档流） (2)顺序： ​ 从左到右从上到下顺序摆好（默认情况下互相之间不存在层叠现象
【coderwhy前端笔记 - 阶段一 HTML+CSS】（二） CSS
hippyoo的博客
11-10 3087
css常用知识点
B站coderwhy前端html+css学习笔记 day5+6+7
coder_66l的博客
12-02 587
css三大特性 相关表单、表格、列表元素和属性 css元素类型
【coderwhy前端笔记 - 阶段一 HTML+CSS】（三）CSS补充、计算机相关知识
hippyoo的博客
11-12 704
移动端知识
CSS3 对话气泡
littlebird_cl的博客
05-24 401
.chat-bubble {     background-color: #ededed;     border: 2px solid #666;     font-size: 35px;     line-height: 1.3em;     margin: 10px auto;     padding: 10px;     position: relative;     tex
纯 CSS3 打造的按钮实例 | HTML5、CSS3、DEMO 实例
ilihong0805的专栏
06-25 685
纯 CSS3 打造的按钮实例 | HTML5、CSS3、DEMO 实例      body { background: #ededed; width: 900px; margin: 30px auto; color: #999; } p { margin: 0 0 2em; } h1 { margin: 0; }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值