因为最近开始前端的学习，由于时间太长把内容忘得差不多了，现在需要补回来。
所以第一件事，临摹学习！
第一个网站是腾讯软件中心（腾讯爸爸你看到了吗~
1.首页
1.1 HTML+CSS布局
腾讯软件中心的首页是这样的（因为旧版比较好临摹所以选择了旧版
效果如图
横向两列布局
横向两列布局实现的方式是使用 由于使用浮动会导致该盒子脱离标准文档流，因此会影响紧邻其后的元素还有会导致父元素无法撑开。于是需要对父元素和紧邻其后的元素进行清除浮动，可用 得出的结果如图 
PS：我对父元素增加clear：both;却没有任何样式，这是因为，clear:both;清除的是左右两边的浮动而不是父元素的浮动。要想用clear：both;达到相同的效果可以这样 该效果和overflow：hidden的效果是一致的。 但是在HTML中添加一个无语义标签是不符合规范的，因此可以使用:after伪类来实现相同效果
横向导航栏
横向导航栏主要是先从纵向导航栏得来的，不同的是为li元素添加一个float: left;即可。
结果图
结果还是和原版有一些出入，像导航渐变色那里。以后再改一下~
来源：带刀预言家
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！