仿造虎扑步行街首页。

原网站 https://bbs.hupu.com/all-gambia

我非常喜欢虎扑,所以我打算仿造一个虎扑论坛,这是仿造的第一个网页,也是虎扑步行街的首页,我仿造这个页面并对这个页面进行了优化,比如

1.放弃了浮动布局,全部采用了flex布局。

2.网站布局和特效纯采用html+css的方式实现,比原网站流畅了许多,比如关注虎扑、消息、重点是左边导航栏的特效比原网站流畅非常多。

3.加强了细节,特别是左边导航栏里的版块分类鼠标悬浮时弹出的版块信息,该版块信息用 ul 和 li 标签 实现的,li 标签之间的边框完美重合,li 标签与ul 标签的边框也完美重合,放大网页来看也毫无破绽,原版网页的这个版块信息的bottom边框是不重合的。

Chrome浏览器下完美,其它浏览器没测试过。

代码如下(不包含图片),仅供学习用途,禁止商用。




    虎扑社区
    
    
    
    
    
    


    
    

步行街热帖

步行街

步行街

步行街

整个项目源码

https://gitee.com/island_tears/copyHupu

你可能感兴趣的:(实战,原创,HTML,CSS)