您的位置:首页 > Web前端 > BootStrap

仿csdn写的页面(bootstrap框架)

2020-07-19 04:48 766 查看

博客仿写

这是一个用bootstrap设计布局的网页,参照了csdn的布局设计,不完全按照csdn的样式。将代码放置博客是因为个人没有存代码的习惯,写的东西比较简单不值得保存,但又觉得弃之可惜(毕竟东西是花时间做出来的嘛),所以放置博客给其他人借鉴同时自己也能将代码留住,关于这个页面要实现的东西其实还很多,各种点击事件没有完善(后期有必要好好学一下vue来完善,此处能力有限),缺陷也有,就是将数据写死了(大家都知道,博客的数据是每日更新的,所以按道理这个页面的数据应该不断更新,但在本人写的页面里,利用开发者工具获取博客当日的数据,然后将数据联入自己的网页中,等同于数据没有做到每日更新了)
注意:很有必要去了解一下bootstrap的布局和栅格系统(容器container下必分行,行下必分列,列为12列,列下可继续分行或者div自己的盒子),具体可以参考官网,官网链接:https://v3.bootcss.com/css/
不废话了,现截图再上代码

###此处为页面截图


此处为html代码

<!--这是一个用bootstrap框架搭建的网页,仿csdn博客的布局设计而成-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 博客仿写</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap1.css" type="text/css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script><!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--导航条默认(default)白色和黑色(navbar-inverse)-->
<nav class="navbar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!--<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">-->
<!--<span class="sr-only">Toggle navigation</span>-->
<!--<span class="icon-bar"></span>-->
<!--<span class="icon-bar"></span>-->
<!--<span class="icon-bar"></span>-->
<!--</button>-->
<!--<a class="navbar-text">CSDN</a>-->
<!--<a href="" class="navbar-brand">-->
<!--<img src="img/logo.jpg" height="30px" width="auto">&nbsp;CSDN-->
<!--</a>-->
<div class="navbar-text"><h2>WBK</h2></div>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">首页 <span class="sr-only">(current)</span></a></li>
<li><a href="#">博客</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">学院</a></li>
<li><a href="#">活动</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">网站导航 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">学院</a></li>
<li><a href="#">微职位</a></li>
<li><a href="#">博客</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">论坛</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">问答</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入关键词">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
<ul class="nav navbar-nav navbar-right">
<!--添加图标-->
<li><a href="#"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 写博客</a></li>

<li><a href="#"><span class="glyphicon glyphicon-bell" aria-hidden="true"></span>公告</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>&nbsp登录</a></li>

<li><a href="#"><span class="glyphicon glyphicon-user"></span>注册</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<hr>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">推荐</a></li>
<li><a href="#">动态</a></li>
<li><a href="#">程序人生</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">Java</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="#">5G</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="#">云计算/大数据</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 class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
我的程序人生 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">黑盒测试</a></li>
<li><a href="#">前端基础</a></li>
<li><a href="#">html</a></li>
<li class="divider"></li>
<li><a href="#">css</a></li>
<li class="divider"></li>
<li><a href="#">bootstrap等前端框架</a></li>
</ul>
</li>
</ul>
</div>
<div class="col-md-8">
<div class="bigbox">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators轮播指标 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active">

</li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides 轮播项目-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://img.mukewang.com/5412ad400001e52014280484.jpg" alt="...">
<div class="carousel-caption">11 英寸 MacBook Air 充电一次可运行长达 9 小时,而 13 英寸机型则可运行长达 12 小时</div>
</div>
<div class="item">
<img src="http://img.mukewang.com/5412ad7c0001d2eb10880541.jpg" alt="...">
<div class="carousel-caption">无论是什么任务,配备 Intel HD Graphics 5000 图形处理器的第四代 Intel Core
处理器都能应对自如
</div>
</div>
<div class="item">
<img src="http://img.mukewang.com/5412ae5c0001653b12800644.jpg" alt="...">
<div class="carousel-caption">有了新一代 802.11ac 技术,MacBook Air 令 Wi-Fi 速度超越极限</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">上一张</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">下一张</span>
</a>
<!--关闭轮播图标签-->
<!--<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
</div>
</div>
<div class="container-fluid" id="list">
<div class="row" style="padding-left: 0px;padding-right: 0px">
<div class="col-md-12" style="padding-left: 0px;padding-right: 0px">
<hr>
<div class="title">
<h3><a href="https://www.csdn.net/" target="_blank">路漫漫其修远兮,吾将上下而求索~</a></h3>
</div>
<!--定义box1为父元素,定义一个子元素summary_oneline,限制父元素宽度,然后在样式中解决文字溢出隐藏-->
<div class="box1" style="width: 850px;">
<div class="summary_oneline">
在碎片化阅读充斥眼球的时代,越来越少的人会去关注每篇论文背后的探索和思考。在这个栏目里,你会快速 get 每篇精选论文的亮点和痛点,时刻紧跟 AI
前沿成果。由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
</div>
</div>
<div class="box2">
<a href="https://blog.csdn.net/c9Yv2cf9I06K2A9E" target="_blank" class="user_img">
<img src="img/1.jpg" alt="c9Yv2cf9I06K2A9E" title="c9Yv2cf9I06K2A9E"
style="width: 50px;height: 50px;border-radius: 50%;">
</a>

<!--设置文字与头像对齐-->
<a href="https://blog.csdn.net/c9Yv2cf9I06K2A9E" target="_blank">
Paper_weekly <span style="vertical-align: baseline"></span> </a>
<div class="box2_1">
<span class="glyphicon glyphicon-thumbs-up"></span>
<span class="glyphicon glyphicon-eye-open"></span>
<span class="glyphicon glyphicon-option-horizontal"></span>
</div>
</div>

<hr>

</div>

<hr>

<div class="title">
<h3><a href="https://www.csdn.net/" target="_blank">B站上有哪些好学的资源~</a></h3>
</div>
<!--定义box1为父元素,定义一个子元素summary_oneline,限制父元素宽度,然后在样式中解决文字溢出隐藏-->
<div class="box1" style="width: 850px;">
<div class="summary_oneline">
哇说起B站,在小九眼里就是宝藏般的存在,放年假宅在家时一天刷6、7个小时不在话下,更别提今年的跨年晚会,我简直是跪着看完的!!最早大家聚在在B站是为了追番,再后来我在上面刷欧美新歌和漂亮小姐姐的舞蹈视频,最近两年我和周围的朋友们已经把B站当作学习教室了,而且学习成本还免费,真是个励志的好平台ヽ(.◕ฺˇд
ˇ◕ฺ;)ノ下面我们就来盘点一下B站上优质的学习资源:综合类Oeasy:综合...
</div>
</div>
<div class="box2">
<a href="https://blog.csdn.net/c9Yv2cf9I06K2A9E" target="_blank" class="user_img">
<img src="img/2.jpg" alt="c9Yv2cf9I06K2A9E" title="c9Yv2cf9I06K2A9E"
style="width: 50px;height: 50px;border-radius: 50%;">
</a>

<!--设置文字与头像对齐-->
<a href="https://blog.csdn.net/c9Yv2cf9I06K2A9E" target="_blank">
Paper_weekly <span style="vertical-align: baseline"></span> </a>
<div class="box2_1">
<span class="glyphicon glyphicon-thumbs-up"></span>
<span class="glyphicon glyphicon-eye-open"></span>
<span class="glyphicon glyphicon-option-horizontal"></span>
</div>
</div>
</div>
</div>

<hr>

<div class="title">
<h3><a href="https://www.csdn.net/" target="_blank">B站上有哪些好学的资源~</a></h3>
</div>
<!--定义box1为父元素,定义一个子元素summary_oneline,限制父元素宽度,然后在样式中解决文字溢出隐藏-->
<div class="box1" style="width: 850px;">
<div class="summary_oneline">
哇说起B站,在小九眼里就是宝藏般的存在,放年假宅在家时一天刷6、7个小时不在话下,更别提今年的跨年晚会,我简直是跪着看完的!!最早大家聚在在B站是为了追番,再后来我在上面刷欧美新歌和漂亮小姐姐的舞蹈视频,最近两年我和周围的朋友们已经把B站当作学习教室了,而且学习成本还免费,真是个励志的好平台ヽ(.◕ฺˇд
ˇ◕ฺ;)ノ下面我们就来盘点一下B站上优质的学习资源:综合类Oeasy:综合...
</div>
</div>
<div class="box2">
<a href="https://blog.csdn.net/c9Yv2cf9I06K2A9E" target="_blank" class="user_img">
<img src="img/11.jpg" alt="c9Yv2cf9I06K2A9E" title="c9Yv2cf9I06K2A9E"
style="width: 50px;height: 50px;border-radius: 50%;">
</a>

<!--设置文字与头像对齐-->
<a href="https://blog.csdn.net/c9Yv2cf9I06K2A9E" target="_blank">
Paper_weekly <span style="vertical-align: baseline"></span> </a>
<div class="box2_1">
<span class="glyphicon glyphicon-thumbs-up"></span>
<span class="glyphicon glyphicon-eye-open"></span>
<span class="glyphicon glyphicon-option-horizontal"></span>
</div>
</div>
<hr>

<div class="title">
<h3><a href="https://www.csdn.net/" target="_blank">B站上有哪些好学的资源~</a></h3>
</div>
<!--定义box1为父元素,定义一个子元素summary_oneline,限制父元素宽度,然后在样式中解决文字溢出隐藏-->
<div class="box1" style="width: 850px;">
<div class="summary_oneline">
哇说起B站,在小九眼里就是宝藏般的存在,放年假宅在家时一天刷6、7个小时不在话下,更别提今年的跨年晚会,我简直是跪着看完的!!最早大家聚在在B站是为了追番,再后来我在上面刷欧美新歌和漂亮小姐姐的舞蹈视频,最近两年我和周围的朋友们已经把B站当作学习教室了,而且学习成本还免费,真是个励志的好平台ヽ(.◕ฺˇд
ˇ◕ฺ;)ノ下面我们就来盘点一下B站上优质的学习资源:综合类Oeasy:综合...
</div>
</div>
<div class="box2">
<a href="https://blog.csdn.net/c9Yv2cf9I06K2A9E" target="_blank" class="user_img">
<img src="img/1.jpg" alt="c9Yv2cf9I06K2A9E" title="c9Yv2cf9I06K2A9E"
style="width: 50px;height: 50px;border-radius: 50%;">
</a>

<!--设置文字与头像对齐-->
<a href="https://blog.csdn.net/c9Yv2cf9I06K2A9E" target="_blank">
Paper_weekly <span style="vertical-align: baseline"></span> </a>

<div id="box2_1">
<!--待解决 处理点击事件-->
<button v-on:click="counter += 1" class="box2_1"><span class="glyphicon glyphicon-thumbs-up"></span>{{
counter }}
</button>
<button v-on:click="counter += 1" class="box2_1"><span class="glyphicon glyphicon-eye-open"></span>{{
counter }}
</button>
<!--<span class="glyphicon glyphicon-eye-open"></span>-->
<!--<span class="glyphicon glyphicon-option-horizontal"></span>-->
</div>
</div>

<hr>

<div class="title">
<h3><a href="https://www.csdn.net/" target="_blank">路漫漫其修远兮,吾将上下而求索~</a></h3>
</div>
<!--定义box1为父元素,定义一个子元素summary_oneline,限制父元素宽度,然后在样式中解决文字溢出隐藏-->
<div class="box1" style="width: 850px;">
<div class="summary_oneline">
在碎片化阅读充斥眼球的时代,越来越少的人会去关注每篇论文背后的探索和思考。在这个栏目里,你会快速 get 每篇精选论文的亮点和痛点,时刻紧跟 AI
前沿成果。由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
</div>
</div>
<div class="box2">
<a href="https://blog.csdn.net/c9Yv2cf9I06K2A9E" target="_blank" class="user_img">
<img src="img/3.jpg" alt="c9Yv2cf9I06K2A9E" title="c9Yv2cf9I06K2A9E"
style="width: 50px;height: 50px;border-radius: 50%;">
</a>

<!--设置文字与头像对齐-->
<a href="https://blog.csdn.net/c9Yv2cf9I06K2A9E" target="_blank">
Paper_weekly <span style="vertical-align: baseline"></span> </a>
<div class="box2_1">
<span class="glyphicon glyphicon-thumbs-up"></span>
<span class="glyphicon glyphicon-eye-open"></span>
<span class="glyphicon glyphicon-option-horizontal"></span>
</div>
</div>

<hr>

<div class="title">
<h3><a href="https://www.csdn.net/" target="_blank">路漫漫其修远兮,吾将上下而求索~</a></h3>
</div>
<!--定义box1为父元素,定义一个子元素summary_oneline,限制父元素宽度,然后在样式中解决文字溢出隐藏-->
<div class="box1" style="width: 850px;">
<div class="summary_oneline">
在碎片化阅读充斥眼球的时代,越来越少的人会去关注每篇论文背后的探索和思考。在这个栏目里,你会快速 get 每篇精选论文的亮点和痛点,时刻紧跟 AI
前沿成果。由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
</div>
</div>
<div class="box2">
<a href="https://blog.csdn.net/c9Yv2cf9I06K2A9E" target="_blank" class="user_img">
<img src="img/1.jpg" alt="c9Yv2cf9I06K2A9E" title="c9Yv2cf9I06K2A9E"
style="width: 50px;height: 50px;border-radius: 50%;">
</a>

<!--设置文字与头像对齐-->
<a href="https://blog.csdn.net/c9Yv2cf9I06K2A9E" target="_blank">
Paper_weekly <span style="vertical-align: baseline"></span> </a>
<!--<button type="button" onclick="myfunction()">点赞<span class="glyphicon glyphicon-thumbs-up" id="demo"></span></button>-->
<div class="box2_1">
<span class="glyphicon glyphicon-thumbs-up"></span>
<span class="glyphicon glyphicon-eye-open"></span>
<span class="glyphicon glyphicon-option-horizontal"></span>
</div>
</div>
<hr>

<div class="title">
<h3><a href="https://www.csdn.net/" target="_blank">路漫漫其修远兮,吾将上下而求索~</a></h3>
</div>
<!--定义box1为父元素,定义一个子元素summary_oneline,限制父元素宽度,然后在样式中解决文字溢出隐藏-->
<div class="box1" style="width: 850px;">
<div class="summary_oneline">
在碎片化阅读充斥眼球的时代,越来越少的人会去关注每篇论文背后的探索和思考。在这个栏目里,你会快速 get 每篇精选论文的亮点和痛点,时刻紧跟 AI
前沿成果。由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
</div>
</div>
<div class="box2">
<a href="https://blog.csdn.net/c9Yv2cf9I06K2A9E" target="_blank" class="user_img">
<img src="img/1.jpg" alt="c9Yv2cf9I06K2A9E" title="c9Yv2cf9I06K2A9E"
style="width: 50px;height: 50px;border-radius: 50%;">
</a>

<!--设置文字与头像对齐-->
<a href="https://blog.csdn.net/c9Yv2cf9I06K2A9E" target="_blank">
Paper_weekly <span style="vertical-align: baseline"></span> </a>
<div class="box2_1">
<span class="glyphicon glyphicon-thumbs-up"></span>
<span class="glyphicon glyphicon-eye-open"></span>
<span class="glyphicon glyphicon-option-horizontal"></span>

4000
</div>
</div>
<hr>

<div class="title">
<h3><a href="https://www.csdn.net/" target="_blank">路漫漫其修远兮,吾将上下而求索~</a></h3>
</div>
<!--定义box1为父元素,定义一个子元素summary_oneline,限制父元素宽度,然后在样式中解决文字溢出隐藏-->
<div class="box1" style="width: 850px;">
<div class="summary_oneline">
在碎片化阅读充斥眼球的时代,越来越少的人会去关注每篇论文背后的探索和思考。在这个栏目里,你会快速 get 每篇精选论文的亮点和痛点,时刻紧跟 AI
前沿成果。由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
</div>
</div>
<div class="box2">
<a href="https://blog.csdn.net/c9Yv2cf9I06K2A9E" target="_blank" class="user_img">
<img src="img/1.jpg" alt="c9Yv2cf9I06K2A9E" title="c9Yv2cf9I06K2A9E"
style="width: 50px;height: 50px;border-radius: 50%;">
</a>

<!--设置文字与头像对齐-->
<a href="https://blog.csdn.net/c9Yv2cf9I06K2A9E" target="_blank">
Paper_weekly <span style="vertical-align: baseline"></span> </a>
<!--<button type="button" onclick="myfunction()">点赞<span class="glyphicon glyphicon-thumbs-up" id="demo"></span></button>-->
<div class="box2_1">
<span class="glyphicon glyphicon-thumbs-up"></span>
<span class="glyphicon glyphicon-eye-open"></span>
<span class="glyphicon glyphicon-option-horizontal"></span>
</div>
</div>

</div>

<div class="col-md-2">

<div class="right_box">

<h3 class="feed_new_tit">
<span class="line"></span>
<span class="txt">今日推荐</span>
</h3>
<br>
<div class="feed_company csdn-tracking-statistics" data-dsm="post">
<ul class="company_list">
<li>
<div class="img_box">
<a href="https://blog.csdn.net/csdnnews/article/details/104662294" target="_blank">
<img alt=""
src="https://csdnimg.cn/feed/20200304/0d68ab1e303d0c280b609cac96e13701.jpg?x-oss-process=image/resize,h_64"
style="width: 85px; height: 60px;"/>
</a>
</div>
<div class="content">
<h3 class="company_name" >
<a title="战疫期,钉钉如何扛起暴增百倍的流量?"
href="https://blog.csdn.net/csdnnews/article/details/104662294" target="_blank">战疫期,钉钉如何扛起暴增百倍的流量? </a>
</h3>
</div>
</li>
<li >
<div class="img_box">
<a href="https://blog.csdn.net/dQCFKyQDXYm3F8rB0/article/details/104666156" target="_blank">
<img alt=""
src="https://csdnimg.cn/feed/20200306/7851aaf7a8bb1f2d31553bce8e7aa2e8.jpg?x-oss-process=image/resize,h_64"/>
</a>
</div>
<div class="content">
<h3 class="compant_name">
<a title="为什么说Transformer就是图神经网络?"
href="https://blog.csdn.net/dQCFKyQDXYm3F8rB0/arti
20000
cle/details/104666156"
target="_blank">
为什么说Transformer就是图神经网络?
</a>

</h3>
</div>
</li>
<li>
<div data-report-click="img_box">
<a href="https://blog.csdn.net/FL63Zv9Zou86950w/article/details/104681415" target="_blank">
<img alt=""
src="https://csdnimg.cn/feed/20200306/fdc41be8135395acfeadb8921c6b2dc7.jpg?x-oss-process=image/resize,h_64"/>
</a>
</div>
<div class="content">
<h3 class="company_name"><a title="6 个步骤,教你在Ubuntu虚拟机环境下,用Docker自带的DNS配置Hadoop | 附代码"
href="https://blog.csdn.net/FL63Zv9Zou86950w/article/details/104681415"
target="_blank">6 个步骤,教你在Ubuntu虚拟机环境下,用Docker自带的DNS配置Hadoop |
附代码
</a>
</h3>
</div>
</li>
<li>
<div class="img_box">
<a href="http://click.aliyun.com/m/1000106809/" target="_blank">
<img alt=""
src="https://csdnimg.cn/feed/20200306/02d91ac3c483dcb5bd5f0f538059357b.jpg?x-oss-process=image/resize,h_64"/>
</a>
</div>
<div class="content">
<h3 class="company_name">
<a title="阿里云携手金蝶天燕,助力政府财务及内控数字化管理" href="http://click.aliyun.com/m/1000106809/"
target="_blank">阿里云携手金蝶天燕,助力政府财务及内控数字化管理
</a>
</h3>
</div>
</li>

</ul>
<hr>
<div class="right_box csdn-tracking-statistics" data-mod="popu_470" data-dsm="post">
<div class="feed_viewpoint">
<a href="https://bss.csdn.net/m/pk/home?id=10601" target="_blank">
<img title="csdn_viewpoint" class="viewpoint_img" alt="csdn_viewpoint" src="img/1.jpg"
style="width: 230px;height: 120px"/>
<h3>远程办公VS公司办公,你更喜欢哪种形式?</h3>
</a>
</div>
<br>
<div class="feed_vote">
<dl>
<dt>远程办公</dt>
<dd>67%</dd>
</dl>
<a class="btn btn-border-red btn-lg30" href="https://bss.csdn.net/m/pk/home?id=10601"
target="_blank" type="button">参与投票</a>
<dl>
<dt>公司办公</dt>
<dd>33%</dd>
</dl>
</div>
<hr>
<ul class="feed_new_arrlist">
<li class="clearfix">
<span class="arr">
<i class="icon CSDN_iconfont Feed-arrowup"></i>
</span>
<span class="txt">
<a href="https://bss.csdn.net/m/pk/home?id=10600" target="_blank">达摩院 2020 十大科技趋势发布,大变局到来!</a>
</span>
</li>
<hr size="30px">
<li class="clearfix">
<span class="arr">
<i class="icon CSDN_iconfont Feed-arrowup">
</i>
</span>
<span class="txt">
<a href="https://bss.csdn.net/m/pk/home?id=10599" target="_blank">如何看待AI换脸技术?</a>
</span>
</li>
</ul>

</div>
</div>

<hr style="border-bottom-width: 1px;border-bottom-color:grey;  ">

<h3 class="feed_new_tit">
<span class="line"></span>
<span class="txt">活动日历</span>
</h3>
<br>
<div class="feed_activiey_calendar">
<ul class="csdn-tracking-statistics" data-mod="popu_593" data-dsm="post">
<li>
<div class="data">
<strong>11</strong>
<p class="month">03月</p>
</div>
<div class="content">
<h3 class="activity_name">
<a href="https://edu.csdn.net/huiyiCourse/detail/1173?project_id=1173&utm_source=HDRL"
target="_blank">
异构加速硬件市场分析和基于POWER处理器的GPU服务器介绍和优势分析
</a>
</h3>
<p class="status">在线公开课程</p>
</div>
</li>

<hr style="border-bottom-width: 1px; border-bottom-style:dashed;border-bottom-color:grey;  ">

<li>
<div class="data"><strong>12</strong>
<p class="month">03月</p>
</div>
<div class="content">
<h3 class="activity_name">
<a href="https://edu.csdn.net/huiyiCourse/detail/1162?project_id=1162&utm_source=HDRL"
target="_blank">基于IBM Cloud Pak for Application 实现应用现代化
</a>
</h3>
<p class="status">
在线公开课程
</p>
</div>
</li>

<hr style="border-bottom-width: 1px; border-bottom-style:dashed;border-bottom-color:grey;  ">

<li>
<div class="data">
<strong>10</strong>
<p class="month">03月</p>
</div>
<div class="content">
<h3 class="activity_name">
<a href="https://edu.csdn.net/huiyiCourse/detail/1173?project_id=1173&utm_source=HDRL"
target="_blank">
异构加速硬件市场分析和基于POWER处理器的GPU服务器介绍和优势分析
</a>
</h3>
<p class="status">在线公开课程</p>
</div>
</li>

<hr style="border-bottom-width: 1px; border-bottom-style:dashed;border-bottom-color:grey;  ">

<li>
<div class="data"><strong>12</strong>
<p class="month">03月</p>
</div>
<div class="content">
<h3 class="activity_name">
<a href="https://edu.csdn.net/huiyiCourse/detail/1162?project_id=1162&utm_source=HDRL"
target="_blank">基于IBM Cloud Pak for Application 实现应用现代化
</a>
</h3>
<p class="status">
在线公开课程
</p>
</div>
</li>

<hr style="border-bottom-width: 1px; border-bottom-style:dashed;border-bottom-color:grey;  ">

<li>
<div class="data">
<strong>10</strong>
<p class="month">03月</p>
</div>
<div class="content">
<h3 class="activity_name">
<a href="https://edu.csdn.net/huiyiCourse/detail/1173?project_id=1173&utm_source=HDRL"
target="_blank">
异构加速硬件市场分析和基于POWER处理器的GPU服务器介绍和优势分析
</a>
</h3>
<p class="status">在线公开课程</p>
</div>
</li>

</ul>

</div>
</div>
</div>

</div>
<hr>
<div class="row">
<div class="col-md-12">

<div class="navlast text-center" style="margin-bottom:0; font-family: Helvetica Neue; color: #337ab7;">

<p>
关于 | 帮助 | 条款 | 反馈
</p>
<br>
<p>
Copyright@2020.03.09
</p>
<br>
<p>
Designed by JJX
</p>
<br>

</div>

</div>
</div>

</div>

</body>
<script>
var example1 = new Vue({
el: '#box2_1',
data: {
counter: 0
}
})

</script>
</html>

此处为css样式:

/*样式从csdn下抠下来的,也有自己加的样式*/
/*.navbar-brand>img{*/
/*display: inline;*/
/*}*/
/*设置导航栏图标的样式*/
.navbar-text{
font-size: 16px;
color:#337ab7;
}
.nav-pills>li.active>a{
background-color: #1f94ff;

}
/*解决搜索框中字体颜色*/
.form-group>input::placeholder{
color: #337ab7;
}

/*搜索图标将原本的黑色改成蓝色*/
.glyphicon-search{
color:#337ab7;

}
.title>h3>a{
font-family: "Comic Sans MS", cursive, sans-serif;
/*color: #aaaaaa;*/

}
/*文字溢出隐藏*/
.summary_oneline{
overflow: hidden;
text-overflow: ellipsis ;
white-space: nowrap
}
/*利用用css定位把一个div放到另一个div右下角。*/
.box2{
position: relative;
}
*.box2_1{
position: absolute;
right: 0;
bottom: 0;
/*background-color:white;*/
}
h3.feed_new_tit .line{
display: block;
float: left;
width: 3px;
height: 16px;
background: lightskyblue;
background-image: none;
background-attachment: scroll;
background-repeat: repeat;
background-position-x: 0%;
background-position-y: 0%;
background-size: auto;
background-origin:padding-box;
background-clip: border-box;
background-color: #0492ea;
overflow: hidden;
margin-right: 5px;

}
h3.feed_new_tit .txt{
display: block;
float: left;
font-size: 16px;
color: #2c3033;
}
div.container aside*{
font-family: PingFang SC,Hiragino Sans GB,Arial,Microsoft YaHei,Verdana,Roboto,Noto,Helvetica Neue,sans-serif !important;
}
body, h1, h2, h3, h4, h5, h6, ul, li, ol, dl, dt, dd, p, span, div, object, iframe, pre, a, abbr, cite, input, button, select, option{
margin: 0px;
padding: 0px;
-webkit-box-sizing: border-box;
/*改变字体样式(战疫期,钉钉如何扛起暴增百倍的流量?)*/
font-size: 18px;
}
aside .right_box{
-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04);
}
.right_box{
-webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05);
font-size: 14px;
color: #8590a6 !important;
}
.feed_viewpoint{
margin: -15px -15px 10px;
background-repeat: no-repeat;
background-position: center 0;/*(等同于background-position-x:center;background-position-y:0px;)*/
background-size: cover;
height: 110px;
text-align: center;
}
.feed_viewpoint h3{
margin: 0 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
height: 20px;
color: grey;
}
h1,h2,h3,h4,h5,h6,dt{
font-weight: normal;
}

.feed_vote{
margin: 0 -15px 10px;
text-align: center;
padding-top: 5px;
padding-bottom: 10px;
/*border-bottom: 1px solid #e8e9e8;*/
}
.feed_vote dl{
display: inline-block;
width: 33%;
text-align: center;
color: red;
vertical-align: top;
}
.feed_viewpoint dl dt{
font-size: 14px;
}
.feed_viewpoint dl dd{
font-size: 20px;
font-weight: bold;
}
dt,dd{
line-height: 1.4285;
}
ul,li,ol,dl,dd,dt,form{
list-style: none;
margin: 0px;
padding:0px;
}
.feed_vote .btn-lg30{
display: inline-block;
width: 30%;
vertical-align: top;
margin-top: 8px;
}
.btn-border-red:link, .btn-border-red:visited, .btn-border-red:hover, .btn-border-red:focus, .btn-border-red:active{
border:1px solid #d6241e;
color: #d6241e;
}
.btn-lg30{
height: 30px;
line-height: 28px;
text-align: center;
padding:0 10px;
font-size: 14px;
}
.btn-border-red{
border-radius: 4px;
background-color: white;
}
ul.feed_new_arrlist li .txt{
display: block;
margin-left: 15px;
}
/*.img_box{
float: left;
}

*/

以上就是全部代码,里头的点击事件是用vue做的,vue的话还在学习中,得抓紧时间学习vue,毕竟是潮流框架,而且发现用vue的话代码很简洁很多,学习完后会好好完善这个页面的…

  • 待办事项:点击事件要完善(vue)
  • 数据写死问题要解决,这里可能要学点后端了?
    如果有什么问题可以提,看到会回复;还有,因为本人还处于学习阶段,若是大牛看到,有什么建议尽管提,我很需要别人的一些建议,或者提供的学习方法,大家共同进步
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: