CSS学习之路
<h1 id="css的学习">CSS的学习</h1><p>如何学习CSS</p>
<ol>
<li>CSS是什么</li>
<li>CSS怎么用（快速入门）</li>
<li>CSS选择器（重点+难点）</li>
<li>美化网页（文字，阴影，超链接，列表，渐变……）</li>
<li>盒子模型</li>
<li>浮动</li>
<li>定位</li>
<li>网页动画</li>
</ol>
<h2 id="css是什么">CSS是什么</h2>
<h3 id="什么是css">什么是CSS</h3>
<p>Cascading Style Sheet 层叠样式表</p>
<p>CSS：表现（美化网页）</p>
<p>字体，颜色，边距，宽度，高度，背景图片，网页定位，网页浮动……</p>
<p><img src="https://img2020.cnblogs.com/blog/2259486/202105/2259486-20210515233850136-995565938.png" alt="" loading="lazy"></p>
<h3 id="发展史">发展史</h3>
<p>CSS1.0</p>
<p>CSS2.0 DIV(块)+CSS，<strong>HTML与CSS结构分离</strong>的思想，网页变得简单，SEO</p>
<p>CSS2.1 浮动，定位</p>
<p>CSS3.0 圆角，阴影，动画……浏览器兼容性~</p>
<p>练习格式</p>
<p><img src="https://img2020.cnblogs.com/blog/2259486/202105/2259486-20210515233914548-586554881.png" alt="" loading="lazy"></p>
<h2 id="1快速入门">1、快速入门</h2>
<p><mark>注释方法：/**/</mark></p>
<h3 id="style一体">style一体</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范，<style>可以编写css代码
每一个声明最好使用分号结尾。
语法：
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是一级标题</h1>
</body>
</html>
</code></pre>
<h3 id="分离">分离</h3>
<blockquote>
<p>html文件</p>
</blockquote>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范，<style>可以编写css代码
每一个声明最好使用分号结尾。
语法：
选择器{
声明1;
声明2;
声明3;
}
<!-- 使用link标签引入CSS文件-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是一级标题</h1>
</body>
</html>
</code></pre>
<blockquote>
<p>CSS文件</p>
</blockquote>
<pre><code class="language-css">h1{
color: red;
}
</code></pre>
<p>建议使用分离写法</p>
<h3 id="css的优势">CSS的优势：</h3>
<ol>
<li>内容和表现分离</li>
<li>网页结构表现统一，可以实现复用。</li>
<li>样式十分丰富。</li>
<li>建议使用独立于html的css文件</li>
<li>利用SEO，容易被搜索引擎收录。</li>
</ol>
<h3 id="css的三种导入方式">CSS的三种导入方式</h3>
<blockquote>
<p>内部样式表</p>
</blockquote>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--style标签-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>一级标题</h1>
</body>
</html>
</code></pre>
<blockquote>
<p>外部样式表</p>
</blockquote>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--使用link标签引入css文件-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>一级标题</h1>
</body>
</html>
</code></pre>
<pre><code class="language-css">/*这是注释*/
h1{
color: red;
}
</code></pre>
<blockquote>
<p>行内样式</p>
</blockquote>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写央样式即可。-->
<h1 style="color: red">一级标题</h1>
</body>
</html>
</code></pre>
<p><strong>优先级：</strong></p>
<ol>
<li>行内样式>内部样式 | 外部样式 ❌</li>
<li>就近原则 ✔</li>
</ol>
<p><strong>拓展：外部样式的两种写法</strong></p>
<ul>
<li>
<p>链接式</p>
<p>html标签</p>
<pre><code class="language-html"><!--使用link标签引入CSS文件-->
<link rel="stylesheet" href="css/style.css">
</code></pre>
</li>
<li>
<p>导入式</p>
<p>@import是CSS2.1特有的</p>
<pre><code class="language-html"><!--此方法已不常见-->
<style>
@import url(css/style.css);
</style>
</code></pre>
</li>
</ul>
<h2 id="2选择器">2、选择器</h2>
<blockquote>
<p>作用：选择页面上的某一个或某一类元素</p>
</blockquote>
<h3 id="基本选择器">基本选择器</h3>
<blockquote>
<p>标签选择器：选中一类标签 标签{}</p>
</blockquote>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器会选择到页面上所有的这个标签的元素*/
h1{
color: #b4e55e;
background: aqua;
border-radius: 5px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>HTML</h1>
<h1>CSS</h1>
<p>JavaScript</p>
</body>
</html>
</code></pre>
<blockquote>
<p>类选择器class：选中所有class属性一致的标签，跨标签 .类名{}</p>
</blockquote>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式 .class的名称{}
好处,可以选择多个标签,是同一个class可以复用(归类)
*/
.biaoti1{
color: aqua;
}
.biaoti2{
color: blanchedalmond;
}
</style>
</head>
<body>
<h1 class="biaoti1">标题1</h1>
<h1 class="biaoti2">标题2</h1>
<h1 class="biaoti1">标题3</h1>
<p class="biaoti2">p标签</p>
</body>
</html>
</code></pre>
<blockquote>
<p>ID选择器：全局唯一 #id名{}</p>
</blockquote>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
id选择器:id必须保证全局唯一
#id名称{
}
*/
#biaoti1{
color: #99ff00;
}
.style1{
color: firebrick;
}
h1{
color: #ff1fd0;
}
</style>
</head>
<body>
<h1 id="biaoti1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
</code></pre>
<p><strong>优先级：不遵循就近原则</strong></p>
<p>ID选择器>类选择器>标签选择器</p>
<h3 id="层次选择器">层次选择器</h3>
<blockquote>
<p>后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你</p>
</blockquote>
<pre><code class="language-css">/*后代选择器*/
body p{
background: green;
}
</code></pre>
<blockquote>
<p>子选择器：一代，儿子</p>
</blockquote>
<pre><code class="language-css">/*子选择器*/
body>p{
background: #ff1fd0;
}
</code></pre>
<blockquote>
<p>相邻兄弟选择器：具有相同父元素，同辈,后面的实现效果，即p，只选中一个</p>
</blockquote>
<pre><code class="language-css">/*相邻兄弟选择器*/
.active + p{
background: red;
}
</code></pre>
<blockquote>
<p>通用兄弟选择器：当前选中元素的向下的<mark>所有</mark>元素</p>
</blockquote>
<pre><code class="language-css">/*通用选择器*/
.active~p{
background: #ff1fd0;
}
</code></pre>
<blockquote>
<p>使用的网页结构图以及源码</p>
</blockquote>
<p><img src="https://img2020.cnblogs.com/blog/2259486/202105/2259486-20210515234003419-1250627162.png" alt="" loading="lazy"></p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p{*/
/* background: green;*/
/*}*/
/*后代选择器*/
/*body p{*/
/* background: green;*/
/*}*/
/*子选择器*/
/*body>p{*/
/* background: #ff1fd0;*/
/*}*/
/*相邻兄弟选择器*/
/*.active + p{*/
/* background: red;*/
/*}*/
/*通用选择器*/
/*.active~p{*/
/* background: #ff1fd0;*/
/*}*/
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li><p>p4</p></li>
<li><p>p5</p></li>
<li><p>p6</p></li>
</ul>
</body>
</html>
</code></pre>
<h3 id="结构-伪类选择器">结构 伪类选择器</h3>
<p><strong>伪类：在原来的基础上加上了条件。（带冒号）</strong></p>
<blockquote>
<p>index文件</p>
</blockquote>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--避免使用class，id选择器-->
<style>
/*ul的第一个子元素*/
ul li:first-child{
background: #06ff00;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: red;
}
</style>
</head>
<body>
<a href="#">这是超链接</a>
<h1>标题</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
</code></pre>
<blockquote>
<p>ul的第一个子元素</p>
</blockquote>
<pre><code class="language-css">ul li:first-child{
background: #06ff00;
}
</code></pre>
<blockquote>
<p>ul的最后一个子元素</p>
</blockquote>
<pre><code class="language-css">ul li:last-child{
background: red;
}
</code></pre>
<blockquote>
<p>选中p2:定位到父元素，选择当前的第二个元素，选择当前p元素的父级元素，选中父级元素的第二个，并且是当前元素才生效！，此方法把标题作为第一个元素</p>
</blockquote>
<pre><code class="language-css">/*选中父元素下的第二个p元素，按顺序，不分类型*/
p:nth-child(2){
background: aqua;
}
</code></pre>
<blockquote>
<p>选中p2:定位到父元素，选择当前的第二个元素，选择当前p元素的父级元素，选中父级元素的第二个p元素，此方法把标题作为第p1个元素</p>
</blockquote>
<pre><code class="language-css">/*选中父元素下的p元素的第二个，按类型*/
p:nth-child(2){
background: aqua;
}
</code></pre>
<blockquote>
<p>鼠标移动上去变背景颜色</p>
</blockquote>
<pre><code class="language-css">a:hover{
background: #ff1fd0;
}
</code></pre>
<h3 id="属性选择器常用">属性选择器（常用）</h3>
<p><strong>把id和class进行了结合</strong></p>
<blockquote>
<p>index文件</p>
</blockquote>
<pre><code class="language-html"><!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: blue;
text-align: center;
color: gainsboro;
text-decoration: none;
margin-right: 10px;
font: bold 20px/50px Arial;
}
/*属性名，属性名=属性值（可用正则）
=:绝对等于
*=：包含等于
^=：以这个开头
$=：以这个结尾
*/
/*存在id属性的元素a{}*/
a{
background: yellow;
}
/*选中id属性为first的元素*/
a{
background: green;
}
/*选中class中含有links的元素*/
a{
background: red;
}
/*选中href中以http开头的元素*/
a{
background: #ff1fd0;
}
/*选中以png结尾的文件*/
a{
background: firebrick;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="#" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.html" class="links item">3</a>
<a href="images/123.png" class="links item">4</a>
<a href="images/123.jpg" class="links item">5</a>
<a href="abc" class="links item last">6</a>
<a href="/a.png" class="links item last">7</a>
<a href="/abc.png" class="links item last">8</a>
<a href="abc.doc" class="links item last">9</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>
</code></pre>
<blockquote>
<p>属性选择器格式：</p>
</blockquote>
<p><strong>属性名，属性名=属性值（可用正则）</strong><br>
<strong>= ：绝对等于</strong><br>
*<strong>= ：包含等于</strong><br>
<strong>^= ：以这个开头</strong><br>
<strong>$= ：以这个结尾</strong></p>
<h4 id="例子">例子：</h4>
<blockquote>
<p>存在id属性的a元素</p>
</blockquote>
<pre><code class="language-css">a{
background: yellow;
}
</code></pre>
<blockquote>
<p>选中id属性为first的a元素</p>
</blockquote>
<pre><code class="language-css">a{
background: green;
}
</code></pre>
<blockquote>
<p>选中class中含有links的a元素</p>
</blockquote>
<pre><code class="language-css">a{
background: red;
}
</code></pre>
<blockquote>
<p>选中href中以http开头的a元素</p>
</blockquote>
<pre><code class="language-css">a{
background: #ff1fd0;
}
</code></pre>
<blockquote>
<p>选中href中以png结尾的a元素</p>
</blockquote>
<pre><code class="language-css">a{
background: firebrick;
}
</code></pre>
<h2 id="3美化网页元素">3、美化网页元素</h2>
<h3 id="为什么要美化">为什么要美化</h3>
<ol>
<li>有效的传递页面信息</li>
<li>美化页面，页面漂亮才能吸引用户</li>
<li>凸显页面主题</li>
<li>提高用户的体验</li>
</ol>
<p>span标签：重点要突出的字使用span标签套起来。</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习 <span id="title1">CSS3</span>
</html>
</code></pre>
<h3 id="字体样式">字体样式</h3>
<p>index文件</p>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
color：字体颜色
font-family:字体
font-size:字体大小
font—weigth:调整字体的粗细
bold：粗的
bolder：更粗的
lighter：更细的
normal：正常的
也可用数值，数值最高1000
*/
body{
font-family: "Arial Black" , 楷体;
color: #ff1fd0;
}
h1{
font-size: 50px;
}
.p1{
font-weight: bold;
}
</style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
<p>Let me not to the marriage of true mindsAdmit impediments. Love is not loveWhich alters when it alteration finds,Or bends with the remover to remove:
</p>
</body>
</html>
</code></pre>
<h4 id="本节重点">本节重点</h4>
<p>color：字体颜色<br>
font-family:字体<br>
font-size:字体大小<br>
font—weigth:调整字体的粗细<br>
bold：粗的<br>
bolder：更粗的<br>
lighter：更细的<br>
normal：正常的<br>
也可用数值，数值最高1000</p>
<p>补充：也可以把字体样式卸在一行</p>
<pre><code class="language-css">/*字体风格*/
p{
font: oblique bold 12px/80px "楷体" ;
}
</code></pre>
<p><strong>其中oblique是斜体（字体风格），bold是粗体（字体粗细），12px是字体大小，80px是行高，楷体为字体。</strong></p>
<h3 id="文本样式">文本样式</h3>
<blockquote>
<p>index.php文件</p>
</blockquote>
<pre><code class="language-php"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
颜色：
单词
RGB 0~f
RGBA A:(0~1)
text-align: center; 排版，居中
text-indent: 2em; 段落首行缩进
line-height: 300px; 行高，和块的高度一致就可以实现垂直居中
*/
h1{
color: rgba(0,255,255,0.5);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: blue;
height: 300px;
line-height: 300px;
}
.l1{
/*下划线*/
text-decoration: underline;
}
.l2{
/*删除线*/
text-decoration: line-through;
}
.l3{
/*上划线*/
text-decoration: overline;
}
a{
/*超链接去下划线*/
text-decoration: none;
}
/*文本与图片水平对齐
vertical-align对齐是有一个参照的概念
*/
img,span{
/*center是水平的概念，middle才是上中下的概念*/
vertical-align: middle;
}
</style>
</head>
<body>
<a href="#">超链接去下划线</a>
<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>
<h1>故事介绍</h1>
<p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
<p class="p3">Let me not to the marriage of true mindsAdmit impediments. Love is not loveWhich alters when it alteration finds,Or bends with the remover to remove:
</p>
<p>
<img src="images/test.png" alt="test">
<span>12312314335456675</span>
</p>
</body>
</html>
</code></pre>
<blockquote>
<p>颜色----------------color、rgb、rgba</p>
</blockquote>
<pre><code class="language-css">/*
颜色：
单词
RGB 0~f
RGBA A:(0~1)
*/
h1{
color: rgba(0,255,255,0.5);
}
</code></pre>
<blockquote>
<p>文本对齐方式---------text-align:center</p>
</blockquote>
<pre><code class="language-css">/*text-align: center; 排版，居中*/
h1{
text-align: center;
}
</code></pre>
<blockquote>
<p>首行缩进-------------text-indent:2em</p>
</blockquote>
<pre><code class="language-css">/*text-indent: 2em; 段落首行缩进*/
.p1{
text-indent: 2em;
}
</code></pre>
<blockquote>
<p>行高-----------------line-height:</p>
</blockquote>
<pre><code class="language-css">/*line-height: 300px; 行高，和块的高度一致就可以实现垂直居中*/
line-height: 300px;
}
</code></pre>
<blockquote>
<p>单行文字上下居中------line-height:height</p>
</blockquote>
<pre><code class="language-css">/*
text-indent: 2em; 段落首行缩进
line-height: 300px; 行高，和块的高度一致就可以实现垂直居中
*/
.p3{
background: blue;
height: 300px;
line-height: 300px;
}
</code></pre>
<blockquote>
<p>装饰-----------------text-decoration:</p>
</blockquote>
<pre><code class="language-css">.l1{
/*下划线*/
text-decoration: underline;
}
.l2{
/*删除线*/
text-decoration: line-through;
}
.l3{
/*上划线*/
text-decoration: overline;
}
a{
/*超链接去下划线*/
text-decoration: none;
}
</code></pre>
<blockquote>
<p>文本图片水平对齐------vertical-align:middle</p>
</blockquote>
<pre><code class="language-css">/*文本与图片水平对齐
vertical-align对齐是有一个参照的概念
*/
img,span{
/*center是水平的概念，middle才是上中下的概念*/
vertical-align: middle;
}
</code></pre>
<h3 id="阴影">阴影</h3>
<pre><code class="language-css">/*阴影颜色，阴影位置，模糊半径*/
#price{
text-shadow: #00fffd 10px 10px 2px;
}
</code></pre>
<h3 id="超链接伪类">超链接伪类</h3>
<p>正常情况下只用a，a:hover</p>
<pre><code class="language-css">/*默认的颜色*/
a{
text-decoration: none;
color: #000000;
}
/*鼠标悬浮的颜色（只需记住hover）*/
a:hover{
color: orange;
}
/*鼠标按住未释放的状态*/
a:active{
color: green;
font-size: 50px;
}
/*访问后（不管用）*/
/*a:visited{*/
/* color: blue;*/
/*}*/
</code></pre>
<h3 id="列表样式">列表样式</h3>
<blockquote>
<p>index文件</p>
</blockquote>
<pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.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>
</code></pre>
<blockquote>
<p>css文件</p>
</blockquote>
<pre><code class="language-css">#nav{
width: 300px;
background: #a0a0a0;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 2em;
line-height: 35px;
background: red;
}
/*ul li
list-style:
none 去掉圆点
circle 空心圆
decimal 数字
square 正方形
*/
ul{
background:#a0a0a0;
}
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
</code></pre>
<h3 id="背景">背景</h3>
<h4 id="背景颜色">背景颜色</h4>
<pre><code class="language-css">div{
background: red;
}
</code></pre>
<h4 id="背景图片">背景图片</h4>
<pre><code class="language-css">/*设置背景图片，默认为平铺*/
div{
background-image: url("iamges/tx.jpg");
}
/*沿X、y轴方向平铺、水平*/
div{
background-repeat: repeat-x;
}
/*沿y轴方向平铺、垂直*/
div{
background-repeat: repeat-y;
}
/*不平铺*/
div{
background-repeat: no-repeat;
}
</code></pre>
<h4 id="综合">综合</h4>
<pre><code class="language-css">/*颜色， 图片，图片位置，平铺方式*/
div{
background: red url("../images/a.gif") 200px 10px no-repeat;
}
ul li{
background-image: url("../images/r.gif");
background-position: 200px 2px;
}
</code></pre>
<p>一个网站：https://www.grabient.com</p>
<p>练习</p>
<h3 id="渐变">渐变</h3>
<pre><code class="language-css">/*径向渐变、圆形渐变*/
body{
background-image: linear-gradient(19deg, #21ddfd 0%,#b721ff 100%);
}
/*一样*/
body{
background: linear-gradient(19deg, #21ddfd 0%,#b721ff 100%);
}
</code></pre>
<h2 id="4盒子模型">4、盒子模型</h2>
<blockquote>
<p>index文件</p>
</blockquote>
<pre><code class="language-html"><div class="box">
<h2>登陆页面</h2>
<form>
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="text">
</div>
</form>
</div>
</code></pre>
<blockquote>
<p>css文件</p>
</blockquote>
<pre><code class="language-css">/*一般网页有默认的外边距和内边距，我们为了不受到它的影响需要将她们清除*/
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-color: #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 yellow;
}
div:nth-of-type(3) input{
border: 3px solid black;
}
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/2259486/202105/2259486-20210515234234637-656383311.png" alt="" loading="lazy"></p>
<ol>
<li>margin：外边距</li>
<li>border：边框</li>
<li>padding：内边距</li>
</ol>
<h3 id="边框">边框：</h3>
<pre><code class="language-css">div:nth-of-type(1) input{
border: 3px solid black;
}
</code></pre>
<h3 id="外边距">外边距</h3>
<pre><code class="language-css">/*居中*/
#box{
margin: 0 auto;
}
</code></pre>
<h3 id="内边距">内边距</h3>
<pre><code class="language-css">/*顺序依次是上右下左，即顺时针旋转*/
#box{
padding: 1 2 3 4;
}
</code></pre>
<h3 id="盒子大小计算方式">盒子大小计算方式：</h3>
<p>margin+boder+padding+内容</p>
<h3 id="圆角边框">圆角边框</h3>
<pre><code class="language-css">/*正圆，border-radius=height/2+1=width/2+1*/
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius: 100px;
}
/*扇形（四分之一圆）*/
div {
height: 100px;
width: 100px;
border: 1px solid red;
border-radius: 100px 0 0 0;
}
/*半圆*/
div {
height: 50px;
width: 100px;
border: 1px solid red;
border-radius: 50px 50px 0 0;
}
/*border-radius四个参数分别是左上角半径、右上角半径、有下角半径、左下角半径*/
</code></pre>
<h3 id="盒子阴影">盒子阴影</h3>
<pre><code class="language-css">div{
width: 100px;
height: 100px;
border: 10px solid red;
box-shadow: 10px 10px 100px yellow;
text-align: center;
}
/*box-shadow: 水平移动、垂直移动、模糊半径、阴影颜色*/
img{
border-radius: 50px;
box-shadow: 10px 10px 100px yellow;
}
</code></pre>
<blockquote>
<p>不要重复造轮子</p>
</blockquote>
<h2 id="5浮动">5、浮动</h2>
<p>概念：标准文档流</p>
<hr>
<blockquote>
<p>display概念：</p>
</blockquote>
<p>块级元素：独占一行</p>
<p>例：h1~h6 div 列表 p</p>
<p>行内元素：不独占一行，好多元素可以放在同一行</p>
<p>例：span a img strong···</p>
<p>行内元素可以被包含在块元素中，反之不行</p>
<pre><code class="language-css">/*
display常用的三个值
block 块元素
inline-block 行内块元素，保持块元素的特性，也可以写在一行
inline 行内元素
none 消失
*/
div{
height:100px;
width:100px;
border:1px solid red;
display:inline-block;
}
</code></pre>
<hr>
<blockquote>
<p>浮动</p>
</blockquote>
<pre><code class="language-css">div{
float:left;
}
/*出现问题：
缩放网页时浮动元素会进行重新排版，解决办法clear属性
这时候div既有浮动的效果，也有块元素的特性，不会乱飘了
*/
div{
float:left;
clear:both；
}
</code></pre>
<h3 id="解决父级边框塌陷问题">解决父级边框塌陷问题</h3>
<blockquote>
<p>clear属性</p>
</blockquote>
<p>left：左侧不允许有浮动</p>
<p>right：右侧不允许有浮动</p>
<p>both：两侧都不允许有浮动</p>
<blockquote>
<p>方法一、给父级元素设置固定高度</p>
</blockquote>
<blockquote>
<p>方法二、添加一个空的div标签,并给他设置clear：both,清除浮动</p>
</blockquote>
<pre><code class="language-html">.clear{
clear:both;
margin:0;
padding:0;
}
<div class="clear"></div>
</code></pre>
<blockquote>
<p>方法三、在父级元素中增加一个overflow:hidden;属性</p>
</blockquote>
<p>overflow属性：</p>
<p>scroll:超出部分使用滚动条进行显示</p>
<p>hidden: 超出部分内容进行隐藏、修剪</p>
<pre><code class="language-css">#father{
border: 1px #000 solid;
overflow: hidden;
}
</code></pre>
<blockquote>
<p>方法四、给父类添加一个伪类（推荐使用）</p>
<p>优点：避免了增加html代码</p>
</blockquote>
<pre><code class="language-css">#father:after{
content: '';
displaty: block;
clear: both;
}
</code></pre>
<h2 id="6定位">6、定位</h2>
<p>分为相对定位和绝对定位</p>
<h3 id="相对定位">相对定位</h3>
<p>相对于本身原来的位置进行位移</p>
<p>posttion: relative;相对于原来的位置，进行指定的偏移，他仍然在标准文档流中，原来的位置会被抱保留</p>
<pre><code class="language-css">#first{
background-color: #a13d30;
border: 1px solid #ff0000;
/*相对于原来的位置，向上移动20px，向左移动20px*/
posttion: relative;
top: -20;
left: -20;
/*距离下面10px,右边 20px*/
bottom： 10px;
right: 20px;
}
</code></pre>
<h3 id="练习">练习：</h3>
<p><img src="https://img2020.cnblogs.com/blog/2259486/202105/2259486-20210515234205335-2119837747.png" alt="" loading="lazy"></p>
<pre><code class="language-html"><style>
ul{
padding:5px;
border: 1px solid yellow;
width: 300px;
height: 300px;
}
ul li{
background-color:red;
list-style: none;
margin:0;
padding:0;
position: relative;
height:100px;
width:100px;
text-align: center;
line-height: 100px;
}
ul li:hover{
background-color:blue;
}
li:nth-of-type(2){
top:-100px;
left:200px;
}
li:nth-of-type(4){
top:-100px;
left:200px;
}
li:nth-of-type(5){
top:-300px;
left:100px;
}
a{
color: black;
text-decoration: none;
}
</style>
<div>
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
<li><a href="#">链接4</a></li>
<li><a href="#">链接5</a></li>
</ul>
</div>
</code></pre>
<h3 id="绝对定位">绝对定位</h3>
<p>position:absolute;</p>
<p>相对于父级或浏览器进行指定的偏移，因为他不在标准文档流中，所以原来的位置不会被保留；</p>
<ol>
<li>没有给父元素设置定位的情况下，相对于浏览器定位；</li>
<li>若给父级元素设置了相对定位即给父元素添加属性position：relative;则会相对于父级元素进行定位</li>
<li>使用绝对定位不能超出父级元素，即一般不能将top、left等设置为负数</li>
</ol>
<p>例：相对于浏览器</p>
<pre><code class="language-css">/*将父元素下的第一个div固定在body的右下角*/
div:nth-of-type(1){
width:100px;
htight:100px;
background: red;
position: absolute;
right:0;
bottom:0;
}
</code></pre>
<h3 id="固定定位">固定定位</h3>
<pre><code class="language-css">/*将父元素下的第一个div固定在浏览器的的右下角*/
div:nth-of-type(1){
width:100px;
htight:100px;
background: red;
position: absolute;
right:0;
bottom:0;
}
</code></pre>
<h3 id="z-index">z-index</h3>
<p>将它与PS中的图层一块理解,从0~999值越大图层就越往上<br>
<img src="https://img2020.cnblogs.com/blog/2259486/202105/2259486-20210515234303107-1048435886.png" alt="" loading="lazy"></p>
<pre><code class="language-html">div:nth-of-type(1){
width:100px;
htight:100px;
background: red;
z-index:999;
}
</code></pre>
<h3 id="透明">透明</h3>
<p>属性</p>
<p>opacity:0.2;</p>
<p>或（IE8及以前的版本支持）</p>
<p>filter:alpha(opacity=50)；</p><br><br>
来源：https://www.cnblogs.com/doubledabo/p/14772937.html
頁:
[1]