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

最新推荐文章于 2024-09-04 15:47:59 发布

隔年雪丷

最新推荐文章于 2024-09-04 15:47:59 发布

阅读量368

点赞数 2

文章标签： html css 前端

本文链接：https://blog.csdn.net/huyatvvicxlj/article/details/121305298

版权

这是一个科技新闻网站的HTML和CSS代码示例，展示了网站的头部、主体内容包括左侧导航、中间 banner 和文章列表，以及右侧的原创精品和热门专题。HTML结构清晰，CSS样式覆盖了页面的布局、颜色、字体等细节，实现了一套完整的科技新闻网站界面。

摘要由CSDN通过智能技术生成

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);
}

隔年雪丷

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
高仿腾讯新闻科技频道页面

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"> &l
复制链接

扫一扫