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

最新推荐文章于 2022-11-12 18:31:39 发布

coder_66l

最新推荐文章于 2022-11-12 18:31:39 发布

阅读量812

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/coder_66l/article/details/121843858

版权

一、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>