仿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"> 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> 登录</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">×</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)
- 数据写死问题要解决,这里可能要学点后端了?
如果有什么问题可以提,看到会回复;还有,因为本人还处于学习阶段,若是大牛看到,有什么建议尽管提,我很需要别人的一些建议,或者提供的学习方法,大家共同进步
相关文章推荐
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- 闲谈MyBatis+Filter+Servlet+Jsp+Bootstrap框架环境的实现页面操作案例
- java web页面使用bootstrap框架进行开发之引用样式
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- Bootstrap框架动态生成Web页面文章内目录的方法
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
- UI设计实战篇——利用Bootstrap框架制作查询页面的界面
- 7.17 Guns、页面制作、Jquery框架+bootstrap框架、图表制作
- AngularJs+bootstrap搭载前台框架——基础页面
- 利用Bootstrap框架制作查询页面的界面
- (转)UI设计实战篇——利用Bootstrap框架制作查询页面的界面
- Bootstrap框架-------登陆页面
- AngularJs+bootstrap搭载前台框架——基础页面
- 利用bootstrap框架实现静态登录页面
- 在Bootstrap开发框架的前端视图中使用@RenderPage实现页面内容模块化的隔离,减少复杂度
- bootstrap前端框架使用modal弹出框form表单submit操作后解决页面提示不显示
- BootStrap页面框架模板
- AngularJs bootstrap搭载前台框架――基础页面
- 使用bootstrap框架页面模板
- 基于Metronic的Bootstrap开发框架经验总结(11)--页面菜单的几种呈现方式