帮朋友写的一个新闻页面，顺便记录提交一下代码。吼吼吼~
完成的效果图：（个人认为还是蛮简单大方的hahaha）
直接拷个代码吧，（感觉没啥技术要点），有不懂的可以来问~：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>新闻</title> <link href="css/index.css" rel="stylesheet"/> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.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> </head> <body> <div class="container"> <div class="jumbotron" style="background-color: #3c763d;"> <h1><center style="color: white;">新闻报道</center></h1> <p><center style="color: white;">为您实时报道</center></p> </div> <br /> <ul class="nav nav-pills" > <li class="active" style="background-color: green;"><a href="#" style="background-color: #3c763d;">首页</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> <br /> <h4><b>最新文章</b></h4> <hr /> <div class="row"> <div class="col-sm-6" style="border-right: 1px gray solid;"> <a style="color: green;">-- 新闻标题1</a><br /><br /> <a style="color: green;">-- 新闻标题2</a><br /><br /> <a style="color: green;">-- 新闻标题3</a><br /><br /> <a style="color: green;">-- 新闻标题4</a><br /> </div> <div class="col-sm-6"> <a style="color: green;">-- 新闻标题5</a><br /><br /> <a style="color: green;">-- 新闻标题6</a><br /><br /> <a style="color: green;">-- 新闻标题7</a><br /><br /> <a style="color: green;">-- 新闻标题8</a><br /> </div> </div> <br /><br /> <div class="row"> <div class="col-sm-8" > <h4><b>热点新闻</b></h4> <hr /> <div id="k" class="one"> <img src="img/kouzhao.jpg" width="200px" height="150px" style="margin-bottom: 2%;"/> <br /> <p><h6>口罩正式实施新标准</h6></p> <br /> </div> <div id="k" class="two"> <img src="img/zhibo.jpg" width="200px" height="150px" style="margin-bottom: 2%;"/> <br /> <p><h6>直播带货的规范正式施行</h6></p> <br /> </div> <div id="k" class="three"> <img src="img/baoyu.jpg" width="200px" height="150px" style="margin-bottom: 2%;"/> <br /> <p><h6>南方强暴雨来袭</h6> </p> <br /> </div> <div id="k" class="four"> <img src="img/zixingche.jpg" width="200px" height="150px" style="margin-bottom: 2%;"/> <br /> <p>电动自行车管理条例</p> <br /> </div> <div id="k" class="five"> <img src="img/zuozhan.jpg" width="200px" height="150px" style="margin-bottom: 2%;"/> <br /> <p><h6>纳入军队领导指挥体系</h6></p> <br /> </div> <div id="k" class="six"> <img src="img/tuixiu.jpg" width="200px" height="150px" style="margin-bottom: 2%;"/> <br /> <p>山西:“提前退休”真的来了</p> <br /> </div> <!--<div id="k" class="seven"> <img src="img/senlin.jpg" width="200px" height="150px" style="margin-bottom: 2%;"/> <br /> <p>森林分类经营管理</p> <br /> </div>--> <!--<div id="k" class="eight"> <img src="img/guoliu.jpg" width="200px" height="150px" style="margin-bottom: 2%;"/> <br /> <p>“国六”正式落地</p> <br /> </div>--> </div> <div class="col-sm-4"> <h4><b>本地新闻</b></h4> <hr /> <img src="img/b1.png" width="100px" style="float: left;margin-right: 5%;"/> <p> 省考来啦！醴陵招聘公务员64名！</p> <br /> <p> 2020-06-30</p> <br /> <img src="img/b2.png" width="100px" style="float: left;margin-right: 5%;"/> <p> 25万+点赞！昨天，淘淘醴品这场直播，很火爆！</p> <p> 2020-06-30</p> <br /> <img src="img/b3.png" width="100px" style="float: left;margin-right: 5%;"/> <p> “第八批湖南省社会科学普及基地”：醴陵陶瓷博物馆入选</p> <p> 2020-06-30</p> <br /> <img src="img/b4.png" width="100px" style="float: left;margin-right: 5%;"/> <p> 醴陵外卖小哥上热搜！人民日报、央视新闻、新华社等媒体纷纷点赞</p> <p> 2020-06-30</p> <br /> </div> </div> </div> </body> </html>我是与其终，一个风起云涌的女孩子。 以下是我的公众号，主要写的是有关于前段后台数据库，面试技巧，学习方法，职场心得等，感兴趣的可以关注一下哦。 很高兴你能看到我的博客，希望能对你有所帮助。 qq群：可直接扫码进qq群，或者输入群号670983672。 微信群：可加下方博主微信，备注“进群”即可。
