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

时间：2017-04-08

在做项目时，我由于对某些知识点不够熟悉，不能熟练运用，所以导致开发速度慢。当我们熟练掌握了一个知识点后，是可以快速地写出代码实现相应的效果。在这个项目开发过程中，我主要是对以下知识点不够熟悉：

（1）、关系选择符的使用

（2）、伪类选择符的使用

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

XML/HTML Code复制内容到剪贴板

<div class="test">
<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;
}

共5页:

3/5

上一篇：浅谈script在html中的摆放位置 下一篇：浅谈HTML中的标记

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

相关文章

最新文章