CSS

@author:伏月廿柒

Cascading Style Sheet 层叠级联样式表

CSS:表现(美化)

字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动……

CSS发展史

CSS 1.0

CSS 2.0 DIV(块) + CSS,HTML与CSS结构分离的思想,网页变得简单,利于SEO

CSS 2.1 浮动,定位

CSS 3.0 圆角,阴影,动画…… 浏览器兼容性

CSS的优势

1、内容和表现分离

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

3、样式十分丰富

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

5、利于SEO,容易被搜索引擎收录!

style

<!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>Demo01</title> <!--
<style>语法:
选择器 {
声明1;
声明2;
……
}
-->
<style>
h1 {
color: red;
}
</style> <!-- css外部引用,建议使用此方法 -->
<link rel="stylesheet" href="../css/Demo01.css"> </head>
<body> <h1>标题1</h1>
<h2>标题2</h2> </body>
</html>
/*Demo01.css*/
h2 {
color: blue;
}

CSS导入方式

<!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>Demo02</title> <!-- 内部样式 -->
<style>
h1 {
color: green;
}
</style> <!-- 外部样式,链接引用 -->
<link rel="stylesheet" href="../css/Demo02.css">
<!-- 导入引用 -->
<style>
@import url("../css/Demo02.css");
</style> </head>
<body> <!-- 优先级:就近原则 --> <!-- 行内样式:在标签元素中,编写一个style属性,编写样式即可 -->
<h1 style="color: red;">标题1</h1> </body>
</html>
/*Demo02.css*/

/* 外部样式 */
h1 {
color: blue;
}

拓展:外部样式两种写法

  • 链接式

    <link rel="stylesheet" href="XXX.css">
  • 导入式(css 2.1)

    <style>
    @import url("XXX.css");
    </style>

选择器

选择页面上的某一个或者某一类元素

基本选择器

  1. 标签选择器
  2. 类 选择器 class
  3. Id 选择器
<!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>Demo03</title> <style>
/* 标签选择器,会选择到页面上所有的这个标签的元素 */
h1 {
color: aqua;
} /* 类选择器 */
/*
格式:.XXX {}
特点:跨标签,可以多个标签归类
*/
.h1_set_class {
color: aquamarine;
} /* id选择器 */
/*
格式:#XXX {}
特点:id必须保证全局唯一
*/
#h1_set_id {
color: bisque;
} #h2_set {
color: cadetblue;
}
</style> </head>
<body> <h1>Java</h1>
<h1 class="h1_set_class">html</h1>
<h2 id="h2_set">python</h2> <!--
优先级:
id选择器 > class选择器 > 标签选择器
-->
<h1 class="h1_set_class" id="h1_set_id">JS</h1> </body>
</html>

层次选择器

<!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>Demo04</title> <style>
/* 后代选择器,作用与后面所有代 */
body p {
background: #57b4e6;
} /* 子选择器,只作用于下一代 */
body > h1 {
background: #219143;
} /* 相邻兄弟选择器,只作用于下一个 */
.h1_set + h1 {
background: #3f56d6;
} /* 通用选择器,作用于向下的所有同级标签 */
.h4_set ~ h1 {
background: #cce755;
}
</style> </head>
<body> <p>p1</p>
<p>p2</p>
<h1 class="h1_set">h1</h1>
<h1>h2</h1>
<h1>h3</h1>
<h1 class="h4_set">h4</h1>
<h1>h5</h1>
<h1>h6</h1>
<p>p3</p>
<ul>
<li>
<h1>h7</h1>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<h1>h8</h1> </body>
</html>

结构伪类选择器

<!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>Doemo05</title> <style>
/* ul的第一个子元素 */
ul li:first-child {
background: #63c0f1;
} /* ul的最后一个子元素 */
ul li:last-child {
background: #63f1aa;
} /* 选中p1:定位到父元素,选择当前第一个元素 */
/* :nth-child 选中当前元素的父级元素的第一个子元素,并且是相同标签才生效! */
p:nth-child(1) {
background: #6378f1;
}
/* 选择第三个 */
p:nth-child(3) {
background: #f1e863;
} /* :nth-of-type 选中当前元素的父级元素下的相同标签的第二个子元素 */
p:nth-of-type(2) {
background: #f17f63;
} a:hover {
background: #b1d2e4;
}
</style> </head>
<body> <a href="">链接</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul> </body>
</html>

属性选择器

id 与 class 的结合

<!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>Demo06</title> <style>
.demo a {
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: #1296db;
text-align: center;
color: #ffffff;
text-decoration: none; /*去除下划线*/
margin-right: 5px;
font: bold 20px/50px Arial; /* 20px:字体大小,50px:行高 */
} /* 属性选择器 */
/*
标签名[属性名=属性值] {} (支持正则)
= 绝对等于这个值
*= 包含这个值
^= 以这个值开头
$= 以这个值结尾
*/ /* 改变存在class属性且class含有links的元素 */
a[class*="links"] {
background: #12db66;
} /* 改变存在id属性的元素 a[] {} */
a[id] {
background: #12dbca;
}
/* 改变存在id属性且id为last的元素 a[] {} */
a[id=last] {
background: #9b12db;
} /* 改变href中以https开头的元素 */
a[href^=https]{
background: #db1281;
} /*改变href中以pdf结尾的元素*/
a[href$=pdf] {
background-color: #db121c;
}
</style> </head>
<body> <p class="demo"> <a href="abc" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test">2</a>
<a href="../css/123.html" class="links item">3</a>
<a href="../css/123.png" class="links item">4</a>
<a href="../css/123.jpg" class="item">5</a>
<a href="https://www.baidu.com" class="item">6</a>
<a href="/a.xls" class="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" id="last">10</a> </p> </body>
</html>

美化网页元素

字体、文本样式

<!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>Demo07</title> <style>
body {
font-family: Arial, 楷体; /* 文字字体 */
} #title {
font-size: 50px; /* 文字大小 */
} h1 {
font-weight: bold; /* 文字粗细 */
/* 文字颜色 */
/*
单词
RGB 0~F
RGBA (A-透明度[0~1])
*/
color: aqua;
font-style: oblique; /* 字体风格 */
text-align: center; /* 文本排版 */
} .p1 {
text-indent: 2em; /* 首行缩进 1em等于一个字间隔 */
} .p4 {
background: #f1f1f1;
height: 100px; /* 块高 */
/* 行高等于块高,文本垂直居中 */
line-height: 100px; /* 文本行高 */
} .l1 {
text-decoration: underline; /* 下划线 */
} .l2 {
text-decoration: line-through; /* 删除线 */
} .l3 {
text-decoration: overline; /* 上划线 */
} span{
vertical-align: middle;
} img {
height: 100px;
width: 200px;
vertical-align: middle; /* 垂直对齐 */
} </style> </head>
<body> <!-- span标签:重点要突出的元素,标题等(约定俗成) -->
<span id="title">CSS</span> <h1>简介</h1>
<p class="p1">CSS 指的是层叠样式表* (Cascading Style Sheets)</p>
<p class="p2">CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素</p>
<p>CSS 节省了大量工作。它可以同时控制多张网页的布局</p>
<p class="p4">外部样式表存储在 CSS 文件中</p> <p class="l1">1111111111</p>
<p class="l2">2222222222</p>
<p class="l3">3333333333</p> <p class="img_1">
<img src="../../image/1920x1080.jpg" alt="">
Hello World!
</p> </body>
</html>

超链接伪类

<!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>Demo08</title> <style>
/* 默认状态 */
a {
text-decoration: none;
color: #000000;
} /* 鼠标悬浮状态 */
a:hover {
color: orange;
font-size: 20px;
} /* 鼠标按住未释放状态 */
a:active {
color: green;
} /* 鼠标点击后状态 */
/* a:visited {
color: red;
} */ #price {
/* text-shadow: 水平偏移 垂直偏移 阴影半径 阴影颜色 */
text-shadow: 5 px 5px 2px #41cffa;
}
</style> </head>
<body> <a href="#">
<img src="../../image/mcgx.jpg" alt="">
</a>
<p>
<a href="#">码出高效:Java开发手册</a>
</p>
<p>
<a href="">作者:孤尽老师</a>
</p>
<p id="price">
¥99
</p> </body>
</html>

列表样式

<!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>Demo09</title> <link rel="stylesheet" href="../css/Demo09.css" type="text/css"> </head>
<body> <div id="nav">
<h2 class="title">全部商品分类</h2> <ul>
<li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
<li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
<li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
<li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
<li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
<li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
</ul>
</div> </body>
</html>
/* Demo09.css */
#nav {
width: 300px;
background: #f1f1f1;
} .title {
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 35px;
color: #ffffff;
/* 背景颜色,背景图片,图片位置,平铺方式 */
background: #ffa3a3 url("../../image/down.png") 270px 8px no-repeat;
} ul {
background: #f1f1f1;
} /*
list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
ul li {
line-height: 30px;
list-style: none;
text-indent: 1em;
background-image: url("../../image/right.png");
background-repeat: no-repeat;
background-position: 240px 9px;
} a {
text-decoration: none;
font-size: 14px;
color: #999999;
} a:hover {
text-decoration: underline;
color: #000000;
}

背景

<!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>Demo10</title> <style>
div {
width: 1000px;
height: 500px;
border: 2px solid #23ccff;
/* 默认平铺 */
background-image: url(../../image/mcgx.jpg);
} /* 水平平铺 */
.div1 {
background-repeat: repeat-x;
} /* 竖直平铺 */
.div2 {
background-repeat: repeat-y;
} /* 不平铺 */
.div3 {
background-repeat: no-repeat;
}
</style> </head>
<body> <div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div> </body>
</html>

渐变

<!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>Demo11</title> <style>
/* 径向渐变,圆形渐变 */
body {
background: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
}
</style> </head>
<body> </body>
</html>

盒子模型

盒子属性

margin 外边距

padding 内边距

border 边框

边框属性

边框粗细

边框样式

边框颜色

<!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>Demo12</title> <style>
h1,ul,li,a,body{
/* body总有一个默认的外边距margin */
margin: 0;
padding: 0;
text-decoration: none;
} #box {
width: 300px;
/* border: 粗细 样式(solid 实线、dashed 虚线) 颜色 */
border: 1px solid red;
/* 外边距可以居中元素 margin: 0 auto (水平居中) */
margin: 0 auto;
} h2 {
font-size: 16px;
background-color: #3cbda6;
line-height: 30px;
} form {
background: aquamarine;
} div:nth-of-type(1) input {
border: black solid 3px;
} div:nth-of-type(2) input {
border: #ad0b8c dashed 3px;
} div:nth-of-type(3) input {
border: #008c27 solid 3px;
}
</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>

圆角边框、盒子阴影

<!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>Demo13</title> <style>
/* border-radius: 左上 右上 右下 左下 */
/* 圆:圆角 = 半径 */
.div1 {
width: 100px;
height: 100px;
border: 10px solid #60f1b9;
border-radius: 60px;
} /* 盒子阴影 */
.div2 {
width: 100px;
height: 100px;
border: 10px solid #888888;
box-shadow: 10px 10px 1px #d8d8d8;
}
</style> </head>
<body> <div class="div1"> </div> <div class="div2"> </div> </body>
</html>

display

<!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>Demo14</title> <style>
/*
display:
block 块元素
inline 行内元素
inline-block 是块元素,但是可以内联,在一行
none 隐藏元素
*/
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 浮动

<!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>Demo15</title> <link rel="stylesheet" href="../css/Demo15.css"> </head>
<body>
<div id="father">
<div class="layer01"><img src="../../image/img1.jpg" alt=""></div>
<div class="layer02"><img src="../../image/img2.jpg" alt=""></div>
<div class="layer03"><img src="../../image/img3.jpg" alt=""></div>
<div class="layer04">
浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止。
</div>
</div>
</body>
</html>
/* Demo15 */
div {
margin: 10px;
padding: 5px;
} #father {
border: 1px #000 solid;
} .layer01 {
border: 1px #F00 dashed;
display: block;
float: right;
} .layer02 {
border: 1px #00F dashed;
display: block;
float: right;
} .layer03 {
border: 1px #060 dashed;
display: block;
float: right;
} .layer04 {
border: 1px #666 dashed;
display: block;
float: right;
}

父级边框及塌陷问题

clear: right;	右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
clear: none; 允许有浮动元素

解决方案:

1、增高父级元素高度

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

<body>
<div id="father">
<div class="layer01"><img src="../../image/img1.jpg" alt=""></div>
<div class="layer02"><img src="../../image/img2.jpg" alt=""></div>
<div class="layer03"><img src="../../image/img3.jpg" alt=""></div>
<div class="layer04">
浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止。
</div> <div class="clear"></div> </div>
</body>
.clear {
clear: both;
margin: 0;
padding: 0;
}

3、overflow

在父级元素中增加一个 overflow: hidden
#father {
border: 1px #000000 solid
}

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

#father {    
border: 1px #000000 solid
} #father:after {
content: '';
display: block;
clear:both;
}

定位

1、相对定位

2、绝对定位

3、固定定位

4、z-index

5、透明度

<!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>Demo17</title> <style>
body {
padding: 20px;
} div {
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
} #father {
border: 2px solid #666;
padding: 0;
height: 1000px;
/* position: relative; */ /*父级元素的定位*/
} /* 相对定位 */
/* 相对于自己原来的位置进行偏移,原来位置会保留 */
#first {
background: rgb(56, 163, 70);
border: 2px dashed rgb(89, 255, 111);
position: relative; /* 相对定位 */
top: -20px;
left: 20px;
} /* 绝对定位 */
/*
没有父级元素定位的情况下,相对于浏览器偏移
有父级元素定位的情况下,相对于父级元素偏移
原来位置不会保留
*/
#second {
background: rgb(82, 167, 182);
border: 2px dashed rgb(118, 234, 255);
position: absolute; /* 绝对定位 */
right: 50px;
} #third {
background: rgb(133, 93, 165);
border: 2px dashed rgb(205, 143, 255);
} /* 固定定位 */
/* 相对于浏览器偏移,不保留原来位置,不随页面移动 */
#fourth {
width: 50px;
height: 50px;
background: rgb(207, 201, 114);
border: 2px dashed rgb(255, 245, 98);
position: fixed;
right: 0;
top: 0;
} ul,li {
padding: 0px;
margin: 0px;
list-style: none;
} #content {
width: 300px;
padding: 0px;
margin: 0px 0px 0px 10px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid #666;
} #content ul {
position: relative;
} .tipText, .tipBg{
position: absolute;
width: 300px;
height: 25px;
top:175px;
} /* z-index 图层 */
.tipText {
color: #FFFFFF;
z-index: 999;
} .tipBg {
background: #8a8a8a;
/* 透明度 */
opacity: 0.5; /* (0~1) */
}
</style> </head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
<div id="fourth">第四个盒子</div> <div id="content">
<ul>
<li><img src="../../image/img2.jpg" alt=""></li>
<li class="tipText">文本文字</li>
<li class="tipBg"></li>
<li>时间:2020.01.01</li>
<li>地点:XXX</li>
</ul>
</div> </div>
</body>
</html>

动画

了解,略

CSS入门笔记的更多相关文章

  1. 【前端】CSS入门笔记

    教程 CSS 指层叠样式表 (Cascading Style Sheets) CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 选择器通常是您需要改变样式的 HTML 元素 ...

  2. Css技术入门笔记02

    第一篇见Css入门笔记01http://blog.csdn.net/qq_32059827/article/details/51406674 4.其他选择器 4.1.关联选择器 有时在页面上会出现我们 ...

  3. [HeadFist-HTMLCSS学习笔记][第七章CSS入门:加一点样式]

    CSS入门 style元素设置CSS 基本格式 <style type="text/css"> body { background-color: #eaf3da; } ...

  4. HTML&CSS精选笔记_CSS入门

    CSS入门 CSS核心基础 CSS样式规则 选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} CSS代码结构中的特点 CSS样式中的选择器严格区分大小写,属性和值不区分大小写,按照 ...

  5. 【干货】Html与CSS入门学习笔记4-8

    四.web镇之旅,连接起来 找一家托管公司如阿里云,购买域名和空间,然后将网页文件上传到购买的空间的根目录下. 1.绝对路径url url:uniform resource locators 统一资源 ...

  6. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  7. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  8. JavaScript基础——JavaScript入门(笔记)

    JavaScript入门(笔记) JavaScript是一种轻量级.解释型的Web开发语言,该语言系统不是很庞杂,简单易学.由于所有现代浏览器都已嵌入JavaScript引擎,JavaScript源代 ...

  9. Python爬虫 小白[3天]入门笔记

    笔记来源 Day-0 1.如果你还不了解Python的基础语法,可以移步|>>>Python 基础 小白 [7天] 入门笔记<<<|或自行学习. 简介 1.什么是爬 ...

随机推荐

  1. linux 普通分区与lvm分区

    安装linux系统时 有时候会提示lvm分区与标准分区 首先普及一下lvm分区:lvm是 logical volume manager (逻辑卷管理),linux环境下对磁盘分区的管理:他解决了安装系 ...

  2. 打造一款属于自己的CentOS操作系统

    文章目录 声明 关闭selinux以及firewalld 修改终端前缀显示 修改默认网卡名称为eth0 替换yum源 安装常用工具 优化history 配置回收站 迎宾显示 优化vim 清空yum缓存 ...

  3. [系统优化]Centos系统优化

       在运维工作中,我们发现Linux系统安装之后并不能立即投入生产环境使用,往往需要先经过我们运维人员的优化才行.以下是我在日常生产应用的优化操作. 一.文件打开数限制优化 描述    生产下要调整 ...

  4. NSSCTF-[SWPU 2019]伟大的侦探

    下载附件得到一个压缩包,解压需要密码,但是得到一个"密码.txt"的文件,打开查看 根据菜狗的刷题经验,这是个EBCDIC的编码,打开010编辑器,打开"密码.txt&q ...

  5. monowall

    https://www.cat-home.org/?action=show&id=158

  6. C#基础之IL ,轻松读懂中间代码IL 转载

    [No0000152]C#基础之IL,轻松读懂IL   先说说学IL有什么用,有人可能觉得这玩意平常写代码又用不上,学了有个卵用.到底有没有卵用呢,暂且也不说什么学了可以看看一些语法糖的实现,或对.n ...

  7. 【windows 访问控制】十、词汇列表和对应C#类、枚举、命名空间

    principals:主体 主体包含标识(identity 对用来来说就是用户名,对程序来说就是SID)和用户角色(role 对用户来说就是 组名 对程序来说就是组SID)subject:主体.主语i ...

  8. 【C# IO 操作】 文件系统侦听 FileSystemWatcher

    侦听器 :FileSystemWatcher FileSystemWatcher常用属性有: Filter :获取或设置用于确定目录中要监视哪些文件的过滤器字符串.Filter 属性设置为空字符串 ( ...

  9. C#淘汰的知识点

    .NET 5+ 中已过时的功能 数组淘汰 .NET Framework 2以上的版本中,ArrayList可以说已经被淘汰了,应该用泛型类中的List<T> https://www.cnb ...

  10. SVG小图片格式显示(字符图标,可设置title属性)

    1.HTML + Font 方式: 修改图标颜色只需修改字体颜色,修改图片大小只需修改字体大小. 关于字体图片,我们可以自己制作,也可以从网上下载 阿里巴巴矢量图库. 在线图标字体库.Icomoon. ...