当前位置: 首页 > news >正文

CSS基础学习

HTML+CSS+JavaScript
结构+表现+交互
学习内容:

  1. CSS是什么
  2. CSS怎么用(快速入门)
  3. CSS选择器(重点+难点)
  4. 美化网页(文字,阴影,超链接,列表,渐变…)
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画(特效效果)

1. 是什么

Cascading Style Sheet 层叠级联样式表
CSS:表现(美化网页)
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…
发展史
CSS 1.0
CSS 2.0 DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单、SEO
CSS 2.1 浮动、定位
CSS 3.0 圆角、阴影、动画… 、浏览器兼容性~

2. 快速入门

方法一:
规范:在head标签中使用<style>标签可以编写CSS代码;每一个声明,最好使用分号结尾。

语法:
选择器{声明1;声明2;声明3;
}
例如:
<style>h1{color:red;}
</style>

方法二:分离

  1. 建立一个style.css文件
  2. 将声明的代码写在其中(CSS代码)
  3. 然后在HTML代码中使用
    <link rel="stylesheet" href="..../style.css">
    引入CSS代码,实现html与css分离

CSS优势:

  1. 内容和表现分离
  2. 内容结构表现统一,可以实现复用(网站中其他网页可以使用这个CSS)
  3. 样式十分的丰富
  4. 建立使用独立于HTML的CSS文件
  5. 利用SEO,容易被搜索引擎收录!

CSS的三种导入方式:
1、行内样式:在标签元素中,编写一个style属性,编写样式即可
2、内部样式:在<head>标签内编写一个style属性,编写样式即可
3、外部样式:建立一个CSS文件,在里面编写样式,在<head>标签内使用<link> 标签调用CSS文件即可

文件结构:项目名:CSS:style.cssindex.html

优先级:就近原则,离代码近的优先被使用
拓展:外部样式的两种导入写法:

  • 链接式:<link>
  • 导入式:(CSS 2.1特有的)
<style>@import url("css/style.css");
</style>
<!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"><!--导入式--><style>@import url("css/style.css");</style>
</head>
<body><!--优先级:就近原则--><!--行内样式:在标签元素中,编写一个style属性,编写样式即可-->
<h1 style="color:red;">我是标题</h1></body>
</html>

3. 选择器

作用:选择页面上的某一个元素或者某一类元素
基本选择器

  1. 标签选择器:会选择到页面上所有的这个标签的元素,格式:标签{ }
  2. 类选择器:可以多个标签归类,是同一个class,可以复用,格式:.class的名称{ }
    例如:
<head><style>.qtf1{color:....;}.qtf2{color:....;}</style>
</head>
<body><h1 class="qtf1">标题1</h1><h1 class="qtf2">标题2</h1><p class="qtf1">P标签</p>
</body>
  1. id选择器:id必须保证全局唯一!格式:#id名称{ }
<head><style>#qtf1{color:....;}</style>
</head>
<body><h1 id="qtf1">标题1</h1>
</body>

标签选择器、类选择器、id选择器优先级是固定的:id选择器>类选择器>标签选择器

层次选择器

  1. 后代选择器:在某个元素的后面
    例如:
	body p{background : red;}

效果:body后面所有P标签背景颜色都改变

  1. 子选择器:后面一代(儿子)
    例如:
	body>p{background : red;}

效果:body后面下一个层次的P标签背景颜色改变

  1. 相邻兄弟选择器:只有一个,同层次相邻(向下)
    例如:
<head><style>.active+p{background : red;}</style>
</head>	
<body><p>P0</p><p class="active">P1</p><p>P2</p><p>P3</p>
</body>

效果:只有P2会变颜色,因为相邻向下一个P标签兄弟style改变

  1. 通用兄弟选择器:当前选中元素的向下的所有兄弟元素
    例如:
<head><style>.active~p{background : red;}</style>
</head>	
<body><p>P0</p><p class="active">P1</p><p>P2</p><p>P3</p><p>P4</p>
</body>

效果:P2、P3、P4背景颜色全部改变,同层向下P标签兄弟变色

写法效果
body p{}后代所有p标签
body>p{}后一代所有p标签
body+p{}兄弟下一个p标签
body~p{}兄弟后面所有p标签

结构伪类选择器
使用 : 叫做伪类选择器

<body><h1>H1</h1><p>P1</p><p>P2</p><p>P3</p><ul><li>L1</li><li>L2</li><li>L3</li></ul>
</body>

更换ul的第一个子元素背景颜色:

	ul li:first-child{background:....;}

更换ul的最后一个子元素背景颜色:

	ul li:last-child{background:....;}

选中并更改P1元素:首先需要定位到P元素的父元素,然后再定位到P1元素,必须是P元素才生效!
法1:选中P元素父亲body下的全部元素的第二个元素P1

		p:nth-child(2){color: #ff0051;}

法二:选中P元素父亲body下的P元素的第一个元素P1

        p:nth-of-type(1){background: yellow;}

属性选择器(常用)
id+class结合~
格式:名称[属性名=属性值]{} 名称可以是各种选择器的标签,属性值是正则表达式
基础正则表达式

符号含义
=绝对等于
*=包含这个元素
^=以这个元素开头
$=以这个元素结尾

例如:
存在id属性的a标签元素:

a[id]{background:....;
}

id=first的a标签元素:

a[id=first]{background:....;
}

class中有links的a标签元素:

a[class*="links"]{background:....;
}

选中href中以http开头的a标签元素:

a[href^=http]{background:....;
}

4. 美化网页元素

为什么要美化网页?

  1. 有效的传递页面信息
  2. 美化网页,页面漂亮,才能吸引用户
  3. 凸显页面主题
  4. 提高用户的体验

span标签:重点要突出的字,使用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>

在这里插入图片描述

字体样式:
font-family字体
font-size 字体大小
font-weight 字体粗细
color 字体颜色
颜色:
#RGB(红绿蓝) 0~F
#RGBA(红绿蓝透明度) A:0~1
例:
color:rgb(0,255,0);(绿色)
color:rgba(0,255,0,0.5);(绿色)
可以合在一起写:font: oblique bolder 16px "楷体";依次是斜体、粗体、大小、字体;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--font-family:字体font-size:字体大小 px像素font-weight:字体粗细color:字体颜色--><style>body{font-family: "Arial Black" , 楷体 ;color: #a13d30;}h1{font-size: 50px;}.p1{font-weight: bold;}</style></head>
<body><h1>主题思想</h1>
<p class="p1">《鬼吹灯》的内在主题是崇尚理性与和谐。小说所描写的盗墓过程其实终究是一场人心的较量。在墓中,死人与活人斗,墓主用尽各种手段、计谋来阻挠盗墓者的入侵;其次,盗墓也是活人与活人之间的暗算,兄弟之间尔虞我诈,反目成仇。因此,“盗墓小说”在不断颠覆世界观的同时,也在拷问人类的价值观。同样,这种人心不古的景象能够带给当代人一种启示:保持平淡,不去追求浮华,保持内心的强大。 [17]
</p>
<p>一部成功的盗墓类小说不仅仅在于它给人们带来的惊悚刺激和冷知识的传播,还有对于道德人性的规劝。天下霸唱在介绍摸金校尉这一行当的时候曾一再强调“鸡鸣灯灭不摸金”“出了盗洞后要把土回填”等等“规矩”,细细想来,这些规矩也不无做人的道理,鸡鸣灯灭不摸金是提醒人们再大的财富也不如自己的生命自由重要;把土回填则让读者做人学会谨慎有始有终;摸金时“明器”不能一扫而空就是提醒人们要想到后来人的利益不要过于贪婪。作为盗墓类小说指导性的作品,《鬼吹灯》中对现实的思考同样影响到后人的创作,在后来的盗墓类小说中也宣扬了好人好报,勿存恶念的想法。
</p>
<p>Conservationist and author Gerald Durrell and Lee McGeorge first met in 1977; two years later they were married.By the time Durrell died in 1995 they had travelled the world together on numerous conservation expeditions and co-written two books: A Practical Guide for the Amateur Naturalist, and Durrell in Russia. In 1978, a year after they first met, Gerald Durrell wrote a love letter to his future wife.
</p></body>
</html>

在这里插入图片描述

文本样式:
text-align:center排版水平居中
text-indent:2em段落首行缩进2字符
height:300px
line-height:300px
行高和块的高度一致,就可以上下居中
text-decoration:underline下划线
text-decoration:line-through中划线
text-decoration:overline上划线
text-decoration:nonea标签去掉下划线
rertical-align:middle文本图片水平对齐

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--颜色:单词RGB 0~FRGBA A:0~1text-align:排版,居中text-indent: 2em;段落首行缩进height: 300px;line-height: 300px;行高, 和 块的高度一致,就可以上下居中text-decoration  上中下划线,链接标签去下划线--><style>h1{color: rgba(0,255,255,0.9);text-align: center;}.p1{text-indent: 2em;}.p3{background: #134efc;height: 300px;line-height: 300px;}.l1{text-decoration: underline;}.l2{text-decoration: line-through;}.l3{text-decoration: overline;}a{text-decoration: none;}</style></head>
<body><a href="">123</a>
<p class="l1">123123123</p>
<p class="l2">123123123</p>
<p class="l3">123123123</p><h1>主题思想</h1>
<p class="p1">《鬼吹灯》的内在主题是崇尚理性与和谐。小说所描写的盗墓过程其实终究是一场人心的较量。在墓中,死人与活人斗,墓主用尽各种手段、计谋来阻挠盗墓者的入侵;其次,盗墓也是活人与活人之间的暗算,兄弟之间尔虞我诈,反目成仇。因此,“盗墓小说”在不断颠覆世界观的同时,也在拷问人类的价值观。同样,这种人心不古的景象能够带给当代人一种启示:保持平淡,不去追求浮华,保持内心的强大。 [17]
</p>
<p>一部成功的盗墓类小说不仅仅在于它给人们带来的惊悚刺激和冷知识的传播,还有对于道德人性的规劝。天下霸唱在介绍摸金校尉这一行当的时候曾一再强调“鸡鸣灯灭不摸金”“出了盗洞后要把土回填”等等“规矩”,细细想来,这些规矩也不无做人的道理,鸡鸣灯灭不摸金是提醒人们再大的财富也不如自己的生命自由重要;把土回填则让读者做人学会谨慎有始有终;摸金时“明器”不能一扫而空就是提醒人们要想到后来人的利益不要过于贪婪。作为盗墓类小说指导性的作品,《鬼吹灯》中对现实的思考同样影响到后人的创作,在后来的盗墓类小说中也宣扬了好人好报,勿存恶念的想法。
</p>
<p class="p3">Conservationist and author Gerald Durrell and Lee McGeorge first met in 1977; two years later they were married.By the time Durrell died in 1995 they had travelled the world together on numerous conservation expeditions and co-written two books: A Practical Guide for the Amateur Naturalist, and Durrell in Russia. In 1978, a year after they first met, Gerald Durrell wrote a love letter to his future wife.
</p></body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--水平对齐  参照物   a,b文本图片水平对齐   vertical-align: middle;--><style>img,span{vertical-align: middle;}</style></head>
<body><p><img src="images/a.PNG" alt=""><span>fsfdsfsfsdfsdfsfd</span>
</p></body>
</html>

在这里插入图片描述

阴影
text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径;
在这里插入图片描述
例如:

#price{text-shadow:#3cc7f5 10px -10px 2px;
}

超链接伪类:
a:link{color:....;}未访问的链接状态
a:visited{color:....;}已访问的链接状态
a:hover{color:....;}鼠标悬浮的链接状态
a:active{color:....;}鼠标按住未释放的链接状态

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*默认的颜色*/a{text-decoration: none;color: black;}/*鼠标悬浮的状态(只需要记住)*/a:hover{color: orange;font-size: 50px;}/*鼠标按住未释放的状态*/a:active{color: green;}/*text-shadow:阴影颜色,水平偏移,垂直偏移,阴影半径*/#price{text-shadow: dodgerblue 10px -10px 2px;}</style>
</head>
<body><a href="#"><img src="images/书.PNG" alt="">
</a>
<p><a href="#">这个春天最美的遇见</a>
</p>
<p><a href="">作者:独孤九剑</a>
</p>
<p id="price">¥99
</p></body>
</html>

在这里插入图片描述

列表样式 ul li
list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
例如:

ul li{height:30px;list-style:none;text-indent:1em;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style.css">
</head>
<body><div id="nav"><h2 class="title">全部商品分类</h2><ul><li><a href="#">图书</a><a href="#">音像</a><a href="#">数字商品</a></li><li><a href="#">家用电器</a><a href="#">手机</a><a href="#">数码</a></li><li><a href="#">电脑</a><a href="#">办公</a></li><li><a href="#">家居</a><a href="#">家装</a><a href="#">厨具</a></li><li><a href="#">服饰鞋帽</a><a href="#">个性化妆</a></li><li><a href="#">礼品箱包</a><a href="#">钟表</a><a href="#">珠宝</a></li><li><a href="#">食品饮料</a><a href="#">保健食品</a></li><li><a href="#">彩票</a><a href="#">旅行</a><a href="#">充值</a><a href="#">票务</a></li></ul>
</div></body>
</html>
#nav{width: 300px;background: #a0a0a0;
}.title{font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 35px;/*颜色,图片,图片位置,平铺方式*/background: red url("../images/下.PNG") 260px 7px no-repeat;
}
/*ul li*/
/*
list-style:none 去掉圆点circle 空心圆decimal 数字square 正方形
*/
/*ul{background: #a0a0a0;
}*/ul li{height: 30px;list-style: none;text-indent: 1em;background-image: url("../images/右.PNG");background-repeat: no-repeat;background-position: 220px 0px;
}a{text-decoration: none;font-size: 14px;color: #000;
}
a:hover{color: orange;text-decoration: underline;
}

在这里插入图片描述

背景(背景颜色、背景图片)
例如:

<style>div{width:1000px;height:700px;border:1px solid red;/*边框:粗细 实线 颜色*/background-image:url("....");/*背景图片,默认全部平铺*/}.div1{background-repeat:repeat-x;/*x轴平铺*/}.div2{background-repeat:repeat-y;/*y轴平铺*/}.div3{background-repeat:no-repeat;/*不平铺*/}
</style>

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

background:red url("....") 260px 7px no-repeat;颜色、图片、图片位置、平铺方式

background-image:url("....");
background-repeat:no-repeat;
background-position:220px 0px;

渐变:https://www.grabient.com

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--径向渐变,圆形渐变--><style>body{background-color: #85FFBD;background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);}</style>
</head>
<body></body>
</html>

在这里插入图片描述

5.盒子模型

在这里插入图片描述
margin:外边距
border:边框
padding:内边距

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*body总有一个默认的外边距,需要改margin: 0*//*h1,ul,li,a,body{margin: 0;padding: 0;text-decoration: none;}*//*border:粗细,样式,颜色*/#box{width: 300px;border: 1px solid red;}h2{font-size: 16px;background: #3cbda6;line-height: 30px;color: white;}form{background: #3cbda6;}div:nth-of-type(1) input{border: 3px solid black;}div:nth-of-type(2) input{border: 3px dashed #4d0b8c;}div:nth-of-type(3) input{border: 2px dashed #008c27;}</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>

在这里插入图片描述

边框:border:1px solid red;/*边框:粗细 实线 颜色*/

  1. 边框的粗细
  2. 边框的样式 solid:实线 dashed:虚线
  3. 边框的颜色

内外边距
外边距的妙用:居中元素
margin:0上下左右都为0
margin:0 1px上下为0 左右为1个像素
margin:0 1px 2px 3px上 右 下 左 顺时针旋转

盒子的计算方式:margin+border+padding+内容宽度(四部分)

<!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: #3cbda6;line-height: 30px;color: white;margin: 0 1px;}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>

在这里插入图片描述

圆角边框
border-radius:10px 10px 10px 10px;/*左上 右上 右下 左下*/
圆圈:圆角≥宽度一半(半径 width:\height:)
例如:

div{/*红色的圆圈*/width:100px;height:100px;background:red;border-radius:50px;
}
/*圆形头像*/
img{width:100px;height:100px;border-radius:50px;
}

margin:0 auto;居中的前提条件
要求:块元素;<div></div>
块元素有固定的宽度width height

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--左上 右上 右下 左下, 顺时针方向--><!--圆圈: 圆角 > 宽度一半(半径) 会变成圆圈--><style>div{width: 100px;height: 100px;background: red;border-radius: 50px 50px 50px 50px;}img{margin-top: 100px;width: 100px;height: 100px;border-radius: 50px;}</style></head>
<body><div>
</div><img src="images/111.jpg" alt=""></body>
</html>

在这里插入图片描述

6. 浮动

块级元素:独占一行
h1~h6 p div 列表…
行内元素:不独占一行
span a img strong…
行内元素可以被包含在块级元素中,反之,则不可以~

display
display:inline-block;
block,块元素
inline,行内元素
inline-block,是块元素,但是可以内联,在一行!
none,消失
作用:将 块元素->行内元素 或 将 行内元素->块元素
这个也是一种实现行内元素排列的方式,但是我们很多情况都是用float(浮动)

diplay练习:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--displayblock,块元素inline,行内元素inline-block,是块元素,但是可以内联,在一行!none,消失--><style>div{width: 100px;height: 100px;border:1px solid red;display: inline;}span{width: 100px;height: 100px;border:1px solid red;display: inline-block;}</style></head>
<body><div>div块元素</div>
<span>span行内元素</span></body>
</html>

结果:
在这里插入图片描述

float:左右浮动
例:float:rightfloat:left
clear
clear: right;右侧不允许有浮动元素,如果有就自动排列到右侧浮动元素的下一行
clear: left;左侧不允许有浮动元素
clear: both;两侧都不允许有浮动元素
clear: none;

父级边框塌陷的问题
解决方案:

  1. 增加父级元素的高度(不建议使用)
    原理:将浮动的元素包含起来,无论怎么浮动,元素都包含在父级边框中。
  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;
}

练习:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动</title><link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="father"><div class="layer01"><img src="images/111.jpg" alt=""></div><div class="layer02"><img src="images/a.PNG" alt=""></div><div class="layer03"><img src="images/书.PNG" alt=""></div><div class="layer04">浮动的盒子</div><!--<div class="clear"></div>-->
</div>
</body>
</html>
div{margin: 10px;padding: 5px;
}
#father{border: 1px #000 solid;/*overflow: hidden;*/
}
#father:after{content: '';display: block;clear: both;
}
.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;
}
/*
clear: right;右侧不允许有浮动元素,如果有就自动排列到右侧浮动元素的下一行
clear: left;左侧不允许有浮动元素
clear: both;两侧都不允许有浮动元素
clear: none;
*/
.layer04{border: 1px #666 dashed;font-size: 12px;line-height: 23px;display: inline-block;float: right;
}
.clear{clear: both;margin: 0;padding: 0;
}

结果:
在这里插入图片描述

小结:

  1. 浮动元素后面增加空div,简单,代码中尽量避免空div
  2. 设置父元素的高度,简单,元素假设没有了固定的高度,就会被限制
  3. overflow:hidden(隐藏)/ scroll(滚动条),简单,下拉的一些场景避免使用
  4. 父类添加一个伪类:after(推荐),写法稍微复杂一点,但是没有副作用,推荐使用。

对比:

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

scroll练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#content{width: 200px;height: 150px;overflow: scroll;}</style>
</head>
<body><div id="content"><img src="images/111.jpg" alt=""><p>哈哈指一个人发出的笑声,高兴开心欢乐时的状态,抒发快乐的心情,表现一个人很开心快乐的状态。也指人通常用来开玩笑。人的一种笑声,表示高兴、开心、愉悦,也表示兴奋。</p>
</div></body>
</html>

结果:
在这里插入图片描述

7. 定位

  1. 相对定位

例如:

#first{border: 1px dashed #325436;background-color: #325436;position: relative;/*相对定位:上下左右*/top:-20px;left:20px;
}

position: relative;
top:
left:
bottom:
right:
相对于原来的位置,进行指定的偏移。
相对定位的话,它仍然在标准文档流中,原来的位置会被保留。

默认情况

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{margin: 10px;padding: 15px;font-size: 12px;line-height: 25px;}#father{border: 1px solid #666;padding: 0;}#first{border: 1px dashed #325436;background-color: #325436;}#second{border: 1px dashed #47527a;background-color: #47527a;}#third{border: 1px dashed #5a3546;background-color: #5a3546;}</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>body{padding: 20px;}div{margin: 10px;padding: 15px;font-size: 12px;line-height: 25px;}#father{border: 1px solid #666;padding: 0;}#first{border: 1px dashed #325436;background-color: #325436;position: relative;/*相对定位:上下左右*/top:-20px;left:20px;}#second{border: 1px dashed #47527a;background-color: #47527a;}#third{border: 1px dashed #5a3546;background-color: #5a3546;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>
</head><style>a{font-size: 20px;font-family: 楷体;text-align: center;color: white;line-height: 100px;width: 100px;height: 100px;text-decoration: none;background-color: #facafa;display: block;/*变成块元素*/}a:hover{background-color: #134efc;}#father{border: 1px solid red;margin: 0 auto;padding: 5px;width: 300px;height: 300px;}.d2{position: relative;top:-100px;left: 200px;}.d4{position: relative;bottom: 100px;left: 200px;}.d5{position: relative;bottom: 300px;left: 100px;}
</style><body><div id="father"><a class="d1" href="#">链接1</a><a class="d2" href="#">链接2</a><a class="d3" href="#">链接3</a><a class="d4" href="#">链接4</a><a class="d5" href="#">链接5</a>
</div></body>
</html>

效果:
在这里插入图片描述

  1. 绝对定位

position:absolute;

  1. 没有父级元素定位的前提下,相对于浏览器定位
  2. 假设父级元素存在定位,我们通常会相对于父级元素进行偏移
  3. 在父级元素范围内移动

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

练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{margin: 10px;padding: 15px;font-size: 12px;line-height: 25px;}#father{border: 1px solid #666;padding: 0;position: relative;}#first{border: 1px dashed #325436;background-color: #325436;}#second{border: 1px dashed #47527a;background-color: #47527a;position: absolute;right: 30px;top: -10px;}#third{border: 1px dashed #5a3546;background-color: #5a3546;}</style></head>
<body><div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div>
</div></body>
</html>

结果:
在这里插入图片描述

  1. 固定定位

position: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>

结果:
在这里插入图片描述

  1. z-index 层次

在这里插入图片描述
一层一层的结构,上层可以将下层覆盖
z-index:默认是0,最高无限~(999)
z-index:999;
z-index:1;
999的层次比1的高,因而显示在上面。

opacity:0.5;背景透明度

练习:

<!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.PNG" alt=""></li><li class="tipText">学习新思想,争做新青年</li><li class="tipBg"></li><li>时间:2099-01-01</li><li>地点:月球一号基地</li></ul>
</div></body>
</html>
#content{width: 208px;padding: 0;margin: 0;overflow: hidden;font-size: 12px;line-height: 25px;border: 1px black solid;
}
ul,li{padding: 0;margin: 0;list-style: none;
}
/*父级元素相对定位*/
#content ul{position: relative;
}
.tipText,.tipBg{position: absolute;width: 208px;height: 25px;top:17px;
}
.tipBg{background: black;/*opacity: 0.5;!*背景透明度*!*/
}
.tipText{z-index: 999;color: white;
}

运行结果:
在这里插入图片描述


相关文章:

  • Linux文件系统(IO缓冲区+磁盘+软硬链接)
  • 【servlet篇】HTTP协议相关知识点
  • Java---微服务---RabbitMQ入门与应用
  • 7.3 矩阵范数
  • JMeter测试redis性能
  • 【设计模式】结构型模式·组合模式
  • 第十三届蓝桥杯省赛 Java A 组 I 题、Python A 组 I 题、Python B 组 J 题——最优清零方案(AC)
  • 41.Isaac教程--使用DOPE进行3D物体姿态估计
  • 【Linux】gdb调试器的使用
  • 互联网摸鱼日报(2023-01-26)
  • python语法 dot函数
  • Docker 基础 - 3
  • 如何使用Maven构建Java项目?Maven的使用详细解读
  • RISC-V Assembler Modifiers
  • VMware虚拟机无法向宿主机拖放文件
  • Mybatis-Plus 多记录操作与逻辑删除
  • 【Python语言基础】——Python 迭代器
  • [Python]调用pytdx的代码示例
  • 【Linux】目录权限和默认权限
  • APT之木马静态免杀
  • Python装饰器使用方法详解
  • SpringBoot+Vue项目在线视频教育平台
  • 利用Golang可选参数实现可选模式
  • 游戏启动器:LaunchBox Premium with Big Box v13.1
  • CSS权威指南(十)浮动
  • RESTful的意义及其使用规则
  • SpringMVC总结
  • Android MVVM的实现
  • 0、Spring工程构建Spring快速入门Spring配置文件详解注入Sprint相关API
  • PostGIS:ST_AREA面积计算
  • 厚积薄发打卡Day115:Debug设计模式<简单工厂、工厂方法、抽象工厂>
  • 【MySQL进阶】MySQL视图详解
  • kubernetes资源对象应用类(二)
  • 线程控制--Linux
  • 测试篇(三):测试用例的万能公式、对水杯和登录页面设计测试用例、测试用例的设计方法
  • 面试屡次碰壁后,我是如何调整最终拿下一线大厂offer的?
  • 在甲骨文云容器实例(Container Instances)上部署Oracle Linux 8 Desktop加强版(包括Minio,ssh登录等)
  • 重学python
  • Java 方法
  • 分享142个ASP源码,总有一款适合您
  • 树型结构——二叉数
  • 2-SAT
  • 8. 好客租房-WebSocket与即时通讯系统[项目必需]
  • Linux 命令(249)—— unset 命令(builtin)
  • 【1】初识Linux
  • 数据结构---堆
  • python元组
  • 【My Electronic Notes系列——直流稳压电源】
  • 有关Android的TextView组件的几个问题
  • Spring核心模块解析—BeanDifinition。
  • JavaEE多线程-定时器
  • C++编译之(4)-进阶-cmake设置install及package配置
  • 【每日一道智力题】之坤坤猜生日(面试高频)
  • 斐波那契数列的--------5种算法(又称“兔子数列”)
  • Java基础 IO
  • Extractor.app学习
  • 深入学习Vue.js(十四)同构渲染
  • Spring笔记上(基于注解开发)
  • 定位 position属性 相对定位 绝对定位 固定定位 定位下的居中 多个定位元素重叠时 补充
  • NLP | 打造一个‘OpenAI智能’机器人,只需要五分钟
  • 好的质量+数量 = 健康的创作者生态
  • 设计一个70W在线人数的弹幕系统
  • JavaWeb | 揭开SQL注入问题的神秘面纱
  • 【编程入门】开源记事本(微信小程序版)
  • 2022年复盘:越走越偏
  • C语言深度解剖-关键字(1)
  • 千峰学习【Ajax】总结
  • 【设计模式】结构型模式·享元模式
  • Redis实现好友关注 | 黑马点评
  • Ubuntu 20.04 下 部署 SoftEther
  • Python OS 文件目录方法 os.walk()
  • 《Buildozer打包实战指南》第七节 打包资源文件
  • 关于非授权访问的逻辑漏洞挖掘
  • 数据结构-树
  • JavaWeb项目中添加live2d模型
  • VBA提高篇_05日期时间函数
  • HackTheBox Stocker API滥用,CVE-2020-24815获取用户shell,目录遍历提权
  • 正则表达式(转载)
  • 【Android】开发一个简单时钟应用每天看时间起床
  • 常见DEM数据汇总
  • 如何设计一个 70w 在线人数的弹幕系统
  • “华为杯”研究生数学建模竞赛2005年-【华为杯】D题:仓库容量有限条件下的随机存贮管理(附获奖论文)
  • 3000字英文随笔(挽救下语感)
  • MS-Model【3】:Medical Transformer
  • 2023第五届中国眼博会,北京眼睛健康展,北京护眼仪展
  • 【JavaEE初阶】第六节.多线程 (基础篇 )线程安全问题(下篇)
  • 好客租房-09_学习MongoDB并完善通讯系统
  • 提权漏洞和域渗透历史漏洞整理
  • OCR文字识别基础
  • 辗转相除以及辗转相减法
  • 【Linux】多线程同步与互斥
  • 【HBase入门】5. 常用 Shell 操作(2)
  • 构造函数的4种使用方式总结
  • 如何取消PDF文件的保护设置?
  • 第二章 物理层
  • JAVA中static、final、static final的区别
  • 行为型模式-命令模式
  • 在线工具轻松设计电商直通车主图,无需下载
  • 水面漂浮物垃圾识别检测系统 YOlOv7
  • 【蓝桥云课】位运算
  • 2023-1-24 刷题情况
  • Java面试题,mysql相关基础问题(全是自己的总结,如有不对,敬请斧正)
  • flask框架全解
  • 机器视觉_HALCON_HDevelop用户指南_1.HDevelop介绍
  • C 语言零基础入门教程(九)
  • 机器学习(七):Azure机器学习模型搭建实验
  • JavaScript总结
  • 90. 注意力分数及代码实现
  • 从技术角度看Android大系统的构成
  • 如何设计一个70W在线人数的弹幕系统文章分析
  • TPH-YOLOv5
  • 前缀树 字典树 TrieTree的学习与模拟实现
  • vue2升级vue3:vue3真的需要vuex或者Pinia吗?hooks全有了
  • 如何好好说话第11章 攀登抽象之梯
  • 模型压缩(model compression)
  • 如何安装双系统与多系统(带你快速了解)
  • JAVA基础知识08集合基础
  • java-List
  • 超级详解洛谷P4011 孤岛营救问题(bfs超难题)(保证看懂)
  • Linux- 系统随你玩之--文本处理三剑客-带头一哥-awk
  • [JavaEE]线程池
  • java选择结构与switch case语句
  • MySQL 安装包下载
  • 小动画制作时需要的知识点
  • STM32+python产生三角波
  • 【刷题大本营】二叉树进阶oj题(动图讲解,附代码及题目链接)
  • 【手写 Promise 源码】第二篇 - Promise 功能介绍与特性分析
  • RAID不同类型之间的区别
  • 机器学习(六):模型评估
  • spring boot前后端交互之数据格式转换
  • Java多线程案例之阻塞队列
  • 5-6中央处理器-多处理器系统硬件多线程
  • FME进阶视频教程: FME常用转换器之坐标系操作类,讲解在FME中如何操作矢量数据的坐标系
  • LeetCode(Array)1431. Kids With the Greatest Number of Candies
  • matplotlib嵌套南海子图
  • 91.使用注意力机制的seq2seq以及代码实现
  • 目录生成测试
  • 函数的认识
  • 笔试题-2023-华为-数字芯片【纯净题目版】
  • ROS学习寄录之知识学习
  • 传参的理解
  • 网狐大联盟非联盟成员无法创建房间解决-暂时不可创建当前游戏,请选择其他游戏!
  • MyBatisPlus入门简介
  • 对JDBC驱动注册--DriverManager.registerDriver和Class.forName(driverClass)的理解
  • 【老卫搞机】136期:华为开发者联盟社区2022年度战码先锋2期开源贡献之星
  • JVM快速入门学习笔记(四)
  • 第一章 概述
  • 【大数据管理】Java实现字典树TireTree
  • 第24章 Microsoft.Data.SqlClient中间件数据库生成
  • Mybatis 基本使用案例
  • 通过实例了解uprobe及其对性能的影响
  • linux基本功系列之wc命令实战
  • [GYCTF2020]EasyThinking (ThinkPHP V6.0.0)
  • [Linux]进程地址空间
  • 2023年最新Python常见编程面试题(1)精选30个题目附答案
  • pythpon基础:创建文件索引升级版
  • 【Python语言基础】——Python 继承
  • 24. 面向对象的思想
  • 【蓝桥杯-筑基篇】基础数学思维与技巧(1)
  • MyBatis的入门
  • Linux中的权限问题
  • leetcode72 编辑距离
  • Vue3【1.v-if 和 v-show 、2.动态组件、 3.网页的渲染 、4.v-for】
  • 高等数学(第七版)同济大学 习题12-8 个人解答
  • 计算机存储系统
  • 目标检测知识蒸馏---以SSD为例【附代码】
  • 【Kotlin】扩展函数 ③ ( 定义扩展文件 | 重命名扩展函数 | Kotlin 标准库扩展函数 )
  • 图论(入门版)
  • Linux存活指令和具体使用方法
  • ★ 我的世界各类奇葩武器实现!(命令方块1.13+)
  • 基于ImageAI的图像识别
  • 【论文阅读】吴恩达分享的论文阅读方法
  • DlhSoft Gantt Chart Light Library 4.3.47 Crack
  • Docker 解决 `denied: requested access to the resource is denied`
  • ROS学习寄录之环境搭建
  • 想要学会二叉树?树的概念与结构是必须要掌握的!快进来看看吧
  • MySQL事务的四大特性以及并发事务问题
  • SpringBoot-过滤器的使用(在访问页面时过滤掉未登录的用户使其不能访问相应页面)
  • ricequant量化的基础是什么?
  • 条款2:理解auto型别推导
  • Linux|奇怪的知识---CPU温度监控
  • 笔试题-2023-杰理科技-数字IC设计【纯净题目版】
  • 离线用户基于内容召回集
  • GPU虚拟化(留坑)
  • spingboot如何接受前端请求
  • python列表用法
  • 2023起点上,一段迷茫的自我倾诉
  • 数学小抄: 李群李代数再回顾 [SLAM十四讲]
  • Vuex里面四个map方法(mapState、mapGetters、mapActions、mapMutation)
  • CSS之浮动以及清除浮动的几种方式
  • 27. 作用域
  • Windows CMD命令大全
  • Python流程控制语句之循环语句
  • 好客租房-13.WebMagic
  • Springboot+java师生交流答疑作业系统
  • 基于Android的高校疫情防控信息系统的设计与实现
  • 通过Moonbeam的Connected Contracts互连合约从Axelar转移Token至Centrifuge
  • 77、TensoRF: Tensorial Radiance Fields
  • 基于Android的动漫之家系统的设计与实现
  • 【C++】深浅拷贝
  • Springboot整合Redis
  • 基于代理 Dao 实现 CRUD 操作
  • Java线程池(超详细)
  • ESP32设备驱动-8x8LED点阵驱动(基于Max7219+SPI)
  • Python-Flask-2023.1.24-Review
  • HTML学习
  • mysql之explain(性能分析)
  • C语言基础知识(38)
  • go 语言 string 类型思考
  • AxMath使用教程(持续更新中)
  • /proc/meminfo的理解vmtouch使用介绍内存碎片整理
  • 行为型模式-模板方法模式
  • WordPress整站源码安装说明(搬家换域名/服务器)的安装步骤
  • 最小化最大值+拓扑排序要点+概率
  • 十大经典排序算法(动态演示+代码)-选择排序与插入排序
  • 好客租房-12.ES接入java
  • 【Linux】Linux调试器——gdb使用
  • 5-5中央处理器-指令流水线
  • HTML基本常用标签
  • java+ssm网上书店图书销售评价系统
  • 【数据结构】详谈复杂度
  • Python函数(函数定义、函数调用)用法详解
  • Python基础学习 -- 常用模块
  • k8s安装nfs设置pv pvc并部署mysql
  • BERT模型结构可视化与模块维度转换剖析
  • 【LeetCode】计算右侧小于当前元素的个数 [H](归并排序)
  • 【每日一道智力题】三个火枪手(快来看人生哲理)
  • SaaS是什么,目前主流的国内SAAS平台提供商有哪些?
  • Opencv项目实战:19 手势控制鼠标
  • 2023 年第一弹, Flutter 3.7 发布啦,快来看看有什么新特性
  • 3.5动态规划--凸多边形的最优三角剖分
  • (python)selenium工具的安装及其使用
  • 对多线程中线程池的理解
  • 深度学习流行的框架有哪些?分别有什么特点
  • C++初阶--多态
  • Leetcode:46. 全排列、47. 全排列 II(C++)
  • LeetCode13罗马数字转整数
  • CE训练教程进阶,步骤 9: 注入++
  • 【21】C语言 | 几个经典数组练习题
  • VMWare 移动Linux CentOS 7虚拟机后连不上网怎么办
  • 【Ubuntu】Nacos 2.1 单机安装
  • LeetCode 2520. 统计能整除数字的位数
  • “深度学习”学习日记。与学习有关的技巧--Bacth Normalization
  • Ubuntu下为可执行文件和脚本文件(.sh)生成桌面快捷方式
  • 【c语言进阶】结构体最常用知识点大全
  • 30. PyQuery: 基于HTML的CSS选择器
  • 初出茅庐——索引和文档的基本操作
  • C++:类中const修饰的成员函数
  • AtCoder Beginner Contest 285 题解
  • 2023年springcloud面试之Eureka(第二部分)
  • 为 TDesignBlazor 添加暗黑模式
  • DFS(六) N皇后 II
  • Linux中的工具使用【vim的存活级】
  • JavaScript 所见所得文本编辑器 Froala Editor 4.0.17Crack
  • Allegro如何自动做差分对内等长操作指导
  • 洛谷-P2114 [NOI2014] 起床困难综合症
  • 【学习笔记】[AGC023E] Inversions
  • JDBC连接池多线程通过CountDownLatch实现线程并发执行
  • ISIS简介、NSAP与NET地址、Router-Id转换成NET地址
  • 【GIS】高分辨率遥感影像智能解译
  • C语言基础 — ( C语言库函数<stdio.h>——C标准的内容)
  • AI算法(三)plt基础
  • final的一个重要用途-宏变量和未初始化问题
  • C++空间命名
  • 快速排序的实现和优化~
  • macOS Ventura 13.2 (22D49) 正式版发布,ISO、IPSW、PKG 下载
  • MS Access数据库多数据源JDBC查询
  • 十大经典排序算法(动态演示+代码)-堆排序
  • Python3 round() 函数
  • 信息论复习—连续信源、信道及容量
  • RadSystems Studio 8.1.8 Crack
  • 【自然语言处理】情感分析(一):基于 NLTK 的 Naive Bayes 实现
  • 【MySQL】第十一部分 SELECT的执行过程
  • 【目标跟踪】------deepsort
  • 2023牛客寒假算法集训营3
  • 基于Springboot vue前后端分离在线培训考试系统源码
  • MyBatis基本使用及XML配置
  • Java数组
  • [数据结构基础]排序算法第一弹 -- 直接插入排序和希尔排序
  • 鱼雷的发射角设置
  • 深度学习数据标注_Lableme
  • JavaWeb语法八:网络原理初识
  • 基于STM32的FreeRTOS开发(1)----FreeRTOS简介
  • 搭建本地Maven仓库
  • 算法:树状数组详解(c++实现 求解动态数组区间和问题)
  • 《深入浅出计算机组成原理》学习笔记 Day10
  • day 19 暴力枚举
  • 尚医通-手机登录-判断用户登录状态-用户网关整合(三十)
  • 使用Vue 简化 用户查询/添加功能
  • emoji 符号大全,给各位程序员增加一些奇怪的知识点
  • Mysql入门技能树-数据类型
  • Eclipse导入python项目
  • 简明Java讲义 2:数据类型和运算符
  • 【JavaWeb】JavaScript基础语法(下)
  • 56. 合并区间 738.单调递增的数字
  • 数据库和SQL概述
  • 力扣刷题记录——645. 错误的集合、657. 机器人能否返回原点、674. 最长连续递增序列
  • AtCoder Regular Contest 149
  • 常用的负载均衡算法
  • 恶意代码分析实战 14 反虚拟机技术
  • Mine Goose Duck 0.2版本发布
  • 离线用户召回定时更新
  • MP-4可燃气体传感器介绍
  • 【设计模式】结构型模式·外观模式
  • C C++实现两矩阵相乘--模拟法
  • 服务器配置定时脚本 crontab + Python;centos6或centos 7或centos8 实现定时执行 python 脚本
  • git 操作整理
  • ESP32设备驱动-TSL2561亮度传感器驱动
  • SOLID原则总结
  • 机器学习笔记之深度玻尔兹曼机(二)深度玻尔兹曼机的预训练过程
  • [Android开发基础1] 五大常用界面布局
  • JavaEE day4 初识HTML+总结3
  • 【C#】WPF实现经典纸牌游戏,适合新手入门
  • LA@determinant@行列式@Vandermonde行列式
  • python爬虫学习笔记-mysql数据库介绍下载安装
  • Linux使用YUM源安装Docker
  • Prometheus学习整理-Prometheus-operator
  • Python(for和while)循环嵌套及用法
  • Elasticsearch:Elasticsearch percolate 查询
  • mysql之索引
  • 【Linux】文件权限
  • MySQL内外连接
  • 04_iic子系统
  • IPV4地址详解
  • 矩阵理论复习(六)
  • AX7A200教程(4): DDR3的读写fifo仿真
  • 2023牛寒2--Tokitsukaze and Three Integers
  • [ 华为云 ] 云计算中Region、VPC、AZ 是什么,他们又是什么关系,应该如何抉择
  • 【电动车】基于多目标优化遗传算法NSGAII的峰谷分时电价引导下的电动汽车充电负荷优化研究(Matlab代码实现)
  • 20230125英语学习
  • Linux常见命令 8 - 其他文件搜索命令 locate, which, whereis, grep
  • 前端艺术之毛玻璃-倾斜-日历
  • Java基础 Stream流方法引用异常文件
  • TCP/IP IP地址概念与应用
  • 手把手教你写一个极简版Netty
  • Tkinter的Checkbutton控件
  • 汇编语言学习 下
  • 二叉树基础oj练习
  • fpga实操训练(系统开发和硬件接口)
  • 审批工作流—ccflow
  • ThreadLocal详解
  • Java大数值与浮点数计算
  • cmake 05 使用库
  • 浏览器使用本地硬盘上的JS文档
  • Python基础学习七
  • Java IO流之字符流详解
  • 二叉树专题汇总
  • 多个盒子排列规则(视觉格式化模型) 多个盒子的排列 页面布局
  • Linux下动静态库的打包与使用C C++
  • ubuntu 22.04学习笔记
  • 2023年网络安全比赛--中间件渗透测试中职组(超详细)
  • Python初学者看过来啊,老油条来复习
  • 单绞机控制算法模型(Simulink仿真)
  • 十二、创建和管理表
  • MySQL HA(High Availability) 数据库高可用工具Orchestrator安装
  • 通信原理简明教程 | 基本概念
  • 【头歌】单链表的排序操作
  • Mysql入门技能树-使用数据库
  • Java线程池
  • 恶意代码分析实战 1 静态分析基础技术
  • 恶意代码分析实战 7 WinDbg
  • Vue-Router详解
  • PHP 实例 - AJAX 实时搜索
  • 【MySQL】存储引擎
  • 《MLB美职棒大联盟》:年度最佳教练奖·棒球1号位
  • 19、Javaweb案例-登录功能
  • 【Git :分布式版本控制工具】
  • jvm面试题汇总
  • 电商项目之同一笔单多次收款成功
  • 零基础学JavaWeb开发(二十二)之 springmvc入门到精通(2)
  • Issues with peer dependencies found
  • CSS 艺术之心形-彩虹-加载动画
  • Python---自动生成二维码
  • Java集合常见面试题(四)
  • input 实现回车失焦,考虑输入法的情况
  • 高等数学【合集2】
  • 雅睿生物在创业板IPO终止:安信证券为保荐人,曾计划募资7.5亿元
  • 【操作系统】—— Windows常用快捷键(带你快速了解)
  • 基于Andriod的智慧校园卡系统的设计与实现
  • (18)go-micro微服务ELK介绍
  • OSG三维渲染引擎编程学习之二十八:“第三章:OSG场景组织” 之 “3.10 Switch开关节点”
  • 动态站点地图提交百度收录
  • 【价格型需求响应】基于Logistic函数的负荷转移率模型需求响应研究(Matlab代码实现)
  • javascript中Math.random()产生随机数进行随机点名
  • Hyperbolic geometry (双曲几何简介)
  • 【Leetcode每日一题】34.在排序数组中查找元素的第一个和最后一个位置|二分求下标
  • 【JavaEE】如何开始基础的Servlet编程(基于Tomcat服务器)
  • 【SpringCloud20】SpringCloud Alibaba Seata处理分布式事务
  • MODBUS总线的学习笔记
  • OSG三维渲染引擎编程学习之二十七:“第三章:OSG场景组织” 之 “3.9 AutoTransform自动对齐节点”
  • 最实用的 Docker 知识(一)
  • Leetcode:78. 子集、90. 子集 II(C++)
  • 1月23日Linux c编程之Makefile
  • UPS BP650CH实现nas自动关机
  • MySQL —— 库操作
  • ❤️如何实现所谓的“关键字传参”--理论+易懂版⭐
  • 【JavaEE】认识线程Thread类及常用方法线程状态
  • Shell语法
  • MP-2平面烟雾气体传感器介绍
  • springboot中restful风格请求的使用
  • 【19】C语言 | 三子棋
  • 【每日一题Day97】LC1828统计一个圆中点的数目 | 模拟
  • 议论文书写总结
  • Day869.索引(下) -MySQL实战
  • 离线召回与排序介绍
  • 【Ajax】防抖和节流
  • CMAKE
  • 【面试克星】【公式少代码少话多】Vins-Mono预积分相关知识点总结与概述
  • C语言基础知识(36)
  • Python实现一个简易的CLI翻译程序
  • SQL学习
  • 【计组笔记01】计算机组成原理之冯诺依曼体系结构、计算机编码、定点数的表示、原码和补码的乘除法
  • 人世正道沧桑,她亦奋力向前 --读《李清照传》有感
  • Android 深入系统完全讲解(37)
  • 【QT5.9】与MFC对比学习笔记-感悟篇2【2023.01.23】
  • ARP渗透与攻防(五)之Ettercap劫持用户流量
  • C++初阶--继承
  • 学习率衰减、局部最优、Batch归一化、Softmax回归
  • 树状数组(代码模板和原理详解)
  • 我的第一次真实对国外某购物平台web漏洞挖掘
  • Intellij IDEA 丢失 Project Structure 问题
  • 分享139个ASP源码,总有一款适合您
  • Java | 解决并发修改异常问题【CurrentModificationException】
  • Mybatis遇到的脑残问题
  • 为了方便项目打包,我用Node写了个git-tag工具
  • RK3399平台开发系列讲解(内存篇)访问虚拟内存的物理内存过程
  • Essential C++第五章习题
  • JDK8 新特性之并行的Stream流
  • Cesium:Indexed 3D Scene Layers (I3S)加载
  • 【代码阅读】MSC-VO
  • Python基础学习六
  • 使用 AJAX+JSON 实现用户查询/添加功能
  • 在linux下安装docker
  • 【Hadoop】HDFS+Shell实践(定时上传数据至HDFS)
  • 《Rust权威指南》读书笔记9 - 泛型、特性、生命周期
  • 文本情感分类TextCNN原理+IMDB数据集实战
  • 【蓝桥杯】历届真题 作物杂交(省赛)Java
  • Tkinter的Listbox控件
  • 进阶C语言 第二章-------《进阶指针》 (指针数组、数组指针、函数指针、回调指针)知识点+基本练习题+深入细节+通俗易懂+完整思维导图+建议收藏
  • 梯度之上:Hessian 矩阵
  • Ubiquiti MAC Address Changer 3.0 Crack
  • 机器学习(五):机器学习算法分类
  • 路由处理及功能(实现了权限控制vue admin)
  • 【JavaSE专栏5】Java 基本数据类型和取值范围
  • 英语学习打卡day4
  • 【数据库概论】3.1 SQL简述、数据定义和索引
  • 【C语言进阶】一文带你学会C语言文件操作
  • 欧几里得与扩展欧几里得算法(含推导过程及代码)
  • 【My Electronic Notes系列——晶闸管】
  • 安装配置Ecplise插件PyDev 8.3.0
  • LeetCode刷题记录---贪心算法
  • 蓝桥杯-刷题-补基础
  • 多线程不安全函数的理解
  • 插入排序算法的实现和优化~
  • 协调中心性能大对比:zookeeper是如何解决负载均衡问题的
  • Email Signature Manager 9.3 Crack
  • CSS边框、边距、轮廓(边框宽度/颜色/各边/简写属性/圆角边框/内外边距/高度宽度/框模型/轮廓宽度/颜色/属性/偏移)——万字长文|一文搞懂
  • 2022——>2023
  • 【手写 Vue2.x 源码】第四十二篇 - 组件部分 - 组件挂载流程简述
  • 数据结构 最短路径课设(源码+实验报告+视频讲解)(用了自取)
  • 高等数学(第七版)同济大学 习题12-6 个人解答
  • Nacos集群搭建
  • JVM快速入门学习笔记(三)
  • 作为项目经理,如何做好项目进度管理
  • Linux进程信号
  • 我的1周年创作纪念日
  • 量子力学奇妙之旅-微扰论和变分法
  • CS61A 2022 fall HW 01: Functions, Control
  • MySQL主从复制、读写分离
  • NR PUSCH(七) 相干传输
  • 【Java|golang】1828. 统计一个圆中点的数目
  • Nginx与LUA(7)
  • 设计模式 - 六大设计原则之LoD(迪米特法则原则)
  • C++程序设计——动态内存管理
  • Leetcode:93. 复原 IP 地址(C++)
  • 《TPM原理及应用指南》学习 —— TPM实体4
  • 树,堆,二叉树的认识
  • OSG三维渲染引擎编程学习之二十五:“第三章:OSG场景组织” 之 “3.7 PositionAttitudeTransform位置姿态变换节点”
  • 几种觉排序优劣
  • 【C++】右值引用和移动语义 | 新的类功能 | 可变参数模板
  • 园区网典型组网架构及案例实践
  • 【学习Arduino单片机AD传感器采样的十大滤波算法】
  • PAT 1074 宇宙无敌加法器(C++解法)
  • Kubernetes:基于命令行终端UI的管理工具 K9s
  • 【JavaSE】一文看懂构造器/构造方法(Cunstructor)
  • 排序算法: 数据的离散化(排序+去重 C++例题实现)
  • 【每日一道智力题】之海盗分金币(上)
  • TypeScript
  • C++第七讲——Demon和Angela的魔法之旅
  • 美团出品 | YOLOv6 v3.0 is Coming(超越YOLOv7、v8)
  • CSS样式基础内容2
  • 【C++】类和对象(上)---什么是类?
  • 【头歌】单链表的基本操作
  • ConcurrentHashMap的死循环问题
  • C++6:STL-模拟实现string
  • 一文吃透python多线程(全面总结)
  • 计算机基础——无处不网络(2)
  • Docker安装教程(看这篇就够了)
  • 高性能 Java 框架。Solon v1.12.3 发布(春节前兮的最后更)
  • 内存函数及其模拟实现