| 仿造虎扑步行街首页。 | 您所在的位置：网站首页 › 虎扑新版网页 › 仿造虎扑步行街首页。 |
|
原网站 https://bbs.hupu.com/all-gambia 我非常喜欢虎扑，所以我打算仿造一个虎扑论坛，这是仿造的第一个网页，也是虎扑步行街的首页，我仿造这个页面并对这个页面进行了优化，比如 1.放弃了浮动布局，全部采用了flex布局。 2.网站布局和特效纯采用html+css的方式实现，比原网站流畅了许多，比如关注虎扑、消息、重点是左边导航栏的特效比原网站流畅非常多。 3.加强了细节，特别是左边导航栏里的版块分类鼠标悬浮时弹出的版块信息，该版块信息用 ul 和 li 标签 实现的，li 标签之间的边框完美重合，li 标签与ul 标签的边框也完美重合，放大网页来看也毫无破绽，原版网页的这个版块信息的bottom边框是不重合的。 Chrome浏览器下完美，其它浏览器没测试过。 代码如下（不包含图片），仅供学习用途，禁止商用。 虎扑社区 article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,main{ display: block; } *{ margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; font-size: 12px; font-family: "lucida grande",tahoma,verdana,arial,\5b8b\4f53,sans-serif; color: #444; } ul{ list-style: none; } a{ text-decoration: none; } #header{ border-bottom: 1px solid #E3E3E3; color:#999; } #header a { color:#999; } #header-nav{ display: flex; width: 1200px; height: 19px; margin: 0 auto; justify-content: space-between; } #header-nav-left ,#header-nav-right{ display: flex; } #header-nav-left{ margin-left: -10px; } #header-nav-left>li>a:hover{ text-decoration: underline; color:#A41F24; } #header-nav-right>li>a:hover{ text-decoration: underline; color:#A41F24; } #header-nav li{ display: flex; justify-content: center; align-items: center; padding: 0 10px; } #header-nav .line{ color:#ececec; padding: 0 !important; } .red{ color: #A41F24 !important; } main{ width: 1200px; margin: 12px auto 10px auto; } #logo{ height: 52px; width: 140px; background: white; margin-top: 7px; } #main-top{ display: flex; } #block{ display: flex; flex-direction: column; flex: 1; margin-left: 15px; height: 58px; } #block li{ display: flex; padding: 0 8px; justify-content: center; align-items: center; } #block .line{ padding: 0 !important; } #block-one ,#block-two{ display: flex; } #block-one{ height: 30px; background: #A41F24; border-top:1px solid #A41F24; border-bottom:1px solid white; } #block-one a{ color: white; } #block-one a:hover{ text-decoration:underline; } #block-two a:hover{ color: #A41F24; } #block-two a:hover{ text-decoration:underline; } #block-one .line{ color: #8e0d12; } #block-two{ background-color: #eff1f4; background: -webkit-gradient(linear,0 0,0 bottom,from(#e3e7eb),to(#eff1f4)); background: -moz-linear-gradient(top,#e3e7eb,#eff1f4); background: -o-linear-gradient(top,#e3e7eb,#eff1f4); background: -ms-linear-gradient(top,#e3e7eb,#eff1f4); flex: 1; border-bottom: 1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right: 1px solid #CCCCCC; } #main-nav{ margin-top: 7px; margin-bottom: 10px; display: flex; justify-content: space-between; border-bottom: 4px solid #A92229; } #main-nav-item{ display: flex; } #main-nav-item>li{ padding: 0 15px; height: 31px; display: flex; justify-content: center; align-items: center; background: #ebeff1; margin-right: 1px; border:1px solid #ebeff1; background: -webkit-gradient(linear,0 0,0 bottom,from(#fff),to(#ebeff1)); background: -moz-linear-gradient(top,#fff,#ebeff1); background: -o-linear-gradient(top,#fff,#ebeff1); background: -ms-linear-gradient(top,#fff,#ebeff1); } #main-nav-item a{ position: relative; top:2px; } #main-nav-item a:hover{ text-decoration: underline; } .main-nav-select{ background: #A92229 !important; border: 1px solid #A92229 !important; } .main-nav-select >a{ color: white; } .block-one-select{ background: -webkit-gradient(linear,0 0,0 bottom,from(#fff),to(#e3e7eb)); background: -moz-linear-gradient(top,#fff,#e3e7eb); background: -ms-linear-gradient(top,#fff,#e3e7eb); background: -o-linear-gradient(top,#fff,#e3e7eb); margin-bottom: -1px; /*height: 29px;*/ } .block-one-select >a{ color: #444444!important; font-weight: bold; position: relative; top:1px; } #search{ display: flex; } #search-input{ width: 198px; height: 25px; padding:0 4px; border-top:1px solid #d2d5d8; border-left:1px solid #d2d5d8; border-bottom:1px solid #d2d5d8; border-right:none; } #search-button{ height: 25px; width: 23px; border: 1px solid #d2d5d8; background: url(./image/top_ico.png) 0 -247px no-repeat #eaeaea; } .icon-mobile{ width: 8px; height: 12px; background: url(./image/top_ico.png) 0 -167px no-repeat; margin-right: 6px; } .midden{ display: flex; align-items: center; } .triangle{ width:0; height:0; overflow:hidden; font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */ line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */ border-width:4px; border-style:solid; /*ie6下会出现不透明的兼容问题*/ border-color:#999 transparent transparent transparent; position: relative; left:4px; top:2px; transition: all 0.2s } #main-body{ margin-top: 10px; display: flex; border-top:3px solid #E5E5E5; } #bbsPlate{ width: 146px; padding: 10px 0 10px 15px; background-color: #ECF1F4; border-top: 1px solid #AAAAAA; border-left: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA; border-right: 1px solid #C2C7CA; } .myPlate{ padding-left: 10px; height: 19px; margin-bottom: 5px; display: flex; align-items: center; margin-top: 10px; } .myPlateHeader{ font-size: 13px; color: #b50000; font-weight: 600; margin-right: 5px; } .plateListA{ } .plateListA>li{ height: 32px; display: flex; border-bottom: 1px solid white; } .plateListA>li:hover{ background-color: white; border-left: 1px solid #C2C7CA; border-right: 1px solid white; border-top: 1px solid #C2C7CA; border-bottom: 1px solid #C2C7CA; position: relative; top:-1px; left:1px; box-shadow: -3px 3px 0 #C2C7CA; } .plateListA>li:hover .showName{ color: red; } .plateListA>li>a{ padding-left: 10px; white-space:nowrap; overflow: hidden; align-items: center; display: flex; width: 100%; } .showName{ margin-right: 5px; } .num{ font-style: italic; } #bbsArticle{ padding: 14px 14px; width: 772px; border-top: 1px solid #AAAAAA; border-bottom:1px solid #AAAAAA; } #bbsArticle>h1{ font-size: 18px; padding-left: 8px; margin-bottom: 10px; } .articleList>h3{ background-color: #EAEEF0; height: 26px; display: flex; align-items: center; border-top: 1px solid #BCC4CB; padding-left: 15px; margin: 8px 0; color:#b50000; } .articleList ul{ padding: 0 10px; } .articleList li{ height: 31px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #DDD; } .articleInfo { display: flex; } .articleInfo a{ color:#b50000; } .articleInfo span{ margin-left: 5px; color:#666; } #allPlate{ width: 282px; border: 1px solid #AAAAAA; padding: 47px 15px 0 15px; } #allPlate>h3{ height: 26px; background-color: #EAEEF0; border-top: 1px solid #AAAAAA; padding-left: 10px; display: flex; align-items: center; margin-bottom: 10px; } #allPlate>h3>a{ color: #b50000; } .allPlateItem{ padding-left: 10px; padding-bottom: 25px; } .allPlateItem a:hover{ color: #b50000; text-decoration: underline; } .plateTitle{ border-bottom: 1px solid #d5d5d5; color: #b50000; height: 17px; margin-bottom: 5px; } .allPlateItem ul{ display: flex; flex-wrap: wrap; } .allPlateItem li{ height: 25px; padding-left: 2px; width: 78px; display: flex; align-items: center; border-bottom: 1px dotted #DDD; } .articleList a:hover{ text-decoration: underline; } #concern{ position: relative; border-left:1px solid transparent; border-right:1px solid transparent; } #concern:hover{ background-color: #FAFAFA; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; /*border-bottom: 1px solid #FAFAFA;*/ } #concern>a:hover{ color:#A41F24; } #concern:hover .triangle{ transform: rotate(180deg); transform-origin:50% 25%; transition: all 0.2s; } #concern:hover #concernDrop{ display: block; } #concernDrop{ display: none; position: absolute; top: 19px; width: 100px; background-color: #FAFAFA; left:-23px; border:1px solid #CCCCCC; } #concernDrop>li{ height: 26px; justify-content: flex-start; align-items: stretch; padding-left: 0; padding-right: 0; } #concernDrop a:hover{ color:#A41F24; background-color:#EDF1F4; } #concernDrop a{ display: flex; width: 100%; align-items: center; padding-left: 8px; } .icon-weiBo{ width: 16px; height: 16px; background: url(./image/top_ico.png) 0 -180px no-repeat; margin-right: 5px; } .icon-weChat{ width: 16px; height: 16px; background: url(./image/top_ico.png) -64px -180px no-repeat; margin-right: 5px; } .icon-instagram{ width: 16px; height: 16px; background: url(./image/top_ico.png) -80px -180px no-repeat; margin-right: 5px; } #concern .whiteLine{ display: none; position: absolute; border-bottom: 1px solid #FAFAFA; top:19px; width: 76px; height: 1px; left: 0; } #concern:hover .whiteLine{ display: block; } #message{ position: relative; border-left:1px solid transparent; border-right:1px solid transparent; } #message >a{ text-decoration: none!important; } #message:hover >a{ color: #999!important; } #message:hover{ background-color: #FAFAFA; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; } #message .whiteLine{ display: none; position: absolute; border-bottom: 1px solid #FAFAFA; top:19px; width: 44px; height: 1px; left: 0; } #message:hover .whiteLine{ display: block; } #message:hover #messageDrop{ display: block; } #messageDrop{ display: none; position: absolute; width: 120px; top:19px; left:-75px; background-color: #FAFAFA; border:1px solid #CCCCCC; } #messageDrop li{ height: 26px; padding: 0; justify-content: start; align-items: stretch; } #messageDrop a{ width: 100%; display: flex; align-items: center; padding-left: 10px; } #set{ position: relative; border-left:1px solid transparent; border-right:1px solid transparent; } #set:hover .triangle{ transform: rotate(180deg); transform-origin:50% 25%; transition: all 0.2s; } #set:hover{ background-color: #FAFAFA; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; } #setDrop{ display: none; position: absolute; top:19px; left:-47px; background-color: #FAFAFA; border:1px solid #CCCCCC; width: 100px; } #setDrop li{ height: 26px; justify-content: flex-start; align-items: stretch; padding: 0; } #setDrop a{ width: 100%; display: flex; align-items: center; padding-left: 10px; } #setDrop a:hover{ background-color:#EDF1F4; color:#A41F24; } #set:hover .whiteLine{ display: block; } #set:hover #setDrop{ display: block; } #set .whiteLine{ display: none; position: absolute; border-bottom: 1px solid #FAFAFA; top:19px; width: 52px; height: 1px; left: 0; } .from:hover a{ color: #b50000; } .plateListItem{ position: relative; border-top:1px solid transparent; border-bottom:1px solid transparent; border-left:1px solid transparent } .plateListItem .triangle{ width:0; height:0; overflow:hidden; font-size: 0; /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */ line-height: 0; /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */ border-width:4px; border-style:solid; /*ie6下会出现不透明的兼容问题*/ border-color:transparent transparent transparent #C2C7CA; position: relative; left: -10px; top:0; transition: color 0.1s } .plateListItem .whiteLine{ display: none; height: 30px; position: absolute; border-right: 1px solid #F1F1F1; width: 1px; left:127px; } .plateListItem:hover{ top:-1px; left:1px; background-color: #F1F1F1; border-top:1px solid #8C8C8C; border-bottom:1px solid #8C8C8C; border-left:1px solid #8C8C8C; } .plateListItem:hover .whiteLine{ display: block; } .plateListItem:hover .plateListItemDrop{ display: flex; } .plateListItem:hover>a{ padding-left: 9px; text-decoration: underline; color: #B50000; } .plateListItem:hover>a>span{ position: relative; top:1px; color: inherit; } .plateListItem:hover .triangle{ position: relative; top:1px; left: -11px; border-color:transparent transparent transparent #B50000; } .plateListItemDrop{ display: none; position: absolute; left:127px; top:-1px; background-color: #F1F1F1; border: 1px solid #8C8C8C; overflow: hidden; width: 885px; flex-direction: row; flex-wrap: wrap; } .plateListItemDrop>li{ width: 221px; height: 55px; border-right: 1px solid #DEDEDE; border-bottom: 1px solid #DEDEDE; display: flex; flex-direction: column; margin-bottom: -1px; } .plateListItemDrop>li:nth-child(4n) { width: 220px; border-right: none; } .plateListItemDrop>li:nth-child(4)~li{ padding-top: 1px; height: 56px; } .borough >a{ display: block; width: auto; margin-right: 5px; max-width: 80%; color: #005eac; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .borough >a:hover{ color: white; background-color:#77AADD; } .borough{ display: flex; align-items: center; } .borough ,.newInvitation{ display: flex; flex: 1; padding-left: 10px; } .newInvitation{ justify-content: flex-start; align-items: center; } .newInvitation>a{ display: block; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .newInvitation>a:hover{ color: #B50000; text-decoration: underline; } .plateListB>li{ height: 32px; display: flex; border-bottom: 1px solid white; } .plateListB >li>a{ padding-left: 10px; white-space:nowrap; overflow: hidden; align-items: center; display: flex; justify-content: space-between; width: 100%; } #toTop{ position: fixed; right: 2%; bottom: 100px; height: 48px; width: 48px; background: url("./image/bbsImg.png") center/100% no-repeat; z-index: 999; } footer>nav{ margin: 0 auto; width: 1200px; padding: 8px 0 20px; border-top: 1px solid #e5e5e5; } footer>nav>ul{ display: flex; justify-content: center; } footer>nav>ul>li{ margin-right: 4px; color:#999; } footer a{ color:#999; } footer a:hover{ text-decoration: underline; color: #b50000; } 手机虎扑 | 虎扑客户端 | 关注虎扑 新浪微博 官方微信 Instagram 你好，虎扑JR | 我的首页 | 消息 短消息 | 虎扑币 | 设置 设置 账号安全 银行 帮助 退出 虎扑首页 | NBA | CBA | 电竞 | 国际足球 | 中国足球 | 赛车 | 装备 | 识货 | 社区 | 步行街 | 路人王 | 更多 首页 步行街热帖 步行街主干道 晒晒照片 影视 娱乐圈 数码 车友交流 啥破图都有 视频 家装房产 军事 旅游 ACG我关注的版块 管理 我关注的版块帖子 湿乎乎的话题88888 CBA专区88888 深蓝讨论群88888 步行街主干道110200 NBA2K专区88888 中国篮球话题区88888 FIBA-国际篮球88888 骑士专区88888 广东华南虎88888 ACG4055 开放区 英雄联盟67899 数码区10652版块分类 NBA论坛话题区a8 勇士从巅峰跌落，用这个纪念杜兰特的视频纪念过去的三年 话题区a8 [流言板]快船得到150分而仅有4名球员得分上双，30年来首次 话题区a8 深圳的安保人员... 话题区a8 深圳的安保人员... 话题区a8 深圳的安保人员... 话题区a8 深圳的安保人员... 话题区a8 深圳的安保人员... 话题区a8 深圳的安保人员... 话题区a8 深圳的安保人员... 话题区a8 深圳的安保人员... CBA论坛话题区a8 勇士从巅峰跌落，用这个纪念杜兰特的视频纪念过去的三年 话题区a8 [流言板]快船得到150分而仅有4名球员得分上双，30年来首次 话题区a8 深圳的安保人员... 国际足球论坛话题区a8 勇士从巅峰跌落，用这个纪念杜兰特的视频纪念过去的三年 话题区a8 [流言板]快船得到150分而仅有4名球员得分上双，30年来首次 话题区a8 深圳的安保人员... 话题区a8 深圳的安保人员... 中国足球论坛话题区a8 勇士从巅峰跌落，用这个纪念杜兰特的视频纪念过去的三年 话题区a8 [流言板]快船得到150分而仅有4名球员得分上双，30年来首次 话题区a8 深圳的安保人员... 话题区a8 深圳的安保人员... 游戏电竞话题区a8 勇士从巅峰跌落，用这个纪念杜兰特的视频纪念过去的三年 话题区a8 [流言板]快船得到150分而仅有4名球员得分上双，30年来首次 话题区a8 深圳的安保人员... 话题区a8 深圳的安保人员... 步行街热帖 步行街 女朋友沙滩比基尼part2. 15亮288回复 步行街主干道 李佳琦上《吐槽大会》：我比几百万人都努力。什么水平？ 26亮79回复 步行街主干道 挑战上海超大牛肉面，30分钟吃完免单 50亮464回复 步行街主干道 为什么工厂里的女孩子看不上工厂里的男孩子？ zt 50亮323回复 步行街主干道 辩论名场面：罗永浩逻辑缜密步步紧逼，王自如心态崩溃放弃抵抗！ 50亮446回复 步行街主干道 官方吐槽最为致命！央视喷这些烂片什么水平？ 34亮105回复 步行街主干道 双方辩友都保持了极大克制，展现了极高素质 zt 45亮126回复 步行街主干道 所谓成功 只是突破了那一段时间的平庸而已 17亮135回复 步行街主干道 关于买两张票却用一个座位放行李是合法的？合个锤子法好吗？ 40亮405回复 步行街主干道 20092019, 减重70斤，博士期间发表SCI论文10篇，什么水平 9亮67回复 步行街主干道 8K超清航拍洛杉矶的超级科技梦幻夜景!zt 18亮72回复 步行街主干道 怒喷名场面！范志毅的经典足球圣经什么水平？ 17亮69回复 步行街主干道 如此前女友，我何以为报 50亮366回复 步行街主干道 陈建斌演的曹操是什么水平？ 23亮125回复 步行街主干道 爆冷！ 34亮122回复 步行街主干道 转帖：2亿，比太阳热10倍！我国“人造太阳”预计明年投入运行 40亮221回复 步行街主干道 帮闺蜜相个亲，坐标波士顿! 有意欢迎私信哦 16亮88回复 步行街主干道 大半夜睡不着翻看女朋友手机 50亮737回复 步行街主干道 白岩松:米其林还是专注于轮胎吧，我们的胃我们自己定位！zt 30亮181回复 步行街主干道 讲个我室友保研失败的事 24亮76回复 步行街主干道 步行街 女朋友沙滩比基尼part2. 15亮288回复 步行街主干道 李佳琦上《吐槽大会》：我比几百万人都努力。什么水平？ 26亮79回复 步行街主干道 挑战上海超大牛肉面，30分钟吃完免单 50亮464回复 步行街主干道 为什么工厂里的女孩子看不上工厂里的男孩子？ zt 50亮323回复 步行街主干道 辩论名场面：罗永浩逻辑缜密步步紧逼，王自如心态崩溃放弃抵抗！ 50亮446回复 步行街主干道 官方吐槽最为致命！央视喷这些烂片什么水平？ 34亮105回复 步行街主干道 双方辩友都保持了极大克制，展现了极高素质 zt 45亮126回复 步行街主干道 所谓成功 只是突破了那一段时间的平庸而已 17亮135回复 步行街主干道 关于买两张票却用一个座位放行李是合法的？合个锤子法好吗？ 40亮405回复 步行街主干道 20092019, 减重70斤，博士期间发表SCI论文10篇，什么水平 9亮67回复 步行街主干道 8K超清航拍洛杉矶的超级科技梦幻夜景!zt 18亮72回复 步行街主干道 怒喷名场面！范志毅的经典足球圣经什么水平？ 17亮69回复 步行街主干道 如此前女友，我何以为报 50亮366回复 步行街主干道 陈建斌演的曹操是什么水平？ 23亮125回复 步行街主干道 爆冷！ 34亮122回复 步行街主干道 转帖：2亿，比太阳热10倍！我国“人造太阳”预计明年投入运行 40亮221回复 步行街主干道 帮闺蜜相个亲，坐标波士顿! 有意欢迎私信哦 16亮88回复 步行街主干道 大半夜睡不着翻看女朋友手机 50亮737回复 步行街主干道 白岩松:米其林还是专注于轮胎吧，我们的胃我们自己定位！zt 30亮181回复 步行街主干道 讲个我室友保研失败的事 24亮76回复 步行街主干道 步行街 女朋友沙滩比基尼part2. 15亮288回复 步行街主干道 李佳琦上《吐槽大会》：我比几百万人都努力。什么水平？ 26亮79回复 步行街主干道 挑战上海超大牛肉面，30分钟吃完免单 50亮464回复 步行街主干道 为什么工厂里的女孩子看不上工厂里的男孩子？ zt 50亮323回复 步行街主干道 辩论名场面：罗永浩逻辑缜密步步紧逼，王自如心态崩溃放弃抵抗！ 50亮446回复 步行街主干道 官方吐槽最为致命！央视喷这些烂片什么水平？ 34亮105回复 步行街主干道 双方辩友都保持了极大克制，展现了极高素质 zt 45亮126回复 步行街主干道 所谓成功 只是突破了那一段时间的平庸而已 17亮135回复 步行街主干道 关于买两张票却用一个座位放行李是合法的？合个锤子法好吗？ 40亮405回复 步行街主干道 20092019, 减重70斤，博士期间发表SCI论文10篇，什么水平 9亮67回复 步行街主干道 8K超清航拍洛杉矶的超级科技梦幻夜景!zt 18亮72回复 步行街主干道 怒喷名场面！范志毅的经典足球圣经什么水平？ 17亮69回复 步行街主干道 如此前女友，我何以为报 50亮366回复 步行街主干道 陈建斌演的曹操是什么水平？ 23亮125回复 步行街主干道 爆冷！ 34亮122回复 步行街主干道 转帖：2亿，比太阳热10倍！我国“人造太阳”预计明年投入运行 40亮221回复 步行街主干道 帮闺蜜相个亲，坐标波士顿! 有意欢迎私信哦 16亮88回复 步行街主干道 大半夜睡不着翻看女朋友手机 50亮737回复 步行街主干道 白岩松:米其林还是专注于轮胎吧，我们的胃我们自己定位！zt 30亮181回复 步行街主干道 讲个我室友保研失败的事 24亮76回复 步行街主干道 版块列表 步行街 步行街主干道 影音娱乐 娱乐圈 影视区 ACG区 音乐区 生活 数码区 家装房产 游戏圈 股票区 旅游区 车友交流 学府路 万事屋 文学区 情感区 健身和运动健 Copyright by 虎扑JRs & 虎扑 - 手机虎扑网 - 虎扑App - 服务协议 - 网站地图 - NBA - CBA - 足球 - 电竞 - 赛车整个项目源码 https://gitee.com/island_tears/copyHupu |
| CopyRight 2018-2019 实验室设备网 版权所有 |