css笔记 十.css常见写法

水平居中

 <div class="wrape">
     <div class="content"></div>
 </div>

 .wrape{
     height: 30px;
     background: #060970;
 }

 .content{
     height: 30px;
     width: 800px;
     margin: 0 auto;
     background: #123;
 }

网络差加载不出图片时,仍能展示基本页面

 <a href="taobao.com">淘宝网</a>

  1.隐藏文字
  a{
      display: inline-block;
      text-decoration: none;
      height: 300px;
      width: 500px;
      background-image: url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2121206715,2955288754&fm=26&gp=0.jpg");

      /*将文字挤到图片外面,并将文字隐藏*/
      text-indent: 500px;
      white-space: nowrap;/*防止文本换行*/
      overflow: hidden;
  }
      
  2.利用padding
  a{
      display: inline-block;
      text-decoration: none;
      /*将图片高度设为0,padding的高度设置为图片高度*/
      height: 0px;
      overflow:hidden;

      padding-top: 300px;
      width: 500px;
      background-image: url("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2121206715,2955288754&fm=26&gp=0.jpg");
  }

单行文本垂直,水平居中

 {
     height : 200px;
     text-indent : 2em;//缩进2个文本单位
     text-align : center;//水平居中
     line-height : 200px//行高等于高度就可垂直居中
 }

画七巧板

        <div style = "height:0px;width:0px;border: 50px solid black;border-top-color:red ;
        border-left-color:yellow;border-right-color: green;"></div>

画三角形

      <div style = "height:0px;width:0px;border: 50px solid transparent;border-top-color:red ;
      border-left-color:transparent;border-right-color:transparent;"></div>  

单行文本过长显示…

  .singleCute{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }

导航栏

 *{
      margin: 0px;
      padding: 0px;
      font-family: arial;
  }

  a{
      text-decoration-line: none;
      
  }

  .nav{
      height: 30px;
      list-style: none;
  }

  .nav .nav-item{
      float: left;
      margin: 0px 10px;
      height: 30px;
      background-color: #fff;
  }

  .nav .nav-item a{
      color: #f40;
      font-weight: bold;
      display: inline-block;
      border-radius: 15px;
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
  }

  .nav .nav-item a:hover{
      background-color: #f40;
      color: #fff;
  }

  .nav::after{
      display: inline-block;
      content:"";
      clear: both;
  }


  <ul class="nav">
      <li class="nav-item">
          <a href="#">网站一</a>
      </li>
      <li class="nav-item">
          <a href="#">网站二网站二</a>
      </li>
      <li class="nav-item">
          <a href="#">网站</a>
      </li>
  </ul>

画五环

  .plant{
       position: absolute;
       height: 200px;
       width: 450px;
       top: 50%;
       left: 50%;
       margin-left: -210px;
       margin-top: -100px;
   }

   .circle1,
   .circle2,
   .circle3,
   .circle4,
   .circle5{
       width : 100px;
       height : 100px;
       border : 10px solid black;
       border-radius : 50%; 
       position: absolute;
   }

   .circle2{
       left:140px;
       border-color : #060970;
   }

   .circle3{
       left:280px;
       border-color : #f3161c;
   }

   .circle4{
       left: 70px;
       top: 50px;
       border-color:#fbf33d;
   }

   .circle5{
       left: 210px;
       top: 50px;
       border-color : #23c031;
   }

   <div class = "plant">
   <div class="circle1" ></div>
   <div class="circle2" ></div>
   <div class="circle3" ></div>
   <div class="circle4" ></div>
   <div class="circle5" ></div>
</div>