高仿腾讯新闻科技频道页面
袁玮
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-middle
div
.content-middle-banner
.banner-big
.banner-big-content {
position: relative;
height: 100%;
}
main
.content
.content-middle
div
.content-middle-banner
.banner-big
.banner-big-content
img {
width: 100%;
height: 100%;
}
main
.content
.content-middle
div
.content-middle-banner
.banner-big
.banner-big-content
div {
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-middle
div
.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-middle
div
.content-middle-list
ul
li
.detail
h3
a:hover {
color: #2291f7;
}
/* 主体中间列表信息 */
main .content .content-middle div .content-middle-list ul li .detail .info {
display: flex;
justify-content: space-between;
}
main
.content
.content-middle
div
.content-middle-list
ul
li
.detail
.info
.info-left
a,
main
.content
.content-middle
div
.content-middle-list
ul
li
.detail
.info
.info-left
span {
font-size: 12px;
color: #666;
margin-right: 10px;
}
main
.content
.content-middle
div
.content-middle-list
ul
li
.detail
.info
.info-right {
display: flex;
align-items: center;
}
main
.content
.content-middle
div
.content-middle-list
ul
li
.detail
.info
.info-right
.share
span {
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-middle
div
.content-middle-list
ul
li
.detail
.info
.info-right
.share
span:hover {
background: url("../images/share-hover.png") no-repeat 0;
}
main
.content
.content-middle
div
.content-middle-list
ul
li
.detail
.info
.info-right
a {
display: inline-block;
padding-left: 18px;
background: url("../images/comment.png") no-repeat 0;
font-size: 12px;
color: gray;
}
main
.content
.content-middle
div
.content-middle-list
ul
li
.detail
.info
.info-right
a:hover {
color: #2291f7;
background: url("../images/comment-hover.png") no-repeat 0;
}
main
.content
.content-middle
div
.content-middle-list
ul
.ad
.detail
.info
.info-right
a {
font-size: 12px;
color: #5989ec;
background: none;
display: flex;
align-items: center;
}
main
.content
.content-middle
div
.content-middle-list
ul
.ad
.detail
.info
.info-right
a:hover {
background: none;
}
main
.content
.content-middle
div
.content-middle-list
ul
.ad
.detail
.info
.info-right
a
img {
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);
}
类似资料：