css的重点系统学习

社会观察眼 發表於 2021-7-25 16:23:00

<h2 class="md-end-block md-heading">1、如何学习？</h2>
<ol class="ol-list" start="">
<li class="md-list-item">
css是什么
</li>
<li class="md-list-item">
css怎么用（快捷入门）
</li>
<li class="md-list-item">
css选择器（重点+难点）
</li>
<li class="md-list-item">
美化网页（文字，阴影，超链接，列表，渐变...)
</li>
<li class="md-list-item">
盒子模型
</li>
<li class="md-list-item">
浮动
</li>
<li class="md-list-item">
定位
</li>
<li class="md-list-item">
网页动画（特效效果）
</li>
</ol>
<h3 class="md-end-block md-heading">1.1、什么是css</h3>
Cascading Style Sheet 层叠级联样式表
css:表现层（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动.....
<h3 class="md-end-block md-heading">1.2、发展史</h3>
css1.0
css2.0: Div(块)+CSS，HTML与CSS结构分离的思想，网页变革简单，SEO
css2.1：浮动，定位
css3.o:圆角，阴影，动画....，流量器兼容性~
<h3 class="md-end-block md-heading">1.3、快速入门</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
style
</li>
</ul>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210720133401%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-20%20213148.png">
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
建议使用这种规范
</li>
</ul>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210720133407%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-20%20213243.png">
 
 
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
CSS的优势：
<ol class="ol-list" start="">
<li class="md-list-item">
内容和表现分离
</li>
<li class="md-list-item">
网页结构表现统一，可以实现复用
</li>
<li class="md-list-item">
样式十分的丰富
</li>
<li class="md-list-item">
建议使用独立于html的css文件
</li>
<li class="md-list-item">
利用SEO，容易被搜索引擎收录！
</li>
</ol></li>
</ul>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded md-focus"><!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <title>Title</title>      <link rel="stylesheet" href="css/style.css">   <style>    /* qwep*/    h1{      color: #aaaaff;  }  </style> </head> <body>    <h1 style="color: red"></h1> </body> </html></pre>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
扩展:外部样式两种写法
</li>
</ul>
<ol class="ol-list" start="">
<li class="md-list-item">
链接式：
</li>
</ol>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">  <link rel="stylesheet" href="css/style.css"></pre>
 
<ol class="ol-list" start="">
<li class="md-list-item">
导入式：
</li>
</ol>
@import 是CSS2.1特有的！
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">  <style>    @import url("style.css");  </style></pre>
 
首页link和import语法结构不同，前者<link>是html标签，只能放入html源代码中使用，后者可看作为css样式，作用是引入css样式功能。import在html使用时候需要<style type="text/css">标签，同时可以直接“@import url(CSS文件路径地址);”放如css文件或css代码里引入其它css文件。
本质上两者使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link较多，也推荐使用link。
<h2 class="md-end-block md-heading">2、选择器</h2>
作用：选择页面上的某一元素或某一类元素
 
<h3 class="md-end-block md-heading">2.1 基本选择器</h3>
<ol class="ol-list" start="">
<li class="md-list-item">
标签选择器：选择一类标签
</li>
</ol>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <title>Title</title>  <style>    /*标签选择器，会选择到页面上所有的这个标签的元素*/    h1{      color: #aaaaff;      background: #008B8B;      border-radius: 24px;  }    p{      font-size: 80px;  }  </style> </head> <body> <h1>学java</h1> <h1>学java2</h1> <p>听java</p> </body> </html></pre>
 
<ol class="ol-list" start="2">
<li class="md-list-item">
类选择器：class：选中所有class属性一致的标签，跨标签，类名{}
</li>
</ol>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <title>Title</title>  <style>    /*类选择择器的格式：.class的名称{}  好处，可以多各标签归类，是同一个class，可以复用  */    .zhouwei{      color: hotpink;  }    .weiwei{      color: burlywood;  }  </style> </head> <body> <h1 class="weiwei">标题1</h1> <h1 class="zhouwei">标题2</h1> <h1 class="zhouwei">标题3</h1>  <p class="weiwei"> 标题4</p> </body> </html></pre>
 
<ol class="ol-list" start="3">
<li class="md-list-item">
id选择器：全局唯一！ # Id名{}
</li>
</ol>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <title>Title</title>  <style>    /*  id选择器: id必须保证全局唯一！  # id名称{   }  不遵循就近原则，固定的  id选择器 > class选择器（id） > 标签选择器  */    #zhouwei{      color: #4f4d4e;  }    .vzhv{      color: #aaaaff;  }    h1{      color: aqua;  }  </style> </head> <body> <h1 id="zhouwei">标题1</h1> <h1 class="vzhv">标题2</h1> <h1  class="vzhv">标题3</h1> <h1>标题4</h1> </body> </html></pre>
优先选择器：id >class > 标签
<h3 class="md-end-block md-heading">2.2、层次选择器</h3>
body:
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><body> <p>p0</p> <p class="active">p1</p> <p>p2</p> <p>p3</p> <ul>    <li><p>p4</p></li>    <li><p>p5</p></li>    <li><p>p6</p></li>    </body></pre>
流程图：*
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210721013248%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-21%20093203.png">
<ol class="ol-list" start="">
<li class="md-list-item">
后代选择器：在某个元素的后面（祖爷爷爷爷爸爸我）
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">   body p{            background: red;      }</pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210721023105%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-21%20103018.png">
</li>
<li class="md-list-item">
子选择器,一代，儿子
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">子选择器        body>p{            background: hotpink ;      }</pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210721022410%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-21%20100005.png">
</li>
<li class="md-list-item">
相邻兄弟选择器
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"> /*  兄弟选择器:只有一个，相邻（向下）*/        .active + p{            background: rosybrown;      } <p class="active">p1</p> <p>p2</p></pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210721022419%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-21%20101440.png">
</li>
<li class="md-list-item">
通用选择器
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">/*  通用选择器,当前选中元素的向下的所有兄弟元素*/        .active~p{            background: #66CCFF;      }</pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210721022426%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-21%20102207.png">
</li>
</ol>
<h3 class="md-end-block md-heading">2.3、结构伪类选择器</h3>
伪类：条件
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">  <style>    /*!**!*/    ul li:first-child{      background: #66CCFF;  }    /*ul的最后一个子元素*/    /*!*ul的最后一个元素*!*/    ul li:last-child{      background: #008B8B;  }    /* 选中p1 : 定位到父元素，选择当前的第一个元素  选中当前的p元素的父级元素，选中父级元素的第一个,并且是当前元素才生效  */    p:nth-child(1){      background: #aaaaff;  }  /*选中父元素，下的p的元素的第二个，类型*/    p:nth-of-type(1){      background: #4f4d4e;  }    a:hover{      background: hotpink;  }  </style> </head> <body> <a href="">12306</a> <h1>h1</h1> <p>p1</p> <p>p2</p> <p>p3</p> <ul>  <li>li1</li>  <li>li2</li>  <li>li3</li> </ul> </body></pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210721032445%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-21%20110359.png">
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210721032451%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-21%20110627.png">
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210721032458%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-21%20111519.png">
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210721032504%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-21%20111801.png">
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210721032510%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-21%20112310.png">
<h3 class="md-end-block md-heading">2.4、属性选择器（重要）</h3>
id + class 相结合
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <title>Title</title>  <style>    .demo a{      float: left;      display: block;      height: 50px;      width: 50px;      border-radius: 10px;      background: #aaaaff;      text-align: center;      color: #4f4d4e;      text-decoration: none;      margin-right: 5px;      font:bold 20px/50px Arial\;  }  /*属性名，属性名 = 属性值（正则）    = 是绝对等于    *= 是包含这个元素    ^=以这个开头    $=   以这个结尾 */  /*存在id属性的元素   a[属性的东西]{}   */  /*a{*/  /*  background: yellow;*/  /*}*/    /*!*id=firstr的变量*!*/    /*a{*/    /*background: #63ff23;*/    /*}*/  /*!*class   中有links 的元素*!*/  /*a{*/  /*  background: yellow;*/  /*}*/  /*!*选中href中Yuihttp开头的元素*!*/  /*a{*/  /*  background: #cccccc;*/  /*}*/    a[href$=pdf]{      background:#e0c90d;  }  </style> </head> <body> <p class="demo">  <a href="http://www.baidu.com" class="links item first" id="firsr">1</a>  <a href="http://www.baidu.com" class="links item active" target="_blank" title="test">2</a>  <a href="images/123.html" class="links item">3</a>  <a href="images/123.png" class="links item" >4</a>  <a href="images/123.jpg" class="links item">5</a>  <a href="abc" class="links item">6</a>  <a href="/a.pdf" class="links item">7</a>  <a href="/abc.pdf" class="links item">8</a>  <a href="abc.doc" class="links item">9</a>  <a href="abcd.doc" class="links item">10</a> </p> </body> </html></pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210721041805%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-21%20121746.png">
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">=  绝对等于 *=   是包含这个元素 ^=   以这个开头 $=   以这个结尾</pre>
 
<h2 class="md-end-block md-heading">3、美化网页元素</h2>
<h3 class="md-end-block md-heading">3.1、为什么要美化网页</h3>
<ol class="ol-list" start="">
<li class="md-list-item">
有效的传递页面信息
</li>
<li class="md-list-item">
美化网页，页面漂亮，才能吸引用户
</li>
<li class="md-list-item">
凸显网页的主体
</li>
<li class="md-list-item">
提高用户的体验
</li>
</ol>
 
<h3 class="md-end-block md-heading">3.2字体样式</h3>
span标签：重点要突出的字，用span标签
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><style>    #titel{      font-size: 50px;  }      </style> </head> <body> 欢迎学习 <span id="titel">java</span> </body></pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210721064400%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-21%20144346.png">
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">  <style>    body{      font-family: 微软雅黑;      color: #aaaaff;  }    h1 {      font-size: 30px;  }    .p1{      font-weight: bold;  }  </style></pre>
 
<h3 class="md-end-block md-heading">3.3、文本样式</h3>
<ol class="ol-list" start="">
<li class="md-list-item">
颜色： color rgba
</li>
<li class="md-list-item">
文本对齐的方式： test-align = center
</li>
<li class="md-list-item">
首行缩进; test- indent:2em
</li>
<li class="md-list-item">
行高 line-height
</li>
<li class="md-list-item">
下划线（装饰）text-decoration
</li>
<li class="md-list-item">
文本图片水平对齐：（上）text-decoration: underline;（中）text-decoration: line-through;（下）text-decoration: overline;
</li>
</ol>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <title>Title</title>   <style>    h1{      color: #66CCFF;      text-align: center;  }    .p1{      text-indent: 2em;  }    .p3{      font-size: 25px;      background: palevioletred;      height: 30px;      line-height:30px;  }    /*上划线*/    .l1{      text-decoration: underline;  }    /*中划线*/    .l2{      text-decoration: line-through;  }    /*下划线*/    .l3{      text-decoration: overline;  }  </style> </head> <body> <p class="l1">123123</p> <p class="l2">123123</p> <p class="l3">123123</p> <h1>励志</h1> <p class="p1">有志者，事竟成，破釜沉舟，百二秦关终属楚； 苦心人天不负，卧薪尝胆，三千越甲可吞吴； </p> <p3 class="p3"> 上联是破釜沉舟，说的是项羽率军伐秦，过漳河的时候，命令士兵只留三天的干粮， 然后把船沉没，把锅砸碎，以示有进无退，一定要夺取胜利的决心； 下联是卧薪尝胆，说的是越国被吴国灭亡，越王勾践睡在柴草上，每天临睡前都要舔一下苦胆， 以提醒自己不忘亡国之辱。对联中的“百二秦关”指的是秦国的函谷关，函谷关地势险要，一夫当关万夫莫开。 </p3> </body> </html></pre>
 
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210721080727%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-21%20160645.png">
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <title>Title</title>   <style>    img,span{      vertical-align:middle;  }  /*去下划线*/    .a{      text-decoration: none;  }  </style> </head> <body> <a href="" class="a">去下划线</a> <p>  <img src="images/a.png" alt="">  <span>asdfghjkl;'</span> </p> </body> </html></pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210721080714%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-21%20160432.png">
<h3 class="md-end-block md-heading">3.4、阴影</h3>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210721133712%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-21%20213413.png">
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">/*text-shadow:阴影颜色，水平位移，垂直偏移，阴影半径*/ #price{    text-shadow: #e0c90d 10px 10px 2px; }</pre>
<h3 class="md-end-block md-heading">3.5、超链接伪类</h3>
正常情况下，a a:hover
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">        a{            text-decoration: none;            color: black;      }    /*鼠标悬浮的颜色*/ a:hover{    color: orange;    font-size: 25px; } /*鼠标按住未释放的状态*/ a:active{    color: green; }</pre>
<h3 class="md-end-block md-heading">3.6、列表</h3>
body
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><div id="nav">    <h2 class="title">全部商品分类</h2>    <ul>        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音响</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>        <li><a href="#">服装鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a></li>    </ul> </div></pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210721143612%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-21%20221257.png">
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">#nav{    width: 300px;    background: #aaaaff; } .title{    font-size: 25px;    font-weight: bold;    text-indent: 2em;    line-height: 35px;    background: #66CCFF; } /*ul li*/ /* list-style:         none;去掉圆的         circle:空心圆         decimal:数字         square:正方形 */ /*ul{*/ /*  background: #aaaaff;*/ /*}*/ ul li{    height: 30px;    list-style: none;    text-indent: 1em; } a{    text-decoration: none;    font-size: 18px;    color: #080706; } a:hover{    color: hotpink;    text-decoration: underline;/*下划线*/ }</pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210721143618%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-21%20223547.png">
<h3 class="md-end-block md-heading">3.7、背景</h3>
背景颜色
背景图片
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><style>        div{            width: 500px;            height: 350px;            border: 1px solid red;            background-image: url("images/aaa.png");            /*默认全部是平铺的*/      }        /*水平平铺*/        .div1{            background-repeat: repeat-x;      }        /*竖直平铺*/        .div2{            background-repeat: repeat-y;      }        /*不平铺*/        .div3{            background-repeat: no-repeat;      }  </style></pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210723133706%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-23%20213616.png">
练习:在3.6的基础上加图片
 
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210721143618%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-21%20223547.png">
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210723144406%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-23%20224043.png">
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">.title{   background: #66CCFF url("../images/com01.png") no-repeat 260px ; } ul li{    height: 30px;    list-style: none;    text-indent: 1em;    background-image: url("../images/com01.png");    background-repeat: no-repeat;    background-position: 220px; }</pre>
 
<h3 class="md-end-block md-heading">3.8、渐变</h3>
网址：Grabient
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">background-color: #00DBDE; background-image: linear-gradient(297deg, #00DBDE 0%, #FC00FF 100%); </pre>
 
<h2 class="md-end-block md-heading">4、盒子模型</h2>
<h3 class="md-end-block md-heading">4.1、什么是盒子模型</h3>
 
 
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210723150230201610091740212891.png">
margin:外边距
padding:内边距
border:边框
<h3 class="md-end-block md-heading">4.2、边框</h3>
<ol class="ol-list" start="">
<li class="md-list-item">
边框的粗细
</li>
<li class="md-list-item">
边框的样式
</li>
<li class="md-list-item">
边框的颜色
</li>
</ol>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"> <style> /*body总有一个默认的外边框margin：0 常见操作（规范）*/ h1,ul,li,a,body{  margin: 0;  padding: 0;  text-decoration: none; } /*border:粗细，样式，颜色*/    #box{      /**/      width: 300px;      border: 1px solid red;  }    h2{      font-size: 25px;      /*margin: 0;*/      background-color: #aaaaff;      color: white;  }    /*标签选择器*/    form{      background:#008B8B;  }    div:nth-of-type(1) input{      border: 3px solid black;  } div:nth-of-type(2) input{  border: 3px dashed yellow; } div:nth-of-type(3) input{  border: 3px dashed red; } </style> </head> <body> <div id="box"> <h2>会员登录</h2> <form action="">  <div>    <span>用户名：</span>    <input type="text">  </div>  <div>    <span>密码：</span>    <input type="text">  </div>  <div>    <span>邮箱：</span>    <input type="text">  </div> </form> </div> </body></pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210723153507%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-23%20233411.png">
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210723153108%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-23%20232914.png">
<h3 class="md-end-block md-heading">4.3、内、外边距</h3>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <title>Title</title>   <style>    #box{      /**/      width: 300px;      border: 1px solid red;      margin: 0 auto;  }    /*  margin: 0;  margin: 0 1px;  margin: 01px 2px 3px;  */    h2{      font-size: 25px;      /*margin: 0;*/      background-color: #aaaaff;      color: white;      margin-top: 0;  }    /*标签选择器*/    form{      background:#008B8B;  }    input{      border: 1px solid black;  }      /*内边距：padding*/    a:nth-of-type(1){      padding: 10px 20px;  }  </style> </head> <body> <div id="box">  <h2>会员登录</h2>  <form action="">    <div>      <span>用户名：</span>      <input type="text">    </div>    <div>      <span>密码：</span>      <input type="text">    </div>    <div>      <span>邮箱：</span>      <input type="text">    </div>  </form> </div> </body> </html></pre>
盒子的计算方式：你这个元素到底有多大？美工+前端
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210724040624%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-24%20120529.png">
最终元素大小=margin+border+padding+内容宽度
<h3 class="md-end-block md-heading">4.4、圆角边框</h3>
4个角
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><style>      div{      /*半圆*/      /*width: 50px;*/      /*height: 50px;*/      /*margin: 30px;*/      /*background: red;*/      /*border-radius: 50px 0px 0px 0px;*/    /*半圆*/      width: 100px;      height: 50px;      margin: 30px;      background: red;      border-radius: 50px 50px 0px 0px;  }</style> </head> <body> <div> </div> </body></pre>
（现成框架）
源码之家
后台管理系统模板之家（现成框架）
layui
vue-element-admin
element
飞冰
<h3 class="md-end-block md-heading">4.5、盒子阴影</h3>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <title>Title</title> <style>      /*margin: 0 auto;居中    要求：块元素有固定的宽度    */    img{        margin: 0 auto;        /*width: 100px;*/        /*height: 100px;*/        /*border: 10px solid red;*/        border-radius: 50px;/*圆角*/        box-shadow: 10px 10px 100px yellow;  } </style> </head> <body> <div style="width: 500px;display: block;text-align: center">  <img src="../../lesson02/6背景/images/aaa.png" alt=""> </div> </body> </html></pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210724073604%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-24%20153528.png">
<h2 class="md-end-block md-heading">5、浮动</h2>
<h3 class="md-end-block md-heading">5.1、标准文档流</h3>
<div class="md-hr md-end-block"><hr></div>
块级元素：独占一行
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">h1~h6p div 列表...</pre>
行内元素：不不独占一行
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">span a img strong...</pre>
行内元素可以包含在块级元素中，反之则不可以
<h3 class="md-end-block md-heading">5.2、dispaly</h3>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <title>Title</title>  <style>    div{      width: 100px;      height: 100px;      border: 1px solid red;      display: inline;  }    span{      width: 100px;      height: 100px;      border: 1px solid red;      /*display: block;*/      display: none;  } </style> </head> <body> <div>div块元素</div> <span>span行内元素</span> </body> </html></pre>
<ol class="ol-list" start="">
<li class="md-list-item">
这个也是一种实现行内元素排列的方式，但是我们很多的情况都使用float
</li>
</ol>
<h3 class="md-end-block md-heading">5.3、Float</h3>
左右浮动：float：left/right
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ font-size: 22px; } .wrap{ width: 400; border: 2px #F60 dotted; margin: 10px auto; } .box{ width: 100px; height: 100px; border: 2px #36F dotted; margin: 10px; } .fl{ float: left; } .fr{ float: right; } </style> </head> <body> <div class="wrap"> <div class="box">box-1</div> <div class="box">box-2</div> <div class="box">box-3</div> </div> <div class="wrap"> <div class="box fr">box-1</div> <div class="box">box-2</div> <div class="box">box-3</div> </div> <div class="wrap"> <div class="box fr">box-1</div> <div class="box fl">box-2</div> <div class="box">box-3</div> </div> <div class="wrap"> <div class="box fl">box-1</div> <div class="box fl">box-2</div> <div class="box fl">box-3</div> </div> </body> </html> </pre>
<h3 class="md-end-block md-heading">5.4 、父级边框塌陷的问题</h3>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210724081951%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-24%20161918.png">
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"> /*    clear: left;清除左侧浮动    clear: right;清除右侧浮动    clear: both;两侧都不能有浮动    clear: none;所有    */      clear: left;      clear: right;      clear: both;      clear: none;</pre>
解决方案：
<ol class="ol-list" start="">
<li class="md-list-item">
增加父级元素的高度（不建议使用）
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">#father{    border:1pz #000 solid;    height:800px; }</pre>
 
</li>
<li class="md-list-item">
增加一个空的div,清除浮动
</li>
</ol>
<pre class="md-fences mock-cm md-end-block"><divclass="clear"> </div>
.clear{
clear:both;
/**/
margin:0;
padding:0;
}
</pre>
<ol class="ol-list" start="3">
<li class="md-list-item">
overfloat
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">在父级元素中增加一个  Overflow:hidden; 在父级元素中增加一个  Overflow:auto;</pre>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <title>Title</title> <style>    #cotent{      width: 200px;      height: 150px;      overflow: scroll;  } </style> </head> <body> <div id="cotent"> <img src="images/aaa.png" alt=""> <p>有志者，事竟成，破釜沉舟，百二秦关终属楚；  苦心人天不负，卧薪尝胆，三千越甲可吞吴；</p> </div> </body> </html></pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210724084847%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-24%20164816.png">
</li>
<li class="md-list-item">
父类添加一个伪类：after
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><style>   #father:after{      /*加空内容*/      content: '';      /*将空文本变成一个块*/      display: block;      float: left;  } </style> <body> <div id="father">内容</div> </body> </pre>
</li>
</ol>
小结：
<ol class="ol-list" start="">
<li class="md-list-item">
浮动元素后面增加空DIV
简单，代码中尽量避免空DIV
</li>
<li class="md-list-item">
设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
</li>
<li class="md-list-item">
overflow
简单，下拉的一些场景避免使用
</li>
<li class="md-list-item">
父类添加一个伪类：after（推荐使用）
写法稍微复杂一点，但是没有副作用
</li>
</ol>
<h3 class="md-end-block md-heading">5.5、对比</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
display
方向不可以控制
</li>
<li class="md-list-item">
float
浮动起来的话会脱离标准文案流，所以要解决父级边框塌陷的问题~
</li>
</ul>
 
 
<h2 class="md-end-block md-heading">6、定位</h2>
<h3 class="md-end-block md-heading">6.1、相对定位</h3>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <style>    div{      margin: 10px;      padding: 5px;      font-size: 12px;      line-height: 25px;  }    #father{      border: 4px solid #aaaaff;      padding: 0px;  }    #first{      border: 4px dashed #66CCFF;      background-color: lightblue;      position: relative;/*相对定位：上下左右*/      top: -20px;      left: 20px;  }    #scond{      border: 4px dashed #30BD8C;      background-color: lightblue;  }    #third{      border: 4px dashed #FC00FF;      background-color: lightblue;      position: relative;      bottom: -10px;      right: 20px;  } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="scond">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html></pre>
原来的盒子
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210724130941%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-24%20173347.png">
相对位置的盒子
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210724130956%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-24%20173314.png">
相对定位：position：relative；
相对于原来的位置，进行指定的偏移，相对定位的话，它任然在标准文档流中！原来的位置会被保留
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
练习
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210724133815%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-24%20213655.png">
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <title>Title</title> <style>    #box{      width: 300px;      height: 300px;      padding: 10px;      border: 2px solid rebeccapurple;  }    a{      width: 100px;      height: 100px;      text-decoration: none;      background: #FC00FF;      /*行高与高度一致可实现居中*/      line-height: 100px;      text-align: center;      color: white;      /*变成块*/      display: block;  }    /*鼠标放上变色*/    a:hover{      background: #333333;  }    .a2,.a4{      position: relative;      left: 200px;      top: -100px;  }    .a5{      position: relative;      left: 100px;      top: -300px;  } </style> </head> <body> <div id="box"> <a class="a1" href="#">链接1</a> <a class="a2" href="#">链接2</a> <a class="a3" href="#">链接3</a> <a class="a4" href="#">链接4</a> <a class="a5" href="#">链接5</a> </div> </body> </html></pre>
 
 
</li>
</ul>
<h3 class="md-end-block md-heading">6.2、绝对定位</h3>
定位：基于XX定位，上下左右~
<ol class="ol-list" start="">
<li class="md-list-item">
没有父级元素定位的前提下，相对于浏览器定位
</li>
<li class="md-list-item">
假设父级元素存在定位，我们通常会相对于父级元素偏移~
</li>
<li class="md-list-item">
在父级元素范围内移动
</li>
<li class="md-list-item">
相对于父级或浏览器的位置，进行指定的偏移，相对定位的话，它不在在标准文档流中！原来的位置不会被保留
</li>
</ol>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <title>Title</title>  <style>    div{      margin: 10px;      padding: 5px;      font-size: 12px;      line-height: 25px;  }    #father{      border: 4px solid #aaaaff;      padding: 0px;        /*想要产生绝对定位，又不想产生浏览器，增加相对定位*/        position: relative;  }    #first{      border: 4px dashed #66CCFF;      background-color: lightblue;  }    #scond{      border: 4px dashed #30BD8C;      background-color: lightblue;        /*绝对定位*/        position: absolute;        left: 100px;  }    #third{      border: 4px dashed #FC00FF;      background-color: lightblue;  }  </style> </head> <body> <div id="father">  <div id="first">第一个盒子</div>  <div id="scond">第二个盒子</div>  <div id="third">第三个盒子</div> </div> </body> </html></pre>
默认效果
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210724130941%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-24%20173347.png">
后来效果
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210724135413%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-24%20215358.png">
 
<h3 class="md-end-block md-heading">6.3、固定定位 fixed</h3>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <title>Title</title>  <style>    body{      height: 1000px;  }    /*父级下的第一个元素*/    div:nth-of-type(1){      width: 100px;      height: 100px;      background: rebeccapurple;      /*a绝对定位:相对于浏览器*/      position: absolute;      right: 0;      bottom: 0;  }    div:nth-of-type(2){      width: 50px;      height: 50px;      background: #30BD8C;      /* position: fixed;：固定定位*/      position: fixed;      right: 0;      bottom: 0;  }  </style> </head> <body> <div>div1</div> <div>div2</div> </body> </html></pre>
 
定位在浏览器，不管怎么滑动位置都不变
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210724140601%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-24%20220358.png">
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210724140607%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-24%20220344.png">
<h3 class="md-end-block md-heading">6.4、Z-index</h3>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210724144238%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-24%20220939.png">
图层~
z-index:默认是0，最高无限~（999）
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <title>Title</title>  <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div id="content">  <ul>    <li><img src="images/屏幕截图%202021-07-24%20221226.png" alt=""></li>    <li class="tipText">学习微服务找狂神</li>    <li class="tipBg"></li>    <li>时间2021-7-24</li>    <li>地点：月球一号基地</li>  </ul> </div> </body> </html></pre>
 
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"> #content{    width: 840px;    padding: 0;    margin: 0;    /**/    overflow:hidden ;    font-size: 12px;    line-height: 25px;    border: 1px solid #080706; } ul,li{    padding: 0;    margin: 0; /*  去圆的*/    list-style: none; } /*父级元素相对定位*/ #content ul{    /*相对定位*/    position: relative; } .tipText,.tipBg{    /*绝对定位*/    position: absolute;    width: 840px;    height: 25px;    top:484px ; } .tipText{    color: white;    /*层级*/    z-index: 999; } .tipBg{    background: hotpink; /*  背景透明*/    opacity: 0.5;    /*0~100*/    filter: alpha(opacity=50); }</pre>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/676354/galleries/2002721/o_210724144617%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202021-07-24%20224553.png">
<h2 class="md-end-block md-heading">7、动画（了解，视野拓展）</h2>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
卡巴斯基实验室
</li>
<li class="md-list-item">
html 浪漫告白源码之家
</li>
<li class="md-list-item">
canvas动画
</li>
<li class="md-list-item">
 
</li>
</ul> 
来源：https://www.cnblogs.com/laimaihai/p/15058107.html

頁: [1]

琼殿技术论坛's Archiver

css的重点系统学习