仿csdn写的页面（bootstrap框架）

博客仿写

这是一个用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></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/article/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）
数据写死问题要解决，这里可能要学点后端了？
_{如果有什么问题可以提，看到会回复；还有，因为本人还处于学习阶段，若是大牛看到，有什么建议尽管提，我很需要别人的一些建议，或者提供的学习方法，大家共同进步}

仿csdn写的页面（bootstrap框架）相关推荐

Bootstrap仿制CSDN用户主页页面
Bootstrap仿制CSDN用户主页页面资源下载链接:https://download.csdn.net/download/qq_41505957/86245535 学习完了Bootstrap,想 ...
使用Bootstrap框架写的一个小实例
今天学习了一下Bootstrap框架,,写一个小实例练练手,感受一下bootstrap兼容三端的强大. <!doctype html> <html lang="zh-CN& ...
【一、bootstrap框架前端注册登录页面】
一.使用bootstrap框架写一个简易的前端登录页面. 先上截图下面开始记录本人使用bootstrap框架写这个登录页面的过程 1.bootstrap需要的配置文件 <!-- 新 Boots ...
UI设计实战篇——利用Bootstrap框架制作查询页面的界面
Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不 ...
node php知乎,基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
最近基于jQuery和Bootstrap框架实现了一个仿知乎动态列表的前端效果,基本实现了和知乎动态列表相同的效果.如下: 1.基本列表项 2.列表项全文展开.折叠(图中为展开第一项) 3.评论项展开 ...
使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面
使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面 tips 在不同设备中显示的样式页面布局思路 html css tips 这个页面里的图片忒难看,实际可以换一换在不同设备中显 ...
【Web】Bootstrap框架实现简单旅游网站页面
这里主要是为了熟悉以下Bootstrap框架的简单使用,采用了响应式布局. 代码如下: <!DOCTYPE html> <html lang="zh-CN"> ...
人生苦短，我用Python（五）—通过Flask结合Bootstrap框架快速搭建Web应用-2
写在前面: Flask是一个基于Python开发,依赖jinja2模板和Werkzeug WSGI服务的一个微型框架.Werkzeug用来处理Socket服务,其在Flask中被用于接受和处理http ...
Bootstrap框架和inconfont、font-awesome使用
Bootstrap框架和inconfont.font-awesome使用 iconfont的使用:https://www.cnblogs.com/clschao/articles/10387580.h ...

仿csdn写的页面（bootstrap框架）

博客仿写

仿csdn写的页面（bootstrap框架）相关推荐

最新文章

热门文章