CSS3 Study

1、CSS入门

1.0什么是CSS

html css js

结构+表现+交互

CSS Cascading Style Sheet 层叠级联样式表

CSS：表现（美化页面）

1.1发展史：

CSS1.0

CSS2.0 DIV块+CSS，HTML与CSS结构分离的思想，网页变得简单

CSS2.1浮动，定位

CSS3 圆角，阴影，动画…浏览器兼容性

1.2 快速入门

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ujALTNQY-1597664910936)(C:\Users\NongGuangKan\AppData\Roaming\Typora\typora-user-images\image-20200813113042587.png)]

css优势：

1、内容和变现分离

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

3、样式十分丰富

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

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

1.3 css三种导入方式

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

<head>
<!--style 内部样式--><style>h1{color: green;}</style></head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1>我是标题</h1>

<link rel="stylesheet" href="css/style.css">/*style.css 外部样式*/
h1{color: aqua;
}

1.4 常见的操作：

/* body总有一个默认的外边距margin：0 常见操作*/
h1,ul,li,a,body{margin: 0;padding: 0;text-decoration: none;
}

2、选择器

作用：选择页面上的某一个或某一类元素

2.1 基本选择器

1、标签选择器标签名{}

    <style>/*标签选择器，会选择页面上所有这个标签的元素*/h1{color: #8eaa81;background: #242e88;border-radius: 20px;}p{font-size: 50px;}</style>
</head>
<body><h1>学Java</h1>
<h1>ngk</h1>
<p>学Linux</p>

2、类选择器 class class.{}

    <style>/*类选择器 .class的名称好处，可以多个标签归类,同个class可以复用*/.study{color: #171;}.study2{color: deepskyblue;}</style>
</head>
<body>
<h1 class="study">学Java</h1>
<h1 class="study2">学Linux</h1>
<p class="study">学Linux</p>
</body>

3、id选择器 #id{}

    <style>/*id选择器，id必须保证全局唯一#id名称{};不遵循就近原则，固定的id选择器>class选择器>标签选择器*/#i1{color: coral;}#i2{color: #242e88;}.c1{color: blueviolet;}h1{color: chartreuse;}</style>
</head>
<body><h1 id="i1">学Java</h1>
<h1 id="i2">学Java</h1>
<h1 class="c1">学Java</h1>
<h1 class="c1">学Java</h1>
<h1>学Java</h1>

**优先级：**id选择器>class选择器>标签选择器

2.2层次选择器

后代选择器

<!--后代选择器-->
body p{background: #668883;
}

子代选择器

/*子代选择器*/
body>p{background: #8eaa81;
}

相邻选择器

/*相邻选择器 当前元素向下的元素*/
.active + p{background: #8eaa81;
}

2.3 结构伪类选择器

<style>ul li:first-child{background: #8eaa81;}ul li:last-child{background: salmon;}</style><ul><li>l1</li><li>l2</li><li>l3</li><li>l4</li>
</ul>

2.4 属性选择器（重点）

<!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: #93e0ff;text-align: center;margin-right: 5px;font: bold 20px/50px Arial;}/*属性名=属性值（正则表达）*//*存在id的元素 a[]{} *//*a[id=first]{*//*background: yellow;*//*}*//*a[id]{*//*a[id]*=/*background: yellow;*//*}*//*class中有link= 要绝对等于*=包含$=以什么结尾*//**/</style>
</head>
<body>
<p class="demo"><a href="123" class="links item first" id="first">1</a><a href="456" class="links item" title="test">2</a><a href="asd" class="links item">3</a><a href="123" class="links item">4</a><a href="132" class="links item">5</a><a href="3423" class="links item">6</a><a href="234" >7</a>
</p>
</body>
</html>

=  绝对等于
*= 包含
^= 以什么开头
&= 以什么结尾

3、美化网页元素

3.1 为什么要美化

1.有效传递页面信息

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

3.凸显页面主题

4.提高用户的体验

3.2 span

重点突出的字，用span套起来

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#title{font-size: 20px;}</style>
</head>
<body>
欢迎学习<span id="title">java</span>
</body>
</html>

3.3 字体样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*font-family: 字体：font-size:字体大小font-weight:字体粗细color：字体的颜色em:缩进*/body{font-family: 幼圆;}h1{font-size: 40px;}.p1{font-weight: bold;}</style>
</head>
<body>
<h1>个人技能</h1>
<p>熟悉JavaSE、JavaWeb基础</p>
<p class="p1">熟悉Mybatis，Spring、SpringMVC框架了解SpringBoot和SpringCloud熟练常用的MySQL基本语句了解Vue、Json和Ajax熟悉IDEA开发工具，有良好的编码风格</p>
</body>
</html>

3.4 文本样式

颜色、文本对齐方式、首行缩进、行高、下划线

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--颜色：单词：RGB：0~FRGBA A: 0-1text-align: 排版--><style>h1{color: rgba(0,255,255,0.9);text-align: center;}/* text-indent: 2em;缩进两个像素line-height: 50px; 行高*/.p1{text-indent: 2em;line-height: 50px;}/*text-decoration: underline; 下划线text-decoration: overline;上划线text-decoration: line-through;中划线*/.p2{text-decoration: line-through;}</style>
</head>
<body>
<h1>个人技能</h1>
<p class="p2">熟悉JavaSE、JavaWeb基础</p>
<p class="p1">熟悉Mybatis，Spring、SpringMVC框架了解SpringBoot和SpringCloud熟练常用的MySQL基本语句了解Vue、Json和Ajax熟悉IDEA开发工具，有良好的编码风格</p>
</body>
</body>
</html>

3.5 超链接伪类和文本阴影

超链接伪类：

<!--默认的颜色-->
a{text-decoration: none;color: #000;
}
/*a:hover鼠标悬停*/
a:hover{color: orange;font-size: 30px;
}
/*a:active鼠标按住*/
a:active{color: green;
}

阴影：

/*text-shadow: 阴影颜色、水平偏移、垂直偏移、阴影半径
#price{text-shadow: #3cc7f5 10px -10px 2px;
}

3.6 列表样式练习

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

#nav{width: 300px;background: darkgray;
}
.title{font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 35px;background: #8eaa81;
}
h2{text-align: center;
}
/*list-style:none; 去掉原点
circle空心圆
decimal 数字
square 正方形
*/
ul li{height: 30px;list-style: none;text-indent: 1em;
}
a{text-decoration: none;font-size: 14px;color: #000;
}
a:hover{color: orange;text-decoration: underline;
}

3.7 背景

背景图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>index</title><style>div{width: 1000px;height: 700px;border: 1px solid red;background-image: url("image/a.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>

3.8 颜色渐变网址：

https://www.grabient.com/

background-color: #FFDEE9;
background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);

4、盒子模型

margin：外边距

padding：内边距

border：边框

4.1 边框

<!-- border: 1px solid red; 粗细，样式，颜色--><style>#box{width: 300px;border: 1px solid red;}h2{font-size: 16px;background-color: #8eaa81;line-height: 30px;color: white;}form{background: #8eaa81;}div:nth-of-type(1) input{border: 3px solid black;}div:nth-of-type(2) input{border: 3px dashed #8EC5FC;}div:nth-of-type(3)input{border: 2px dashed #E0C3FC;}</style>

<div id="box"><h2>会员登录</h2><form action="#"><div><span>username：</span><input type="text"></div><div><span>password：</span><input type="password"></div><div><span>email：</span><input type="password"></div></form>
</div>

4.2 内外边距 margin

padding：0px 2px 3px 4px; 上0 右2 下3 左4 顺时针
margin：0px 2px 3px 4px; 上0 右2 下3 左4 顺时针padding: 2px 10px 上下2px，左右10px

4.4 圆角边框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--左上 右上 右下 左下 顺时针两个值 左上右下 右上左下--><style>.b1{width: 100px;height: 100px;border: 10px solid red;border-radius: 50px 20px;}.box{width: 150px;height: 150px;background-color: #FFDEE9;background-image: linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%);border-radius: 150px 0 0 0;}</style>
</head>
<body>
<div class="b1"></div>
<div class="box"></div>
</body>
</html>

5、浮动（float）

块级元素：独占一行

h1~h6 p div 列表...

行内元素：不独占一行

span a img strong

行内元素可以包含在块级元素中，反之不可以

5.1 display

<style>div{width: 100px;height: 100px;border: 1px solid red;display: none;}/*block 块元素inline 行内元素inline-block 是块元素，但可以内联在一行none*/span{width: 100px;height: 100px;border: 1px solid red;display: inline-block;}
</style>

这也是一种实现行内元素排列的方式，但是很多情况都是使用float

5.2 float

5.3 父级边框塌陷问题

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

解决方案：

1.增加父级元素的高度

#facher{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（现在认可的方式）

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

小结：

1.浮动元素后面增加div

简单，代码中避免空div

2.设置父类元素的高度

简单，父元素没有了固定高度，就会被限制

3.overflow

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

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

写法稍微复杂，但是没有副作用

5.5 display和float对比

display

方向不可以控制
float

浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题

6、定位

6.1 相对定位

<!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;}#first{background-color: #8EC5FC;border: 1px dashed #666;position: relative; /*相对定位 上下左右*/top: -20px;left: 20px;}#second{background-color: #E0C3FC;border: 1px dashed #666;}#third{background-color: #FFDEE9;border: 1px dashed #666;position: relative; /*相对定位 上下左右*/bottom: 20px;right: -20px;}</style>
</head>
<body>
<div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div>
</div>
</body>
</html>

相对定位：position: relative;

相对于原来的位置进行指定的偏移，相对定位的话，它仍然在标准文档当中，原来的位置会被保留

6.2 方块定位练习

<!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;margin: 0 ;}a{width: 100px;height: 100px;text-decoration: none;background: #E0C3FC;line-height: 100px;text-align: center;color: white;display: block;}a:hover{background: #FFDEE9;}.a2{position: relative;left: 200px;top: -100px;}.a3{position: relative;left: 100px;top: -100px;}.a4{position: relative;top: -100px;}.a5{position: relative;left: 200px;bottom: 200px;}</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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6QJ3aBUq-1597664910937)(C:\Users\NongGuangKan\AppData\Roaming\Typora\typora-user-images\image-20200816102244825.png)]

6.2 绝对定位

绝对定位（position: absolute）：基于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: #8EC5FC;border: 1px dashed #666;}#second{background-color: #E0C3FC;border: 1px dashed #666;position: absolute;left: 100px;bottom: 50px;}#third{background-color: #FFDEE9;border: 1px dashed #666;}</style>
</head>
<body>
<div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div>
</div>
</body>
</html>

6.3 固定定位

position: absolute

<!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){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: 999: 层级

opacity: 0.4 透明度

position: absolute 绝对定位

<!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="image/渐变.png" alt=""></li><li class="tipText">学习Linux</li><li class="tipBg"></li><li>时间：2020-08-16</li></ul>
</div>
</body>
</html>

#content{width: 380px;padding: 0px;margin: 0px;overflow: hidden;font-size: 12px;line-height: 25px;border: #000;
}
ul,li{padding: 0px;margin: 0px;list-style: none;
}
/*父级元素相对定位*/
#content ul{position: relative;
}
.tipText, .tipBg{position: absolute;width: 370px;height: 25px;top: 0px;
}
.tipText{color: white;z-index: 999;
}
.tipBg{background: #000;opacity: 0.4;filter: alpha(opacity=50);
}

div1

div2

~~~

6.4 z-index

z-index: 999: 层级

opacity: 0.4 透明度

position: absolute 绝对定位

<!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="image/渐变.png" alt=""></li><li class="tipText">学习Linux</li><li class="tipBg"></li><li>时间：2020-08-16</li></ul>
</div>
</body>
</html>

#content{width: 380px;padding: 0px;margin: 0px;overflow: hidden;font-size: 12px;line-height: 25px;border: #000;
}
ul,li{padding: 0px;margin: 0px;list-style: none;
}
/*父级元素相对定位*/
#content ul{position: relative;
}
.tipText, .tipBg{position: absolute;width: 370px;height: 25px;top: 0px;
}
.tipText{color: white;z-index: 999;
}
.tipBg{background: #000;opacity: 0.4;filter: alpha(opacity=50);
}

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

redis之缓存雪崩与穿透
redis缓存在系统架构中的角色redis作为高效的缓存数据库，开发过程中可能会把一些中间生成的数据、高频访问的数据存放到redis，系统要查询这部分数据前，会先到redis查，如果没有，再到关系型数据库查。 -这样可以进一步提升系统性能。但是，如果使用不当，这也会给系统埋下事…...
2024/4/25 7:57:49
买保险最常见的5大问题？你想知道的答案这里都有！
买份保险，怎么那么难？买得心力交瘁，接近头秃，搞定以下5个问题，买保险再也不迷路。1.XX 岁买什么保险好？2.身体有异常能买保险吗？3.XX 保险公司，我都没听过？4.保险条款多又复杂，如何快速看懂不被坑？5.买错保险怎么办，要不要退保？问题1：XX岁买什么保险好？3岁买什么…...
2024/4/28 0:38:19
使用IDEA搭建 SSM 框架
文章目录使用IDEA搭建 SSM 框架SSM 框架整合流程使用IDEA搭建 SSM 框架 SSM 框架整合流程建项目之前你需要先准备好maven和maven的本地仓库(1)首先需要新建一个Maven项目,然后导入相关的Maven依赖  <dependency><groupId>org.springfra…...
2024/4/4 11:17:42
英雄联盟【北美LCS】API数据接口
英雄联盟电竞API专用电竞数据接口分享使用代码示例演示：英雄联盟【北美LCS】接口分享使用野子数据 http://yes-esports.com/ 电竞API数据接口调用的示例代码具体如下： import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.annotation.JSONField; import ja…...
2024/4/4 11:17:41
英雄联盟【拉丁美洲LLA】API数据接口
英雄联盟电竞API专用电竞数据接口分享使用代码示例演示：英雄联盟【拉丁美洲LLA】接口分享使用野子数据 http://yes-esports.com/ 电竞API数据接口调用的示例代码具体如下： import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.annotation.JSONField; impor…...
2024/4/4 11:17:40
小米乘风破浪：热血十年，雷军一往无前
摘要：天上九头鸟,地下湖北佬。了不起的湖北人，雷军不服输。小米十年了，雷军总结和复盘创业之路，焦虑过，后悔过，风很大，坑很多，打赌也输过。用了一场演讲，为小米的十年画上句号。出品| 大力财经文 | 魏力没有任何一个成功不冒风险，直面风险，豁出去干。“很多人都很焦…...
2024/4/24 23:49:21
建议收藏 | 家庭保险的教科书式配置！
经常听到有人说“成年人的世界没有容易二字”。人到中年，诸多不易，既要努力工作，又要兼顾生活；既要照顾老人，又要培养孩子。别看现在一家子其乐融融，但是未来是充满挑战与风险的。要想生活不会因一场疾病或者意外变得糟糕，就得做好充分的保障，那么今天学姐就来讲讲，如…...
2024/4/26 3:20:29
Docker系列(六)镜像与仓库
文章目录查看和删除镜像列出镜像镜像标签和仓库无截断返回镜像只显示镜像唯一ID以仓库名查看镜像查看镜像删除镜像获取和推送镜像查找镜像拉取镜像推送镜像查看和删除镜像docker镜像是一种使用联合加载技术，层叠的只读文件系统，是容器构建的基石。存储在/var/lib/docker目录…...
2024/4/28 2:23:48
嵌入式面试之《多进程多线程编程系列》(8) fork笔试题
题目：请问下面的程序一共输出多少个“-”？ #include <stdio.h> #include <unistd.h>int main(void) {int i;for(i=0; i<2; i...
2024/4/4 11:17:36
HashMap与ConcurrentHashMap,HashTable的区别，以及底层实现
一.HashMap的resize(rehash)：当hashMap中的元素越来越多的时候，hash冲突的几率也越来越高，因为数组的长度是固定的。所以为了提高查询的效率，就要对HashMap的数组进行扩容，数组扩容这个操作也会出现在ArrayList中，这是一个常用的操作，而在HashMap数组扩容之后，最消耗性…...
2024/4/4 11:04:18
[HTTP消息] 给你带来最清楚最明白的讲解！！！
文章目录HTTP消息HTTP消息结构请求和响应消息起始行请求方法请求头请求主体状态行状态码信息响应成功响应重定向客户端响应服务端响应响应头响应主体MIME类型HTTP1.x缺点 HTTP消息 HTTP消息结构 HTTP请求消息和响应消息具体有相似的结构，由一下部分组成：startline(开始线/起始…...
2024/4/4 11:04:16
悔过
我考试时作弊，良心过不去，在线悔过...
2024/4/4 11:04:15
SQL 注入攻击
如何防止 SQL 注入攻击 SQL 注入：就是通过把 SQL 命令插入到 Web 表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的 SQL 命令。具体来说，它是利用现有应用程序，将（恶意）的 SQL 命令注入到后台数据库引擎执行的能力，它可以通过在 Web 表单中输入…...
2024/4/4 11:04:17
Python-Anaconda3安装以及Jupyter和pyspark集成流程（详细步骤）
Anaconda3安装以及Jupyter和pyspark集成流程（详细步骤）需要安装前置环境 spark（因为安装各种文件的路径较为分散，所以最好一次安装成功，否则会有许多残留文件） 1.获取资源该文件为 xx.sh 脚本文件链接: https://pan.baidu.com/s/1K4raRnF-Hlu8tu7ciXbv5g 提取…...
2024/4/4 11:17:35
Ionic4--录音组件封装
1.安装插件 Mediaionic cordova plugin add cordova-plugin-medianpm install @ionic-native/media2. app.module.ts 申明引用import { Media } from @ionic-native/media/ngx;providers:[Media]3.创建service服务组件ionic g选择 service4.实现录音方法import { Media, MediaO…...
2024/4/4 11:17:34
前台JSON数据的两种解析方法 eval() 和JSON.parse()的区别是什么？
json的解析方法共有两种：1. eval() ; 2.JSON.parse()。具体使用方法如下var jsonstr = {"name":"jifeng","company":"taobao"}; //eval function var evalJson = eval(( + jsonstr + )); // JSON.parse function var JSONParseJson =…...
2024/4/10 15:52:15
Tensorboard: ValueError: Duplicate plugins for name project
1、I downloaded a test script from diagnose_tensorboard.py. 2、I run it and it told me that I have two tensorboards with a different version. Also, it told me how to fix it. 3、I followed its instructions and I can make my tensorboard work....
2024/4/4 11:17:32
折纸的不归路(20)
一.线程进程:程序在计算机上进行资源调度和分配的最小单元线程:一个进程启动至少一条线程,该线程叫做主线程,线程是程序内部进行资源调度的最小单元多线程: 一.线程三要素 CPU:那个程序抢到了CPU的执行权,哪个程序就开始执行代码:线程执行体,主线程之外的线程需要做什么事情…...
2024/4/12 10:27:30
【问题记录】ABP框架官方模板后端首次运行可能出现的问题整理
以项目名MpaAbp为例Your target project ‘MpaAbp.Core’ doesn’t reference EntityFramework. This package is required for the Entity Framework Core Tools to work. Ensure your target project is correct, install the package, and try again.默认项目选择为Migrator…...
2024/4/4 11:17:30
Codeforces B. Omkar and Infinity Clock (思维 / 假模拟) (Global Round 10)
传送门题意：现有一个序列a，每次操作可以取整个序列的max，将每个元素变成max-a[i]，试找到k次操作后的序列为多少。思路：由于n可达2e5，而k也能达到1e18，显然不能直接模拟来解决，需要找到规律。若序列只有1个元素且k不为零，那么第一次操作后就变成了0。若序列有负数…...
2024/4/23 8:47:53

CSS3 Study

CSS3 Study

1、CSS入门

1.0什么是CSS

1.1发展史：

1.2 快速入门

1.3 css三种导入方式

1.4 常见的操作：

2、选择器

2.1 基本选择器

2.2层次选择器

2.3 结构伪类选择器

2.4 属性选择器（重点）

3、美化网页元素

3.1 为什么要美化

3.2 span

3.3 字体样式

3.4 文本样式

3.5 超链接伪类和文本阴影

3.6 列表样式练习

3.7 背景

3.8 颜色渐变网址：

4、盒子模型

4.1 边框

4.2 内外边距 margin

4.4 圆角边框

5、浮动（float）

5.1 display

5.2 float

5.3 父级边框塌陷问题

5.5 display和float对比

6、定位

6.1 相对定位

6.2 方块定位练习

6.2 绝对定位

6.3 固定定位

6.4 z-index

6.4 z-index

相关文章

最新文章