[关闭]
@15013890200 2018-10-12T10:44:04.000000Z 字数 4265 阅读 546

css学习实践

css

前面一节补充了css一些薄弱的知识点。今天集中实践了不少。感觉收获还是蛮多的（平时对css忽略蛮多的，只写了一些基本样式）。
本次主要实践了 display的sticky属性、伪类/伪节点、文本处理、图片处理

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>usefulCss</title>
  6.     <style type="text/css">
  7.         .div_container{}
  8.         .div_container div{height: 200px;border: 1px solid #ddd;margin-bottom: 20px;text-align: center;align-items: center;display: flex;justify-content: center;}
  9.         .div_container div:nth-child(2){background-color: #ddd;position: sticky;top: 0;width: 100%;z-index: 100;}
  10.         .div_container div:nth-child(2)+div{font-size: 20px;font-weight: bold;color: rgba(255,0,0,0.5);cursor: pointer;}
  11.         .div_container div:nth-child(2)~div{border-radius: 5px;transition: box-shadow 0.3s;}
  12.         .div_container div:nth-child(2)~div:hover{box-shadow: 0 0 15px 1px #ddd,0 0 8px 0 rgba(255,0,0,0.3) ;margin-top: -1px;}
  13.         .div_container div:nth-child(4){transform: scale(0.5,0.5);}
  14.         .div_container div:nth-child(5){transform: rotate(3deg);}
  15.         .div_container div:nth-child(6){transform: translate(50%,0);}
  16.         .div_container div:nth-child(7){transform: skew(50deg,0deg);}
  17.         .a{text-decoration: none;}
  18.         .a:link{font-size: 18px;}
  19.         .a:hover{text-decoration:underline;}
  20.         .a:visited{color: #bbb;cursor: not-allowed!important;}
  21.         .a:active{color: #3896fe;}
  23.         .div_checkbox{margin: 20px;user-select: none;}
  24.         .div_checkbox label{cursor: pointer;color: #000;}
  25.         .div_checkbox input{cursor: pointer;}
  26.         .div_checkbox input:checked+span{color: #3896f8;transition: color 0.3s;}
  27.         .div_checkbox input:disabled~span{color: #bbb;cursor: not-allowed;}
  28.         .div_radio{margin: 20px;user-select: none;}
  29.         .div_radio span{position: relative;top: -2px;cursor: pointer;}
  30.         .div_radio input{cursor: pointer;}
  31.         .div_radio input:checked+span{color: red;}
  33.         .div_words>p{margin: 20px;width: 200px;text-transform: capitalize;letter-spacing: 0;word-spacing: 2px;}
  34.         .div_words p:nth-child(2):first-line{color: red;}
  35.         .div_words p:nth-child(2){text-indent: 32px;}
  36.         .div_words p:nth-child(1):first-letter{font-size: 30px;font-weight: bold;float: left;}
  37.         /**  多行文本省略 **/
  38.         .div_words2{margin: 20px;width: 200px;display: -webkit-box;-webkit-box-orient:vertical;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp:3;}
  40.         .div_imgs img{width: 200px;height: 100px;margin: 10px;transition: filter 0.1s;}
  41.         .div_imgs img:nth-child(1){filter: blur(5px);}
  42.         .div_imgs img:nth-child(2){filter: grayscale(100%);}
  43.         .div_imgs img:nth-child(3){filter: opacity(50%);}
  44.         .div_imgs img:nth-child(4){filter: invert(100%);}
  45.         .div_imgs img:nth-child(5){filter: saturate(7);}
  46.         .div_imgs img:hover{filter: none;}
  48.     </style>
  49. </head>
  50. <body>
  51. <div class="div_container">
  53. </div>
  54. <a href="#b" class="a">bbb</a>
  55. <div class="div_checkbox">
  56.     <label><input type="checkbox" name="friuts" value="apple"><span>apple</span></label>
  57.     <label><input type="checkbox" name="friuts" value="orange"><span>orange</span></label>
  58.     <label><input type="checkbox" name="friuts" value="banana" disabled><span>banana</span></label>
  59. </div>
  60. <div class="div_radio">
  61.     <label><input type="radio" name="animals" value="dog"><span>dog</span></label>
  62.     <label><input type="radio" name="animals" value="pig"><span>pig</span></label>
  63.     <label><input type="radio" name="animals" value="cat"><span>cat</span></label>
  64. </div>
  65. <div class="div_words">
  66.     <p>端请求携带必要设备和广告位等信息，接口根据广告位id查找该广告位正在投放的广告信息，再根据条件过滤，选取最符合条件的广告信息。然后判断该广告是否来源于dsp，如果是，则向dsp方请求最新广告素材信息；如果不是，则按照原有逻辑处理。</p>
  67.     <p>my name is hhhhh eujhtiuerht heg iewjht</p>
  68. </div>
  69. <div class="div_words2">
  70.     端请求携带必要设备和广告位等信息，接口根据广告位id查找该广告位正在投放的广告信息，再根据条件过滤，选取最符合条件的广告信息。然后判断该广告是否来源于dsp，如果是，则向dsp方请求最新广告素材信息；如果不是，则按照原有逻辑处理。
  71. </div>
  72. <div class="div_imgs">
  73.     <img src="http://pic4.iqiyipic.com/image/20170830/c9/9d/a_100045837_m_601_m1_480_270.jpg">
  74.     <img src="http://pic4.iqiyipic.com/image/20170830/c9/9d/a_100045837_m_601_m1_480_270.jpg">
  75.     <img src="http://pic4.iqiyipic.com/image/20170830/c9/9d/a_100045837_m_601_m1_480_270.jpg">
  76.     <img src="http://pic4.iqiyipic.com/image/20170830/c9/9d/a_100045837_m_601_m1_480_270.jpg">
  77.     <img src="http://pic4.iqiyipic.com/image/20170830/c9/9d/a_100045837_m_601_m1_480_270.jpg">
  78. </div>
  79. <script type="text/javascript">
  80.     var container = document.querySelector('.div_container');
  81.     function createItems(n){
  82.         var html = '';
  83.         for(var i = 0; i < n; i++){
  84.             html += '<div>'+(i+1)+'</div>';
  85.         }
  86.         container.innerHTML = html;
  87.     }
  88.     createItems(10);
  89.     container.addEventListener('click',getClick,true)
  90.     function getClick(e){
  91.         var ele = e.target;
  92.         if(ele.children.length){
  93.             console.log('i click the parent')
  94.         }
  95.         else{
  96.             console.log('i click the child'+ele.innerText)
  97.         }
  98.         if(ele.innerText == 2){
  99.             container.removeEventListener(container,getClick);
  100.         }
  101.     }
  102. </script>
  103. </body>
  104. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注