关键词：
一.CSS背景及应用
<style type="text/css">
div
width: 400px;
height: 400px;
/*background-color: pink; */ /*背景颜色*/
/*background-image: url(image/wo.jpg);*/ /*背景图片*/
/*background-repeat: no-repeat;*/ /* 图片是否平铺*/
/*background-position: bottom center;*/ /*背景图片下，居中*/
/*background-position: 10px 20px;*/ /*x轴10像素，y轴20像素*/
/*background-position: 10px center; x轴10像素，y轴居中
background-attachment: fixed;*/ /*背景是否滚动，默认滚动，fixed，固定住*/
/*background: pink url(image/wo.jpg) no-repeat fixed 10px center; */ /*背景设置简写，位置随意，最好按顺序来*/
/*background: hotpink url(image/wo.jpg) no-repeat;
background-size: 100px 200px; 固定背景图片宽高
background-size: cover; 图片等比例缩放，充满整个背景，会有部分看不到；
background-size: contain; 背景图片等比例缩放，如果图片高度或者宽度有一个和背景一样大，就停止，保持图片完整*/
/*background: url(image/wo.jpg) no-repeat left top,
url(image/wo.jpg) no-repeat right bottom hotpink; 多背景图片，逗号隔开，背景颜色设置放在最后一组上*/
p
color: #ccc;
font: 700 80px "微软雅黑";
p:first-child
/*text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色;*/
text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;
p:last-child
text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
body
background-color: #ccc;
</style>
</head>
<body>
<h3>背景样式</h3>
<div>
<p>我是凸起的文字</p>
<p>我是凹下的文字</p>
</div>
</body>
二.CSS三大特性
<head>
<meta charset="UTF-8">
<title>CSS的三大特性</title>
<style type="text/css">
div /* 标签选择器 0,0,0,1*/
color: pink;
ul li :first-child /* 伪类选择器 0,0,1,0 */
color: green;
.king /* 类选择器 0,0,1,0 */
color: blue;
#wang /* id选择器 0,1,0,0 */
color: red;
</style>
</head>
<body>
<h3>1.层叠性</h3>
<ol>
<li>1. 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。</li>
<li>2. 样式不冲突，不会层叠</li>
<li>3.important就是重要的 级别最高 一旦出现优先执行</li>
</ol>
<h3>1.继承性</h3>
<ul>
<li>一般字体，颜色，样式集成</li>
</ul>
<h3>1.优先及</h3>
</body>
三.盒模型及应用
<style type="text/css">
nav
background-color: #FCFCFC;
height: 40px;
border-top: 3px solid #FF8500; /*上边框样式*/
border-bottom: 1px solid #EDEEF0; /*下边款样式*/
/*border-radius: 5px;*/ /*边跨圆角设置*/
/*border-collapse: collapse; */ /* 合并相邻边框的线条 */
a
text-decoration: none; /*除去链接的下划线*/
height: 40px;
line-height: 40px; /* 行间距与行高一样，文字就居中了*/
display: inline-block; /*把块元素变成行元素，行元素变成块元素，可以改宽高*/
color: black;
font-size: 14px;
padding: 0px 15px; /*内边距，上下0，左右15，按照顺时针方向布局*/
a:hover
background-color: #ccc;
</style>
</head>
<body>
<h3>导航栏案</h3>
<nav>
<a href="#">网址</a>
<a href="#">天下客</a>
<a href="#">客户导流端</a>
<a href="#">网址导航</a>
</nav>
<hr>
</body>
四.盒子阴影
<style type="text/css">
div
width: 150px;
height: 150px;
line-height: 150px;
border-radius: 50%;
margin: 0 auto;
text-align: center;
font-size: 30px;
color: rgba(255,255,255,0.7);
background-color: pink;
background: url(image/wo.jpg) 0 0 no-repeat;
box-shadow: 5px 5px 10px 16px rgba(255,255,2550.4) inset,5px 5px 10px rgba(0,0,0,0.3);
</style>
</head>
<body>
<h1>盒子阴影</h1>
<ol>
<li>box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸 阴影颜色 内外阴影</li>
<li>h-shadow(必填) y-shadow(必填) blur sprad color inset/outset</li>
</ol>
<div>
影子图片效果
</div>
<h1>盒模型</h1>
<p>box:sizing:content-box 盒子大小为width+padding+border</p>
<p>box:sizing:border-box 子大小为width+padding</p>
</body>
五.案例
css初探学习总结提高三(代码片段)
前面一二两节记录的都是CSS的基础知识，并且都是标准布局，块级，行级元素自上而下的布局，也称作标准布局。接下来认识CSS三个布局中（标注，浮动，定位）的浮动布局。<!DOCTYPEhtml><htmll... 查看详情
css初探学习总结提高三(代码片段)
前面一二两节记录的都是CSS的基础知识，并且都是标准布局，块级，行级元素自上而下的布局，也称作标准布局。接下来认识CSS三个布局中（标注，浮动，定位）的浮动布局。<!DOCTYPEhtml><htmll... 查看详情
css初探学习总结提高五(代码片段)
一.鼠标及文字溢出隐藏<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>鼠标及文字溢出隐藏</title> <styletype="text/css"> div 查看详情
css初探学习总结提高四(代码片段)
定位布局，让标签固定到想要的位置<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>定位布局</title> <styletype="text/css"> 查看详情
css初探学习总结提高四(代码片段)
定位布局，让标签固定到想要的位置<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>定位布局</title> <styletype="text/css"> * margin:0; padding:0; ul list-style:none; fi... 查看详情
css初探学习总结提高六(代码片段)
一.2D动画<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>2D动画</title> <styletype="text/css"> .move width:100px; height:100px; background-color:pink; transition:all0.5s; position:relative;... 查看详情
css初探学习总结提高六(代码片段)
一.2D动画<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>2D动画</title> <styletype="text/css"> .move width:100px; height:100px; background-color:pink; transition:all0.5s; position:relative;... 查看详情
css初探学习总结提高五(代码片段)
一.鼠标及文字溢出隐藏<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>鼠标及文字溢出隐藏</title> <styletype="text/css"> div /*display:none;*//*隐藏元素不是删除看不见了而... 查看详情
html5初探学习总结提高(代码片段)
一.Web标准及浏览器内核Web标准：结构标准：结构对网页进行整理和分类，主要包括XML和HTML两个部分样式标准：表现用于设置网页元素的板式、颜色、大小等外观样式，主要是CSS行为标准：行为是指网页模... 查看详情
ansible学习总结——ansible控制提权相关知识总结(代码片段)
前言Ansible版本zhanghaiyang@zhydesktop:/$ansible--version[WARNING]:logfileat/var/log/ansible.logisnotwriteableandwecannotcreateit,abortingansible2.9.6configfile=/etc/ansible/ansible.cfgconfiguredm 查看详情
ansible学习总结——ansible控制提权相关知识总结(代码片段)
前言Ansible版本zhanghaiyang@zhydesktop:/$ansible--version[WARNING]:logfileat/var/log/ansible.logisnotwriteableandwecannotcreateit,abortingansible2.9.6configfile=/etc/ansible/ansible.cfgconfiguredm 查看详情
asp.netcoreonk8s学习初探k8s单节点环境搭建(代码片段)
当近期的一个App上线后，发现目前的docker实例（应用服务BFF+中台服务+工具服务）已经很多了，而我司目前没有专业的运维人员，发现运维的成本逐渐开始上来，所以容器编排也就需要提上议程。因此我决定开始学习Kubernetes，会... 查看详情
秋季高二提分直播课|五大学科名师助你备战期中考试
...成绩一直原地踏步不见起色？你是否在寻求轻松而高效的学习方法？你是否还在毫无头绪的准备期中考试？ 如果以上你都不幸中招那么你急需改变的是学习方法你需要梳理知识点并且融会贯通需要掌握典型题型然后举一反三... 查看详情
css学习总结(代码片段)
CSS学习总结一、CSS是什么？二、基本语法规范三.引入方式1.内部样式表2.行内样式表3.外部样四.选择器1.标签选择器2.类选择器3.id选择器4.通配符选择器基础选择器小结5.后代选择器6.子选择器7.并集选择器8.伪类选择器复合选... 查看详情
案例学习——unity体绘制shader初探(代码片段)
...VolumetricRendering——AlanZucconi案例学习——Unity体绘制shader初探1体绘制引入1.1光线投射算法(RayCasting)1.2恒定步长的光线步进（RayMarchingwithConstantStep）2距离辅助的光线步进DistanceAidedRaymarching3表面着色4有向距离函数（Si 查看详情
高二数学微课堂教学视频(代码片段)
...馨提示】各位同学：大家好，以下视频可以随时打开收看学习。快速查找方法：用Ctrl+F在出现的对话框中输入你想要的关键词，比如“几何概型”，就会把你快速带到那里，试试看。[box[10px,yellow,border:2pxdashedred]高二数学高清教... 查看详情
html+css学习总结(代码片段)
HTML（HypertextMarkupLanguage）翻译过来就是超文本标记语言。超文本即超越文本，可以显示文字图片视频音频，最重要的是可以包含超链接。标记语言：当我们把特定的英文单词放入到我们的标记（单标记:</>、双标记<>... 查看详情
图学习初探paddlegraphlearning构建属于自己的图系列三(代码片段)
...ributionType=1如遇到问题查看原项目解决图学习温故以及初探PaddleGraphLearning(PGL)构建属于你的图【系列三】相关项目参考：图机器学习(GML)&图神经网络(GNN)原理和代码实现(前置学习 查看详情