学习CSS
<p> </p><h4 class="md-end-block md-heading"><span class="md-plain">初识</span></h4>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span><span class="cm-comment"><!--规范，<style> 可以编写css的代码，每一个声明，最好用分号结尾<br> <span> <span class="cm-comment">语法：<br> <span> <span class="cm-comment">选择器{<br> <span> <span class="cm-comment">声明1；<br> <span> <span class="cm-comment">声明2；<br> <span> <span class="cm-comment">声明3；<br> <span> <span class="cm-comment">}<br> <span><span class="cm-comment">--><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag">h1{<br> <span> <span class="cm-property">color: <span class="cm-keyword">aqua;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1<span class="cm-tag cm-bracket">>我是标题<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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">建议规范</span></h4>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span><span class="cm-comment"><!--规范，<style> 可以编写css的代码，每一个声明，最好用分号结尾<br> <span> <span class="cm-comment">语法：<br> <span> <span class="cm-comment">选择器{<br> <span> <span class="cm-comment">声明1；<br> <span> <span class="cm-comment">声明2；<br> <span> <span class="cm-comment">声明3；<br> <span> <span class="cm-comment">}<br> <span><span class="cm-comment">--><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">link <span class="cm-attribute">rel=<span class="cm-string">"stylesheet" <span class="cm-attribute">href=<span class="cm-string">"css/style.css"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1<span class="cm-tag cm-bracket">>我是标题<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-tag">h1{<br> <span> <span class="cm-property">color: <span class="cm-keyword">aqua;<br> <span>}</span></span></span></span></span></span></pre>
<h4 class="md-end-block md-heading"><span class="md-plain">css的导入方式</span></h4>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span><span class="cm-comment"><!-- 内部样式--><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag">h1{<br> <span> <span class="cm-property">color: <span class="cm-keyword">green;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">link <span class="cm-attribute">rel=<span class="cm-string">"stylesheet" <span class="cm-attribute">href=<span class="cm-string">"css/style.css"<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-comment"><!--优先级：就近原则--><br> <span><span><br> <span><span class="cm-comment"><!--行内样式：在标签元素中，编写一个style属性，编写样式即可--><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1 <span class="cm-attribute">style=<span class="cm-string">"color: red;"<span class="cm-tag cm-bracket">>我是标题<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-comment">/*外部样式*/<br> <span><span class="cm-tag">h1{<br> <span> <span class="cm-property">color: <span class="cm-keyword">yellow;<br> <span>}</span></span></span></span></span></span></span></span></pre>
<h5 class="md-end-block md-heading"><span class="md-plain">外部样式的两种方式</span></h5>
<ul class="ul-list" data-mark="*">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">链接式</span></p>
</li>
</ul>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">link <span class="cm-attribute">rel=<span class="cm-string">"stylesheet" <span class="cm-attribute">href=<span class="cm-string">"css/style.css"<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></pre>
<ul class="ul-list" data-mark="*">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">导入式</span></p>
</li>
</ul>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tab"> <span class="cm-def">@import <span class="cm-atom">url(<span class="cm-string">"css/style.css"); <br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">></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">选择器</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-plain">基本选择器</span></h5>
<ul class="ul-list" data-mark="*">
<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">类选择器 class</span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">Id选择器</span></p>
</li>
</ul>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-builtin">#style1 {<br> <span> <span class="cm-comment">/*id选择器 ： id必须保证全局唯一！<br> <span><span class="cm-comment"> #id名称{}<br> <span><span class="cm-comment"> 不遵循就近原则，固定的<br> <span><span class="cm-comment"> id选择器>class选择器>标签选择器<br> <span><span class="cm-comment"> */<br> <span> <span class="cm-property">color: <span class="cm-atom">#f60707;<br> <span> }<br> <span> <span class="cm-qualifier">.class_style{<br> <span> <span class="cm-comment">/* 类选择器的样式： .class的名称{}<br> <span><span class="cm-comment"> 好处：可以多个标签归类，是同一个class*/<br> <span> <span class="cm-property">color: <span class="cm-atom">#11e311;<br> <span> }<br> <span> <span class="cm-tag">h1{<br> <span> <span class="cm-comment">/*标签选择器：会选择到页面上所有这个标签的元素*/<br> <span> <span class="cm-property">color: <span class="cm-atom">#1919e7;<br> <span> }<br> <span> <span class="cm-tag">p{<br> <span> <span class="cm-property">color: <span class="cm-atom">#f50707;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1 <span class="cm-attribute">class=<span class="cm-string">"class_style" <span class="cm-attribute">id=<span class="cm-string">"style1"<span class="cm-tag cm-bracket">>标题1<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1 <span class="cm-attribute">class=<span class="cm-string">"class_style"<span class="cm-tag cm-bracket">>标题2<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1 <span class="cm-attribute">class=<span class="cm-string">"class_style"<span class="cm-tag cm-bracket">>标题3<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1<span class="cm-tag cm-bracket">>标题4<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">h1<span class="cm-tag cm-bracket">>标题5<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>你好啊，我的朋友<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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>
<h5 class="md-end-block md-heading"><span class="md-plain">层次选择器</span></h5>
<ul class="ul-list" data-mark="*">
<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>
</ul>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-comment">/*后代选择器：在某个元素后代*/<br> <span> <span class="cm-tag">body <span class="cm-tag">p{<br> <span> <span class="cm-property">background: <span class="cm-atom">#c8e719;<br> <span> }<br> <span> <span class="cm-comment">/*子选择器，一代*/<br> <span> <span class="cm-tag">body><span class="cm-tag">p{<br> <span> <span class="cm-property">background: <span class="cm-atom">#f50707;<br> <span> }<br> <span> <span class="cm-comment">/*相邻兄弟选择器 只有一个（向下）*/<br> <span> <span class="cm-qualifier">.active + <span class="cm-tag">p{<br> <span> <span class="cm-property">background: <span class="cm-atom">#1919e7;<br> <span> }<br> <span> <span class="cm-comment">/*通用兄弟选择器，当前选择元素的向下的所有兄弟元素*/<br> <span> <span class="cm-qualifier">.inactive ~ <span class="cm-tag">p{<br> <span> <span class="cm-property">background: <span class="cm-keyword">aqua;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>p0<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p <span class="cm-attribute">class=<span class="cm-string">"active"<span class="cm-tag cm-bracket">>p1<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>p2<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>p3<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p <span class="cm-attribute">class=<span class="cm-string">"inactive"<span class="cm-tag cm-bracket">>p4<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>p5<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>p6<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">ul<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">li<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>p4<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">li<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">li<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>p5<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">li<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">li<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>p6<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">li<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">ul<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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>
<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><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-comment">/*选择子类的第一个元素*/<br> <span> <span class="cm-tag">ul <span class="cm-tag">li:<span class="cm-variable-3">first-child{<br> <span> <span class="cm-property">background: <span class="cm-atom">#f50707;<br> <span> }<br> <span> <span class="cm-comment">/*选择子类的第一个元素*/<br> <span> <span class="cm-tag">ul <span class="cm-tag">li:<span class="cm-variable-3">last-child{<br> <span> <span class="cm-property">background: <span class="cm-atom">#11e311;<br> <span> }<br> <span> <span class="cm-comment">/*选中p1：定位到父元素，选择当前的第一个元素<br> <span><span class="cm-comment"> 选中当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效*/<br> <span> <span class="cm-tag">p:<span class="cm-variable-3">nth-child(<span class="cm-number">3){<br> <span> <span class="cm-property">background: <span class="cm-atom">#1919e7;<br> <span> }<br> <span><span><br> <span> <span class="cm-tag">p:<span class="cm-variable-3">nth-child(<span class="cm-number">4){<br> <span> <span class="cm-property">background: <span class="cm-atom">#e719c5;<br> <span> }<br> <span> <span class="cm-comment">/* 选中父元素下的p元素的第二个类型，不必须是当前元素*/<br> <span> <span class="cm-tag">p:<span class="cm-variable-3">nth-of-type(<span class="cm-number">2){<br> <span> <span class="cm-property">background: <span class="cm-atom">#c8e719;<br> <span> }<br> <span><span><br> <span> <span class="cm-tag">a:<span class="cm-variable-3">hover{<br> <span> <span class="cm-property">background: <span class="cm-keyword">aqua;<br> <span> }<br> <span><span><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">""<span class="cm-tag cm-bracket">>2131213141<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">h1<span class="cm-tag cm-bracket">>好<span class="cm-tag cm-bracket"></<span class="cm-tag">h1<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>p1<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>p2<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">>p3<span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">ul<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">li<span class="cm-tag cm-bracket">>li1<span class="cm-tag cm-bracket"></<span class="cm-tag">li<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">li<span class="cm-tag cm-bracket">>li2<span class="cm-tag cm-bracket"></<span class="cm-tag">li<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">li<span class="cm-tag cm-bracket">>li3<span class="cm-tag cm-bracket"></<span class="cm-tag">li<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">ul<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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>
<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><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-qualifier">.demo <span class="cm-tag">a{<br> <span> <span class="cm-property">float: <span class="cm-atom">left;<br> <span> <span class="cm-property">display: <span class="cm-atom">block;<br> <span> <span class="cm-property">height: <span class="cm-number">50px;<br> <span> <span class="cm-property">width: <span class="cm-number">50px;<br> <span> <span class="cm-property">border-radius: <span class="cm-number">10px;<br> <span> <span class="cm-property">background: <span class="cm-atom">#19e723;<br> <span> <span class="cm-property">text-align: <span class="cm-atom">center;<br> <span> <span class="cm-property">color: <span class="cm-atom">#d21a1a;<br> <span> <span class="cm-property">text-decoration: <span class="cm-atom">none;<br> <span> <span class="cm-property">margin-right: <span class="cm-number">8px;<br> <span> <span class="cm-property">font:<span class="cm-atom">bold <span class="cm-number">10px/<span class="cm-number">50px <span class="cm-variable">Arial;<br> <span> }<br> <span> <span class="cm-comment">/*属性名 ， 属性名 = 属性值<br> <span><span class="cm-comment">= 绝对等于<br> <span><span class="cm-comment">*= 包含<br> <span><span class="cm-comment">^= 以什么开头<br> <span><span class="cm-comment">$= 以什么结尾<br> <span><span class="cm-comment">穿在id属性的元素 a[]{}<br> <span><span class="cm-comment">*/<br> <span> <span class="cm-tag">a[<span class="cm-tag">id]{<br> <span> <span class="cm-property">background: <span class="cm-atom">#c8e719;<br> <span> }<br> <span> <span class="cm-tag">a[<span class="cm-tag">id=<span class="cm-tag">first]{<br> <span> <span class="cm-property">color: <span class="cm-atom">#131212;<br> <span> }<br> <span> <span class="cm-tag">a[<span class="cm-tag">class*=<span class="cm-tag">links]{<br> <span> <span class="cm-property">text-align: <span class="cm-atom">end;<br> <span> }<br> <span> <span class="cm-tag">a[<span class="cm-tag">href*=<span class="cm-tag">abc]{<br> <span> <span class="cm-property">background: <span class="cm-variable">darkgrey;<br> <span> }<br> <span> <span class="cm-tag">a[<span class="cm-tag">href^=<span class="cm-tag">images]{<br> <span> <span class="cm-property">background: <span class="cm-atom">#1919e7;<br> <span> }<br> <span> <span class="cm-tag">a[<span class="cm-tag">href$=<span class="cm-tag">doc]{<br> <span> <span class="cm-property">background: <span class="cm-keyword">aqua;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p <span class="cm-attribute">class=<span class="cm-string">"demo"<span class="cm-tag cm-bracket">><br> <span><span><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"https://www.baidu.com" <span class="cm-attribute">class=<span class="cm-string">"links item first" <span class="cm-attribute">id=<span class="cm-string">"first"<span class="cm-tag cm-bracket">>1<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"https://www.study.com" <span class="cm-attribute">class=<span class="cm-string">"links item active"<span class="cm-tag cm-bracket">>2<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"images/123.png" <span class="cm-attribute">class=<span class="cm-string">"links item"<span class="cm-tag cm-bracket">>3<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"images/123.gif" <span class="cm-attribute">class=<span class="cm-string">"links item"<span class="cm-tag cm-bracket">>4<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"images/123.jpg" <span class="cm-attribute">class=<span class="cm-string">"links item"<span class="cm-tag cm-bracket">>5<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"abc" <span class="cm-attribute">class=<span class="cm-string">"links item"<span class="cm-tag cm-bracket">>6<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"/abc.pdf" <span class="cm-attribute">class=<span class="cm-string">"links item"<span class="cm-tag cm-bracket">>7<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"/dnf.doc" <span class="cm-attribute">class=<span class="cm-string">"links item"<span class="cm-tag cm-bracket">>8<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"lol.doc" <span class="cm-attribute">class=<span class="cm-string">"links item"<span class="cm-tag cm-bracket">>9<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"http://www.baidu.com" <span class="cm-attribute">class=<span class="cm-string">"links item last" <span class="cm-attribute">id=<span class="cm-string">"last"<span class="cm-tag cm-bracket">>10<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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">美化网页元素</span></h4>
<h5 class="md-end-block md-heading"><span class="md-plain">span</span></h5>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag">span{<br> <span> <span class="cm-property">font-size: <span class="cm-number">50px;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span>初识 <span class="cm-tag cm-bracket"><<span class="cm-tag">span<span class="cm-tag cm-bracket">>java<span class="cm-tag cm-bracket"></<span class="cm-tag">span<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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>
<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><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-qualifier">.p1{<br> <span> <span class="cm-property">font-family: 仿宋;<br> <span> <span class="cm-property">font-weight: <span class="cm-atom">bolder;<br> <span> <span class="cm-property">color: <span class="cm-atom">#131212;<br> <span> }<br> <span> <span class="cm-qualifier">.p2{<br> <span> <span class="cm-property">font: <span class="cm-atom">oblique <span class="cm-atom">lighter <span class="cm-number">18px 新宋体;<br> <span> }<br> <span> <span class="cm-qualifier">.p3{<br> <span> <span class="cm-property">font-family: <span class="cm-string">"DejaVu Math TeX Gyre";<br> <span> <span class="cm-property">color: <span class="cm-atom">#e719c5;<br> <span> <span class="cm-property">font-size: <span class="cm-number">40px;<br> <span> }<br> <span> <span class="cm-qualifier">.p4{<br> <span> <span class="cm-property">font-family: <span class="cm-string">"Arial Black",楷体;<br> <span> <span class="cm-property">color: <span class="cm-atom">#0040ff;<br> <span> <span class="cm-property">font-size: <span class="cm-number">30px;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p <span class="cm-attribute">class=<span class="cm-string">"p1"<span class="cm-tag cm-bracket">><br> <span>手中雕刻生花刀锋千转蜿蜒成画盛名功德塔 是桥畔某处人家<br> <span>春风绕过发梢红纱 刺绣赠他眉目刚烈拟作妆嫁 轰烈流沙枕上白发<br> <span>杯中酒比划年少风雅鲜衣怒马也不过一刹那 难免疏漏儿时檐下<br> <span>莫测变化隔却山海转身从容煎茶一生长 重寄一段过往<br> <span>将希冀都流放可曾添些荒唐才记得你的模样 一身霜<br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p <span class="cm-attribute">class=<span class="cm-string">"p2"<span class="cm-tag cm-bracket">><br> <span>谁提笔只两行换一隅你安康 便销得这沧桑你还在我的心上<br> <span>手中雕刻生花刀锋千转蜿蜒成画 盛名功德塔是桥畔某处人家<br> <span>春风绕过发梢红纱 刺绣赠他眉目刚烈拟作妆嫁轰烈流沙枕上白发<br> <span>杯中酒比划年少风雅鲜衣怒马 也不过一刹那难免疏漏儿时檐下<br> <span>莫测变化隔却山海 转身从容煎茶 一生长 重寄一段过往<br> <span>将希冀都流放可曾添些荒唐 才记得你的模样 一身霜<br> <span>谁提笔只两行 换一隅你安康 便销得这沧桑你还在我的心上<br> <span>一生长重寄一段过往将希冀都流放可曾添些荒唐 才记得你的模样<br> <span>一身霜谁提笔只两行换一隅你安康便销得这沧桑 你还在我的心上<br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p <span class="cm-attribute">class=<span class="cm-string">"p3"<span class="cm-tag cm-bracket">><br> <span>O no! it is an ever-fixed markThat looks on tempests and is never shaken;<br> <span>It is the star to every wandering bark,Whose worth's unknown, although his highth be taken<br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p <span class="cm-attribute">class=<span class="cm-string">"p4"<span class="cm-tag cm-bracket">><br> <span>Love's not Time's fool,<br> <span>though rosy lips and cheeksWithin his bending sickle's compass come:<br> <span>Love alters not with his brief hours and weeks,<br> <span>But bears it out even to the edge of doom.<br> <span>爱不受时光的播弄，尽管红颜<br> <span>和皓齿难免遭受时光的毒手；<br> <span>爱并不因瞬息的改变而改变，<br> <span>它巍然矗立直到末日的尽头。<br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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>
<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><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-comment">/*默认的样式*/<br> <span> <span class="cm-tag">a{<br> <span> <span class="cm-property">text-decoration: <span class="cm-atom">none;<br> <span> <span class="cm-property">color: <span class="cm-atom">#19e723;<br> <span> }<br> <span> <span class="cm-comment">/*鼠标悬浮时的状态*/<br> <span> <span class="cm-tag">a:<span class="cm-variable-3">hover{<br> <span> <span class="cm-property">color: <span class="cm-atom">#e719c5;<br> <span> <span class="cm-property">font-size: <span class="cm-number">30px;<br> <span> }<br> <span> <span class="cm-comment">/*鼠标按压未释放的状态*/<br> <span> <span class="cm-tag">a:<span class="cm-variable-3">active{<br> <span> <span class="cm-property">color: <span class="cm-atom">#1919e7;<br> <span> }<br> <span> <span class="cm-builtin">#price{<br> <span> <span class="cm-property">text-shadow: <span class="cm-atom">#131212 <span class="cm-number">10px <span class="cm-number">10px <span class="cm-number">3px;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"#"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">img <span class="cm-attribute">src=<span class="cm-string">"../images/1.jpg" <span class="cm-attribute">alt=<span class="cm-string">""<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"#"<span class="cm-tag cm-bracket">>码出高效：Java开发手册<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">""<span class="cm-tag cm-bracket">>作者：孤尽老师<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"" <span class="cm-attribute">id=<span class="cm-string">"price"<span class="cm-tag cm-bracket">> ￥99<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">p<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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>
<h5 class="md-end-block md-heading"><span class="md-plain">列表</span></h5>
<h6 class="md-end-block md-heading"><span class="md-plain">html</span></h6>
<pre class="md-fences mock-cm md-end-block md-fences-with-lineno"><!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>列表样式</title><br><link rel="stylesheet" href="css/style.css" type="text/css"><br></head><br><body><br><div id="nav"><br> <h1 class="title">全部商品分类</h1><br> <ul class="JS_navCtn cate_menu"><br> <li class="cate_menu_item" ><br> <a href="#">图书</a><br> <a href="#">音像</a><br> <a href="#">数字产品</a><br> </li><br> <li class="cate_menu_item" ><br> <a href="#">家用电器</a><br> <a href="#">手机</a><br> <a href="#">数码</a><br> </li><br> <li class="cate_menu_item" ><br> <a href="#">电脑</a><br> <a href="#">办公</a><br> <a href="#">外设</a><br> </li><br> <li class="cate_menu_item" ><br> <a href="#">家具</a><br> <a href="#">家装</a><br> <a href="#">厨具</a><br> </li><br> <li class="cate_menu_item" ><br> <a href="#">服装鞋帽</a><br> <a href="#">个护化妆</a><br> </li><br> <li class="cate_menu_item" ><br> <a href="#">礼品箱包</a><br> <a href="#">钟表</a><br> </li><br> <li class="cate_menu_item" ><br> <a href="#">食品饮料</a><br> <a href="#">保健食品</a><br> </li><br> <li class="cate_menu_item" ><br> <a href="#">彩票</a><br> <a href="#">旅行</a><br> <a href="#">充值</a><br> </li><br> </ul><br></div><br></body><br></html></pre>
<h6 class="md-end-block md-heading"><span class="md-plain">css</span></h6>
<pre class="md-fences mock-cm md-end-block md-fences-with-lineno">#nav{<br> width: 300px;<br> background: #7d7676;<br>}<br>.title{<br> font-size: 18px;<br> font-weight: bold;<br> text-indent:1em;<br> line-height: 35px;<br> /*颜色 背景 位置 平铺方式*/<br> background: red url("../../../images/down.png") 255px 10px no-repeat;<br>}<br>/*ul li*/<br>/*<br>list-style:<br> none：去掉圆点<br> circle：空心圆<br> decimal ： 数字<br> square：正方形<br>*/<br>/*ul{*/<br>/* background: #7d7676;*/<br>/*}*/<br>ul li{<br> height: 30px;<br> list-style: none;<br> text-indent: 1em;<br> background-image: url("../../../images/right.png") ;<br> background-repeat: no-repeat;<br> background-position: 217px 2px;<br>}<br>a{<br> color: #000;<br> text-decoration: none;<br> font-size: 14px;<br>}<br>a:hover{<br> color: orange;<br> text-decoration: underline;<br>}</pre>
<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><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag">div{<br> <span> <span class="cm-property">width: <span class="cm-number">1000px;<br> <span> <span class="cm-property">height: <span class="cm-number">900px;<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">solid <span class="cm-keyword">red;<br> <span> <span class="cm-property">background-image: <span class="cm-atom">url(<span class="cm-string">"../../images/1.jpg");<br> <span> }<br> <span> <span class="cm-qualifier">.div1{<br> <span> <span class="cm-property">background-repeat: <span class="cm-atom">repeat-x;<br> <span> }<br> <span> <span class="cm-qualifier">.div2{<br> <span> <span class="cm-property">background-repeat: <span class="cm-atom">repeat-y;<br> <span> }<br> <span> <span class="cm-qualifier">.div3{<br> <span> <span class="cm-property">background-repeat: <span class="cm-atom">no-repeat;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">class=<span class="cm-string">"div1"<span class="cm-tag cm-bracket">></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">class=<span class="cm-string">"div2"<span class="cm-tag cm-bracket">></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">class=<span class="cm-string">"div3"<span class="cm-tag cm-bracket">></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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>
<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><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span><span class="cm-comment"><!--径向渐变，圆形渐变--><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag">body{<br> <span> <span class="cm-property">background-image: <span class="cm-atom">linear-gradient(<span class="cm-number">19deg,<span class="cm-atom">#1919e7 <span class="cm-number">0%,<span class="cm-atom">#B721FF <span class="cm-number">100%);<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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">盒子模型</span></h4>
<h5 class="md-end-block md-heading"><span class="md-plain">what</span></h5>
<p class="md-end-block md-p"><span class="md-plain">margin：外边距</span></p>
<p class="md-end-block md-p"><span class="md-plain">padding：内边距</span></p>
<p class="md-end-block md-p"><span class="md-plain">border：边框</span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">边框</span></h5>
<ul class="ul-list" data-mark="*">
<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>
</ul>
<h5 class="md-end-block md-heading"><span class="md-plain">内外边距</span></h5>
<p class="md-end-block md-p"><span class="md-pair-s "><strong>边框及内外边距实例</strong></span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span><span class="cm-comment"><!--外边距的妙用：居中元素--><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span><br> <span> <span class="cm-builtin">#app{<br> <span> <span class="cm-property">width: <span class="cm-number">300px;<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">solid <span class="cm-keyword">red;<br> <span> <span class="cm-property">margin: <span class="cm-number">0 <span class="cm-atom">auto;<br> <span> }<br> <span> <span class="cm-comment">/*<br> <span><span class="cm-comment"> margin-top: 0;上下左右<br> <span><span class="cm-comment"> margin-top: 0 1px;上下为0 左右为1<br> <span><span class="cm-comment"> margin-top: 0 1px 2px 3px; 顺时针旋转<br> <span><span class="cm-comment"> */<br> <span> <span class="cm-tag">h2{<br> <span> <span class="cm-property">font-size: <span class="cm-number">16px;<br> <span> <span class="cm-property">background-color: <span class="cm-keyword">aqua;<br> <span> <span class="cm-property">line-height: <span class="cm-number">30px;<br> <span> <span class="cm-property">color: <span class="cm-keyword">white;<br> <span> <span class="cm-property">margin-top: <span class="cm-number">0;<br> <span> }<br> <span> <span class="cm-tag">form{<br> <span> <span class="cm-property">background: <span class="cm-keyword">aqua;<br> <span> }<br> <span> <span class="cm-tag">input{<br> <span> <span class="cm-property">border: <span class="cm-number">3px <span class="cm-atom">solid <span class="cm-keyword">black;<br> <span> }<br> <span> <span class="cm-tag">div:<span class="cm-variable-3">nth-of-type(<span class="cm-number">2) {<br> <span> <span class="cm-property">padding: <span class="cm-number">10px <span class="cm-number">2px;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"app"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">h2<span class="cm-tag cm-bracket">>会员登录<span class="cm-tag cm-bracket"></<span class="cm-tag">h2<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">form <span class="cm-attribute">action=<span class="cm-string">"#"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">span<span class="cm-tag cm-bracket">>用户名：<span class="cm-tag cm-bracket"></<span class="cm-tag">span<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">input <span class="cm-attribute">type=<span class="cm-string">"text"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">span<span class="cm-tag cm-bracket">>密码：<span class="cm-tag cm-bracket"></<span class="cm-tag">span<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">input <span class="cm-attribute">type=<span class="cm-string">"text"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">span<span class="cm-tag cm-bracket">>邮箱：<span class="cm-tag cm-bracket"></<span class="cm-tag">span<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">input <span class="cm-attribute">type=<span class="cm-string">"text"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">form<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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>
<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><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag">div{<br> <span> <span class="cm-property">width: <span class="cm-number">100px;<br> <span> <span class="cm-property">height: <span class="cm-number">50px;<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">solid <span class="cm-keyword">red;<br> <span> <span class="cm-property">border-radius: <span class="cm-number">50px <span class="cm-number">50px <span class="cm-number">0px <span class="cm-number">0px;<br> <span> }<br> <span> <span class="cm-tag">img{<br> <span> <span class="cm-property">border-radius: <span class="cm-number">300px;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">div<span class="cm-tag cm-bracket">></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">img <span class="cm-attribute">src=<span class="cm-string">"../../images/1.bmp" <span class="cm-attribute">alt=<span class="cm-string">""<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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>
<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><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag">img{<br> <span> <span class="cm-property">width: <span class="cm-number">100px;<br> <span> <span class="cm-property">height: <span class="cm-number">100px;<br> <span> <span class="cm-comment">/*border: 10px solid red;*/<br> <span> <span class="cm-property">border-radius: <span class="cm-number">300px;<br> <span> <span class="cm-property">box-shadow: <span class="cm-number">10px <span class="cm-number">10px <span class="cm-number">100px <span class="cm-keyword">yellow;<br> <span> <span class="cm-property">margin: <span class="cm-number">0 <span class="cm-atom">auto;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">style=<span class="cm-string">"width: 1500px;display: block;text-align: center"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">img <span class="cm-attribute">src=<span class="cm-string">"../../images/1.bmp" <span class="cm-attribute">alt=<span class="cm-string">""<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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">浮动</span></h4>
<h5 class="md-end-block md-heading"><span class="md-plain">标准文档流</span></h5>
<ul class="ul-list" data-mark="*">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">块级元素：独占一行</span></p>
</li>
</ul>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span>h1-h6 p div 列表...</span></pre>
<ul class="ul-list" data-mark="*">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">行内元素：不独占一行</span></p>
</li>
</ul>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span>span a img stong...</span></pre>
<p class="md-end-block md-p"><span class="md-plain">行内元素可以包含在块级元素中，反之不可以</span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">display</span></h5>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span><span class="cm-comment"><!--<br> <span><span class="cm-comment">block 块元素<br> <span><span class="cm-comment">inline 行内元素<br> <span><span class="cm-comment">inline-block 是块元素，但是可以内联，在一行<br> <span><span class="cm-comment">none 消失<br> <span><span class="cm-comment">--><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag">div{<br> <span> <span class="cm-property">width: <span class="cm-number">100px;<br> <span> <span class="cm-property">height: <span class="cm-number">100px;<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">solid <span class="cm-keyword">red;<br> <span> <span class="cm-property">display: <span class="cm-atom">inline-block;<br> <span> }<br> <span> <span class="cm-tag">span{<br> <span> <span class="cm-property">width: <span class="cm-number">100px;<br> <span> <span class="cm-property">height: <span class="cm-number">100px;<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">dashed <span class="cm-keyword">green;<br> <span> <span class="cm-property">display: <span class="cm-atom">inline-block;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">div<span class="cm-tag cm-bracket">>div<span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">span<span class="cm-tag cm-bracket">>span<span class="cm-tag cm-bracket"></<span class="cm-tag">span<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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">也是实现行内元素排列的一种方案，大多数使用float实现。</span></p>
<h5 class="md-end-block md-heading"><span class="md-plain">float</span></h5>
<ul class="ul-list" data-mark="*">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">左右浮动</span></p>
</li>
</ul>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>浮动<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">link <span class="cm-attribute">rel=<span class="cm-string">"stylesheet" <span class="cm-attribute">href=<span class="cm-string">"css/style.css" <span class="cm-attribute">type=<span class="cm-string">"text/css"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"father"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">class=<span class="cm-string">"layer01"<span class="cm-tag cm-bracket">><<span class="cm-tag">img <span class="cm-attribute">src=<span class="cm-string">"../images/1.jpg" <span class="cm-attribute">alt=<span class="cm-string">""<span class="cm-tag cm-bracket">></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">class=<span class="cm-string">"layer02"<span class="cm-tag cm-bracket">><<span class="cm-tag">img <span class="cm-attribute">src=<span class="cm-string">"../images/1.bmp" <span class="cm-attribute">alt=<span class="cm-string">""<span class="cm-tag cm-bracket">></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">class=<span class="cm-string">"layer03"<span class="cm-tag cm-bracket">><<span class="cm-tag">img <span class="cm-attribute">src=<span class="cm-string">"../images/right.png" <span class="cm-attribute">alt=<span class="cm-string">""<span class="cm-tag cm-bracket">></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">class=<span class="cm-string">"layer04"<span class="cm-tag cm-bracket">><br> <span> 浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-tag">div{<br> <span> <span class="cm-property">margin: <span class="cm-number">10px;<br> <span> <span class="cm-property">padding: <span class="cm-number">5px;<br> <span>}<br> <span><span class="cm-builtin">#father{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">solid <span class="cm-keyword">black;<br> <span>}<br> <span><span class="cm-qualifier">.layer01{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">dashed <span class="cm-keyword">black;<br> <span> <span class="cm-property">display: <span class="cm-atom">inline-block;<br> <span> <span class="cm-property">float: <span class="cm-atom">left;<br> <span>}<br> <span><span class="cm-qualifier">.layer02{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">dashed <span class="cm-keyword">black;<br> <span> <span class="cm-property">display: <span class="cm-atom">inline-block;<br> <span> <span class="cm-property">float:<span class="cm-atom">right;<br> <span>}<br> <span><span class="cm-qualifier">.layer03{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">dashed <span class="cm-keyword">black;<br> <span> <span class="cm-property">display: <span class="cm-atom">inline-block;<br> <span> <span class="cm-property">float:<span class="cm-atom">right;<br> <span>}<br> <span><span class="cm-qualifier">.layer04{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">dashed <span class="cm-keyword">black;<br> <span> <span class="cm-property">font-size: <span class="cm-number">12px;<br> <span> <span class="cm-property">line-height: <span class="cm-number">23px;<br> <span> <span class="cm-property">display: <span class="cm-atom">inline-block;<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></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<h5 class="md-end-block md-heading"><span class="md-plain">父级边框塌陷的问题</span></h5>
<p class="md-end-block md-p"><span class="md-pair-s "><strong>解决方案</strong></span></p>
<ol class="ol-list" start="">
<li class="md-list-item">
<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><span class="cm-builtin">#father{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">solid <span class="cm-keyword">black;<br> <span> <span class="cm-property">height: <span class="cm-number">800px;<br> <span>}</span></span></span></span></span></span></span></span></span></span></span></pre>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">增加一个空的div标签，清楚浮动</span></p>
</li>
</ol>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">class=<span class="cm-string">"clear"<span class="cm-tag cm-bracket">></<span class="cm-tag">div<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></pre>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-qualifier">.clear{<br> <span> <span class="cm-property">clear: <span class="cm-atom">both;<br> <span> <span class="cm-property">margin: <span class="cm-number">0;<br> <span> <span class="cm-property">padding: <span class="cm-number">0;<br> <span>}</span></span></span></span></span></span></span></span></span></span></span></span></pre>
<ol class="ol-list" start="3">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">overflow</span></p>
</li>
</ol>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span>在父级元素中增加一个 <span class="cm-tag">overflow: <span class="cm-variable-3">hidden;</span></span></span></pre>
<ol class="ol-list" start="4">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-plain">父类添加一个伪类 :after</span></p>
</li>
</ol>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-builtin">#father:<span class="cm-variable-3">after{<br> <span> <span class="cm-property">content: <span class="cm-string">'';<br> <span> <span class="cm-property">display: <span class="cm-atom">block;<br> <span> <span class="cm-property">clear: <span class="cm-atom">both;<br> <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-pair-s "><strong>小结</strong></span></p>
<ul class="ul-list" data-mark="*">
<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">父类添加伪类（写法稍微复杂，但是没有副作用，推荐使用）</span></p>
</li>
</ul>
<h5 class="md-end-block md-heading"><span class="md-plain">对比</span></h5>
<ul class="ul-list" data-mark="*">
<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>
</ul>
<h4 class="md-end-block md-heading"><span class="md-plain">定位</span></h4>
<h5 class="md-end-block md-heading"><span class="md-plain">相对定位 position: relative;</span></h5>
<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><span class="cm-tag">top: <span class="cm-number">-10px;<br> <span><span class="cm-tag">right: <span class="cm-number">10px;<br> <span><span class="cm-tag">bottom: <span class="cm-number">-10px;<br> <span><span class="cm-tag">left: <span class="cm-number">10px;</span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-pair-s"><strong>实例</strong></span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag">body{<br> <span> <span class="cm-property">padding: <span class="cm-number">50px;<br> <span> }<br> <span> <span class="cm-builtin">#father{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">solid <span class="cm-atom">#666;<br> <span> <span class="cm-property">padding: <span class="cm-number">0;<br> <span> }<br> <span> <span class="cm-builtin">#first{<br> <span> <span class="cm-property">background-color: <span class="cm-atom">#f50707 ;<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">dashed <span class="cm-atom">#6f2121;<br> <span> <span class="cm-property">position: <span class="cm-atom">relative;<br> <span> <span class="cm-property">top: <span class="cm-number">-10px;<br> <span> <span class="cm-property">right: <span class="cm-number">10px;<br> <span> }<br> <span> <span class="cm-builtin">#second{<br> <span> <span class="cm-property">background-color: <span class="cm-atom">#07f527;<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">dashed <span class="cm-atom">#84b482;<br> <span> }<br> <span> <span class="cm-builtin">#third{<br> <span> <span class="cm-property">background-color: <span class="cm-atom">#4a59b8;<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">dashed <span class="cm-atom">#465fb8;<br> <span> <span class="cm-property">position: <span class="cm-atom">relative;<br> <span> <span class="cm-property">bottom: <span class="cm-number">-10px;<br> <span> <span class="cm-property">left: <span class="cm-number">10px;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"father"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"first" <span class="cm-tag cm-bracket">>第一个盒子<span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"second"<span class="cm-tag cm-bracket">>第二个盒子<span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"third"<span class="cm-tag cm-bracket">>第三个盒子<span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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-pair-s "><strong>练习题</strong></span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-qualifier">.box{<br> <span> <span class="cm-property">width: <span class="cm-number">300px;<br> <span> <span class="cm-property">height: <span class="cm-number">300px;<br> <span> <span class="cm-property">border: <span class="cm-number">2px <span class="cm-atom">solid <span class="cm-atom">#f50707;<br> <span> <span class="cm-property">padding: <span class="cm-number">3px;<br> <span> }<br> <span> <span class="cm-tag">a{<br> <span> <span class="cm-property">width: <span class="cm-number">100px;<br> <span> <span class="cm-property">height: <span class="cm-number">100px;<br> <span> <span class="cm-property">background: <span class="cm-atom">#bf63b0;<br> <span> <span class="cm-property">text-decoration: <span class="cm-atom">none;<br> <span> <span class="cm-property">line-height: <span class="cm-number">100px;<br> <span> <span class="cm-property">text-align: <span class="cm-atom">center;<br> <span> <span class="cm-property">display: <span class="cm-atom">block;<br> <span> }<br> <span> <span class="cm-tag">a:<span class="cm-variable-3">hover{<br> <span> <span class="cm-property">background: <span class="cm-atom">#4848c2;<br> <span> }<br> <span> <span class="cm-qualifier">.a2,<span class="cm-qualifier">.a4{<br> <span> <span class="cm-property">position: <span class="cm-atom">relative;<br> <span> <span class="cm-property">top: <span class="cm-number">-100px;<br> <span> <span class="cm-property">right: <span class="cm-number">-200px;<br> <span> }<br> <span> <span class="cm-qualifier">.a5{<br> <span> <span class="cm-property">position: <span class="cm-atom">relative;<br> <span> <span class="cm-property">top: <span class="cm-number">-300px;<br> <span> <span class="cm-property">right: <span class="cm-number">-100px;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">class=<span class="cm-string">"box"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"#" <span class="cm-attribute">class=<span class="cm-string">"a1"<span class="cm-tag cm-bracket">>链接1<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"#" <span class="cm-attribute">class=<span class="cm-string">"a2"<span class="cm-tag cm-bracket">>链接2<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"#" <span class="cm-attribute">class=<span class="cm-string">"a3"<span class="cm-tag cm-bracket">>链接3<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"#" <span class="cm-attribute">class=<span class="cm-string">"a4"<span class="cm-tag cm-bracket">>链接4<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">a <span class="cm-attribute">href=<span class="cm-string">"#" <span class="cm-attribute">class=<span class="cm-string">"a5"<span class="cm-tag cm-bracket">>链接5<span class="cm-tag cm-bracket"></<span class="cm-tag">a<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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>
<h5 class="md-end-block md-heading"><span class="md-plain">绝对定位</span></h5>
<p class="md-end-block md-p"><span class="md-plain">定位：基于XXX定位，上下左右~</span></p>
<ol class="ol-list">
<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><ol class="ol-list" start="3">
<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-plain">相对于父级元素或者浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留</span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-tag">position: <span class="cm-variable-3">absolute;<br> <span><span class="cm-tag">right: <span class="cm-number">10px;</span></span></span></span></span></span></pre>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag">body{<br> <span> <span class="cm-property">padding: <span class="cm-number">50px;<br> <span> }<br> <span> <span class="cm-builtin">#father{<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">solid <span class="cm-atom">#666;<br> <span> <span class="cm-property">padding: <span class="cm-number">0;<br> <span> <span class="cm-property">position: <span class="cm-atom">relative;<br> <span> }<br> <span> <span class="cm-builtin">#first{<br> <span> <span class="cm-property">background-color: <span class="cm-atom">#f50707 ;<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">dashed <span class="cm-atom">#6f2121;<br> <span> <span class="cm-property">position: <span class="cm-atom">absolute;<br> <span> <span class="cm-property">right: <span class="cm-number">10px;<br> <span> }<br> <span> <span class="cm-builtin">#second{<br> <span> <span class="cm-property">background-color: <span class="cm-atom">#07f527;<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">dashed <span class="cm-atom">#84b482;<br> <span> }<br> <span> <span class="cm-builtin">#third{<br> <span> <span class="cm-property">background-color: <span class="cm-atom">#4a59b8;<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">dashed <span class="cm-atom">#465fb8;<br> <span> <span class="cm-property">position: <span class="cm-atom">relative;<br> <span> <span class="cm-property">bottom: <span class="cm-number">-10px;<br> <span> <span class="cm-property">left: <span class="cm-number">10px;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"father"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"first" <span class="cm-tag cm-bracket">>第一个盒子<span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"second"<span class="cm-tag cm-bracket">>第二个盒子<span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"third"<span class="cm-tag cm-bracket">>第三个盒子<span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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>
<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><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag">body{<br> <span> <span class="cm-property">height: <span class="cm-number">2000px;<br> <span> }<br> <span> <span class="cm-tag">div:<span class="cm-variable-3">nth-of-type(<span class="cm-number">1){<span class="cm-comment">/*绝对定位*/<br> <span> <span class="cm-property">width: <span class="cm-number">100px;<br> <span> <span class="cm-property">height: <span class="cm-number">100px;<br> <span> <span class="cm-property">background: <span class="cm-keyword">red;<br> <span> <span class="cm-property">position: <span class="cm-atom">absolute;<br> <span> <span class="cm-property">right: <span class="cm-number">0;<br> <span> <span class="cm-property">bottom: <span class="cm-number">0;<br> <span> }<br> <span> <span class="cm-tag">div:<span class="cm-variable-3">nth-of-type(<span class="cm-number">2){<span class="cm-comment">/*fixed：固定定位*/<br> <span> <span class="cm-property">width: <span class="cm-number">50px;<br> <span> <span class="cm-property">height: <span class="cm-number">50px;<br> <span> <span class="cm-property">background: <span class="cm-keyword">yellow;<br> <span> <span class="cm-property">position: <span class="cm-atom">fixed;<br> <span> <span class="cm-property">right: <span class="cm-number">0;<br> <span> <span class="cm-property">bottom: <span class="cm-number">0;<br> <span> }<br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">style<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div<span class="cm-tag cm-bracket">>div1<span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">div<span class="cm-tag cm-bracket">>div2<span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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>
<h5 class="md-end-block md-heading"><span class="md-plain">z-index</span></h5>
<p class="md-end-block md-p"><span class="md-pair-s"><strong>index.html</strong></span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-meta"><!DOCTYPE html><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">html <span class="cm-attribute">lang=<span class="cm-string">"en"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">meta <span class="cm-attribute">charset=<span class="cm-string">"UTF-8"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">title<span class="cm-tag cm-bracket">>Title<span class="cm-tag cm-bracket"></<span class="cm-tag">title<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">link <span class="cm-attribute">rel=<span class="cm-string">"stylesheet" <span class="cm-attribute">href=<span class="cm-string">"css/style.css"<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">head<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"content"<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">ul<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">li<span class="cm-tag cm-bracket">><<span class="cm-tag">img <span class="cm-attribute">src=<span class="cm-string">"../../images/1.jpg" <span class="cm-attribute">alt=<span class="cm-string">""<span class="cm-tag cm-bracket">></<span class="cm-tag">li<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">li <span class="cm-attribute">class=<span class="cm-string">"tipText"<span class="cm-tag cm-bracket">>学习Java<span class="cm-tag cm-bracket"></<span class="cm-tag">li<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">li <span class="cm-attribute">class=<span class="cm-string">"tipBg"<span class="cm-tag cm-bracket">></<span class="cm-tag">li<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">li<span class="cm-tag cm-bracket">>时间：2021年7月16日<span class="cm-tag cm-bracket"></<span class="cm-tag">li<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"><<span class="cm-tag">li<span class="cm-tag cm-bracket">>地点：你猜<span class="cm-tag cm-bracket"></<span class="cm-tag">li<span class="cm-tag cm-bracket">><br> <span> <span class="cm-tag cm-bracket"></<span class="cm-tag">ul<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">body<span class="cm-tag cm-bracket">><br> <span><span class="cm-tag cm-bracket"></<span class="cm-tag">html<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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 md-focus"><span class="md-pair-s md-expand"><strong>style.css</strong></span></p>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span><span class="cm-builtin">#content{<br> <span> <span class="cm-property">width: <span class="cm-number">550px;<br> <span> <span class="cm-property">padding: <span class="cm-number">0px;<br> <span> <span class="cm-property">margin: <span class="cm-number">0px;<br> <span> <span class="cm-property">overflow: <span class="cm-atom">hidden;<br> <span> <span class="cm-property">font-size: <span class="cm-number">12px;<br> <span> <span class="cm-property">line-height: <span class="cm-number">25px;<br> <span> <span class="cm-property">border: <span class="cm-number">1px <span class="cm-atom">#000 <span class="cm-atom">solid;<br> <span>}<br> <span><span class="cm-tag">ul,<span class="cm-tag">li{<br> <span> <span class="cm-property">padding: <span class="cm-number">0px;<br> <span> <span class="cm-property">margin: <span class="cm-number">0px;<br> <span> <span class="cm-property">list-style: <span class="cm-atom">none;<br> <span>}<br> <span><span class="cm-comment">/*父级元素相对定位*/<br> <span><span class="cm-builtin">#content <span class="cm-tag">ul{<br> <span> <span class="cm-property">position: <span class="cm-atom">relative;<br> <span>}<br> <span><span class="cm-qualifier">.tipText,<span class="cm-qualifier">.tipBg{<br> <span> <span class="cm-property">position: <span class="cm-atom">absolute;<br> <span> <span class="cm-property">width: <span class="cm-number">550px;<br> <span> <span class="cm-property">height: <span class="cm-number">25px;<br> <span> <span class="cm-property">top: <span class="cm-number">404px;<br> <span>}<br> <span><span class="cm-qualifier">.tipText{<br> <span> <span class="cm-property">color: <span class="cm-keyword">red;<br> <span> <span class="cm-comment">/*z-index: 888;*/<br> <span>}<br> <span><span class="cm-qualifier">.tipBg{<br> <span> <span class="cm-property">background: <span class="cm-atom">#000000;<br> <span> <span class="cm-property">opacity: <span class="cm-number">0.5;<br> <span> <span class="cm-property">filter: <span class="cm-variable">alpha(<span class="cm-atom">opacity=<span class="cm-number">0.5);<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></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><span> </span></p><br><br>
来源：https://www.cnblogs.com/shenyeanyue-study/p/15021129.html
頁:
[1]