CSS学习笔记

最新推荐文章于 2024-05-30 14:49:04 发布
最新推荐文章于 2024-05-30 14:49:04 发布
阅读量274 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35995730/article/details/103825081
版权

文章目录

1、CSS入门

  • 如何学习:
    1. CSS是什么
    2. CSS怎么用（快速入门）
    3. CSS 选择器 （重点 + 难点）
    4. 美化网页 （文字，阴影，超链接，列表,渐变….） 声明
    5. 盒子模型 网页基础~
    6. 浮动 应用~
    7. 定位
    8. 网页动画（特效效果）
1.1、什么是CSS
  • Cascading Style Sheet 层叠级联样式表
  • CSS作用：美化网页
  • 作用举例：字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动….
  • 示例：
    在这里插入图片描述
1.2、CSS的发展史

  • 发展历程：
    (1). CSS1.0

    (2). CSS2.0 DIV（块） + CSS，HTML 与 CSS 结构分离的思想，网页变得简单，SEO

    (3). CSS2.1 浮动，定位

    (4). CSS3.0 圆角，阴影，动画…. 浏览器兼容性~

  • 练习的工程文件布局格式：
    在这里插入图片描述

1.3、CSS快速入门

  • 基本入门：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--规范，<style> 可以编写css的代码 ，没一个声明，最好使用分号结尾
    语法：
        选择器 {
            声明1;
            声明2;
            声明3;
        }
  
    -->
    <style>
        h1{
            color: red;
        }
    </style>


</head>
<body>


<h1>我是标题</h1>

</body>
</html>

  • 建议使用(外部引入CSS样式)这种格式规范：
    在这里插入图片描述

  • CSS的优势：
    1、内容和表现分离

2、网页结构表现统一，可以实现复用

3、样式十分的丰富

4、建议使用独立于html的css文件

5、利用SEO，容易被搜索引擎收录

1.4、CSS的3种导入方式：

  • 代码示例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>

    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<!--优先级：就近原则 -->

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可 -->
<h1 style="color:red;">我是标题</h1>

</body>
</html>

  • 问题2：不同的CSS导入方式生效的顺序有何区别？

    • 优先级：就近原则(行内肯定是最近的，外部样式和内部样式就看谁离标签更近谁就生效！)

  • 拓展：外部样式的两种写法：
    (1). 链接式：(html)

    <!--外部样式-->
<link rel="stylesheet" href="css/style.css">

    (2). 导入式：(@import 是CSS 2.1特有的)

    <!--导入式-->
<style>
 @import url("css/style.css");
</style>

2、选择器

作用：CSS选择页面上的某一个或者一类元素来进行修饰。（相当于CSS进行选择性的修饰）

2.1、基本选择器：

1、标签选择器 ：选择一类标签 标签{} (会选择到页面上所有的这个标签的元素进行修饰)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器，会选择到页面上所有的这个标签的元素*/
        h1{
            color: #a13d30;
            background: #3cbda6;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }
    </style>

</head>
<body>


<h1>学Java</h1>
<h1>学Java</h1>
<p>听狂神说</p>

</body>
</html>

2、类 选择器 class ： 选择所有class 属性一致的标签，跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*类选择器的格式  .class的名称{}
        好处，可以多个标签归类，是同一个 class，可以复用

        */
        .qinjiang{
            color: #3748ff;
        }
        .kuangshen{
            color: #a24fff;
        }
    </style>

</head>
<body>

<h1 class="qinjiang">标题1</h1>
<h1 class="kuangshen">标题2</h1>
<h1 class="qinjiang">标题3</h1>

<p class="qinjiang">P标签</p>

</body>
</html>

3、Id 选择器：全局唯一！ #id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* id选择器   : id必须保证全局唯一！
           #id名称{}
           优先级：
           不遵循就近原则，固定的
           id选择器> class 选择器 > 标签选择器
        */
        #qinjiang{
            color: #ff008a;
        }
        .style1{
            color: #02ff00;
        }
        h1{
            color: #2d1dc1;
        }
    </style>
    
</head>
<body>

<h1 class="style1" id="qinjiang">标题1</h1>  <!--这里在页面起作用的是：id选择器中的修饰代码！-->
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>


</body>
</html>

  • css选择器的优先顺序：(不遵循就近原则！)

    id 选择器 > 类选择器 > 标签选择器

    • 注意：id 选择器的id不能为纯数字！
2.2、层次选择器：
  • 特点：利用标签的层级关系来选择需要被修饰的对象

1、后代选择器：在某个元素的后面

后代：祖爷爷 》 爷爷 》 爸爸 》儿子

/*后代选则器*/
body p{
    background: red;
}
  • 注意：说明其可以叠加多层，直到最后一代！
.top-nav li a {
	display:block;
	text-align:center;
	font-size:16px;
	color:#fff;
}

2、子选择器，一代，儿子(只能选择下一代)

/*子选择器*/
body>p{
    background: #3cbda6;
}

3、相邻兄弟选择器 同辈

/*相邻兄弟选择器： 只有一个，相邻（向下） */
.active + p{
	background: #a13d30;
}

4、通用选择器

/*通用兄弟选则器，当前选中元素的向下的所有兄弟元素*/
.active~p{
    background: #02ff00;
}
2.3、结构伪类选择器
  • 特点：利用一些特殊的表示方法利用结构的思想来从htm结构中选择需要修饰的对象！
  • 代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--避免使用，class，id选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: #02ff00;
        }

        /*ul的最后一子元素*/
        ul li:last-child{
            background: #ff4832;
        }

        /* 选中 p1 : 定位到父元素，选择当前父级元素下的第一个子元素
        选择当前p元素的父级元素，选中父级元素的第一个子元素，并且是当前元素才生效！ ，顺序
        */
        p:nth-child(1){
            background: #2700ff;
        }

        /*选中父元素下的p元素的第二个，类型就是p */
        p:nth-of-type(2){
            background: yellow;
        }

        /*a:hover{*/
            /*background: #000b3e;*/
        /*}*/


    </style>

</head>
<body>
    <!--<a href="">31231</a>-->
    <!--<h1>h1</h1>-->
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>

</body>
</html>

在这里插入图片描述

2.4 、属性选择器
  • 特点：id + class 结合~
  • 代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #2700ff;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /* 属性名， 属性名 = 属性值（正则）
        = 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾

        */
        /*存在id属性的元素        a[]{}*/
        /*a[id]{*/
            /*background: yellow;*/
        /*}*/
        /*id=first的元素*/
        /*a[id=first]{*/
            /*background: #63ff23;*/
        /*}*/

        /*class 中有 links的元素*/
        /*a[class*="links"]{*/
            /*background: yellow;*/
        /*}*/

        /*!*选中href中以http开头的元素*!*/
        /*a[href^=http]{*/
            /*background: yellow;*/
        /*}*/

        a[href$=jpg]{
            background: yellow;
        }

    </style>

</head>
<body>


<p class="demo">

    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http://blog.kuangstudy.com" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>

</p>

</body>
</html>

在这里插入图片描述

  • 注意如下操作：
符号意义
=绝对等于
*=包含这个元素
^=以这个元素开头
$=以这个元素结尾

3、美化网页元素

3.1、为什么要美化网页

1、有效的传递页面信息

2、美化网页，页面漂亮，才能吸引用户

3、凸显页面的主题

4、提高用户的体验

  • span标签： 标签被用来组合文档中的行内元素。（重点要突出的字，使用 span 套起来）
  • span标签：约定俗称的突出重点的字，标签本身无意义（div也是如此？）
  • 注意：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
  • 代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #title1{
            font-size: 50px;
        }
    </style>

</head>
<body>

欢迎学习 <span id="title1">Java</span>

</body>
</html>
3.2、字体样式
  • 字体设置：
标识含义
font-family字体
font-size字体大小
font-weight字体粗细
color字体颜色
  • 代码示例：
-->
<style>
    body{
        font-family: "Arial Black", 楷体;
        color: #a13d30;
    }
    h1{
        font-size: 50px;
    }
    .p1{
        font-weight: bolder;
    }
</style>
3.2、文本样式
  • 样式设置：
表示方法含义
color: rgb/ rgba(带透明度的颜色)颜色
text-align = center文本对齐的方式
text-indent:2em首行缩进
line-height行高 (line-height = height => 单行文字上下居中！)
text-decoration装饰
vertical-align:middle文本图片水平对齐

  • 关于vertical-align的示例：
    在这里插入图片描述

  • 代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    颜色：
        单词
        RGB 0~F
        RGBA  A：0~1

    text-align : 排版，居中，
    text-indent: 2em;  段落首行缩进
    height: 300px;
    line-height: 300px;
        行高，和 块的高度一致，就可以上下居中
    -->
    <style>
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: #2700ff;
            height: 300px;
            line-height: 300px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
        /*超链接去下划线*/
        a{
            text-decoration: none;
        }


        /*<!--*/
        /*水平对齐~ 参照物，  a，b*/
        /*-->*/
        img,span{
            vertical-align: middle;
        }

    </style>
    

</head>
<body>

<a href="">123</a>


<p class="l1">1231231</p>
<p class="l2">1231231</p>
<p class="l3">1231231</p>



<h1>故事介绍</h1>

<p class="p1">
    平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>

<p>
    在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>

<p class="p3">
    Since there’s no help, come let us kiss and part;Nay, I have done, you get no more of me,And I am glad, yea glad with all my heartThat thus so cleanly I myself can free;Shake hands forever, cancel all our vows,And when we meet at any time again,Be it not seen in either of our browsThat we one jot of former love retain.Now at the last gasp of Love’s latest breath,When, his pulse failing, Passion speechless lies,When Faith is kneeling by his bed of death,And Innocence is closing up his eyes,Now if thou wouldst, when all have given him over,From death to life thou mightst him yet recover.
</p>


<p>
    <img src="images/a.png" alt="">
    <span>asdasdajsldjalksdjalksd</span>
</p>


q
</body>
</html>
3.4、阴影

在这里插入图片描述

/*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
    text-shadow: #3cc7f5 10px -10px 2px;
}
3.5、超链接伪类
  • 注意：在正常情况下，我们只会使用 a，a:hover
/*默认的颜色*/
a{
    text-decoration: none;
    color: #000;
}
/*鼠标悬浮的状态（只需要记住 :hover）*/
a:hover{
    color: orange;
    font-size: 50px;
}
3.6、列表
  • list-style:
标识作用
none去掉原点(什么都没有)
circle空心圆
decimal数字
square正方形
  • 代码示例：
/*ul{*/
    /*background: #a0a0a0;*/
/*}*/

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;

}
3.7、背景

  • 常用设置：背景颜色、背景图片

  • 代码示例：

<style>
div{
    width: 1000px;
    height: 700px;
    border: 1px solid red;
    background-image: url("images/tx.jpg");
    /*默认是全部平铺的 repeat*/
}
.div1{
    background-repeat: repeat-x;
}
.div2{
    background-repeat: repeat-y;
}
.div3{
    background-repeat: no-repeat;
}
</style>
  • 效果：
    在这里插入图片描述
3.8、渐变
  • 概念：inear-gradient() 函数用于创建一个线性渐变的 “图像”。

注意：为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

  • 代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--径向渐变，圆形渐变-->
    <style>
        body {
            /*background-color: #21D4FD;*/
            /*background-color: #21D4FD;*/
            background-image: linear-gradient(19deg, #21D4FD 0%, #00ff4e 100%);

        }

    </style>

</head>
<body>

</body>
</html>
  • 效果：
    在这里插入图片描述

4、盒子模型

4.1、什么是盒子模型

在这里插入图片描述

margin : 外边框
padding : 内边距
border : 边框

4.2、边框

  • 可以设置的边框：

    1、边框的粗细

    2、边框的样式

    3、边框的颜色

  • 代码示例：
    在这里插入图片描述

4.3、内外边距
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--外边距的妙用：居中元素
     margin: 0 auto;
    -->
    <style>

        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }
        /*
        顺时针旋转
        margin:0
        margin:0 1px
        margin:0 1px  2px   3px

        */
        h2{
            font-size: 16px;
            background-color: #3cbda6;
            line-height: 30px;
            color: white;
            margin:0 1px 2px 3px;
        }

        form{
            background: #3cbda6;
        }
        input{
            border: 1px solid black;
        }
        div:nth-of-type(1){
            padding: 10px 2px;
        }
    </style>

</head>
<body>


<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

  • 盒子的计算方式：你这个元素到底有多大？
    在这里插入图片描述

  • 计算公式：margin + border + padding + 内容宽度

4.4、圆角边框
  • 代码示例：
<style>
div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    border-radius: 100px;
}
</style>

  • 效果：
    在这里插入图片描述

  • 头像圆形代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            width: 50px;
            height: 50px;
            margin: 30px;
            background: red;
            border-radius: 50px 0 0 0;
        }
        img{
            border-radius: 25px;
        }
    </style>

</head>
<body>

<div></div>

<img src="images/tx.jpg" alt="">

</body>
</html>
  • 效果：
    在这里插入图片描述
4.6、盒子阴影
  • 代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!-- margin: 0 auto; 居中
要求： 块元素，块元素有固定的宽度
-->
    <style>
        img{
            border-radius: 50px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>

</head>

<body>

    <div style="width: 500px;display: block;text-align: center">
        <img src="images/tx.jpg" alt="">
    </div>


</body>

</html>
  • 效果：（头像附近晕黄的背景色就来自于阴影效果！）
    在这里插入图片描述

5、浮动

5.1、标准文档流

在这里插入图片描述

  • 重点知识：

    • 块级元素：独占一行
    h1~h6   p  div   列表等...
    • 行内元素：不独占一行
    span  a  img  strong等....
    • 注意：行内元素 可以被包含在 块级元素中，反之，则不可以~
5.2、display
  • display概念：设置该修饰的元素块不展示
  • 示例代码：
<!--
    block 块元素
    inline 行内元素
    inline-block  是块元素，但是可以内联，在一行！
    none
-->
<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: none;
    }
    span{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
    }
</style>

  • 效果：
    在这里插入图片描述

  • display选项值：

标识符含义
block块元素
inline行内元素
inline-block是块儿元素，但是可以内联，在一行
none什么都不展示，相当于直接让该被修饰的对象直接失效了
  • 注意：display设置也是一种实现行内元素排列的方式，但是我们很多情况都是用 float
  • 原因：因为display 和 float 都能使得块儿级元素变成一行(行内元素)，但是display不能调整顺序，但是float可以自己控制浮动的方向，所以float使用的比较多！
5.3、float
  • 左右浮动：
  • 示例代码：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>浮动</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="father">
    <div class="layer01"><img src="images/1.jpg" alt=""/></div>
    <div class="layer02"><img src="images/2.jpg" alt=""/></div>
    <div class="layer03"><img src="images/3.jpg" alt=""/></div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动.
    </div>
</div>
</body>
</html>

div {
    margin:10px;
    padding:5px;
}
#father {
    border:1px #000 solid;
}

.layer01 {
    border:1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer02 {
    border:1px #00F dashed;
    display: inline-block;
    float: left;
}
.layer03 {
    border:1px #060 dashed;
    display: inline-block;
    float: right;
}
.layer04 {
    border:1px #666 dashed;
    font-size:12px;
    line-height:23px;
    display: inline-block;
    float: right;
}
  • 效果：（从图中可以看到我们在父级div设置的效果并没有用，图中的黑色边框线并没有将浮动的元素笼罩在其中，出现了父级边框塌陷的问题）
    在这里插入图片描述
5.4、父级边框塌陷的问题
  • clear 说明：
/*
clear: right; 右侧不允许有浮动元素
clear: left;  左侧不允许有浮动元素
clear: both;  两侧不允许有浮动元素
clear: none; 
*/

  • 父级边框塌陷问题的解决办法：

    1、增加父级元素的高度~

    #father {
    border:1px #000 solid;
    height: 800px;
}

    2、增加一个空的div标签，清除浮动

    <div class="clear"></div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

    3、overflow

    在父级元素中增加一个  overflow: hidden;

    4、在父类添加一个伪类：after

    #father:after{
    content: '';
    display: block;
    clear: both;
}

  • 小结：

  1. 浮动元素后面增加空div

    简单，代码中尽量避免空div

  2. 设置父元素的高度

    简单，元素假设有了固定的高度，就会被限制

  3. overflow

    简单，下拉的一些场景避免使用

  4. 父类添加一个伪类：after（推荐）

    写法稍微复杂一点，但是没有副作用，推荐使用！

5.5、对比
  • display : 方向不可控制
  • float : 浮动起来的话，会脱离标准文档流，所以要解决父级边框塌陷的问题~

6、定位

6.1、相对定位
  • 概念：相对于原来的位置，进行指定的偏移，相对定位的话，它任然在标准文档流中，原来的位置会被保留.
  • 标识：相对定位：position: relative;
  • 示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 相对定位
    相对于自己原来的位置进行偏移~
    -->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
        }
        #first{
            background-color: #a13d30;
            border: 1px dashed #b27530;
            position: relative; /*相对定位：上下左右*/
            top: -20px;
            left: 20px;
        }
        #second{
            background-color: #255099;
            border: 1px dashed #255066;
        }
        #third{
            background-color: #1c6699;
            border: 1px dashed #1c6615;
            position: relative;
            bottom: -10px;
            right: 20px;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>
  • 效果：
    在这里插入图片描述

相对定位练习题：链接卡

  • 目标效果图：
    在这里插入图片描述
  • 代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: #ffa1f2;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background: #47a4ff;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }


    </style>
</head>
<body>

<div id="box">
    <a class="a1" href="#">链接1</a>
    <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>
</div>

</body>
</html>
6.2、绝对定位

  • 定位：基于xxx定位，上下左右~

    1、没有父级元素定位的前提下，相对于浏览器定位

    2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移~

    3、在父级元素范围内移动

注意：相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在在标准文档流中，原来的位置不会被保留

  • 代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #a13d30;
            border: 1px dashed #b27530;
        }
        #second{
            background-color: #255099;
            border: 1px dashed #255066;
            position: absolute;

            left: 100px;
        }
        #third{
            background-color: #1c6699;
            border: 1px dashed #1c6615;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>
  • 效果：
    在这里插入图片描述
6.3、固定定位 fixed
  • 概念：将被修饰的元素的位置固定在某个位置，而不随页面拖动变化而发生位置变换！
  • 代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){ /*绝对定位：相对于浏览器*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){ /*fixed,固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>

</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

  • 效果：(鼠标未拖动)
    在这里插入图片描述

  • 效果：(鼠标进行了拖动，我们发现固定定位修饰的元素未发生位置变换！)
    在这里插入图片描述

6.4、z-index
  • 图层示意图：
    在这里插入图片描述

z-index : 默认是0，最高无线~ (我们一般把想要表示在最前面的元素设置为：999)

  • 示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="content">
    <ul>
        <li><img src="images/bg.jpg" alt=""> </li>
        <li class="tipText">学习微服务，找狂神</li>
        <li class="tipBg"></li>
        <li>时间：2099-01-01</li>
        <li>地点：月球一号基地</li>
    </ul>
</div>

</body>
</html>

#content{
    width: 380px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText, .tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 216px;
}
.tipText{
    color: white;
    /*z-index: -1;   当这个值设立的时候，tipText中的内容就会被覆盖了，看不到了！*/
}
.tipBg{
    background: #000;
    opacity: 0.5; /*背景透明度*/
    filter: Alpha(opacity=50);
}
  • 效果：
    在这里插入图片描述

7、动画(待补充)

8、总结

在这里插入图片描述

君不见代码
关注
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学习笔记HTML+CSS学习笔记 ...
CSS 学习笔记
01-19
id的优点（class的缺点）：id写在css用#选择器，class写在css中用.选择器。#选择器的优先级高于.选择器大约10倍，所以当你需要提升优先级的时候，id标签，或者id容器内的标签将是很容易和有效的。而class标签，或者...
cocos retain and release
省粮
09-16 396
开发cocos js项目的时候遇到报错：invalid native object 我写了一个uilayer, 为了缓存起来，所以加上了retain，但是在第二次使用的时候还是报错，查了很久，发现在这个uilayer里面有一个action，也需要retain,否则在下次使用的时候，就会报invalid native object错误，有点坑
对于Retain和Assign属性的理解
09-20 3719
对于Retain和Assign属性的理解（原创） 在写程序时，对于要定义的变量进了习惯于加上retain属性，但对其到底起到什么作用却一直不是很明白，今天做了一个demo，终于弄清了他们的意思。 比如我要定义一下字符串var： NSString *var; 声明Pro
C语言进阶
weixin_43440155的博客
10-27 487
堆内存 是进程的一个内存段（text、date、bss、heap、stack），由程序员手动管理 特点：足够大，缺点：使用麻烦 为什么使用堆内存： 1、随着程序的复杂，数据量变多 2、其他内存段的申请和释放不受控制，堆内存的申请和释放受控制 如何使用堆内存： 注意：C语言中没有控制堆内存的语句，只能使用C标准库提供的函数 #include <stdlib.h> void *malloc(size_t size); //功能：从堆内存中申请size个字节的内存，申请到的的内存中储存的是什么内容
图像梯度(Image Gradient)
热门推荐
Warms的博客
02-19 1万+
文章目录图像梯度的定义（离散）图像梯度理解 图像梯度的定义（离散） 对于一个二元函数F(x,y)F(x,y)F(x,y)来说，其偏导数的定义为： δF(x,y)δx=lim⁡ϵ→0F(x+ϵ,y)−F(x,y)ϵ\frac {\delta F(x,y)}{\delta x}=\displaystyle \lim_{\epsilon \rightarrow 0}\frac {F(x+\epsilo...
尚硅谷CSS学习笔记
MissXu666的博客
10-10 1383
等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。③维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。我们在编码时，不用过于关注浏览器的私有前缀，不用去记忆，去查询，因为常用的css3 新特性，主流浏览器都是支持的，对于老版本浏览器，我们也可以借助现代构建工具，去帮我们添加私有前缀。
css学习笔记1
qq_42236791的博客
12-12 971
HTML（结构）、CSS（表现）、行为（JavaScript）CSS的全称：层叠样式表（Cascading Style Sheets）。CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽高等。简单理解：CSS可以美化HTML，让HTML更漂亮。核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。
EPICS工具CSS学习笔记
qq_43456972的博客
10-13 2381
控制系统工作室(CSS)是一项实现控制系统相关的应用，主要针对的是操作员界面。它是基于目前的软件技术（Java、Eclipse），并特别强调了互操作性。 使用Centos7.0系统作为EPICS环境开发，搭建了CSS基础的控件操作，并成功运行。
CSS学习笔记目录
wz_1992的博客
05-30 488
CSS学习笔记之基础教程（一） CSS学习笔记之基础教程（二） CSS学习笔记之中级教程（一） CSS学习笔记之中级教程（二） CSS学习笔记之中级教程（三） CSS学习笔记之高级教程（一） CSS学习笔记之高级教程（二） CSS学习笔记之高级教程（三） CSS学习笔记之高级教程（四）
css学习笔记
09-12
本“CSS学习笔记”涵盖了这个重要主题的广泛知识，旨在帮助开发者深入理解和熟练运用CSS。 首先，我们要理解CSS的基本概念。CSS采用选择器+声明的方式工作，选择器用于选取要应用样式的元素，而声明则包含属性和值...
HeadFirst HTML&CSS学习笔记.zip
12-29
CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 Head...
JSP学生学籍管理系统设计与实现(源代码+论文+开题报告+外文翻译+答辩PPT).zip
09-21
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
省市区数据，完成三级联动，选择地区
09-21
省市区数据，完成三级联动，选择地区
机械原理课程设计网球自动捡球机.doc
最新发布
09-21
机械原理课程设计网球自动捡球机.doc
2024秋招华为笔试题大全-仅供参考具体需要根据实际修改
09-21
2024秋招华为笔试题大全-仅供参考具体需要根据实际修改
借助于Ascend310 AI处理器完成深度学习算法部署任务，
09-21
应用背景为变电站电力巡检，基于YOLO v4算法模型对常见电力巡检目标进行检测，并充分利用Ascend310提供的DVPP等硬件支持能力来完成流媒体的传输、处理等任务，并对系统性能做出一定的优化。.zip深度学习是机器学习的一个子领域，它基于人工神经网络的研究，特别是利用多层次的神经网络来进行学习和模式识别。深度学习模型能够学习数据的高层次特征，这些特征对于图像和语音识别、自然语言处理、医学图像分析等应用至关重要。以下是深度学习的一些关键概念和组成部分： 1. **神经网络（Neural Networks）**：深度学习的基础是人工神经网络，它是由多个层组成的网络结构，包括输入层、隐藏层和输出层。每个层由多个神经元组成，神经元之间通过权重连接。 2. **前馈神经网络（Feedforward Neural Networks）**：这是最常见的神经网络类型，信息从输入层流向隐藏层，最终到达输出层。 3. **卷积神经网络（Convolutional Neural Networks, CNNs）**：这种网络特别适合处理具有网格结构的数据，如图像。它们使用卷积层来提取图像的特征。 4. **循环神经网络（Recurrent Neural Networks, RNNs）**：这种网络能够处理序列数据，如时间序列或自然语言，因为它们具有记忆功能，能够捕捉数据中的时间依赖性。 5. **长短期记忆网络（Long Short-Term Memory, LSTM）**：LSTM 是一种特殊的 RNN，它能够学习长期依赖关系，非常适合复杂的序列预测任务。 6. **生成对抗网络（Generative Adversarial Networks, GANs）**：由两个网络组成，一个生成器和一个判别器，它们相互竞争，生成器生成数据，判别器评估数据的真实性。 7. **深度学习框架**：如 TensorFlow、Keras、PyTorch 等，这些框架提供了构建、训练和部署深度学习模型的工具和库。 8. **激活函数（Activation Functions）**：如 ReLU、Sigmoid、Tanh 等，它们在神经网络中用于添加非线性，使得网络能够学习复杂的函数。 9. **损失函数（Loss Functions）**：用于评估模型的预测与真实值之间的差异，常见的损失函数包括均方误差（MSE）、交叉熵（Cross-Entropy）等。 10. **优化算法（Optimization Algorithms）**：如梯度下降（Gradient Descent）、随机梯度下降（SGD）、Adam 等，用于更新网络权重，以最小化损失函数。 11. **正则化（Regularization）**：技术如 Dropout、L1/L2 正则化等，用于防止模型过拟合。 12. **迁移学习（Transfer Learning）**：利用在一个任务上训练好的模型来提高另一个相关任务的性能。 深度学习在许多领域都取得了显著的成就，但它也面临着一些挑战，如对大量数据的依赖、模型的解释性差、计算资源消耗大等。研究人员正在不断探索新的方法来解决这些问题。
CSS学习笔记：WEB开发中的样式精华
"很好的css学习笔记，pdf格式（64页），包含了CSS+DIV的学习内容，适合初学者逐步了解和掌握CSS技术。" 这篇CSS学习笔记详细介绍了CSS的基础知识，包括其起源、作用以及如何改善HTML页面的设计。CSS，即层叠样式表...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值