高仿腾讯新闻科技频道页面

HTML代码：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="author" content="隔年雪"><title></title><link rel="stylesheet" href="css/index.css"><link rel="stylesheet"href="https://at.alicdn.com/t/font_2934743_g2w6v8qbrrq.css?spm=a313x.7781069.1998910419.39&file=font_2934743_g2w6v8qbrrq.css">
</head><body><!-- 头部 --><header><!-- 头部左边部分 --><div class="head-left"><a href=""><img src="./images/new_logo.png" alt="logo"></a><ul><li><a href="">要闻</a></li><li><a href="">抗肺炎</a></li><li><a href="">北京</a></li><li><a href="">娱乐</a></li><li><a href="">体育</a></li><li><a href="">军事</a></li><li><a href="">国际</a></li><li><a href="">NBA</a></li><li class="active"><a href="">科技</a></li><li><a href="">财经</a></li><li><a href="">汽车</a></li><li><a href="">时尚</a></li><li><a href="">图片</a></li><li><a href="">游戏</a></li></ul><div class="more"><a href="">更多+</a></div></div><!-- 头部右边部分 --><div class="head-right"><form action=""><input type="text" name="" id="" placeholder="科技"><a href="" class="iconfont icon-sousuo"></a></form><div class="login"><a href="">一键登录</a></div></div></header><!-- 主体 --><main><!-- 主体头部图片 --><div class="container"><div class="banner"><a href=""><img src="./images/banner1.png" alt="banner"></a><img src="./images/top_qr.png" alt="top-qr"></div><!-- 主体内容 --><div class="content"><!-- 主体左侧 --><div class="content-left"><div id="content-left"><!-- 主体左侧头部 --><div class="content-left-head"><h2></h2></div><!-- 主体左侧内容 --><ul class="content-left-body"><li><a href="">互联网</a></li><li><a href="">通信/传统IT</a></li><li><a href="">区块链</a></li><li><a href="">人工智能</a></li><li><a href="">创业创新</a></li><li><a href="">数码产品</a></li><li><a href="">企鹅智酷</a></li></ul></div></div><!-- 主体中间 --><div class="content-middle"><div><!-- 主体中间banner --><div class="content-middle-banner"><!-- 主体中间banner大 --><div class="banner-big"><div class="banner-big-content"><a href=""><img src="./images/banner-big1.jfif" alt="柳夜熙爆红的背后推手：不做元宇宙的李佳琦"><div>柳夜熙爆红的背后推手：不做元宇宙的李佳琦</div></a></div><!-- 主体中间banner大选择 --><div class="dot"><a href="" class="dot-active"></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a></div></div><!-- 主体中间banner小 --><div><div class="banner-small"><a href=""><img src="./images/banner-small1.jfif" alt="日媒：日本专家在猴子身上成功试验艾滋病疫苗"><div>日媒：日本专家在猴子身上成功试验艾滋病疫苗</div></a></div><div class="banner-small"><a href=""><img src="./images/banner-samll2.jfif" alt="到底是什么，让大家疯狂爱上了滤镜？"><div>到底是什么，让大家疯狂爱上了滤镜？</div></a></div></div></div><!-- 主体中间列表 --><div class="content-middle-list"><h2>热点精选</h2><ul><li><!-- 主体中间列表图片 --><a href=""><img src="./images/content-middle-list1.jfif"alt="社区团购一周年：各家已投入数万员工和百亿亏损，没有退路和幻想"></a><div class="detail"><!-- 主体中间列表内容 --><h3><a href="">社区团购一周年：各家已投入数万员工和百亿亏损，没有退路和幻想</a></h3><!-- 主体中间列表信息 --><div class="info"><div class="info-left"><a href="">晚点精选</a><span>5小时前</span></div><div class="info-right"><div class="share"><span>分享</span></div><a href="">123</a></div></div></div></li><li class="ad"><!-- 主体中间列表图片 --><a href=""><img src="./images/content-middle-list2.jfif" alt="传奇复古_高爆率_装备靠打_够玩10年!"></a><div class="detail"><!-- 主体中间列表内容 --><h3><a href="">传奇复古_高爆率_装备靠打_够玩10年!</a></h3><!-- 主体中间列表信息 --><div class="info"><div class="info-left"><a href="">广告</a></div><div class="info-right"><a href=""><img src="./images/go_app.png" alt="了解详情"><span>了解详情</span></a></div></div></div></li><li><!-- 主体中间列表图片 --><a href=""><img src="./images/content-middle-list3.jfif" alt="谁杀死了双十一"></a><div class="detail"><!-- 主体中间列表内容 --><h3><a href="">谁杀死了双十一</a></h3><!-- 主体中间列表信息 --><div class="info"><div class="info-left"><a href="">虎嗅APP</a><span>42分钟前</span></div><div class="info-right"><div class="share"><span>分享</span></div><a href="">69</a></div></div></div></li></ul></div></div></div><!-- 主体右侧 --><div class="content-right"><!-- 原创精品 --><div class="content-right-top"><!-- 主体右侧内容标题 --><div class="title"><h2><a href="">原创精品</a></h2></div><!-- 原创精品内容 --><div class="content"><ul><li><a href=""><img src="./images/content-right-top1.jfif" alt="董明珠22岁秘书走红，你怎么看？"></a><div><a href="">董明珠22岁秘书走红，你怎么看？</a></div></li></ul><!-- 主体右侧内容更多 --><div class="more">没有更多了</div></div></div><!-- 热门专题 --><div class="content-right-middle"><!-- 主体右侧内容标题 --><div class="title"><h2><a href="">热门专题</a></h2></div><!-- 热门专题内容 --><div class="content"><ul><li><a href=""><img src="./images/content-right-middle1.jfif" alt="降低制氢成本！全球首台碳电极电解水制氢设备交付"></a><div><a href="">降低制氢成本！全球首台碳电极电解水制氢设备交付</a></div></li></ul><!-- 主体右侧内容更多 --><div class="more">没有更多了</div></div></div><!-- 主体右侧广告 --><div class="content-right-bottom"><a href=""><img src="./images/content-right-bottom-ad1.jfif" alt="主体右侧广告"></a></div></div></div></div></main><!-- 返回顶部 --><div class="toTop"><div id="ad" class="ad" style="display: block;"><div class="content"><div class="ad-top"><span>广告</span><a href="javascript:0;" id="hidden">×</a></div><a href=""><img src="./images/toTop-ad.png" alt="toTop-ad"></a></div></div><a href=""><span></span><span>刷新</span></a><a href=""><span>广告<br>设置</span></a><a href=""><span>侵权<br>投诉</span></a><a href=""><span>用户<br>反馈</span></a></div>
</body>
<script>var contentLeft = document.getElementById("content-left")window.onscroll = function () {if (document.documentElement.scrollTop > 100) {contentLeft.style.position = "fixed"} else {contentLeft.style.position = "static"}}var ad = document.getElementById("ad")var hidden = document.getElementById("hidden")hidden.onclick = function () {if (ad.style.display == "block") {ad.style.display = "none"} else {ad.style.display = "block"}}
</script></html>

CSS代码：

/* 通用样式 */
* {margin: 0;padding: 0;list-style: none;text-decoration: none;outline: none;box-sizing: border-box;
}
.container {width: 1240px;height: 100%;margin: 0 auto;
}
/* 头部 */
header {width: 100%;min-width: 1571px;min-height: 80px;background-color: #fff;border-bottom: 1px solid #ebebeb;position: fixed;top: 0;left: 0;z-index: 99;display: flex;justify-content: space-between;
}
header::before {content: "";display: block;width: 100%;height: 2px;background: url("../images/head-top-bg.png") no-repeat;background-size: 100%;position: absolute;top: 0;left: 0;
}
/* 头部左边部分 */
header .head-left {height: 79px;display: flex;flex-shrink: 0;
}
header .head-left > a {display: block;width: 167px;height: 100%;padding: 25px 15px 20px 30px;
}
header .head-left > a > img {width: 122px;height: 33;
}
header .head-left ul {display: flex;min-width: 805px;overflow: hidden;
}
header .head-left ul li {height: 80px;line-height: 80px;padding: 0 15px;flex-shrink: 0;
}
header .head-left ul li a {display: inline-block;height: 80px;font-size: 18px;color: #333;
}
header .head-left ul li a:hover {color: #2291f7;
}
header .head-left ul .active a {font-weight: 700;border-bottom: 3px solid #4889f3;
}
header .head-left .more {height: 80px;padding: 26px 15px;
}
header .head-left .more a {display: inline-block;padding: 0 14px;height: 30px;line-height: 30px;border-radius: 15px;background-color: #e3f3fe;font-size: 14px;color: #3563d5;
}
/* 头部右边部分 */
header .head-right {display: flex;align-items: center;padding-right: 30px;
}
header .head-right form {height: 33px;padding: 0 12px 0 15px;background-color: #f4f4f4;border-radius: 5px;margin-right: 27px;
}
header .head-right form input {width: 150px;height: 34px;background-color: #f4f4f4;line-height: 34px;border: 0;font-size: 16px;transition: width 0.3s linear;
}
header .head-right form .icon-sousuo {color: rgb(211, 211, 211);font-size: 18px;font-weight: 600;
}
header .head-right form input::placeholder {color: #cacaca;
}
header .head-right form input:focus {width: 160px;
}
header .head-right form input:focus::placeholder {color: #f4f4f4;
}
header .head-right form input:focus + .icon-sousuo {color: rgb(38, 147, 247);
}
header .head-right .login {height: 79px;padding: 27px 15px;
}
header .head-right .login a {display: inline-block;width: 76px;height: 26px;padding: 0 14px;line-height: 26px;border-radius: 15px;background-color: #e3f3fe;font-size: 12px;color: #3563d5;
}
/* 主体 */
main {width: 100%;height: 1200px;padding-top: 80px;
}
/* 主体头部图片 */
main .banner {margin-top: 20px;display: flex;justify-content: space-between;
}
main .banner img {height: 90px;
}
/* 主体内容 */
main > .container > .content {margin-top: 20px;display: flex;justify-content: space-between;
}
/* 主体左侧 */
main .content .content-left {width: 170px;min-height: 100px;
}
main .content .content-left div {width: 170px;top: 120px;
}
/* 主体左侧头部 */
main .content .content-left div .content-left-head {height: 44px;line-height: 44px;background-color: #4889f3;border-radius: 3px 3px 0 0;
}
main .content .content-left div .content-left-head h2 {width: 100%;height: 100%;background: url("../images/content-left-hd.png") center no-repeat;
}
/* 主体左侧内容 */
main .content .content-left div .content-left-body {width: 100%;border: 1px solid #f0f0f0;background-color: #fff;
}
main .content .content-left div .content-left-body li {border-top: 1px solid #f0f0f0;
}
main .content .content-left div .content-left-body li:first-child {border: 0;
}
main .content .content-left div .content-left-body li a {display: block;height: 56px;line-height: 56px;font-size: 16px;color: #666;text-align: center;
}
main .content .content-left div .content-left-body li a:hover {color: #4889f3;
}
/* 主体中间 */
main .content .content-middle {width: 700px;
}
/* 主体中间banner */
main .content .content-middle div .content-middle-banner {height: 272px;display: flex;flex-wrap: wrap;justify-content: space-between;
}
/* 主体中间banner大 */
main .content .content-middle div .content-middle-banner .banner-big {width: 458px;height: 270px;position: relative;
}
main.content.content-middlediv.content-middle-banner.banner-big.banner-big-content {position: relative;height: 100%;
}
main.content.content-middlediv.content-middle-banner.banner-big.banner-big-contentimg {width: 100%;height: 100%;
}
main.content.content-middlediv.content-middle-banner.banner-big.banner-big-contentdiv {width: 100%;padding: 12px 20px 20px;background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8));line-height: 30px;font-size: 20px;font-weight: 400;color: #fff;position: absolute;left: 0;bottom: 0;
}
/* 主体中间banner大选择 */
main .content .content-middle div .content-middle-banner .banner-big .dot {position: absolute;right: 10px;bottom: 6px;
}
main .content .content-middle div .content-middle-banner .banner-big .dot a {display: inline-block;width: 6px;height: 6px;border-radius: 50%;margin: 0 2px;background: rgba(255, 255, 255, 0.5);
}
main.content.content-middlediv.content-middle-banner.banner-big.dot.dot-active {background: rgb(255, 255, 255);
}
/* 主体中间banner小 */
main .content .content-middle div .content-middle-banner .banner-small {width: 230px;height: 130px;margin-bottom: 10px;position: relative;
}
main .content .content-middle div .content-middle-banner .banner-small img {width: 100%;height: 100%;
}
main .content .content-middle div .content-middle-banner .banner-small div {width: 100%;padding: 12px;background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8));line-height: 18px;font-size: 14px;font-weight: 400;color: #fff;position: absolute;left: 0;bottom: 0;
}
/* 主体中间列表 */
main .content .content-middle div .content-middle-list {margin-top: 35px;
}
main .content .content-middle div .content-middle-list h2 {color: #5889ec;
}
main .content .content-middle div .content-middle-list ul li {border-top: 1px solid #e6e6e6;padding: 20px 0;display: flex;justify-content: space-between;
}
main .content .content-middle div .content-middle-list ul li:hover {background-color: #f3f6f8;
}
main .content .content-middle div .content-middle-list ul li:first-child {border: 0;
}
/* 主体中间列表图片 */
main .content .content-middle div .content-middle-list ul li > a {flex-shrink: 0;display: block;width: 230px;height: 130px;margin-right: 20px;overflow: hidden;
}
main .content .content-middle div .content-middle-list ul li > a > img {width: auto;height: 130px;margin-left: -11px;transition: transform 0.3s linear;
}
main .content .content-middle div .content-middle-list ul .ad > a > img {margin: 0;
}
main .content .content-middle div .content-middle-list ul li > a:hover > img {transform: scale(1.05);
}
/* 主体中间列表内容 */
main .content .content-middle div .content-middle-list ul li .detail {width: 450px;padding-right: 10px;display: flex;flex-direction: column;justify-content: space-between;
}
main .content .content-middle div .content-middle-list ul li .detail h3 a {line-height: 32px;font-size: 20px;font-weight: 400;color: #333;
}
main.content.content-middlediv.content-middle-listulli.detailh3a:hover {color: #2291f7;
}
/* 主体中间列表信息 */
main .content .content-middle div .content-middle-list ul li .detail .info {display: flex;justify-content: space-between;
}
main.content.content-middlediv.content-middle-listulli.detail.info.info-lefta,
main.content.content-middlediv.content-middle-listulli.detail.info.info-leftspan {font-size: 12px;color: #666;margin-right: 10px;
}
main.content.content-middlediv.content-middle-listulli.detail.info.info-right {display: flex;align-items: center;
}
main.content.content-middlediv.content-middle-listulli.detail.info.info-right.sharespan {display: inline-block;padding-left: 18px;background: url("../images/share.png") no-repeat 0;font-size: 12px;color: gray;margin-right: 15px;
}
main.content.content-middlediv.content-middle-listulli.detail.info.info-right.sharespan:hover {background: url("../images/share-hover.png") no-repeat 0;
}
main.content.content-middlediv.content-middle-listulli.detail.info.info-righta {display: inline-block;padding-left: 18px;background: url("../images/comment.png") no-repeat 0;font-size: 12px;color: gray;
}
main.content.content-middlediv.content-middle-listulli.detail.info.info-righta:hover {color: #2291f7;background: url("../images/comment-hover.png") no-repeat 0;
}
main.content.content-middlediv.content-middle-listul.ad.detail.info.info-righta {font-size: 12px;color: #5989ec;background: none;display: flex;align-items: center;
}
main.content.content-middlediv.content-middle-listul.ad.detail.info.info-righta:hover {background: none;
}
main.content.content-middlediv.content-middle-listul.ad.detail.info.info-rightaimg {width: 18px;height: 18px;margin-right: 2px;
}
/* 主体右侧 */
main .content .content-right {width: 300px;margin-bottom: 35px;
}
/* 原创精品 */
/* 主体右侧内容标题 */
main .content .content-right .title {padding: 0 0 13px 15px;
}
main .content .content-right .title h2 {height: 20px;line-height: 20px;
}
main .content .content-right .title h2 a {font-size: 20px;color: #4889f3;
}
/* 原创精品内容 */
main .content .content-right .content-right-top .content {padding: 5px 15px;margin-bottom: 35px;background-color: #f7f8f9;
}
main .content .content-right .content-right-top .content ul li {padding: 10px 0;display: flex;
}
main .content .content-right .content-right-top .content ul li a {display: block;width: 120px;height: 80px;overflow: hidden;margin-right: 10px;
}
main .content .content-right .content-right-top .content ul li a img {width: 100%;transition: transform 0.3s linear;
}
main .content .content-right .content-right-top .content ul li a:hover img {transform: scale(1.05);
}
main .content .content-right .content-right-top .content ul li div a {line-height: 22px;font-size: 14px;color: #333;
}
main .content .content-right .content-right-top .content ul li div a:hover {color: #2291f7;
}
/* 主体右侧内容更多 */
main .content .content-right .content .more {margin-top: 10px;padding: 5px 0 0;line-height: 35px;text-align: center;font-size: 14px;color: #666;position: relative;
}
main .content .content-right .content .more::before {content: "";width: 300px;height: 0;border-top: 1px solid #eaeaea;position: absolute;top: 0;left: -15px;
}
/* 热门专题 */
/* 热门专题内容 */
main .content .content-right .content-right-middle .content {margin-bottom: 35px;background-color: #f7f8f9;
}
main .content .content-right .content-right-middle .content ul li {padding: 0 0 10px;
}
main .content .content-right .content-right-middle .content ul li > a {display: block;width: 100%;height: 137px;overflow: hidden;
}
main .content .content-right .content-right-middle .content ul li a img {width: 100%;transition: transform 0.3s linear;
}
main .content .content-right .content-right-middle .content ul li a:hover img {transform: scale(1.05);
}
main .content .content-right .content-right-middle .content ul li div {width: 270px;height: auto;padding: 7px 15px;
}
main .content .content-right .content-right-middle .content ul li div a {font-size: 14px;line-height: 22px;color: #333;
}
main .content .content-right .content-right-middle .content ul li div a:hover {color: #2291f7;
}
/* 热门专题更多 */
main .content .content-right .content-right-middle .content .more::before {left: 0;
}
/* 返回顶部 */
.toTop {width: 80px;position: fixed;left: 50%;bottom: 30px;margin-left: 650px;
}
.toTop .ad {height: 154px;position: relative;
}
.toTop .ad .content {position: absolute;
}
.toTop .ad .content .ad-top {height: 28px;line-height: 28px;display: flex;justify-content: space-between;
}
.toTop .ad .content .ad-top span {font-size: 12px;color: rgb(153, 153, 153);
}
.toTop .ad .content .ad-top a {font-size: 16px;color: #333;
}
.toTop .ad .content > a {display: block;padding-bottom: 20px;
}
.toTop .ad .content > a img {width: 80px;
}
.toTop > a {display: block;width: 50px;height: 50px;border: 1px solid #e2e2e2;background-color: #fff;font-size: 12px;line-height: 14px;text-align: center;color: #666;margin-bottom: 10px;padding-top: 10px;
}
.toTop > a:hover {border-color: #a8d5ff;color: #2793f7;
}
.toTop > a:nth-of-type(1) {border-color: #b8dcfc;background-color: #f7fbfe;color: #3563d5;margin-bottom: 40px;padding: 0;
}
.toTop > a:nth-of-type(1) > span:nth-child(1) {display: block;margin: 10px auto 2px;width: 16px;height: 16px;background: url("../images/to-top.png") no-repeat;transition: transform 0.3s linear;
}
.toTop > a:nth-of-type(1):hover {border-color: #88c4fa;background-color: #e9f4ff;color: #2793f7;
}
.toTop > a:nth-of-type(1):hover > span:nth-child(1) {transform: rotate(360deg);
}

高仿腾讯新闻科技频道页面相关推荐

Android 高仿腾讯新闻频道定制页面
先上效果图移除频道的动画效果模仿得不是很像,如果有更好的实现方法可以在下面留言告诉我. 页面效果拆解部分已选频道位置固定,不能拖动已选频道可以长按拖拽改变顺序,长按后背景色改变,删除按钮隐藏,原 ...
仿腾讯新闻频道定制界面效果
转载请注明出处 http://blog.csdn.net/oddshou/article/details/73467589 更新: 仿腾讯新闻频道定制界面效果2 这个效果一直想做,最近项目无事决定着手 ...
仿腾讯新闻频道定制界面效果2
转载请注明出处 http://blog.csdn.net/oddshou/article/details/73558553 上一篇文章仿腾讯新闻频道定制界面效果1中在实现过程中有很多不如意的地方,可以 ...
【Android进阶】如何写一个很屌的动画（3）---高仿腾讯手机管家火箭动画
系列中其他文章: [Android进阶]如何写一个很屌的动画(1)-先实现一个简易的自定义动画框架 [Android进阶]如何写一个很屌的动画(2)-动画的好帮手们 [Android进阶]如何写一个很 ...
【Android UI设计与开发】7.底部菜单栏（四）PopupWindow 实现显示仿腾讯新闻底部弹出菜单...
前一篇文章中有用到 PopupWindow 来实现弹窗的功能.简单介绍以下吧. 官方文档是这样解释的:这就是一个弹出窗口,可以用来显示一个任意视图.出现的弹出窗口是一个浮动容器的当前活动. 1.首先来 ...
一款高仿腾讯漫画的漫画阅读类 APP
早上好,骚年,我是小菜,我的公众号「菜鸟翻身」会推荐 GitHub 上有用的项目,一分钟 get 一个优秀的开源项目,挖掘开源的价值. 我的引语项目中成长是最快的,实践是王道,项目中成长是最快的,多 ...
C# 高仿腾讯QQ (TextBox控件美化)(附源码)
接上一篇<C# 高仿腾讯QQ (Bottom控件美化) > 这篇来说一下QQ皮肤TextBox控件的美化: (1)．已修正每次窗口最小化以后再还原会发现窗口底部往下移了几十个像素(但还不 ...
高仿腾讯 QQ，已经实现了纯文本，表情，图片，语音，位置等信息的发送。
QQ 项目地址:HuTianQi/QQ 简介:高仿腾讯 QQ,已经实现了纯文本,表情,图片,语音,位置等信息的发送. 一款高仿腾讯 QQ 的 IM 软件,基于 bmob SDK,已经实现聊天,表情,图 ...
html5仿腾讯,高仿腾讯QQ Xplan（X计划）的H5页面（1）：threejs创建地球
上个月底,在朋友圈看到一个号称"这可能是地球上最美的h5"的分享,点进入后发现这个h5还很别致,思考了一会,决定要不高仿一个? 到今天为止,高仿基本完成, 除了手机端的media控 ...

高仿腾讯新闻科技频道页面

高仿腾讯新闻科技频道页面相关推荐

最新文章

热门文章