因为最近开始前端的学习,由于时间太长把内容忘得差不多了,现在需要补回来。
所以第一件事,临摹学习!
第一个 站是腾讯软件中心(腾讯爸爸你看到了吗~
1.首页
1.1 HTML+CSS布局
腾讯软件中心的首页是这样的(因为旧版比较好临摹所以选择了旧版
效果如图
横向两列布局
PS:我对父元素增加clear:both;却没有任何样式,这是因为,clear:both;清除的是左右两边的浮动而不是父元素的浮动。要想用clear:both;达到相同的效果可以这样 该效果和overflow:hidden的效果是一致的。 但是在HTML中添加一个无语义标签是不符合规范的,因此可以使用:after伪类来实现相同效果
横向导航栏
横向导航栏主要是先从纵向导航栏得来的,不同的是为li元素添加一个float: left;即可。
结果图

结果还是和原版有一些出入,像导航渐变色那里。以后再改一下~
声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!