css学习笔记（狂神说）
<h2 class="md-end-block md-heading md-focus"><span class="md-plain md-expand">CSS3学习 </span></h2><p class="md-end-block md-p"><span class="md-meta-i-c md-link"><span class="md-plain">##学习自狂神##</span></span></p>
<p class="md-end-block md-p"><span class="md-plain">1.css是什么 <span class="md-softbreak"><br><span class="md-plain">2.CSS怎么用（快速入门） <span class="md-softbreak"><br><span class="md-plain">3.CSS选择器（重点 + 难点） <span class="md-softbreak"><br><span class="md-plain">4.美化页面（文字、阴影、超链接、列表、渐变…） <span class="md-softbreak"><br><span class="md-plain">5.盒子模型 <span class="md-softbreak"><br><span class="md-plain">6.浮动 <span class="md-softbreak"><br><span class="md-plain">7.定位 <span class="md-softbreak"><br><span class="md-plain">8.网页动画（特效） </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p>
<h2 class="md-end-block md-heading"><span class="md-plain">1.什么是CSS </span></h2>
<h3 class="md-end-block md-heading"><span class="md-plain">1、什么是CSS </span></h3>
<p class="md-end-block md-p"><span class="md-plain">Cascading Style Sheet 层叠样式表 CSS：表现（美化网页） 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动 <span class="md-softbreak"><br><span class="md-plain">1.2、发展史 <span class="md-softbreak"><br><span class="md-plain">CSS1.0 CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO CSS2.1：浮动，定位 CSS3.0：圆角、阴影、动画…浏览器兼容性~ </span></span></span></span></span></p>
<h3 class="md-end-block md-heading"><span class="md-plain">2、快速入门 </span></h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><!DOCTYPE html><br> <span><html lang="en"><br> <span><head><br> <span> <meta charset="UTF-8"><br> <span> <title>Title</title><br> <span> <!--规范，<style>可以编写CSS的代码，每一个声明最好以“;”结尾<br> <span> 语法：<br> <span> 选择器{<br> <span> 声明1;<br> <span> 声明2;<br> <span> 声明3;<br> <span> }<span class="cm-tab"> --><br> <span> <style><br> <span> h1{<br> <span> color: crimson;<br> <span> }<br> <span> </style><br> <span></head><br> <span><body><br> <span> <h1>CSS测试</h1><br> <span></body><br> <span></html><br> <span><span><br> <span><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-image md-img-loaded" data-src="https://z3.ax1x.com/2021/07/05/RheXd0.png"><img src="https://z3.ax1x.com/2021/07/05/RheXd0.png"></span></span></p>
<h3 class="md-end-block md-heading"><span class="md-plain">3、CSS的优势：</span></h3>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-plain">1、内容和表现分离；<span class="md-softbreak"><br><span class="md-plain"> 2、网页结构表现统一，可以实现复用<span class="md-softbreak"><br><span class="md-plain"> 3、样式十分的丰富<span class="md-softbreak"><br><span class="md-plain"> 4、建议使用独立于html的css文件<span class="md-softbreak"><br><span class="md-plain"> 5、利用SEO，容易被搜索引擎收录！</span></span></span></span></span></span></span></span></span></p>
<p class="md-end-block md-p"> </p>
<h3 class="md-end-block md-heading"><span class="md-plain">4、CSS的3种常用导入方式</span></h3>
<div class="md-htmlblock md-rawblock md-end-block">
<div class="md-htmlblock-container md-rawblock-container"> </div>
</div>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><style><!--内部样式--><br> <span> h1{<br> <span> color: green;<br> <span> }<br> <span></style><br> <span><span><br> <span><!--外部样式--><br> <span><link rel="stylesheet" href="css/style.css" /></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-tag md-raw-inline"></head><span class="md-softbreak"><br><span class="md-tag md-raw-inline"><body></span></span></span></p>
<p class="md-end-block md-p"><span class="md-comment"><!--优先级：就近原则 行内样式 > 内部样式 > 外部样式--><span class="md-softbreak"><br><span class="md-comment"><!--行内样式：在标签元素中，编写一个style属性，编写样式即可--></span></span></span></p>
<div class="md-htmlblock md-rawblock md-end-block">
<div class="md-htmlblock-container md-rawblock-container">
<h1>这是标签</h1>
</div>
</div>
<p class="md-end-block md-p"><span class="md-tag md-raw-inline"></body><span class="md-softbreak"><br><span class="md-tag md-raw-inline"></html></span></span></span></p>
<p class="md-end-block md-p"><span class="md-plain">拓展：外部样式两种方法 </span></p>
<h4 class="md-end-block md-heading"><span class="md-plain">链接式 html </span></h4>
<p class="md-end-block md-p"><span class="md-comment"><!--外部样式--><span class="md-softbreak"><br><span class="md-tag md-raw-inline"><link rel="stylesheet" href="css/style.css" /><span class="md-softbreak"><br><span class="md-plain">12 </span></span></span></span></span></p>
<h4 class="md-end-block md-heading"><span class="md-plain">导入式 @import</span></h4>
<p class="md-end-block md-p"><span class="md-plain">是CSS2.1特有的！ </span></p>
<p class="md-end-block md-p"><span class="md-comment"><!--导入式--></span></p>
<div class="md-htmlblock md-rawblock md-end-block">
<div class="md-htmlblock-container md-rawblock-container md-raw-html-src">
<div class="md-raw-html-src-content"><style><br> @import url("css/style.css");<br></style></div>
</div>
</div>
<p class="md-end-block md-p"><span class="md-plain">4</span></p>
<h2 class="md-end-block md-heading"><span class="md-plain">2选择器 </span></h2>
<p class="md-end-block md-p"><span class="md-plain"> 作用：选择页面上的某一个后者某一类元素 </span></p>
<h3 class="md-end-block md-heading"><span class="md-plain">2.1、基本选择器 </span></h3>
<h4 class="md-end-block md-heading"><span class="md-plain">1、标签选择器 </span></h4>
<p class="md-end-block md-p"><span class="md-plain"> 选择一类标签 <span class="md-softbreak"><br><span class="md-plain"> 格式： 标签 { } </span></span></span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><head><br> <span> <meta charset="UTF-8"><br> <span> <title>Title</title><br> <span> <style><br> <span> h1{<br> <span> color: orange;<br> <span> background: blue;<br> <span> border-radius: 10px;<br> <span> }<br> <span> h3{<br> <span> color: orange;<br> <span> background: blue;<br> <span> border-radius: 10px;<br> <span> }<br> <span> p{<br> <span> font-size: 80px;<br> <span> }<br> <span> </style><br> <span></head><br> <span><body><br> <span><h1>标签选择器</h1><br> <span><p>我爱学习</p><br> <span><h3>学习JAVA</h3><br> <span></body><br> <span><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<h4 class="md-end-block md-heading"><span class="md-plain">2、类选择器class </span></h4>
<p class="md-end-block md-p"><span class="md-plain"> 选择所有class一致的标签，跨标签 <span class="md-softbreak"><br><span class="md-plain"> 格式： .类名{}</span></span></span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><head><br> <span> <meta charset="UTF-8"><br> <span> <title>Title</title><br> <span> <style><br> <span> /*类选择器的格式 .class的名称{}<br> <span> 好处：可以多个标签归类，是同一个class，可以复用*/<br> <span> .demo1{<br> <span> color: blue;<br> <span> }<br> <span> .demo2{<br> <span> color: red;<br> <span> }<br> <span> .demo3{<br> <span> color: aqua;<br> <span> }<br> <span> </style><br> <span></head><br> <span><body><br> <span><h1 class = "demo1">类选择器：demo1</h1><br> <span><h1 class="demo2">类选择器：demo2</h1><br> <span><h1 class="demo3">类选择器：demo3</h1><br> <span><p class="demo3">p标签</p><br> <span></body><br> <span><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<h4 class="md-end-block md-heading"><span class="md-plain">3、id 选择器</span></h4>
<p class="md-end-block md-p"><span class="md-plain"> <span class="md-pair-s "><strong><span class="md-plain">全局唯一</span></strong></span></span></p>
<p class="md-end-block md-p"><span class="md-plain"> 格式： <span class="md-pair-s "><strong><span class="md-plain">#id名{}</span></strong></span></span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><head><br> <span> <meta charset="UTF-8"><br> <span> <title>Title</title><br> <span> <style><br> <span> /*id选择器：id必须保证全局唯一<br> <span> #id名称{}<br> <span> 不遵循就近原则，优先级是固定的<br> <span> id选择器 > class类选择器>标签选择器<br> <span> */<br> <span> #demo1{<br> <span> color: red;<br> <span> }<br> <span> .demo2{<br> <span> color: green;<br> <span> }<br> <span> #demo2{<br> <span> color: orange;<br> <span> }<br> <span> h1{<br> <span> color: blue;<br> <span> }<br> <span> </style><br> <span></head><br> <span><body><br> <span> <h1 id="demo1" class="demo2">id选择器：demo1</h1><br> <span> <h1 class="demo2" id = "demo2">id选择器：demo2</h1><br> <span> <h1 class="demo2">id选择器：demo3</h1><br> <span> <h1 >id选择器：demo4</h1><br> <span> <h1>id选择器：demo5</h1><br> <span></body><br> <span><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<h4 class="md-end-block md-heading"><span class="md-plain">4.<span class="md-pair-s "><strong><span class="md-plain">优先级：id > class > 标签</span></strong></span></span></h4>
<h3 class="md-end-block md-heading"><span class="md-plain">2.2、高级选择器 </span></h3>
<h4 class="md-end-block md-heading"><span class="md-plain">1.层次选择器 </span></h4>
<p class="md-end-block md-p"><span class="md-plain">后代选择器：在某个元素的后面 </span></p>
<h5 class="md-end-block md-heading"><span class="md-pair-s "><em><span class="md-plain">后代选择器</span></em></span></h5>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span>/*后代选择器*/<br> <span><style><br> <span>body p{<br> <span><span class="cm-tab"> background:red;<br> <span>}<br> <span></style><br> <span><span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<h5 class="md-end-block md-heading"><span class="md-plain">子选择器，一代 </span></h5>
<p class="md-end-block md-p"><span class="md-plain">/<span class="md-pair-s "><em><span class="md-plain">子选择器</span></em><span class="md-plain">/</span></span></span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span>/*子选择器*/<br> <span><style><br> <span>body>p{<br> <span><span class="cm-tab"> background:orange;<br> <span>}<br> <span></style><br> <span><span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<h5 class="md-end-block md-heading"><span class="md-plain">相邻的兄弟选择器 同辈 </span></h5>
<p class="md-end-block md-p"><span class="md-plain">/<span class="md-pair-s "><em><span class="md-plain">相邻兄弟选择器：只选择一个，相邻（向下）</span></em><span class="md-plain">/</span></span></span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span>/*相邻兄弟选择器：只选择一个，相邻（向下）*/<br> <span><style><br> <span>.active+p{<br> <span>background: red<br> <span>}<br> <span></style><br> <span><body><br> <span><span class="cm-tab"> <p class="active">p1<p><br> <span><span class="cm-tab"> <p>p2</p><br> <span></body><br> <span><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<h5 class="md-end-block md-heading"><span class="md-plain">通用选择器 </span></h5>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><style><br> <span>/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/<br> <span><span class="cm-tab"> .active~p{<br> <span><span class="cm-tab"> background:red;<br> <span>}<br> <span></style><br> <span><body><br> <span><span class="cm-tab"> <p class="active">p1<p><br> <span><span class="cm-tab"> <p>p2</p><br> <span></body><br> <span><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<h3 class="md-end-block md-heading"><span class="md-plain">2.3结构伪类选择器</span></h3>
<p class="md-end-block md-p"><span class="md-plain">伪类</span></p>
<pre class="md-fences mock-cm md-end-block md-fences-with-lineno"> <style><br> ul li:first-child{/*ul的第一个子元素*/<br> background: aqua;<br> }<br> ul li:last-child{/*ul的最后一个子元素*/<br> background: blue;<br> }<br> /*选中p1：定位到父元素，选择当前的第一个元素<br> 选择当前p元素 的父级元素，选中父级元素的第一个，并且是当前元素才生效！*/<br> p:nth-child(1){<br> background: orange;<br> }<br> p:nth-of-type(2){/*选中父元素下的，第2个p元素*/<br> background: red;<br> }<br> a:hover{<br> color: green;<br> }<br> </style><br></head><br><body><br> <a href="">123</a><br> <p>p1</p><br> <p>p2</p><br> <p>p3</p><br> <h3>h3</h3><br> <ul><br> <li>1li1</li><br> <li>1li2</li><br> <li>1li3</li><br> </ul><br> <ul><br> <li>2li1</li><br> <li>2li2</li><br> <li>2li3</li><br> </ul><br> <a href="www.baidu.com">百度</a><br></body></pre>
<h3 class="md-end-block md-heading"><span class="md-plain">2.4属性选择器（常用）</span></h3>
<p class="md-end-block md-p"><span class="md-plain">id + class结合</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><head><br> <span> <meta charset="UTF-8"><br> <span> <title>Title</title><br> <span> <style><br> <span> .demo a{<br> <span> float: left;<br> <span> display: block;<br> <span> height: 50px;<br> <span> width: 50px;<br> <span> border-radius: 10px;<br> <span> background: aquamarine;<br> <span> text-align: center;<br> <span> color: gray;<br> <span> text-decoration: none;<br> <span> margin-right: 5px;<br> <span> /*line-height:50px;*/<br> <span> font: bold 20px/50px Arial;<br> <span> }<br> <span> /*属性名，属性名=属性值（正则）<br> <span> = 表示绝对等于<br> <span> *= 表示包含<br> <span> ^= 表示以...开头<br> <span> $= 表示以...结尾<br> <span> 存在id属性的元素<br> <span> a[]{}<br> <span> */<br> <span> a{<br> <span> background: yellow;<br> <span> }<br> <span> a{/*id=first的元素*/<br> <span> background: green;<br> <span> }<br> <span> <br> <span> a{/*class 中有links的元素*/<br> <span> background: bisque;<br> <span> }<br> <span><span><br> <span> a{/*选中href中以http开头的元素*/<br> <span> background: aquamarine;<br> <span> }<br> <span> a{/*选中href中以http开头的元素*/<br> <span> background: aquamarine;<br> <span> }<br> <span> </style><br> <span></head><br> <span><body><br> <span> <p class="demo"><br> <span> <a href="http:www.baidu.com" class="links item first" id="first">1</a><br> <span> <a href="" class="links item active" target="_blank " title="test">2</a><br> <span> <a href="images/123.html" class="links item">3</a><br> <span> <a href="images/1.png" class="links item">4</a><br> <span> <a href="images/1.jpg" class="links item">5</a><br> <span> <a href="abc" class="links item">6</a><br> <span> <a href="/a.pdf" class="links item">7</a><br> <span> <a href="/abc.pdf" class="links item">8</a><br> <span> <a href="abc.doc" class="links item">9</a><br> <span> <a href="abcd.doc" class="links item last">10</a><br> <span> </p><br> <span></body><br> <span><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<h2 class="md-end-block md-heading"><span class="md-plain">3、美化网页元素</span></h2>
<h3 class="md-end-block md-heading"><span class="md-plain">3.1、为什么要美化网页</span></h3>
<ol class="ol-list" start="1">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">有效的传递页面信息</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">美化网页，页面漂亮才能吸引客户</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">凸显页面的主题</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">提高用户的体验</span></p>
</li>
</ol>
<p class="md-end-block md-p"><span class="md-pair-s "><strong><span class="md-plain">span标签</span></strong><span class="md-plain">：重点要突出的字，使用span标签套起来</span></span></p>
<p class="md-end-block md-p"><span class="md-pair-s"><code><head><br> <meta charset="UTF-8"><br> <title>Title</title><br> <style><br> #title1{<br> font-size: 50px;<br> }<br> </style><br></head><br><body><br>学习语言<span id="title1">JAVA</span><br></body></code></span></p>
<h3 class="md-end-block md-heading"><span class="md-plain">3.2、字体样式</span></h3>
<p class="md-end-block md-p"> </p>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">font-family：字体</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">font-size：字体大小</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">font-weight：字体粗细</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">color：字体颜色</span></p>
</li>
<li class="md-list-item">
<pre class="md-fences mock-cm md-end-block md-fences-with-lineno"><head><br> <meta charset="UTF-8"><br> <title>Title</title><br> <style><br> body{<br> font-family:"Arial Black",楷体;<br> color: red;<br> }<br> h1{<br> font-size: 50px;<br> }<br> .p1{<br> font-weight: 600;<br> color: gray;<br> }<br> </style><br></head><br><body><br> <h1>标题</h1><br> <p>正文11111</p><br> <p class="p1">正文2222222</p><br> <p>i love study java</p><br></body></pre>
<p class="md-end-block md-p"> </p>
</li>
</ul>
<p class="md-end-block md-p"> </p>
<p class="md-end-block md-p"><span class="md-pair-s"><code>font-weight:bolder;/*也可以填px，但不能超过900,相当于bloder*/<br>/*常用写法：*/<br>font:oblique bloder 12px "楷体"</code></span></p>
<h3 class="md-end-block md-heading"><span class="md-plain">3.3、文本样式</span></h3>
<ol class="ol-list" start="1">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">颜色–>color rgb rgba</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">文本对齐方式–>text-align：center</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">首行缩进–>text-indent：2em</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">行高–>line-height：300px；</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">下划线–>text-decoration</span></p>
</li>
</ol>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span>text-decoration:underline/*下划线*/<br> <span>text-decoration:line-through/*中划线*/<br> <span>text-decoration:overline/*上划线*/<br> <span>text-decoration:none/*超链接去下划线*/<br> <span><span></span></span></span></span></span></span></pre>
<ol class="ol-list" start="1">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">图片、文字水平对齐</span></p>
</li>
</ol>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-tag">img,<span class="cm-tag">span{<span class="cm-property cm-error">vetical-align:<span class="cm-atom">middle}</span></span></span></span></span></pre>
<h3 class="md-end-block md-heading"><span class="md-pair-s "><strong><span class="md-plain">3.4、文本，阴影和超链接伪类</span></strong></span></h3>
<h5 class="md-end-block md-heading"><span class="md-plain">a:hover用的多</span></h5>
<pre class="md-fences mock-cm md-end-block md-fences-with-lineno"><style><br> a{/*超链接有默认的颜色*/<br> text-decoration:none;<br> color:#000000;<br> }<br> a:hover{/*鼠标悬浮的状态*/<br> color:orange;<br> }<br> a:active{/*鼠标按住未释放的状态*/<br> color:green<br> }<br> a:visited{/*点击之后的状态*/<br> color:red<br> }<br> a:link{<br> background: bisque;<br> }<br></style></pre>
<p class="md-end-block md-p"><span class="md-plain">阴影：</span></p>
<p class="md-end-block md-p"><span class="md-pair-s"><code>/* 第一个参数：表示水平偏移<br> 第二个参数：表示垂直偏移<br> 第三个参数：表示模糊半径<br> 第四个参数：表示颜色<br>*/<br>text-shadow:5px 5px 5px 颜色</code></span></p>
<h3 class="md-end-block md-heading"><span class="md-plain">3.5、列表ul li</span></h3>
<p class="md-end-block md-p"><span class="md-plain">主页index.html代码：</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><!DOCTYPE html><br> <span><html lang="en"><br> <span><head><br> <span> <meta charset="UTF-8"><br> <span> <title>Title</title><br> <span> <link href="css/style.css" rel="stylesheet" type="text/css"><br> <span></head><br> <span><body><br> <span><div id="nav"><br> <span> <h2 class="title">全部商品分类</h2><br> <span> <ul><br> <span> <li><br> <span> <a href="#">图书</a><br> <span> <a href="#">音像</a><br> <span> <a href="#">数字商品</a><br> <span> </li><br> <span> <li><br> <span> <a href="#">家用电器</a><br> <span> <a href="#">手机</a><br> <span> <a href="#">数码</a><br> <span> </li><br> <span> <li><br> <span> <a href="#">电脑</a><br> <span> <a href="#">办公</a><br> <span> </li><br> <span> <li><br> <span> <a href="#">家居</a><br> <span> <a href="#">家装</a><br> <span> <a href="#">厨具</a><br> <span> </li><br> <span> <li><br> <span> <a href="#">服饰鞋帽</a><br> <span> <a href="#">个性化妆</a><br> <span> </li><br> <span> <li><br> <span> <a href="#">礼品箱包</a><br> <span> <a href="#">钟表</a><br> <span> <a href="#">珠宝</a><br> <span> </li><br> <span> <li><br> <span> <a href="#">食品饮料</a><br> <span> <a href="#">保健食品</a><br> <span> </li><br> <span> <li><br> <span> <a href="#">彩票</a><br> <span> <a href="#">旅行</a><br> <span> <a href="#">充值</a><br> <span> <a href="#">票务</a><br> <span> </li><br> <span> </ul><br> <span></div><br> <span></body><br> <span></html><br> <span><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">css代码：</span></p>
<pre class="md-fences mock-cm md-end-block md-fences-with-lineno">#nav{<br> width: 300px;<br> background: antiquewhite;<br>}<br>.title{<br> font-size: 18px;<br> font-weight: bold;<br> text-indent: 1em;/*缩进*/<br> line-height: 35px;<br> background: red;<br>}<br>/*ul li*/<br>/*<br>list-style:<br> non 去掉实心圆<br> circle 空心圆<br> square 正方形<br>*/<br>/*ul{!*nav替换效果*!<br> background: antiquewhite;<br>}*/<br>ul li{<br> height: 30px;<br> list-style: none;<br> text-indent: 1em;<br>}<br>a{<br> text-decoration: none;<br> font-size: 14px;<br> color: black;<br> }<br>a:hover{<br> color: burlywood;<br> text-decoration: underline;<br>}</pre>
<h3 class="md-end-block md-heading"><span class="md-plain">3.6、背景</span></h3>
<ol class="ol-list" start="1">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">背景颜色：background</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">背景图片</span></p>
<pre class="md-fences mock-cm md-end-block md-fences-with-lineno">background-image:url("");/*默认是全部平铺的*/<br>background-repeat:repeat-x/*水平平铺*/<br>background-repeat:repeat-y/*垂直平铺*/<br>background-repeat:no-repeat/*不平铺*/</pre>
<p class="md-end-block md-p"> </p>
</li>
</ol>
<h3 class="md-end-block md-heading"><span class="md-plain">3.7、渐变</span></h3>
<p class="md-end-block md-p"><span class="md-plain"> 渐变背景网址：<span class="md-link md-pair-s">https://www.grabient.com<span class="md-softbreak"><br><span class="md-plain"> 径向渐变、圆形渐变</span></span></span></span></p>
<pre class="md-fences mock-cm md-end-block md-fences-with-lineno">body{<br> background-color: #4158D0;<br> background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);<br> }</pre>
<h2 class="md-end-block md-heading"><span class="md-plain">4、盒子模型</span></h2>
<h3 class="md-end-block md-heading"><span class="md-plain">4.1什么是盒子模型</span></h3>
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-image md-img-loaded" data-src="https://z3.ax1x.com/2021/07/05/R4lxZ4.png"><img src="https://z3.ax1x.com/2021/07/05/R4lxZ4.png"></span></span></p>
<p class="md-end-block md-p"><span class="md-plain">margin：外边距padding：内边距border：边框 </span></p>
<h3 class="md-end-block md-heading"><span class="md-plain">4.2、边框 </span></h3>
<p class="md-end-block md-p"><span class="md-plain">border：粗细 样式 颜色 <span class="md-softbreak"><br><span class="md-tab"> <span class="md-plain">1.边框的粗细<span class="md-softbreak"><br><span class="md-tab"> <span class="md-plain">2.边框的样式<span class="md-softbreak"><br><span class="md-tab"> <span class="md-plain">3.边框的颜色 </span></span></span></span></span></span></span></span></span></span></p>
<p class="md-end-block md-p"><span class="md-plain">代码练习</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><!DOCTYPE html><br> <span><html lang="en"><br> <span><head><br> <span> <meta charset="UTF-8"><br> <span> <title>Title</title><br> <span> <style><br> <span> #nav{<br> <span> text-align: center;<br> <span> width: 300px;<br> <span> height: 200px;<br> <span> border:1px solid red;<br> <span> }<br> <span> #user input{<br> <span> border: 2px solid green;<br> <span> }<br> <span> </style><br> <span></head><br> <span><body><br> <span><div id="nav"><br> <span> <h1>会员登录</h1><br> <span> <form action="#"><br> <span> <div id="user"><br> <span> <span>用户名：</span><br> <span> <input type="text"><br> <span> </div><br> <span> <div><br> <span> <span>密码：</span><br> <span> <input type="text"><br> <span> </div><br> <span> <div><br> <span> <span>邮箱：</span><br> <span> <input type="text"><br> <span> </div><br> <span> </form><br> <span></div><br> <span></body><br> <span></html><br> <span>4.3外边距----妙用：居</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"> </p>
<h3 class="md-end-block md-heading"><span class="md-plain">4.3、外边距----妙用：居中 </span></h3>
<p class="md-end-block md-p"><span class="md-plain">margin-left/right/top/bottom–>表示四边，可分别设置，也可以同时设置如下</span></p>
<pre class="md-fences mock-cm md-end-block md-fences-with-lineno">margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/<br>/*例1：居中*/<br>margin:0 auto /*auto表示左右自动*/<br>/*例2：*/<br>margin:4px/*表示上、右、下、左都为4px*/<br>/*例3*/<br>margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/</pre>
<p class="md-end-block md-p"><span class="md-plain">盒子的计算方式：<span class="md-softbreak"><br><span class="md-plain"> margin+border+padding+内容的大小</span></span></span></p>
<p class="md-end-block md-p"><span class="md-plain">总结：<span class="md-softbreak"><br><span class="md-plain"> body总有一个默认的外边距 margin:0<span class="md-softbreak"><br><span class="md-plain"> 常见操作：初始化</span></span></span></span></span></p>
<pre class="md-fences mock-cm md-end-block md-fences-with-lineno">margin:0;<br>padding:0;<br>text-decoration:none;</pre>
<p class="md-end-block md-p"><span class="md-pair-s "><strong><span class="md-plain">4.4、圆角边框----border-radius</span></strong></span></p>
<p class="md-end-block md-p"><span class="md-plain">border-radius有四个参数（顺时针），左上->右上->右下->左下<span class="md-softbreak"><br><span class="md-plain"> 圆圈：圆角=<span class="md-pair-s "><strong><span class="md-plain">半径</span></strong></span></span></span></span></p>
<pre class="md-fences mock-cm md-end-block md-fences-with-lineno"><style><br> div{<br> width: 100px;<br> height: 100px;<br> border: 10px solid red;<br> /*一个border-radius只管一个圆的1/4*/<br> border-radius: 50px 20px 20px 30px;/*左上 右上 右下 左下 ,顺时针方向*/<br> }<br></style></pre>
<pre class="md-fences mock-cm md-end-block md-fences-with-lineno">box-shadow: 10px 10px 1px black;</pre>
<h2 class="md-end-block md-heading"><span class="md-plain">5、浮动</span></h2>
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-image md-img-loaded" data-src="https://z3.ax1x.com/2021/07/05/R4TPhD.png"><img src="https://z3.ax1x.com/2021/07/05/R4TPhD.png"></span></span></p>
<p class="md-end-block md-p"><span class="md-plain">块级元素：独占一行 h1~h6 、p、div、 列表…<span class="md-softbreak"><br><span class="md-plain"> 行内元素：不独占一行 span、a、img、strong</span></span></span></p>
<p class="md-end-block md-p"> </p>
<blockquote>
<p class="md-end-block md-p"><span class="md-plain">注： 行内元素可以包含在块级元素中，反之则不可以。</span></p>
</blockquote>
<h3 class="md-end-block md-heading"><span class="md-plain">5.1标准文档流</span></h3>
<h3 class="md-end-block md-heading"><span class="md-plain">5.2、display（重要）</span></h3>
<p class="md-end-block md-p"> </p>
<ol class="ol-list" start="1">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">block：块元素</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">inline：行内元素</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">inline-block：是块元素，但是可以内联，在一行</span></p>
</li>
</ol>
<p class="md-end-block md-p"> </p>
<blockquote>
<p class="md-end-block md-p"><span class="md-plain">这也是一种实现行内元素排列的方式，但是我们很多情况用float<span class="md-softbreak"><br><span class="md-plain">none：消失</span></span></span></p>
</blockquote>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-operator"><!<span class="cm-variable">DOCTYPE <span class="cm-variable">html<span class="cm-operator">><br> <span><span class="cm-operator"><<span class="cm-variable">html <span class="cm-variable">lang<span class="cm-operator">=<span class="cm-string">"en"<span class="cm-operator">><br> <span><span class="cm-operator"><<span class="cm-variable">head<span class="cm-operator">><br> <span> <span class="cm-operator"><<span class="cm-variable">meta <span class="cm-variable">charset<span class="cm-operator">=<span class="cm-string">"UTF-8"<span class="cm-operator">><br> <span> <span class="cm-operator"><<span class="cm-variable">title<span class="cm-operator">><span class="cm-variable">Title<span class="cm-operator"></<span class="cm-variable">title<span class="cm-operator">><br> <span> <span class="cm-operator"><!--<span class="cm-variable">block <span class="cm-variable">块元素<br> <span> <span class="cm-variable">inline <span class="cm-variable">行内元素<br> <span> <span class="cm-variable">inline<span class="cm-operator">-<span class="cm-variable">block <span class="cm-variable">是块元素，但是可以内联 <span class="cm-variable">，在一行<br> <span> <span class="cm-operator">--><br> <span> <span class="cm-operator"><<span class="cm-variable">style<span class="cm-operator">><br> <span> <span class="cm-variable">div{<br> <span> <span class="cm-variable">width: <span class="cm-number">100<span class="cm-variable">px;<br> <span> <span class="cm-variable">height: <span class="cm-number">100<span class="cm-variable">px;<br> <span> <span class="cm-variable">border: <span class="cm-number">1<span class="cm-variable">px <span class="cm-variable">solid <span class="cm-variable">red;<br> <span> <span class="cm-variable">display: <span class="cm-variable">inline<span class="cm-operator">-<span class="cm-variable">block;<br> <span> }<br> <span> <span class="cm-variable">span{<br> <span> <span class="cm-variable">width: <span class="cm-number">100<span class="cm-variable">px;<br> <span> <span class="cm-variable">height: <span class="cm-number">100<span class="cm-variable">px;<br> <span> <span class="cm-variable">border: <span class="cm-number">1<span class="cm-variable">px <span class="cm-variable">solid <span class="cm-variable">red;<br> <span> <span class="cm-variable">display: <span class="cm-variable">inline<span class="cm-operator">-<span class="cm-variable">block;<br> <span> }<br> <span> <span class="cm-operator"></<span class="cm-variable">style<span class="cm-operator">><br> <span><span class="cm-operator"></<span class="cm-variable">head<span class="cm-operator">><br> <span><span class="cm-operator"><<span class="cm-variable">body<span class="cm-operator">><br> <span><span class="cm-operator"><<span class="cm-variable">div<span class="cm-operator">><span class="cm-variable">div块元素<span class="cm-operator"></<span class="cm-variable">div<span class="cm-operator">><br> <span><span class="cm-operator"><<span class="cm-variable">span<span class="cm-operator">><span class="cm-variable">span行内元素<span class="cm-operator"></<span class="cm-variable">span<span class="cm-operator">><br> <span><span class="cm-operator"></<span class="cm-variable">body<span class="cm-operator">><br> <span><span class="cm-operator"></<span class="cm-variable">html<span class="cm-operator">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<h3 class="md-end-block md-heading"><span class="md-plain">5.3、float：left/right左右浮动</span></h3>
<p class="md-end-block md-p"><span class="md-plain"> clear：both</span></p>
<h3 class="md-end-block md-heading"><span class="md-plain">5.4、overflow及父级边框塌陷问题</span></h3>
<p class="md-end-block md-p"><span class="md-plain">clear：<span class="md-softbreak"><br><span class="md-plain"> right：右侧不允许有浮动元素<span class="md-softbreak"><br><span class="md-plain"> left：左侧不允许有浮动元素<span class="md-softbreak"><br><span class="md-plain"> both：两侧不允许有浮动元素<span class="md-softbreak"><br><span class="md-plain"> none：</span></span></span></span></span></span></span></span></span></p>
<p class="md-end-block md-p"><span class="md-plain">解决塌陷问题方案：<span class="md-softbreak"><br><span class="md-plain"> 方案一：增加父级元素的高度；<span class="md-softbreak"><br><span class="md-plain"> 方案二：增加一个空的div标签，清除浮动</span></span></span></span></span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><div class = "clear"></div><br> <span><style><br> <span><span class="cm-tab"> .clear{<br> <span><span class="cm-tab"> <span class="cm-tab"> clear:both;<br> <span><span class="cm-tab"> <span class="cm-tab"> margin:0;<br> <span><span class="cm-tab"> <span class="cm-tab"> padding:0;<br> <span>}<br> <span></style><br> <span><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">方案三：在父级元素中增加一个overflow属性</span></p>
<pre class="md-fences mock-cm md-end-block md-fences-with-lineno">overflow:hidden/*隐藏超出部分*/<br>overflow：scoll/*滚动*/</pre>
<p class="md-end-block md-p"><span class="md-plain">方案四：父类添加一个伪类:after</span></p>
<pre class="md-fences mock-cm md-end-block md-fences-with-lineno">#father:after{<br> content:'';<br> display:block;<br> clear:both;<br>}</pre>
<p class="md-end-block md-p"><span class="md-plain">小结： </span></p>
<ol class="ol-list" start="1">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">浮动元素增加空div----> 简单、代码尽量避免空div</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">设置父元素的高度-----> 简单，但是元素假设有了固定的高度，可能就会超出范围</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">overflow----> 简单，下拉的一些场景避免使用</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">父类添加一个伪类:after（推荐）----> 写法稍微复杂，但是没有副作用，推荐使用</span></p>
</li>
</ol>
<h3 class="md-end-block md-heading"><span class="md-plain">5.5display与float对比</span></h3>
<ol class="ol-list" start="1">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">display：方向不可以控制</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。</span></p>
</li>
</ol>
<h2 class="md-end-block md-heading"><span class="md-plain">6、定位</span></h2>
<h3 class="md-end-block md-heading"><span class="md-plain">6.1、相对定位</span></h3>
<p class="md-end-block md-p"><span class="md-plain">相对定位：<span class="md-pair-s "><strong><span class="md-plain">positon：relstive；</span></strong><span class="md-softbreak"><br><span class="md-plain">相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中！原来的位置会被保留</span></span></span></span></p>
<pre class="md-fences mock-cm md-end-block md-fences-with-lineno">top:-20px;/*向上偏移20px*/<br>left:20px;/*向右偏移20px*/<br>bottom:10px;/*向上偏移10px*/<br>right:20px;/*向左偏移20px*/</pre>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><!DOCTYPE html><br> <span><html lang="en"><br> <span><head><br> <span> <meta charset="UTF-8"><br> <span> <title>相对定位</title><br> <span> <!--相对定位<br> <span> 相对于自己原来的位置进行偏移<br> <span> --><br> <span> <style><br> <span> body{<br> <span> padding: 20px;<br> <span> }<br> <span> div{<br> <span> margin: 10px;<br> <span> padding: 5px;<br> <span> font-size: 12px;<br> <span> line-height: 25px;<br> <span> }<br> <span> #father{<br> <span> border: #ffa538 1px solid;<br> <span> padding: 0;<br> <span> }<br> <span> #first{<br> <span> border: #b3ff38 1px solid;<br> <span> background-color: #ffa538;<br> <span> position: relative;/*相对定位：上下左右*/<br> <span> top: -20px;/*向上偏移20px*/<br> <span> left: 20px;/*向右偏移20px*/<br> <span> }<br> <span> #second{<br> <span> border: #427b11 1px solid;<br> <span> background-color: #66c77f;<br> <span> }<br> <span> #third{<br> <span> background-color: #b3ff38;<br> <span> border: #38d7ff 1px solid;<br> <span> position: relative;<br> <span> bottom: 10px;/*向上偏移10px*/<br> <span> }<br> <span> </style><br> <span></head><br> <span><body><br> <span><div id="father"><br> <span> <div id="first">第一个盒子</div><br> <span> <div id="second">第二个盒子</div><br> <span> <div id="third">第三个盒子</div><br> <span></div><br> <span></body><br> <span></html><br> <span><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-image md-img-loaded" data-src="https://z3.ax1x.com/2021/07/05/RI9VaD.png"><img src="https://z3.ax1x.com/2021/07/05/RI9VaD.png"></span></span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><style><br> <span> #box{<br> <span> height: 300px;<br> <span> width: 300px;<br> <span> border: 2px red solid;<br> <span> padding: 10px;<br> <span> }<br> <span> a{<br> <span> height: 100px;<br> <span> width: 100px;<br> <span> background-color: #ee73b7;<br> <span> color: white;<br> <span> text-align: center;<br> <span> text-decoration: none;<br> <span> line-height: 100px;/*设置行距100px*/<br> <span> display: block;/*设置方块*/<br> <span> }<br> <span> a:hover{<br> <span> background: #4158D0;<br> <span> }<br> <span> .a2{<br> <span> position: relative;<br> <span> left: 200px;<br> <span> top: -100px;<br> <span> }<br> <span> .a4{<br> <span> position: relative;<br> <span> left: 200px;<br> <span> top: -100px;<br> <span> }<br> <span> .a5{<br> <span> position: relative;<br> <span> left: 100px;<br> <span> top: -300px;<br> <span> }<br> <span> </style><br> <span></head><br> <span><body><br> <span><div id="box"><br> <span> <div class="a1"><a href="" >连接1</a></div><br> <span> <div class="a2"><a href="" >连接2</a></div><br> <span> <div class="a3"><a href="" >连接3</a></div><br> <span> <div class="a4"><a href="" >连接4</a></div><br> <span> <div class="a5"><a href="" >连接5</a></div><br> <span></div><br> <span></body><br> <span><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<h3 class="md-end-block md-heading"><span class="md-plain">6.2、绝对定位-absolute和固定定位-fixed </span></h3>
<p class="md-end-block md-p"><span class="md-plain">定位：基于xxx定位，上下左右~ <span class="md-softbreak"><br><span class="md-plain">1、没有父级元素定位的前提下，相对于浏览器定位<span class="md-softbreak"><br><span class="md-plain">2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移 <span class="md-softbreak"><br><span class="md-plain">3、在父级元素范围内移动 总结：相对一父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留</span></span></span></span></span></span></span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><head><br> <span> <meta charset="UTF-8"><br> <span> <title>Title</title><br> <span> <style><br> <span> body{<br> <span> height: 1000px;<br> <span> }<br> <span> div:nth-of-type(1){<br> <span> width: 100px;<br> <span> height: 100px;<br> <span> background-color: red;<br> <span> position: absolute;/*absolute 绝对定位*/<br> <span> right: 0;<br> <span> bottom: 0;<br> <span> }<br> <span> div:nth-of-type(2){<br> <span> width: 50px;<br> <span> height: 50px;<br> <span> background-color: #b3ff38;<br> <span> position: fixed;/*fixed 固定定位*/<br> <span> right: 0;<br> <span> bottom: 0;<br> <span> }<br> <span> </style><br> <span></head><br> <span><body><br> <span><div>div1</div><br> <span><div>div2</div><br> <span></body><br> <span><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<h3 class="md-end-block md-heading"><span class="md-pair-s "><strong><span class="md-plain">6.3、z-index</span></strong></span></h3>
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-image md-img-loaded" data-src="https://z3.ax1x.com/2021/07/05/RICSw8.png"><img src="https://z3.ax1x.com/2021/07/05/RICSw8.png"></span></span></p>
<p class="md-end-block md-p"><span class="md-plain">图层-z-index：默认是0，最高无限~999</span></p>
<p class="md-end-block md-p"><span class="md-plain">index.html代码：</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><!DOCTYPE html><br> <span><html lang="en"><br> <span><head><br> <span> <meta charset="UTF-8"><br> <span> <title>Title</title><br> <span> <link rel="stylesheet" href="css/style.css" type="text/css"><br> <span> <style></style><br> <span></head><br> <span><body><br> <span><div id="content"><br> <span> <ul><br> <span> <li><img src="images/2020.jpg" alt=""/></li><br> <span> <li class="tipText">学习微服务，找狂神</li><br> <span> <li class="tipBg"></li><br> <span> <li>时间：2099-01-01</li><br> <span> <li>地点：月球一号基地</li><br> <span> </ul><br> <span></div><br> <span></body><br> <span></html><br> <span><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">css代码：</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span>#content{<br> <span> width: 380px;<br> <span> padding: 0px;<br> <span> margin: 0px;<br> <span> overflow: hidden;<br> <span> font-size: 12px;<br> <span> line-height: 25px;<br> <span> border: 1px solid yellow;<br> <span>}<br> <span>ul,li{<br> <span> padding: 0px;<br> <span> margin: 0px;<br> <span> list-style: none;<br> <span>}<br> <span>/*父级元素相对定位*/<br> <span>#content ul{<br> <span> position: relative;<br> <span>}<br> <span>.tipText,.tipBg{<br> <span> position: absolute;<br> <span> width: 380px;<br> <span> height: 25px;<br> <span> top:216px<br> <span>}<br> <span>.tipText{<br> <span> color: white;<br> <span> z-index: 999;<br> <span>}<br> <span>.tipBg{<br> <span> background: orange;<br> <span> opacity: 0.5;/*背景透明度*/<br> <span> filter: alpha(opacity=50);<br> <span>}<br> <span><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<h2 class="md-end-block md-heading"><span class="md-plain">7、动画及视野拓展</span></h2>
<p class="md-end-block md-p"><span class="md-plain">css做动画过于繁琐，已有很多工具间接性做出</span></p>
<p class="md-end-block md-p"><span class="md-plain">百度搜索canvas动画、<span class="md-meta-i-cmd-link"><span class="md-plain">卡巴斯基监控站</span><span class="md-plain">（仅作了解）</span></span></span></p>
<h2 class="md-end-block md-heading"><span class="md-pair-s"><strong><span class="md-plain">8、总结</span></strong></span></h2>
<p class="md-end-block md-p"><span class="md-meta-i-c md-link"><span class="md-image md-img-loaded" data-src="https://z3.ax1x.com/2021/07/06/RIwYRO.png"><img src="https://z3.ax1x.com/2021/07/06/RIwYRO.png"></span></span></p><br><br>
来源：https://www.cnblogs.com/th11/p/14975892.html
頁:
[1]