清除浮动最好的方式

  1.     <style>
  2.         .clearfix::after{
  3.             content: "";
  4.             display: block;
  5.             clear: both;
  6.         }
  8.         .box{
  9.             width: 200px;
  10.             border: 10px solid #000;
  11.         }
  12.         .box .box1{
  13.             float: left;
  14.             width: 100px;
  15.             height: 100px;
  16.             background-color: green;
  17.         }
  18.         .box .box2{
  19.             float: left;
  20.             width: 100px;
  21.             height: 100px;
  22.             background-color: orange;
  23.         }
  24.     </style>
  25.     <div class="box clearfix">
  26.         <div class="box1"></div>
  27.         <div class="box2"></div>
  28.     </div>

image.png
因为不是所有div、ul都需要清除浮动，如果所有div都加html太大了，没有必要

content

  1.    <style>
  2.         p::before{
  3.             /* content: url(img/icon.png); */
  4.             content: url(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png);
  5.             margin-right: 5px;
  6.             vertical-align: middle;
  7.             width: 5px;
  8.             height: 5px;
  9.         }
  10.     </style>
  11.     <p>请点击发送信息</p>

image.png
image.png
加小图标可以用before

  1.   <style>
  2.         p::before {
  3.             content: attr(data-username);
  4.         }
  5.     </style>
  6.     <p data-username="enjoy">,欢迎您再次来到本网站。</p>

image.png

css3

盒子阴影

box-shadow：水平位置（必）垂直位置（必）
模糊距离 阴影尺寸 阴影颜色 阴影的种类

  1.     <style>
  2.         .box1{
  3.             width: 200px;
  4.             height: 100px;
  5.             margin: 100px;
  6.             background-color: orange;
  7.             box-shadow: 20px 10px;
  8.         }
  9.     </style>
  10.     <div class="box1"></div>

image.png

  1.     <style>
  2.         .box1{
  3.             width: 200px;
  4.             height: 100px;
  5.             margin: 100px;
  6.             background-color: orange;
  7.             /* box-shadow: 20px 10px; */
  8.             /* box-shadow: 0px 10px;
  9.             box-shadow:  20px 0; */
  10.             box-shadow: -10px -20px;
  11.         }
  12.     </style>
  13.     <div class="box1"></div>

image.png

  1.    <style>
  2.         .box1{
  3.             width: 200px;
  4.             height: 100px;
  5.             margin: 100px;
  6.             background-color: orange;
  7.             /* box-shadow: 20px 10px; */
  8.             /* box-shadow: 0px 10px;
  9.             box-shadow:  20px 0; */
  10.             /* box-shadow: -10px -20px; */
  12.             box-shadow: 10px 10px 20px;
  13.         }
  14.     </style>
  15.     <div class="box1"></div>

image.png
模糊距离20px也可以看作清晰度，越小越清晰，

  1.   <style>
  2.         .box1{
  3.             width: 200px;
  4.             height: 100px;
  5.             margin: 100px;
  6.             background-color: orange;
  7.             /* box-shadow: 20px 10px; */
  8.             /* box-shadow: 0px 10px;
  9.             box-shadow:  20px 0; */
  10.             /* box-shadow: -10px -20px; */
  12.             /* box-shadow: 10px 10px 20px; */
  14.             box-shadow: 10px 10px 5px 5px;
  15.         }
  17.         .box2{
  18.             width: 200px;
  19.             height: 100px;
  20.             margin: 100px;
  21.             background-color: orange;
  22.             /* box-shadow: 20px 10px; */
  23.             /* box-shadow: 0px 10px;
  24.             box-shadow:  20px 0; */
  25.             /* box-shadow: -10px -20px; */
  27.             /* box-shadow: 10px 10px 20px; */
  29.             box-shadow: 15px 15px 5px;
  30.         }
  32.         .box3{
  33.             width: 200px;
  34.             height: 100px;
  35.             margin: 100px;
  36.             background-color: orange;
  37.             box-shadow: 0 0 10px 10px;
  39.             /* box-shadow: 0 -15px 10px 10px ; */
  40.             /*阴影就上去了*/
  41.         }
  42.     </style>
  43.     <div class="box1"></div>
  44.     <div class="box2"></div>
  45.     <div class="box3"></div>

image.png

  1.         .box3{
  2.             width: 200px;
  3.             height: 100px;
  4.             margin: 100px;
  5.             background-color: orange;
  6.             /* box-shadow: 0 0 10px 10px; */
  8.             /* box-shadow: 0 -15px 10px 10px ; */
  9.             /*阴影就上去了*/
  11.             box-shadow: 0 15px 10px 10px #f40 inset;
  12.         }

image.png

遮住阴影

1设置position: relative
2z-index: 1;

  1.   <style>
  2.         body{
  3.             margin: 0;
  4.         }
  5.         .header{
  6.             /* position: relative; */
  7.               /* z-index因为没有position没有用处*/
  8.             z-index: 1;
  9.             width: 100%;
  10.             height: 60px;
  11.             background-color: yellow;
  12.         }
  13.         .box{
  15.             width: 300px;
  16.             height: 200px;
  17.             background-color: orange;
  18.             margin-left: 200px;
  19.             box-shadow: 0 0 30px #666;
  20.         }
  21.     </style>
  22.     <div class="header"></div>
  23.     <div class="box"></div>

image.png

  1.   <style>
  2.         body{
  3.             margin: 0;
  4.         }
  5.         .header{
  6.             position: relative;
  7.             z-index: 1;
  8.             width: 100%;
  9.             height: 60px;
  10.             background-color: yellow;
  11.         }
  12.         .box{
  14.             width: 300px;
  15.             height: 200px;
  16.             background-color: orange;
  17.             margin-left: 200px;
  18.             box-shadow: 0 0 30px #666;
  19.         }
  20.     </style>
  21.     <div class="header"></div>
  22.     <div class="box"></div>

image.png
京东也是这么做的

  1.            box-shadow: 0 0 30px #000;
  2.             -webkit-box-shadow:0 0 30px #000;
  3.             -moz-box-shadow:0 0 30px #000;
  4.             -o-box-shadow:0 0 30px #000;

浏览器兼容

圆角

  1.     <style>
  2.         .box{
  3.             width: 200px;
  4.             height: 100px;
  5.             background-color: orange;
  6.             border-radius: 20px;
  7.         }
  8.     </style>
  9.     <div class="box"></div>

image.png

  1.    <style>
  2.         .box1 {
  3.             width: 200px;
  4.             height: 200px;
  5.             background-color: orange;
  6.             border-radius: 50%;
  7.             /* 这样是圆形，width、height一样，radius是50% 
  8.             纯圆 50% 宽高一样 */
  9.         }
  10.         .box2{
  11.             width: 200px;
  12.             height: 100px;
  13.             background-color: orange;
  14.             border-radius: 50px;
  15.             /* 这样圆角合起来是一个圆形 
  16.             半圆角 height/2+px */
  17.         }
  18.     </style>
  19.     <div class="box1"></div>
  20.     <div class="box2"></div>

image.png
兼容性

  1.                        border-radius: 50%;
  2.             -webkit-border-radius: 50%;
  3.             -moz-border-radius: 50%;
  4.             -o-border-radius: 50%;

图片圆角遮罩

  1.   <style>
  2.         .box{
  3.             width: 440px;
  4.             height: 248px;
  5.             border: 1px solid #000;
  6.             border-radius: 20px;
  7.         }
  8.         img{
  9.             width: 100%;
  10.         }
  11.     </style>
  12.     <div class="box">
  13.         <img src="https://wx1.sinaimg.cn/mw690/002p2Zyzly1h1hbucstg2j62bc334b2d02.jpg" alt="">
  14.     </div>

image.png

  1.    <style>
  2.         .box{
  3.             width: 440px;
  4.             height: 248px;
  5.             border: 1px solid #000;
  6.             border-radius: 20px;
  7.             overflow: hidden;
  8.             /* 溢出隐藏 */
  9.         }
  10.         img{
  11.             width: 100%;
  12.         }
  13.     </style>
  14.     <div class="box">
  15.         <img src="https://wx1.sinaimg.cn/mw690/002p2Zyzly1h1hbucstg2j62bc334b2d02.jpg" alt="">
  16.     </div>

image.png
到公司，做项目没有那么多时间去研究这些问题，这些经验，记在脑子里，到公司，不要为这些事情费时间

背景图片

  1.    <style>
  2.         .box{
  3.             width: 300px;
  4.             height: 300px;
  5.             margin: 100px;
  6.             border: 1px solid #000;
  7.             background-image: url(https://wx1.sinaimg.cn/mw690/002p2Zyzly1h1hbucstg2j62bc334b2d02.jpg);
  9.             /* background-size: 300px 300px; */
  10.             /* background-size: 100%; */
  11.             background-size: 50% 50%;
  13.         }
  14.     </style>
  15.     <div class="box"></div>

image.png

  1.   <style>
  2.         .box{
  3.             width: 300px;
  4.             height: 300px;
  5.             margin: 100px;
  6.             border: 1px solid #000;
  7.             background-image: url(https://wx1.sinaimg.cn/mw690/002p2Zyzly1h1hbucstg2j62bc334b2d02.jpg);
  9.             /* background-size: 300px 300px; */
  10.             /* background-size: 100%; */
  11.             background-size: 50% 50%;
  12.             background-repeat: no-repeat;
  13.             /* background-repeat:repeat|no-repeat|repeat-x|repeat-y*/
  15.             /* background-position: center; */
  16.             /* background-position: 50% 50%; */
  17.             /* background-position: top right; */
  19.             background-position: center center;
  20.             /* background-position:left top|left bottom|right top|right bottom|
  21.             center center|center bottom|center top|left center|right center |
  22.             50px 50px|50% 50%*/
  24.         }
  25.     </style>
  26.     <div class="box"></div>

image.png

  1.  <style>
  2.             .box{
  3.                 width: 300px;
  4.                 height: 300px;
  5.                 margin: 100px;
  6.                 border: 1px solid #000;
  7.                 background:green url(https://wx1.sinaimg.cn/mw690/002p2Zyzly1h1hbucstg2j62bc334b2d02.jpg) no-repeat
  8.                 center center/30% 30% ;
  10.                 background:green url(https://wx1.sinaimg.cn/mw690/002p2Zyzly1h1hbucstg2j62bc334b2d02.jpg) no-repeat
  11.                 center center/30% 30% ;
  13.                background:green url(https://wx1.sinaimg.cn/mw690/002p2Zyzly1h1hbucstg2j62bc334b2d02.jpg) 
  14.                 0 0/50% 50% no-repeat;
  16.                 background:green url(https://wx1.sinaimg.cn/mw690/002p2Zyzly1h1hbucstg2j62bc334b2d02.jpg) no-repeat
  17.                 0 0/30% 30% ;
  20.             }
  21.         </style>
  22.         <div class="box"></div>

image.png

  1.    <style>
  2.         body{
  3.             margin: 0;
  4.         }
  5.         .banner{
  6.             width: 100%;
  7.             height: 600px;
  8.             background-color: orange;
  9.             background-image: url(https://gw.alicdn.com/imgextra/i3/O1CN01iyYdem1GQd1yGgA0a_!!6000000000617-0-tps-2500-600.jpg);
  10.             background-size: 100% 100%;
  11.             /* background-size: cover; */
  12.         }
  13.     </style>
  14.     <div class="banner"></div>

image.png
图片随着浏览器大小变化而变化，被挤压，变形，分辨率变了

  1.  <style>
  2.         body{
  3.             margin: 0;
  4.         }
  5.         .banner{
  6.             width: 100%;
  7.             height: 600px;
  8.             background-color: orange;
  9.             background-image: url(https://gw.alicdn.com/imgextra/i3/O1CN01iyYdem1GQd1yGgA0a_!!6000000000617-0-tps-2500-600.jpg);
  10.             /* background-size: 100% 100%; */
  11.             background-size: cover;
  12.             background-position: center center;
  13.         }
  14.     </style>
  15.     <div class="banner"></div>

image.png
图片不会变化，缩放

  1.    <style>
  2.         body{
  3.             margin: 0;
  4.         }
  5.         .banner{
  6.             width: 100%;
  7.             height: 600px;
  8.             background-color: orange;
  9.             background-image: url(https://gw.alicdn.com/imgextra/i3/O1CN01iyYdem1GQd1yGgA0a_!!6000000000617-0-tps-2500-600.jpg);
  10.             /* background-size: 100% 100%; */
  11.             /* background-size: cover; */
  12.             /* 必须正好占满整个格子，会剪裁 */
  14.             background-repeat: no-repeat;
  15.             background-size: contain;
  16.             /*无论浏览器大小怎么变化，都会显示整个图片，会缩放*/
  17.             background-position: center center;
  18.         }
  19.     </style>
  20.     <div class="banner"></div>

image.png

背景图片不跟着滚动

  1.   <style>
  2.         /* 滚动内容发生变化,但背景图片不跟着滚动 */
  3.         html{
  4.             height: 100%;
  5.             background-color: green;
  6.             background-image: url(https://tse1-mm.cn.bing.net/th/id/R-C.5d978fd5d0a0a7252848708424ecdb92?rik=wRSxCwIkPjiigw&pid=ImgRaw&r=0);
  7.             background-size: 100% 100%;
  8.             background-attachment: fixed;
  9.             /* background-attachment: scroll|fixed */
  10.         }
  11.     </style>
  12.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br>111111<br><br><br><br><br><br><br>
  13.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br>222222<br><br><br><br><br><br><br>
  14.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br>333333<br><br><br><br><br><br><br>
  15.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  16.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

image.png

  1.  <style>
  2.           html{
  3.             height: 100%;
  5.             /* background-color: green;
  6.             background-image: url(https://tse1-mm.cn.bing.net/th/id/R-C.5d978fd5d0a0a7252848708424ecdb92?rik=wRSxCwIkPjiigw&pid=ImgRaw&r=0);
  7.             background-size: 100% 100%;
  8.             background-attachment: fixed; */
  9.             /* background-attachment: scroll|fixed */
  11.             /* background: background-color background-image background-repeat 
  12.             background-attachment background-position/background-size */
  14.             background: green url(https://tse1-mm.cn.bing.net/th/id/R-C.5d978fd5d0a0a7252848708424ecdb92?rik=wRSxCwIkPjiigw&pid=ImgRaw&r=0)
  15.              no-repeat fixed 0 0/100% 100%;
  16.         }
  17.     </style>
  1.  <style>
  2.           html{
  3.             height: 100%;
  5.             /* background-color: green;
  6.             background-image: url(https://tse1-mm.cn.bing.net/th/id/R-C.5d978fd5d0a0a7252848708424ecdb92?rik=wRSxCwIkPjiigw&pid=ImgRaw&r=0);
  7.             background-size: 100% 100%;
  8.             background-attachment: fixed; */
  9.             /* background-attachment: scroll|fixed */
  11.             /* background: background-color background-image background-repeat 
  12.             background-attachment background-position/background-size */
  13.             /* 分开写比较好，清楚一目了然，但公司可能要求写一块 */
  15.             background: green url(https://tse1-mm.cn.bing.net/th/id/R-C.5d978fd5d0a0a7252848708424ecdb92?rik=wRSxCwIkPjiigw&pid=ImgRaw&r=0)
  16.              no-repeat fixed 0 0/100% 100%;
  17.         }
  18.     </style>
  19.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br>111111<br><br><br><br><br><br><br>
  20.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br>222222<br><br><br><br><br><br><br>
  21.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br>333333<br><br><br><br><br><br><br>
  22.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  23.     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

logo