Day0713定位学习上

最新推荐文章于 2024-08-05 17:22:58 发布
最新推荐文章于 2024-08-05 17:22:58 发布
阅读量66 收藏
点赞数 1
文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52696618/article/details/125821722
版权

01企业站新闻模块讲解

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .news{
            width: 453px;
            height: 241px;
            background: orange;
            padding-left: 1px;
            padding-right: 28px;
            overflow: hidden;
        }
        .news h2{
            font-size: 18px;
            color: #41454e;
            font-weight: 500;
            margin-top: 33px;
            margin-bottom: 20px;
        }
        .news li{
            font-size: 12px;
            line-height: 25px;
        }
        .news li a{
            color: #555555;
            display: block;
            /* height: ; */
            overflow: hidden;
        }
        .span1{
            float: left;
            display: block;
            width: 300px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .span2{
            float: right;
        }
    </style>
</head>
<body>
    <div class="news">
        <h2>动态新闻</h2>
        <ul>
            <li>
                <a href="#">
                    <span class="span1">我是左边的新闻</span>
                    <span class="span2">2022-07-13</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="span1">我是下方的内容我是下我是下方的内容我是下方的内容我是下方的内容方的内容我是下方的内容</span>
                    <span class="span2">2022-07-13</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="span1">我是左边的新闻内容，我是左边的新闻内容</span>
                    <span class="span2">2022-07-13</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="span1">我是左边的新闻内容，我是左边的新闻内容</span>
                    <span class="span2">2022-07-13</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="span1">我是左边的新闻内容，我是左边的新闻内容</span>
                    <span class="span2">2022-07-13</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="span1">我是左边的新闻内容，我是左边的新闻内容</span>
                    <span class="span2">2022-07-13</span>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

 02定位学习

<!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>
</head>
<body>
    <!--
        定位   position
        1.绝对定位  position:absolute;
        2.相对定位  position:relative;
        
        3.固定定位  position:fixed;
        4.粘性定位  position:sticky;
        5.默认值  position:static;
    -->
</body>
</html>

 03绝对定位学习

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background: green;
        }
        .box2{
            width: 250px;
            height: 250px;
            background: orange;
            position: absolute;
            right: 0;
            top: 0;
        }
        .box3{
            width: 300px;
            height: 300px;
            background: skyblue;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">asdasdasasaas3</div>

    <!--
        (一)绝对定位  position:absolute;
        定位一定有方位：上top  下bottom  左left  右right
        特点：
        1.给元素添加绝对定位之后，元素就飘了，不要自己的位置了，可以实现覆盖；
        2.一定要给绝对定位元素添加方位；
        3.方位的移动是有参照物：
            3.1 默认情况下，围绕着浏览器的第一屏做位置移动；
            3.2 围绕着父元素做位置移动，前提条件是，父元素身上一定需要有定位设置

        绝对定位使用的口诀：谁要动就给谁添加绝对定位
    -->
</body>
</html>

 04绝对定位相对父元素做位置移动

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .boss{
            width: 500px;
            height: 500px;
            background: orange;
            /* position: absolute; */
            /*相对定位  占位置*/
            position: relative;
        }
        .box{
            width: 200px;
            height: 200px;
            background: green;
            position: absolute;
            right: -10px;
            bottom: 10px;/*正值都是向里面移动的，负值都是向外移动*/
        }


        .content{
            width: 700px;
            height: 700px;
            background: pink;
        }
    </style>
</head>
<body>
    <div class="boss">
        <div class="box">我是小盒子</div>
    </div>


    <div class="content">我是西我是西方的我是西方的我是西方的我是西方的我是西方的我是西方的我是西方的我是西方的我是西方的我是西方的我是西方的我是西方的我是西方的我是西方的我是西方的我是西方的我是西方的我是西方的我是西方的方的</div>
</body>
</html>

05相对定位的学习

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background: green;
        }
        .box2{
            width: 250px;
            height: 250px;
            background: orange;
            position: relative;
            left: 30px;
            top: 20px;
        }
        .box3{
            width: 300px;
            height: 300px;
            background: skyblue;
        }
    </style>
</head>
<body>
    <!--
        (二)相对定位   position:relative;
        特点：
        1.给元素添加相对定位之后，元素没有飘，占位置在；
        2.也有参照物，围绕着自己原来的位置做移动；

        一般是给绝对定位元素的父元素添加的
    -->
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>

06腾讯大学定位案例

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 228px;
            height: 160px;
            background: pink;
            margin: 100px auto;
            position: relative;
        }
        .box a{
            display: block;
            width: 228px;
            height: 160px;
            color: #fff;
        }
        .box img{
            width: 228px;
            height: 160px;
        }
        .sbox{
            width: 228px;
            height: 26px;
            /* background: green; */
            position: absolute;
            left: 0;
            bottom: 0;
            font-size: 12px;
            line-height: 26px;
        }
        .sbox span{
            display: block;
            width: 20px;
            height: 26px;
            background: #e02917;
            text-align: center;  
            float: left;
        }
        .sbox p{
            width: 198px;
            height: 26px;
            background: rgba(0,0,0,0.4);
            float: left;
            padding-left: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">
            <img src="img/img1.jpg" alt="">
            <div class="sbox">
                <span>1</span>
                <p>我是右边的我是，右边的内容内容内容容</p>
            </div>
        </a>
    </div>
</body>
</html>

06腾讯大学定位案例3

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 228px;
            height: 160px;
            background: pink;
            margin: 100px auto;
            position: relative;
        }
        .box a{
            display: block;
            width: 228px;
            height: 160px;
            color: #fff;
        }
        .box img{
            width: 228px;
            height: 160px;
        }
        .sbox{
            width: 228px;
            height: 26px;
            /* background: green; */
            position: absolute;
            left: 0;
            bottom: 0;
            font-size: 12px;
            line-height: 26px;
            /* display: none; */
            opacity: 0;
            transition: 1s;
        }
        .box:hover .sbox{
            /* display: block; */
            opacity: 1;
            /* transition: 2s; */
        }
        .sbox span{
            display: block;
            width: 20px;
            height: 26px;
            background: #e02917;
            text-align: center;  
            float: left;
        }
        .sbox p{
            width: 198px;
            height: 26px;
            background: rgba(0,0,0,0.4);
            float: left;
            padding-left: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">
            <img src="img/img1.jpg" alt="">
            <div class="sbox">
                <span>1</span>
                <p>我是右边的我是，右边的内容内容内容容</p>
            </div>
        </a>
    </div>
</body>
</html>

 07透明颜色写法

<!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>
        .box{
            width: 200px;
            height: 200px;
            background: rgba(255,0,0,0.5);
            /*rgba()  alpha 透明度 0-1 值越小就越透明*/
        }
    </style>
</head>
<body>
    <div class="box">我是盒子</div>
</body>
</html>

08透明属性opacity

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background: red;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div class="box">我是盒子</div>
    <!--
        透明属性  opacity:0-1; 值越小就越透明
        opacity:0;   全透明，占位消失
        opacity:1;    正常显示
        可以结合transition做过渡动画效果

        transition添加2种效果：
        1.鼠标滑过有过渡动画，鼠标移开也有过渡动画，transition应该添加在元素本身；
        2.鼠标滑过有过渡动画，鼠标移开没有过渡，transition应该添加在hover处。
    -->
</body>
</html>

 09过渡动画消失和出现

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 200px;
            margin: 50px auto;
            position: relative;
        }
        .box img{
            width: 300px;
            height: 200px;
        }
        .shadow{
            width: 300px;
            height: 200px;
            background: rgba(255,255,255,0.3);
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: 0.8s;
        }
        .box:hover .shadow{
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="img/img1.jpg" alt="">
        <div class="shadow"></div>
    </div>
</body>
</html>

 10一个小盒子在一个大盒子里面做水平垂直居中

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        /*一、纯margin + overflow:hidden;*/
        /* .boss{
            width: 500px;
            height: 500px;
            background: orange;
            overflow: hidden;
        }
        .box{
            width: 200px;
            height: 200px;
            background: green;
            margin-left: 150px;
            margin-top: 150px;
        } */

        /*二、纯padding*/
        /* .boss{
            width: 350px;
            height: 350px;
            background: orange;
            padding-top: 150px;
            padding-left: 150px;
        }
        .box{
            width: 200px;
            height: 200px;
            background: green;
        } */

        /*三、定位*/
        /* .boss{
            width: 500px;
            height: 500px;
            background: orange;
            position: relative;
        }
        .box{
            width: 200px;
            height: 200px;
            background: green;
            position: absolute;
            left: 150px;
            top: 150px;
        } */

        /*四、display:inline-block; + line-height + vertical-align + text-align*/
        /* .boss{
            width: 500px;
            height: 500px;
            background: orange;
            text-align: center;
            line-height: 500px;
        }
        .box{
            width: 200px;
            height: 200px;
            background: green;
            display: inline-block;
            vertical-align: middle;
        } */

        /*五、定位 + margin取负值 */
        /* .boss{
            width: 500px;
            height: 500px;
            background: orange;
            position: relative;
        } */
        /* .box{
            width: 200px;
            height: 200px;
            background: green;
            position: absolute; */
            /*向右移动父元素宽度的一半*/
            /* left: 50%; */
            /*向左移动自身宽度的一半*/
            /* margin-left: -100px; */
            /*向下移动父元素高度的一半*/
            /* top: 50%; */
            /*向上移动自身高度的一半*/
            /* margin-top: -100px; */
        /* } */

        /*六、定位 + margin:auto;*/
        .boss{
            width: 500px;
            height: 500px;
            background: orange;
            position: relative;
        }
        .box{
            width: 200px;
            height: 200px;
            background: green;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <!--
        一个宽高为200*200的小盒子在一个宽高为500*500的大盒子里做水平垂直居中，请问你有哪些方法实现？(6种)
    -->
    <div class="boss">
        <div class="box"></div>
    </div>
</body>
</html>

 11轮播图的按钮书写

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .big_div{
            width: 100%;
            height: 400px;
            background: green;
            position: relative;
        }
        .box{
            width: 200px;
            height: 30px;
            background: rgba(0,0,0,0.5);
            position: absolute;
            left: 50%;
            margin-left: -100px;
            bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="big_div">
        <div class="box"></div>
    </div>
</body>
</html>
goto_w
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
CSS学习-DAY03-定位
qq_63014909的博客
07-14 1064
定位学习。
css学习day04
2201_75646248的博客
06-17 2007
属性作用。
css3学习day03
2201_75646248的博客
06-14 1519
复合选择器 标签显示模式 背景样式
网络安全学习笔记Day01—Day10
u014136101的博客
07-15 1726
①数据库（DB）是按照统一格式存放在一起的数据，作为企业管理系统的后台一台服务器可以部署多个数据库一个数据库可以包含多张表（用来存储具体的数据，由“记录”和“字段”组成）一个表中包含多条记录（行=“记录”）一条记录包含多个字段（列=“字段”）②数据管理员（DBA）③数据库的管理系统（DBMS）维护数据库并有效的访问数据库的各部分数据（增、删、改、查）④常见的数据库管理系统正向解析名字>>>IP反向解析IP>>>名字②早期域名解析方法C③常见的顶级域名（一级）组织域。...
day37 div 浮动定位
wzhty125的博客
08-09 1285
1. 盒子模型 1.1 盒子模型 其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 1.2 盒子模型之边框 语法：border : border-width || border-style || bord...
网安学习Day15-MISC（上）
weixin_44770698的博客
05-09 2367
今天学习到了关于CTF比赛中的杂项（MISC）的一些解题的思路。现在做以下的整理
2022黑马程序员-前端学习第一阶段（Day08-CSS布局 （定位+装饰）
sakura22123的博客
05-17 1374
网页制作-Day07 学习笔记打卡网页制作 学习视频B站：黑马程序员-前端学习（第一阶段） 网页制作
《解密家用路由器0day漏洞挖掘技术》学习笔记
zxyccm的博客
07-17 1774
家用路由器 漏洞挖掘技术 路由器漏洞
Day5学习（Web与CA证书）
Foreverlove112的博客
09-07 2306
Web/CA证书
自动驾驶：Tesla AI DAY 2022
Felaim的博客
06-10 1481
Tesla AI DAY 2022
06day_前端学习资料_
09-30
【前端学习资料】是针对...这些知识点构成了一个完整的前端学习路径，通过【06day】的学习资源，你可以逐步深入每个主题，从基础到高级，系统地提升自己的前端技能。记住，持续学习和实践是成为优秀前端开发者的关键。
学习JavaEE的day21
03-05
在“学习JavaEE的day21”这个主题中，我们主要关注的是Java企业版（Java Enterprise Edition，简称JavaEE）的深入学习。JavaEE是一种用于构建企业级分布式应用程序的平台，它提供了丰富的组件和服务，包括但不限于...
学习JavaEE的day15
03-02
在“学习JavaEE的day15”这个主题中，我们主要关注的是Java企业级应用开发的进阶内容。JavaEE，全称为Java Platform, Enterprise Edition，是Java平台针对服务器端应用开发的一个标准和框架集合。它提供了一系列API...
0day学习笔记(3)Windows定位API引起的惨案(原理)
01-07
段选择器FS与TEB WinNT内核下内存采用保护模式，段寄存器的意义与实模式汇编下的意义不同．另外，FS存的是段选择子，而不是实模式下的高16位基地址。 FS寄存器指向当前活动线程的TEB结构（线程结构） ...
HTML5大前端学习过程第二周（Day10）
01-08
今天没学什么新知识，主要是练习昨天学习的定位。 一. 本节课学习目标。 掌握定位的应用。 重点 二. 定位练习1-小米官网1。 小米官网 手机 电话卡 > 手机 电话卡...
HTML-09.表单项标签
程小白的博客
08-05 239
【代码】HTML-09.表单项标签。
HTML-04.新浪新闻-标题-超链接
程小白的博客
08-02 297
【代码】HTML-04.新浪新闻-标题-超链接。
前端面试宝典【HTML篇】【5】
BDawn的专栏
08-05 76
form标签用于定义 HTML 表单，它用于收集用户输入的数据。而input 标签则是表单中最常用的元素之一，用于创建各种类型的输入控件。 template 标签是 HTML5 中引入的一个新元素，用于定义文档中的不可见模板。这些模板可以被脚本动态地克隆并插入到文档的可见部分中，从而实现动态内容的快速构建。
前端面试宝典【HTML篇】【6】
最新发布
BDawn的专栏
08-05 221
canvas标签是 HTML5 中引入的一个新元素，它提供了一个矩形区域，可以在其中绘制图形或图像。canvas 本身并不具备绘图能力，它只是一个容器，所有的绘图工作都需要通过 JavaScript 来完成。 svg标签是用于定义可缩放矢量图形 (Scalable Vector Graphics, SVG) 的容器。SVG 是一种基于 XML 的图形格式，它允许开发者创建高质量的矢量图形，这些图形可以无限放大而不失真。SVG 图形不仅支持静态图像，还支持动画和交互式图形。
前端入门：HTML+CSS 学习笔记 Day01
`<hr>`绘制水平线，`<p>`定义段落，`<strong>`、`<b>`强调文字，``、`<i>`表示着重或斜体，`<ins>`、`<u>`表示插入文本，`<del>`、`<s>`表示删除文本，`<div>`用于分组元素，`<span>`用于行内元素的<em>定位，`<img>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

goto_w

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值