HTML+CSS项目开发经验总结(推荐)

2019-01-15 08:42:28王振洲

(1)、关系选择符的使用

    

(2)、伪类选择符的使用

    

    

特别是E:first-of-type与E:first-child 。其实它两最大的区别在于前者是父元素下的第一个结构标签,而后者不需要一定是第一个结构标签。如下例子:

  • <div class="test">      <!-- <a href="#">测试</a> -->  
  •         <p>p标签</p>           <a href="#">a标签</a>  
  •         <a href="#">a标签</a>    </div>    
  • a:first-child是.test下的第一个结构标签,而且是a标签,不是则不起效果 。

    a:first-of-type不需要是第一个子元素只需要.test下的a标签的第一个即可。

    (3)、CSS属性之opacity、z-index 、display

    a、opacity 

    在这次项目开发中,有一个效果是需要用到遮蔽层的效果。如下图。一开始我的做法是写两个div,然后将第二个div设置透明。然后再用hover后,将它透明度调回不透明。 同时也将第二个div定位,与第一个div重合。但我发现这样写下来代码多且容易乱。而参考了其他小伙伴的代码,发现其实灵活运用z-index也可以做到此效果。下面是具体实现   

    CSS代码:

    CSS Code复制内容到剪贴板
  • .div1 {       width: 200px;   
  •    height: 200px;       background-color: #ccc;               
  •    position: relative;           font-size: 20px;   
  •    text-align: center;       line-height: 200px;   
  •             }      
  • .div2 {       width: 200px;   
  •    height: 200px;       position: absolute;/*使其与父元素重合*/  
  •    top:0;       left:0;   
  •    background: rgba(21,85,144,0.2);       opacity: 0;/*先设置为透明*/  
  •    transition: all 0.3s;/*过渡效果*/      cursor: pointer;   
  •                    }   
  •             .div2:hover {       opacity: 1;               
  •             }