[CSS]样式属性+元素设置

哎呀,好多东西,根本记不住,更多的还是边用边记吧,这里的代码就当使用范例,但其实如果可以让gpt应该会更好,哎学吧,反正记得住当然更好


文本
属性名描述
word-break单词换行。取值如下:
word-break: break-all;,表示保持整行内容结束以后换行。
word-break: break-word;,表示保持以单词整体进行换行。默认值。
text-align行内元素或元素内部的文本内容的水平对齐方式。
text-align-last元素末行内容的水平对齐方式。
word-spacing元素内容中单词与单词之间的距离【单词间距】。
letter-spacing元素内容中字符与字符之间的距离【字符间距】。
text-indent元素内容中首行内容的缩进。
vertical-align行内元素或行内块级元素的垂直对齐方式。
line-height元素内容的行高,支持所有的常见尺寸单位与font-size的倍数
text-decoration元素的下划线修饰符
text-shadow元素的文本内容的阴影或模糊效果。取值如下:
none,无阴影。
参数1: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值。
参数2: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值。
参数3: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值。
参数4: 设置对象的阴影颜色
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div.box1{width: 400px;height: 200px;background-color: red;word-break: break-all;}div.box2{text-align: center;}div.box3{text-align: center;}div.box4{text-align-last: center;}div.box5{word-spacing: 100px;}.box6{letter-spacing: 5px;}.box7{text-indent: 2rem;}.box8 img{vertical-align: top;}input{height: 42px;vertical-align: top;}.box10{line-height: 2rem;}.box11, a, del{/*text-decoration: underline; !*下划线 *!*//*text-decoration: line-through; !*贯穿线,也叫删除线 *!*//*text-decoration: overline; !*盖帽线,也叫上边线 *!*/text-decoration: none; /*没有装饰线 */}.box12{font-size: 36px;text-shadow: 2px 2px 5px red;/*text-shadow: 2px 2px 5px red, 5px 5px 5px yellow, 7px 7px 5px blue;*/}</style>
</head>
<body>
<!--    <div class="box1">Flask-SocketIO gives Flask applications access to low latency bi-directional communications between the clients and the server. The client-side application can use any of the SocketIO client libraries in Javascript, Python, C++, Java and Swift, or any other compatible client to establish a permanent connection to the server.</div>-->
<!--    <div class="box2">Flask-SocketIO</div>-->
<!--    <div class="box3"><a href="">百度</a></div>-->
<!--    <div class="box3"><img src="1.gif" alt=""></div>-->
<!--    <div class="box3"><p>这一段很长的内容!!!</p></div>-->
<!--    <div class="box4">Flask-SocketIO gives Flask applications access to low latency bi-directional communications between the clients and the server. The client-side application can use any of the SocketIO client libraries in Javascript, Python, C++, Java and Swift, or any other compatible client to establish a permanent connection to the server.</div>-->
<!--    <div class="box5">hello world</div>-->
<!--    <div class="box6">hello world</div>-->
<!--    <div class="box7">国家统计局15日发布数据显示,5月份我国经济逐步克服疫情不利影响,<br>生产需求逐步恢复,就业物价总体稳定,主要指标边际</div>-->
<!--    <div class="box8">一张图片:<img src="1.gif" alt=""></div>--><div class="box9">账号:<input type="text" name="" placeholder="账号"></div><div class="box10">国家统计局15日发布数据显示,5月份我国经济逐步克服疫情不利影响,<br>生产需求逐步恢复,就业物价总体稳定,主要指标边际</div><div class="box11">国家统计局15日发布数据显示,5月份我国经济逐步克服疫情不利影响,<br>生产需求逐步恢复,就业物价总体稳定,主要指标边际</div><div class="box11"><a href="">百度</a><div><del>删除内容</del><div class="box12">text-shadow</div></body>
</html>
尺寸

块级元素默认宽度是100%;

属性名描述
width元素的宽度[行内元素是没有宽度高度的]
min-width元素的最小宽度
max-width元素的最大宽度
height元素的高度[行内元素是没有宽度高度的]
min-height元素的最小高度
max-height元素的最大高度
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box1{width: 100px;height: 100px;background-color: red;/*transition: background-color .5s ease-in .1s,*//*border-radius .5s ease-in .1s,*//*width .5s ease-in .1s,*//*height .5s ease-in .1s;*/transition: all .5s ease-in .1s;}.box1:hover{width: 200px;height: 200px;border-radius: 100%; /* 圆角效果 */background-color: blue;}.box2{background-color: red;width: 100%;max-width: 1200px; /* 元素的最大宽度 */min-width: 640px; /* 元素的最小宽度 */min-height: 200px; /* 元素的最小高度 */}</style>
</head>
<body><div class="box1"></div><div class="box2">啊哈哈哈 <br>啊哈哈哈 <br>啊哈哈哈 <br>啊哈哈哈 <br>啊哈哈哈 <br></div>
</body>
</html>
常见的尺寸单位
单位描述
px绝对长度单位。像素(Pixels)。
em相对长度单位。相对于当前元素内文本的字体尺寸。
rem相对长度单位。相对于根元素(即html元素)font-size计算值的倍数
vw相对长度单位。相对于视口的宽度,默认情况下CSS的视口被均分为100单位的vw
vh相对长度单位。相对于视口的高度。视口被均分为100单位的vh
%相对长度单位。相对于父级元素的宽度或高度进行设置。其中在部分元素中高度使用使用100%是没有效果的。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{margin:0;}html{font-size: 20px;}div{font-size: 16px;background-color: red;}.box1{width: 16px;height: 16px;line-height: 16px;}.box2{width: 1em; /* 1个字符的尺寸 */height: 1em;line-height: 16px;}.box3{width: 1rem; /* 相对于根元素(即html元素)font-size计算值的倍数 */height: 1rem;line-height: 16px;}.box4{width: 100vw; /* 把视口纵向切割成左右100分, 1vw就是1份;*/height: 100vh; /* 把视口横向切割成上下100分,1vh就是1份;*/}</style>
</head>
<body>
<!--    <div class="box1">中</div>-->
<!--    <div class="box2">中</div>-->
<!--    <div class="box3">中</div>--><div class="box4">中</div>
</body>
</html>
边距(补白

元素的边距(margin,也叫补白或填充padding),分外边距(外补白)与内边距(内补白)。其中外边距是指元素与其他元素之间的空隙,而内边距是指元素与内容或者元素与子元素之间空隙。

关于内边距与外边距的说明:

在浏览器中,F12调试工具里面elements选项中,提供了一个盒子模型给开发者查看当前元素的外边距、边框、内边距、元素的宽高的模型,这个模型就是盒模型(box model)。基于盒模型,我们可以分析出一个元素具体在网页中的实际占据空间是多少,可以让开发者可以轻松的进行网页排版与布局

属性名描述
margin-top设置元素的上外边距
margin-right设置元素的右外边距
margin-bottom设置元素的下外边距
margin-left设置元素的左外边距
margin上面所有外边距属性的集体简写方式。有4种简写方式:
1个属性值。例如:**margin: 20px;表示同时设置元素的4个方向的外边距对为20px
2个属性值。例如:
margin: 20px 40px;表示设置元素的外边距,上下为20px,左右为40px
3个属性值。例如:
margin: 20px 40px 50px;表示设置元素的外边距,上20px,左右40px, 下50px
4个属性值。例如:
margin: 10px 20px 30px 40px;**表示上10px,右20px,下30px,左40px;【顺时针排列】
padding-top设置元素的上内边距(也叫补白或填充)
padding-right设置元素的右内边距
padding-bottom设置元素的下内边距
padding-left设置元素的左内边距
padding上面所有内边距属性的集体简写方式。有4种简写方式:
1个属性值。例如:**padding: 20px;表示设置元素的4个方向的内边距对为20px
2个属性值。例如:
padding: 20px 40px;表示设置元素的内边距,上下为20px,左右为40px
3个属性值。例如:
padding: 20px 40px 50px;表示设置元素的内边距,上20px,左右40px, 下50px
4个属性值。例如:
padding: 10px 20px 30px 40px;**表示上10px,右20px,下30px,左40px;【顺时针排列】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box1{max-width: 1600px;background-color: red;margin: 0 auto;}.box2{height: 250px;background-color: red;/*margin-top: 100px;*//*margin-right: 150px;*//*margin-bottom: 250px;*//*margin-left: 150px;*//*margin: 100px 150px 250px 150px; !* 上面的简写 上 右 下 左 顺时针方向  *!*//*margin: 100px 150px 250px; !* 上面的简写 上 左右 下*!*//*margin: 150px 150px; !* 上面的简写 上下 左右 *!*/margin: 150px; /* 上面的简写 四个方向 */}.box3{width: 150px;height: 50px;background-color: yellow;/*padding-top: 50px;*//*padding-right: 50px;*//*padding-bottom: 20px;*//*padding-left: 50px;*//*padding: 50px 50px 20px 50px; !* 上面的简写:上 右 下 左 顺时针方向 *!*//*padding: 50px 50px 20px; !* 上面的简写 上 左右 下 *!*//*padding: 50px 50px; !* 上面的简写 上下 左右 *!*/padding: 50px; /* 上面的简写 四个方向 */}</style>
</head>
<body><div class="box1">内容居中</div><div class="box2">外边距设置<div class="box3">内边距设置</div></div><p>一个普通p标签</p>
</body>
</html>
边距的使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="normalize.css"><style>.box1{width: 400px;height: 200px;background-color: red;text-align: center;}.box2{width: 150px;height: 50px;background-color: yellow;margin: 0 auto; /* 设置让子块级元素在父块级元素的内部横向居中 */}</style>
</head>
<body>
1. 初始化样式,针对列表,h1,p等等HTML元素,在默认情况下存在一些不必要的内外边距,工作中一般会处理掉<br>
<p>p1</p>
<h1>h1</h1>
<ul><li>li-1</li><li>li-2</li>
</ul>
2. 让子块级元素在父块级元素内部居中 <br>
<div class="box1"><div class="box2">hello</div>
</div>
3. 布局效果 <br>
<hr>
<style>
.today-news{width: 440px;margin: 50px;
}
.today-news .block-title{font-size: 30px;color: #0066cc;border-bottom: 1px solid #ccccff;height: 61px;
}
.today-news .block-title span{border-bottom: 5px solid #0066cc;padding-bottom: 15px;
}
.today-news .block-title .first-news a{color: #333;text-decoration: none;
}
.today-news .news-list li{line-height: 32px;
}
.today-news .first-news {padding: 13px 0 5px;font-weight: bold;
}
.today-news a:hover {color: #0c82ff;
}
.today-news li .site{color: #253e6d;font-weight: bold;
}
.today-news li .line{padding: 0 5px;color: #e9e9e9;
}
</style>
<div class="today-news"><h3 class="block-title"><span>今日话题</span></h3><ul class="news-list"><li class="first-news"><a href="">国家统计局:5月份国民经济运行呈现恢复势头</a></li><li><a class="site" href="">海外网</a><span class="line">|</span><a class="title" href="">落实“双碳”行动,共建美丽家园</a></li><li><a class="site"  href="">新华网</a><span class="line">|</span><a class="title" href="">这笔钱,你也可能领到!全国总工会最新通知</a></li><li><a class="site"  href="">中国青年网</a><span class="line">|</span><a class="title" href="">过度防疫被通报:疫情防控不松懈不加码</a></li><li><a class="site"  href="">半月谈网</a><span class="line">|</span><a class="title" href="">身在基层却脱离基层,部分干部为何疏离百姓家门</a></li><li><a class="site"  href="">澎湃新闻</a><span class="line">|</span><a class="title" href="">全国铁路6月20日起实行新运行图</a></li><li><a class="site"  href="">中国新闻周刊</a><span class="line">|</span><a class="title" href="">黑土地告急!事关14亿人的饭碗</a></li></ul>
</div>
</body>
</html>
边框
属性名描述
border-top-style设置元素的上边框类型。常见值如下:
none: 无边框。
dotted: 点状轮廓。
dashed: 虚线轮廓。
solid: 实线轮廓
border-right-style设置元素的右边框类型。常见值同上。
border-bottom-style设置元素的下边框类型。常见值同上。
border-left-style设置元素的左边框类型。常见值同上。
border-style上面所有边框类型属性的集体简写方式。有4种简写方式,参考margin简写方式。
border-top-color设置元素的上边框颜色。
border-right-color设置元素的右边框颜色。
border-bottom-color设置元素的下边框颜色。
border-left-color设置元素的左边框颜色。
border-color上面所有边框颜色属性的集体简写方式。有4种简写方式,参考margin简写方式。
border-top-width设置元素的上边框宽度。
border-right-width设置元素的右边框宽度。
border-bottom-width设置元素的下边框宽度。
border-left-width设置元素的左边框宽度。
border-width上面所有边框宽度属性的集体简写方式。有4种简写方式,参考margin简写方式。
border-top上边框颜色、类型、宽度的集体简写方式。
border-right右边框颜色、类型、宽度的集体简写方式。
border-bottom下边框颜色、类型、宽度的集体简写方式。
border-left左边框颜色、类型、宽度的集体简写方式。
border是四个方向的边框颜色、类型、宽度的集体简写方式。
border-top-left-radius设置元素的左上角圆角效果。值格式有2种:
正圆圆角,例如:border-top-left-radius: 直径长度;
椭圆圆角,例如:border-top-left-radius: 水平方向直径 垂直方向直径;
border-top-right-radius设置元素的右上角圆角效果。值格式同上。
border-bottom-right-radius设置元素的右下角圆角效果。值格式同上。
border-bottom-left-radius设置元素的左下角圆角效果。值格式同上。
border-radius上面所有元素圆角属性的集体简写方式。有4种简写方式,参考margin简写方式。值格式同上。
与上面的区别是椭圆圆角的参数以:**水平方向直径/垂直方向直径**格式设置。
box-shadow设置元素的阴影效果。设置方式与**text-shadow类似。取值如下:
none: 无阴影
参数1:定义元素的阴影
水平偏移值**。正值,阴影在右边;负值,则阴影在左边
参数2:定义元素的阴影垂直偏移值。正值,阴影在下方;负值,则阴影在上方
参数3:定义元素的阴影模糊值半径。该值越大阴影边缘越模糊,若为0则阴影不模糊。不允许负值
参数4:定义元素的阴影外延值。正值,阴影将向四面扩展;负值,则阴影向里收缩
参数5:定义元素阴影的颜色。如果该值未定义,阴影颜色将默认取当前最近的文本颜色
参数6:inset: 定义元素的阴影类型为内阴影。该值为空时,则元素的阴影类型为外阴影

wk,好多属性元素,注意这里的代码,或者是这个系列的代码,想看那部分就把那一部分的代码给取消注释

边框的基本使用
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>h1, button{width: 200px;}.box1{/* 边框属性 *//*分别设置4个方向的边框类型*//*border-top-style: dotted;*//*border-right-style: dashed;*//*border-bottom-style: double;*//*border-left-style: solid;*//*设置上 右 下 左 的边框类型[简写]*//*border-style: dotted dashed double solid;*//*设置 上 左右 下的边框类型*//*border-style: dotted solid double;*//*设置上下 左右的边框类型*//*border-style: double solid;*//*同时设置4个方向的边框类型*/border-style: solid;}.box2{/*border-top-style: none;*//*border-right-style: none;*//*border-bottom-style: none;*//*border-left-style: none;*/border-style: none;}.box3{border-style: solid;/*分别设置4个方向的边框颜色*//*border-top-color: red;*//*border-right-color: blue;*//*border-bottom-color: pink;*//*border-left-color: cyan;*//*简写边框颜色属性*//*!*一次性分别设置4个方向的边框颜色*!*//*border-color: red blue pink cyan;*//*!*设置 上 左右 下的边框颜色*!*//*border-color: red blue pink;*//*!*设置 上下 左右 的边框颜色*!*//*border-color: red blue;*//* 一次性同时设置4个方向的边框颜色 */border-color: red;}.box4{border-style: solid;border-color: red;/*分别设置4个方向的边框宽度*//*border-top-width: 2px;*//*border-right-width: 10px;*//*border-bottom-width: 10px;*//*border-left-width: 10px;*//*!*简写,一次性分别设置4个方向的边框宽度*!*//*border-width: 1px 10px 10px 10px;*//*!*一次性设置上 左右 下 的边框宽度*!*//*border-width: 1px 15px 10px;*//*!*一次性设置 上下 左右的边框宽度*!*//*border-width: 1px 10px;*//*!*一次性同时设置4个方向的边框宽度*!*/border-width: 2px;}.box5{/*border-style: solid;*//*border-color: red;*//*border-width: 2px;*//*按方向简写边框宽度,边框类型,边框颜色*//*border-top: 2px double red;*//*border-right: 2px double blue;*//*border-bottom: 5px solid blue;*//*border-left: 5px solid red;*/border: 2px solid red;}</style>
</head>
<body>
<!--    <h1 class="box1">标题</h1>-->
<!--    <button class="box2">按钮</button>-->
<!--    <h1 class="box3">标题</h1>-->
<!--    <h1 class="box4">标题</h1>--><h1 class="box5">标题</h1>
</body>
</html>
边框的实际使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.search-btn{width: 546px;margin: 0 auto;}.search-btn:after{content: "";display: block;clear: both;overflow: hidden;}.search-btn input[type="text"]{width: 423px;height: 26px;padding: 2px 44px 2px 17px; /* 上右下左 */border: 2px solid #e2231a;  /* 边框宽度  边框类型 边框颜色 */outline: none;float: left;}.search-btn input[type="text"]::placeholder{font-size: 12px;}.search-btn .btn{width: 58px;height: 34px;line-height: 34px;background-color: #e1251b;outline: none;border: none;float: left;}.search-btn .btn img{width: 20px;height: 20px;vertical-align: sub;}</style>
</head>
<body><div class="search-btn"><input type="text" name="" id="" placeholder="家电168热销"><button class="btn"><img src="search.svg" alt=""></button></div>
</body>
</html>
元素基于边框实现图标效果
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box1{width: 0;height: 0;border: 26px solid transparent;border-top: 26px solid red;}.box2{width: 0;height: 0;border: 26px solid transparent;border-right: 26px solid red;}.box3{width: 0;height: 0;border: 26px solid transparent;border-bottom: 26px solid red;}.box4{width: 0;height: 0;border: 26px solid transparent;border-left: 26px solid red;}.box5{width: 0;height: 0;border: 26px solid transparent;border-left: 26px solid red;border-right: 26px solid red;}.box6{width: 0;height: 0;border: 26px solid transparent;border-color: red yellow;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div><div class="box6"></div>
</body>
</html>
元素圆角的使用
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box1{width: 50px;height: 50px;background-color: red;/* 单独设置4个方向的圆角 */border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;/*简写,设置4个方向的圆角*//*border-radius: 10px 10px 10px 10px;*//*设置上 左右 下*/border-radius: 10px 20px 10px;/*设置 上下 左右*/border-radius: 20px 10px;/*同时设置4个方向的圆角*/border-radius: 50px;}.box2{width: 200px;height: 40px;background-color: gray;border-radius: 20px;}.box3{width: 200px;height: 40px;background-color: black;border-top-left-radius: 50px;border-top-right-radius: 10px;border-bottom-right-radius: 50px;border-bottom-left-radius: 10px;}.box4{/* 椭圆圆角 */width: 200px;height: 40px;background-color: orangered;border-top-left-radius: 20px 10px;border-top-right-radius: 20px 10px;border-bottom-right-radius: 20px 10px;border-bottom-left-radius: 20px 10px;}.box5{/* 椭圆圆角 */width: 200px;height: 40px;background-color: orangered;border-radius: 50px/25px;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div><div class="box6"></div>
</body>
</html>
元素的阴影
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>body{background-color: #f5f5f5;}.box1{height: 300px;width: 234px;background-color: white;transition: all .2s linear;  /* 过渡样式的设置:从正常状态,切换到伪类状态的过渡效果。 参数1:设置要过渡的样式,all表示所有样式,参数2:完成过渡的持续时间。参数3:完成整个动画的运动轨迹 */}.box1:hover{box-shadow: 0 15px 30px rgba(0,0,0,0.1);transform: translate3d(0,-2px,0);}</style>
</head>
<body><div class="box1"></div>
</body>
</html>
元素的过渡动画效果
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.box1{width: 50px;height: 50px;background-color: red;/*transition: width 10s linear;*/ /* 匀速 */transition: width 10s ease;  /*平滑*//*transition: width 10s ease-in;  !* 先慢后快 *!*//*transition: width 10s ease-out;  !* 先快后慢 *!*//*transition: width 10s ease-in-out;  !* 先慢后快再慢 *!*/}.box1:hover{width: 1200px;}</style>
</head>
<body><div class="box1"></div>
</body>
</html>
元素的背景
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.page{width: 100%;max-width: 1600px;margin: 0 auto;height: 500px;/*background-color: red;  !* 背景图片被覆盖背景颜色 *!*//*background-image: url("assets/images/3f7f689039c6c5b5cbfb6a4c4cae5079.jpeg");  !*可以是网络路径,也可以是本地路径*!*//*background-repeat: no-repeat; !* 不平铺 *!*//*background-repeat: repeat-y;  !* 垂直平铺,延Y轴平铺 *!*//*background-repeat: repeat-x;  !* 横向平铺,延X轴平铺 *!*//*background-repeat: repeat;  !* 全部平铺,默认值 *!*//*background-size: 100% 100%;  !* 设置背景图片的大小 宽度 高度 *!*//*background-size: 100%;  !* 如果是单独一个参数时,则表示只设置宽度,高度按比例缩放 *!*//*background-size: auto 100%;  !* 表示单独指定高度,宽度按比例缩放 *!*//*背景图片定位:以元素右上角作为原点(0,0)*//*background-position: 100px 100px;*//*background-attachment: fixed;   !*元素的背景图片,相对于窗口固定,元素滚动时,背景图片不会跟着滚动*!*//*background-attachment: scroll;   !*相对于元素固定,当元素内容滚动时背景图片不会跟着滚动*!*//*background-attachment: local;    !*相对于元素固定,当元素内容滚动时背景图片也会跟着滚动*!*//*overflow: scroll; !* 溢出内容的处理方式:scroll表示当内容超出元素本身的高度与高度时,出现滚动条 *!*/background: red url("assets/images/3f7f689039c6c5b5cbfb6a4c4cae5079.jpeg") no-repeat 200px 100px;}</style>
</head>
<body style="height: 3000px;"><div class="page">hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br>hello world;<br></div>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/807476.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[自研开源] MyData数据融合平台 诚邀试用

MyData &#xff0c;一个旨在简化 Web 应用之间数据对接的工具&#xff0c;提高日常工作效率&#xff0c;如其名“我的数据” 旨在让用户更好的掌控和管理数据。 v1.0 的目标是&#xff1a;针对多应用之间数据集成的场景&#xff0c;为开发人员提供更安全、更方便的对接集成方…

Elasticsearch8.x 设置密码

文章目录 一、环境说明二、使用elasticsearch-reset-password工具修改1、elasticsearch-reset-password工具位置2、设置密码 一、环境说明 elasticsearch版本&#xff1a;8.13.0 系统版本&#xff1a;Ubuntu 18.04.6 二、使用elasticsearch-reset-password工具修改 1、elast…

【Java程序员面试专栏 综合面试指南】5年资深程序员面试指南

基础知识对于5年内工作经验的同学考察相对比较多。包括编程语言、计算机网络、操作系统、设计模式、分布式知识、MySQL、Redis这种。其中随着年限的增长,基础知识考察的会越来越少,例如操作系统基本上只在学生阶段考察,计算机网络对于5年经验来说也考察的相对较少。5年以上对…

优化策略:企业海量文件传输事件处理(上)

在当今快速发展的商业环境中&#xff0c;企业的数据量正以前所未有的速度增长。这种增长不仅带来了机遇&#xff0c;也带来了挑战&#xff0c;特别是在文件传输任务的管理上。文件传输是企业日常运营中不可或缺的一部分&#xff0c;它涉及到大量的数据流动和信息交换。因此&…

0 idea搭建springboot项目

1 2 3 4 5 配置文件 application.yaml server:servlet:context-path: /app #项目名controller //注入到spring容器 Controller public class HelloController {GetMapping("hello")ResponseBodypublic String hello(){return "Hello,SpringBoot";} }启…

【MATLAB 预测算法教程】_1粒子群算法优化BP神经网络预测 - 教程和对应MATLAB代码

本文以MATLAB自带的脂肪数据集为例,将数据保存在EXCEL工作簿内,方便替换数据使用,以下介绍粒子群算法优化BP神经网络预测的MATLAB代码编写,主要流程包括1. 读取数据 2.划分训练集和测试集 3.归一化 4.确定BP神经网络的隐含层最优节点数量 5. 使用粒子群算法优化BP的神经网络…

[数据概念|数据技术]智能合约如何助力数据资产变现

“ 区块链上数据具有高可信度&#xff0c;智能合约将区块链变得更加智能化&#xff0c;以支持企业场景。” 之前鼹鼠哥已经发表了一篇文章&#xff0c;简单介绍了区块链&#xff0c;那么&#xff0c;智能合约又是什么呢&#xff1f;它又是如何助力数据资产变现的呢&#xff1f;…

Swagger转换成Excel文件

1、添加swagger解析依赖包&#xff1a; <dependency><groupId>io.swagger.parser.v3</groupId><artifactId>swagger-parser</artifactId><version>2.1.12</version></dependency>2、示例代码&#xff1a; package com.rlclou…

华为校招机试 - 相似图片分类(20240410)

题目描述 小明想要处理一批图片&#xff0c;将相似的图片分类。 他首先对图片的特征采样&#xff0c;得到图片之间的相似度&#xff0c;然后按照以下规则判断图片是否可以归为一类&#xff1a; 相似度 > 0 表示两张图片相似如果 A 和 B 相似&#xff0c;B 和 C 相似&…

基于spring boot的大学生体质测试管理系统

基于spring boot的大学生体质测试管理系统设计与实现 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 …

新鲜出炉!这一套二手平台管理系统,太牛了,直接领取【带源码】

​今天给大家分享一套基于SpringbootVue的二手平台管理系统源码&#xff0c;在实际项目中可以直接复用。(免费提供&#xff0c;文末自取) 一、系统运行图&#xff08;设计报告和接口文档&#xff09; 1、登陆页面 2、后台页面 3、设计报告包含接口文档 二、系统搭建视频教程 …

基于RKNN的YOLOv5安卓Demo

1.简介 基于RKNPU2 SDK 1.6.0版的安卓YOLOv5演示应用程序&#xff0c;选择图片进行对象检测并显示识别结果。 GitHub源码地址&#xff1a;https://github.com/shiyinghan/rknn-android-yolov5 2.实现过程 参考RKNN官方库RKNN Model Zoo提供的YOLOv5对象检测demo&#xff0c…

SQL注入sqli_labs靶场第三题

?id1and 11 and 11和?id1and 11 and 11进行测试如果11页面显示正常和原页面一样&#xff0c;并且12页面报错或者页面部分数据显示不正常&#xff0c;那么可以确定此处为字符型注入。 根据报错信息判断为单引号带括号注入 联合查询&#xff1a; 猜解列名 ?id1) order by 3-…

Java毕业设计 基于springboot vue撸宠平台 宠物系统

Java毕业设计 基于springboot vue撸宠平台 宠物系统 springboot撸宠平台 宠物系统 功能介绍 首页 图片轮播 用户或商家注册 用户或商家登录 登录验证码 店铺信息 店铺详情 店铺投诉 宠物信息 宠物详情 预订 退订 搜索 收藏 点赞 踩 评论 个人中心 更新信息 我的收藏 在线客服…

提升法律文书起草效率:AlphaGPT 助力律师快速生成诉讼和仲裁文件

法律文书起草对于法律专业人士而言是一项基础而关键的任务。无论是民事、刑事还是行政诉讼&#xff0c;以及仲裁案件&#xff0c;精确的法律文书撰写对于案件的成功至关重要。然而&#xff0c;这一过程往往既耗时又复杂&#xff0c;尤其是在处理复杂的案情和面对当事人难以理解…

syncfusion-diagram:demo1如何实现

xmlns:syncfusion"http://schemas.syncfusion.com/wpf" xmlns:stencil"clr-namespace:Syncfusion.UI.Xaml.Diagram.Stencil;assemblySyncfusion.SfDiagram.WPF"当我们进入syncfusion的diagram中&#xff0c;可以看到&#xff0c;一个非常炫酷的例子 不仅实…

为什么要部署IP SSL证书?怎么申请?

我们需要知道什么是IP SSL证书。SSL&#xff0c;全称为Secure Sockets Layer&#xff0c;即安全套接层&#xff0c;是为网络通信提供安全及数据完整性的一种安全协议。而IP SSL证书就是基于SSL协议的一种证书&#xff0c;它能够为网站和用户的数据传输提供加密处理&#xff0c;…

对称加密学习

对称加密是一种加密技术&#xff0c;它使用相同的密钥进行数据的加密和解密操作。这种加密方法因其高效性和速度优势&#xff0c;在数据加密领域得到了广泛的应用。 下面是两篇文章&#xff1a; AES加密学习-CSDN博客 加密算法学习-CSDN博客 推荐关注加密专栏&#xff1a; …

ThinkPHP审计(1) 不安全的SQL注入PHP反序列化链子phar利用简单的CMS审计实例

ThinkPHP代码审计(1) 不安全的SQL注入&PHP反序列化链子phar利用&简单的CMS审计实例 文章目录 ThinkPHP代码审计(1) 不安全的SQL注入&PHP反序列化链子phar利用&简单的CMS审计实例一.Thinkphp5不安全的SQL写法二.Thinkphp3 SQL注入三.Thinkphp链5.1.x结合phar实现…

Git可视化工具 - 推荐

概述 Git版本管理工具是我们日常开发中常用的工具&#xff0c;熟练使用它可以提高我们的工作效率。 当然老司机基本使用命令行的方式进行操作&#xff0c;新手可借助可视化工具来进行过渡&#xff0c;命令行与可视化工具结合使用来加深对Git的熟悉程度。 下面推荐两个较受欢迎…