前端学习-day08

文章目录

01-相对定位

python 复制代码
<!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;
        }
        /* 
            1.改变位置的参照物是自己原来的位置。
            2.不脱标,占位。
            3.标签显示特点不发生改变。
        */
        div{
            position: relative;
            top: 100px;
            left: 200px;
        }
    </style>
</head>
<body>
    <p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于2024年2月发表在Nature旗下子刊《Scientific Reports》上。</p>
    <div><img src="./20.jpg" alt=""></div>
    <p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于2024年2月发表在Nature旗下子刊《Scientific Reports》上。</p>

</body>
</html>

02-绝对定位

python 复制代码
<!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{
            width: 400px;
        }
        .news{
            position: relative;
            margin: 100px auto;
            width: 400px;
            height: 350px;
            background-color: #fff;
        }
        /* 
            1.脱标,不占位置
            2.参照物:先找最近的已定位的祖先元素,如果所有祖先元素都没有定位,
                参照浏览器窗口改位置
            3.显示模块特点改变:具备行内块的特点
        */
        .news span{
            position: absolute;
            top: 0px;
            right: 0px;

            display: block;
            width: 92px;
            height: 32px;
            background-color: rgba(0,0,0,0.6);
            text-align: center;
            line-height: 32px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="news">
        <!-- 300*266 -->
        <img src="./20.jpg" alt="">
        <span>展会活动</span>
        <h4>djnj </h4>
    </div>
</body>
</html>

03-绝对定位居中

python 复制代码
<!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>
        img{
            position: absolute;
            left: 50%;
            top: 50%;
            /*上述代码会让图片的左上角出现在页面中心。下面的代码是需要对他进行移动  */


            /* margin-left: -150px; */
            /* margin-top: -133px; */
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <img src="./20.jpg" alt="">
</body>
</html>

04-固定定位

python 复制代码
<!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;
        }
        body{
            width: 100%;
        }
        /* 
            1.脱标:不占位
            2.参照物:浏览器窗口
            3.具备行内块的特点(但是我这里修改之后没生效)
        */
        div{
            position: fixed;
            top: 0;
            left: 0;


            width: 20px;
        }
    </style>
</head>
<body>
    <p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于2024年2月发表在Nature旗下子刊《Scientific Reports》上。</p>
    <div><img src="./20.jpg" alt=""></div>
    <p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于2024年2月发表在Nature旗下子刊《Scientific Reports》上。</p>
    <p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于2024年2月发表在Nature旗下子刊《Scientific Reports》上。</p>
    <p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于2024年2月发表在Nature旗下子刊《Scientific Reports》上。</p>
    <p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于2024年2月发表在Nature旗下子刊《Scientific Reports》上。</p>
    <p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于2024年2月发表在Nature旗下子刊《Scientific Reports》上。</p>
    <p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于2024年2月发表在Nature旗下子刊《Scientific Reports》上。</p>
    <p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于2024年2月发表在Nature旗下子刊《Scientific Reports》上。</p>
    <p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于2024年2月发表在Nature旗下子刊《Scientific Reports》上。</p>
    <p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于2024年2月发表在Nature旗下子刊《Scientific Reports》上。</p>
    <p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于2024年2月发表在Nature旗下子刊《Scientific Reports》上。</p>
    <p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于2024年2月发表在Nature旗下子刊《Scientific Reports》上。</p>
    <p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于2024年2月发表在Nature旗下子刊《Scientific Reports》上。</p>
    <p>河马优化算法(Hippopotamus Optimization Algorithm,HO)是一种新型的元启发式算法(智能优化算法),灵感来源于河马的固有行为。该成果由Mohammad Hussein Amiri等人于2024年2月发表在Nature旗下子刊《Scientific Reports》上。</p>

</body>
</html>

05-堆叠顺序

python 复制代码
<!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>
        div{
            position: absolute;
            /* 如果不修改,这个蓝色会把粉色覆盖掉,这就叫后来者居上 */
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: pink;
            z-index: 1;
            /* 谁的index属性值大,就不会被盖住 */
        }
        .box2{
            background-color: skyblue;
            left: 100px;
            top: 100px;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>
</html>

06-CSS精灵-基本使用

python 复制代码
<!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>
        div{
            width: 102px;
            height: 118px;
            background-color: pink;
            background-image: url(./21.png);
            /* 231  142 */
            background-position: -231px -142px;
        }
    </style>
</head>
<body>
    <!-- 
        1.创建盒子:盒子尺寸和想要显示的小图一样大
         2.给盒子设置背景图为精灵图
         3.调整位置
     -->
    <div></div>
</body>
</html>


07-案例-京东服务

python 复制代码
<!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;
            box-sizing: border-box;
        }
        li{
            list-style: none;
        }
        .service{
            margin: 50px auto;
            width: 1190px;
            height: 42px;
            /* background-color: pink; */
        }
        .service ul{
            display: flex;
        }
        .service li{
            display: flex;
            padding-left: 40px;
            width: 297px;
            height: 42px;
            /* background-color: skyblue; */
        }
        .service li h5{
            margin-right: 10px;
            width: 36px;
            height: 42px;
            /* background-color: pink; */
            background: url(./22.png) 0 -192px;
        }
        .service li:nth-child(2) h5{
            background-position: -41px -192px;
        }
        .service li:nth-child(3) h5{
            background-position: -82px -192px;
        }
        .service li:nth-child(4) h5{
            background-position: -123px -192px;
        }
        .service li p{
            font-size: 18px;
            color: #444;
            font-weight: 700;
            line-height: 42px;
        }
    </style>
</head>
<body>
    <div class="service">
        <ul>
            <li>
                <h5></h5>
                <p>jsdj间距你先</p>
            </li>
            <li>
                <h5></h5>
                <p>jsdj间距你先</p>
            </li>
            <li>
                <h5></h5>
                <p>jsdj间距你先</p>
            </li>
            <li>
                <h5></h5>
                <p>jsdj间距你先</p>
            </li>
           
        </ul>
    </div>
</body>
</html>

08-字体图标

python 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        /* 注意:
            如果要调整字体大小,选择器的优先级要高于iconfontlei
        */
        .iconfont{
            font-size: 200px;
            color: red;
        }
    </style>
</head>
<body>
    <span class="iconfont icon-xihuan"></span>
</body>
</html>

10.垂直对齐方式

python 复制代码
<!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>
        div{
            border: 1px solid #000;
        }
        img{
            /* 这一步可以使得字体垂直居中,消除img下的空隙 */
            /* vertical-align: middle; */

            /* vertical-align: top; */

            /* vertical-align: bottom; */

            /* 为什么改变display就可以把下面的空隙删除:img是行内块,浏览器会把行内块(行内标签)当成字处理,会按照基线处理,所以有缝隙 */
            display: block;
        }

    </style>
</head>
<body>
    <div>
        <img src="./20.jpg" alt="">
        <!-- Hhbh笔记本举报B接纳你尽快的解决农村的 -->
    </div>
</body>
</html>

11-过度

python 复制代码
<!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>
        img{
            width: 200px;
            height: 300px;
            transition: all 1s;
        }
        img:hover{
            width: 300px;
            height: 500px;
        }
    </style>
</head>
<body>
    <img src="./20.jpg" alt="">
</body>
</html>

12-透明度

python 复制代码
<!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>
        div{
            width: 500px;
            height: 500px;
            background-color: pink;

            opacity: 0;
            opacity: 1;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div>
        <img src="./20.jpg" alt="">
    </div>
</body>
</html>

13-光标类型

python 复制代码
<!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>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 小手-提升可点击 */
            cursor: pointer;
            /* 工字型-提示可选择文字 */
            cursor: text;
            /* 十字光标-提示可移动 */
            cursor: move;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

14-轮播图

python 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        li{
            list-style: none;
        }

        /* 图 */
        .banner{
            position: relative;
            margin: 100px auto;
            width: 564px;
            /* height: 315px; */
            /* background-color: pink; */

            /* 进行溢出隐藏 */
            overflow: hidden;
        }
        .banner img{
            width: 564px;
            border-radius: 12px;
            vertical-align: middle;
        }
        .banner ul{
            display: flex;
        }

        /* 箭头 */
        .banner .prev,
        .banner .next{
            display: none;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 30px;
            background-color: rgba(0,0,0,0.3);

            /* 给a标签设置样式 */
            text-decoration: none;
            color: white;
            line-height: 30px;
        }
        .banner:hover .prev,
        .banner:hover .next{
            display: block;
        }
        .banner .prev{
            left: 0;
            border-radius: 0 15px 15px 0;
        }
        .banner .next{
            right: 0;
            border-radius: 15px 0 0 15px;

            /* 设置小箭头水平方向居中 */
            text-align: center;
        }

        /* 圆点 */
        .banner ol{
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            height: 13px;
            background-color: rgba(255,255,255,0.3);
            display: flex;
            border-radius: 10px;
        }
        .banner ol li{
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 50%;
            margin: 3px;
            cursor: pointer;
        }
        .banner ol .active{
            background-color: #ff5000;
        }

    </style>
</head>
<body>
    <div class="banner">
        <!-- 图 -->
        <ul>
            <li><a href="#"><img src="./1111.jpg" alt=""></a></li>
            <li><a href="#"><img src="./22222.jpg" alt=""></a></li>
            <li><a href="#"><img src="./33333.jpg" alt=""></a></li>
        </ul>
        <!-- 箭头 -->
        <a href="#" class="prev">
            <i class="iconfont icon-fanhui"></i>
        </a>
        <a href="#" class="next">
            <i class="iconfont icon-jinru"></i>
        </a>
        <!-- 圆点 -->
        <ol>
            <li></li>
            <li class="active"></li>
            <li></li>
        </ol>
    </div>
</body>
</html>
相关推荐
光影少年几秒前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_2 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189114 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
ajsbxi5 分钟前
苍穹外卖学习记录
java·笔记·后端·学习·nginx·spring·servlet
Ocean☾5 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking6 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu7 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym12 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫13 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫17 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js