bootstrap开发的新闻网站

写在开发前：

1.如果用bootst框架开发网站，某些页面的排版怎么修改都不能达到预期效果，可能是承载这个盒子的元素，没有清除浮动。

2.该框架的样式，有些需要更改时，在CSS中，继承修改即可。不可改库文件的源码，可能会出各种问题。

3.在写新闻标题，用<h1>标签承载，会使页面被爬取的概率加大。以后写页面，可能在学习以下怎么被加载的更快，以及被搜索引擎爬取的概率加大。

效果：

主页面代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!--移动端和pc端各版本浏览器兼容--><title>豪哥头条</title>
</head><link rel="stylesheet" type="text/css" href="bootstrap.min.css"><link rel="stylesheet" type="text/css" href="main.css"><!--创建自己的css样式以便覆盖引入的库文件样式-->
<body><div class="navbar navbar-default"><div class="container"><div class="navbar-header"><a class="navbar-brand" href="https://www.bilibili.com/video/av21061574?from=search&seid=17225233772752021614"></a><!--图片文件一定要是跟html是同一级的目录才可直接引用，向上一级，在地址栏前加../--></div><label id="toggle-label" class="visible-xs-inline-block" for="toggle-checkbox">导航栏</label><!--映射下面的，将其隐藏，美观--><input class="hidden" id="toggle-checkbox" type="checkbox"><!--只用css完成JS效果，提高运行效率，单一小功能，后面有配合的样式--><div class="hidden-xs"><!--在超小屏幕下隐藏--><ul class="nav navbar-nav"><li class="active"><a href="news.html">首页</a></li><li><a href="news.html">网站</a></li><li><a href="news.html">影片</a></li><li><a href="news.html">小说</a></li><li><a href="news.html">视频</a></li><li><a href="news.html">交友</a></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="login.html">登录</a></li><li><a href="signup.html">注册</a></li></ul><!--注意一定要在navbar-header的结构之外，才能完成指定的样式--></div></div></div><div class="container"><div class="row"><!--用来抵消，下面栅格的内部，跟标题保持一样的样式--><div class="col-sm-2"><div class="hidden-xs list-group side-bar"><a href="https://www.bilibili.com/video/av21061574?from=search&seid=17225233772752021614" class="list-group-item active">澳门赌场</a><a href="https://www.bilibili.com/video/av21061574?from=search&seid=17225233772752021614" class="list-group-item">美女真人</a><a href="https://www.bilibili.com/video/av21061574?from=search&seid=17225233772752021614" class="list-group-item">在线发牌</a><a href="news.html" class="list-group-item">快速到账</a><a href="news.html" class="list-group-item">赔率感人</a><a href="news.html" class="list-group-item">官方背景</a><a href="news.html" class="list-group-item">隐私保密</a><a href="news.html" class="list-group-item">绝对可靠</a><a href="news.html" class="list-group-item">快来啊！</a></div></div><div class="col-sm-7"><div class="news-list"><div class="news-list-item clearfix"><!--一定要清除浮动，不然排版不规范--><div class="col-xs-5"><img src="appImage/003.jpg" alt="不知名男教师"></div><div class="col-xs-7"><a href="news.html" class="title">六安舒城某一老师，因帅气逼人，被女学生迷奸。据了解，该男老师满嘴骚话，行为放诞不羁，看到女学生面目清秀，现情绪稳定</a><div class="info"><span><span class="author"><img src="appImage/author.jpg" alt="头像"></span>祝老板写</span>.<span>25w阅读</span>.<span>5w评论</span>.<span>两天前</span></div></div></div><div class="news-list-item clearfix"><!--一定要清除浮动，不然排版不规范--><div class="col-xs-5"><img src="appImage/006.jpg" alt="不知名男教师"></div><div class="col-xs-7"><a href="news.html" class="title">突变：前天六安舒城祝姓男子，被迷奸事件变得扑朔迷离。某一网友，在今天微博上放出祝姓老师被捕时照片</a><div class="info"><span><span class="author"><img src="appImage/author.jpg" alt="头像"></span>祝老板写</span>.<span>38w阅读</span>.<span>8w评论</span>.<span>一天前</span></div></div></div><div class="news-list-item clearfix"><!--一定要清除浮动，不然排版不规范--><div class="col-xs-5"><img src="appImage/2-2.jpg" alt="不知名男教师"></div><div class="col-xs-7"><a href="news.html" class="title">持续报道：该六安舒城老师，在校期间，经常在寝室室友中间，发表不正当言论，疑有犯罪冲动</a><div class="info"><span><span class="author"><img src="appImage/author.jpg" alt="头像"></span>祝老板写</span>.<span>51w阅读</span>.<span>26w评论</span>.<span>两小时前</span></div></div></div><div class="news-list-item clearfix"><div class="col-xs-5"><img src="appImage/2-4.jpg" alt="不知名男教师"></div><div class="col-xs-7"><a href="news.html" class="title">解读：为何在2018年如此频繁的爆出老师性侵案件，到底是人性的扭曲还是道德的沦丧</a><div class="info"><span><span class="author"><img src="appImage/author.jpg" alt="头像"></span>祝老板写</span>.<span>25w阅读</span>.<span>5w评论</span>.<span>2分钟前</span></div></div></div></div></div><div class="col-sm-3"><div class="search-bar"><input type="search" class="form-control" placeholder="搜索本网站"></div><div class="side-bar-card police clearfix"><!--清除浮动--><div class="col-xs-5"><img src="appImage/1-1.png" alt="举报图片"></div><div class="col-xs-7"><div class="note">绿色上网</div><div>不良信息举报专栏</div><div>举报电话：888888</div></div></div><div class="side-bar-card "><div class="card-title">老哥，我懂你系列</div><div class="card-body"><div class="list"><div class="item"><div class="title">祝老师包养的女大学生，为何如此貌美如花</div><div class="desc">300w点赞，20w评论</div></div><div class="item"><div class="title">祝老师包养的女大学生，为何如此貌美如花</div><div class="desc">300w点赞，20w评论</div></div><div class="item"><div class="title">祝老师包养的女大学生，为何如此貌美如花</div><div class="desc">300w点赞，20w评论</div></div><div class="item"><div class="title">祝老师包养的女大学生，为何如此貌美如花</div><div class="desc">300w点赞，20w评论</div></div></div></div></div></div></div></div><div class="footer">@2018 豪哥头条 中国互联网举报中心 京ICP证1401号 京ICP备忘135255号</div>
</body>
</html>

新闻跳转网页：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!--移动端和pc端各版本浏览器兼容--><title>新闻页</title>
</head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<!--创建自己的css样式以便覆盖引入的库文件样式-->
<body><div class="navbar navbar-default"><div class="container"><div class="navbar-header"><a class="navbar-brand" href="https://www.bilibili.com/video/av21061574?from=search&seid=17225233772752021614"></a><!--图片文件一定要是跟html是同一级的目录才可直接引用，向上一级，在地址栏前加../--></div><label id="toggle-label" class="visible-xs-inline-block" for="toggle-checkbox">导航栏</label><!--映射下面的，将其隐藏，美观--><input class="hidden" id="toggle-checkbox" type="checkbox"><!--只用css完成JS效果，提高运行效率，单一小功能，后面有配合的样式--><div class="hidden-xs"><!--在超小屏幕下隐藏--><ul class="nav navbar-nav"><li class="active"><a href="news.html">首页</a></li><li><a href="news.html">网站</a></li><li><a href="news.html">影片</a></li><li><a href="news.html">小说</a></li><li><a href="news.html">视频</a></li><li><a href="news.html">交友</a></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="login.html">登录</a></li><li><a href="signup.html">注册</a></li></ul><!--注意一定要在navbar-header的结构之外，才能完成指定的样式--></div></div></div><div class="container"><div class="col-md-8"><h1 class="news-title">六安舒城某一老师，因帅气逼人，被女学生迷奸。据了解，该男老师满嘴骚话，行为放诞不羁，看到女学生面目清秀，现情绪稳定</h1><!--搜索引擎，h1爬取权重较高--><div class="new-info">10w阅读 . 2分钟之前发布 <div class="label label-default">教育</div><div class="label label-default">情感</div><div class="label label-default">社会</div></div><div class="news-content"><blockquote><p>文章概括：六安舒城英语老师案，判刑</p></blockquote><div>要说起今年最牵动人心的案子就要数祝老师案了，这个案子从刚过完年就开始庭审，但是直到现在也没有一个定论。</div><img src="appImage/003.jpg"><div><br>从大家纷纷指责高云翔出轨，到疑似受害人张曦“仙人跳”，不得不说高云翔案简直要比一些电视剧还要好看就在8月30号，澳洲当地时间9时35分左右，高云翔在律师及警方的陪同下抵达现场，其妻子董璇没有出现。</div><div>可以看到在进入法庭之前的高云翔面容憔悴，和身边两个高大威武的保镖形成了鲜明的对比，这也是高云翔极少的出现在庭审现场，之前几乎都是以视频的形式出现。<br/></div>　  <div>根据法院的公告显示，高云翔的案件被安排在了第15个，但是据了解，实际庭审是往前推了一段时间，在当地时间10时02分，高云翔走出了法院，高云翔出庭后比较精神，偶尔还会眼带笑意，看来高云翔对于这次庭审的结果比较满意.</div>   <div><br>而据知情人爆料，在这次的庭审中，仅持续了大约两三分钟，此前传闻会出庭的证人并未出现，庭上也没有提交实质性的证据，并没有之前谣言的张曦在酒店的视频也没有出现，可能是谣言或者是出现了一些新的变故，法官称将用三周的时间来回顾指控，下一     次开庭时间是9月28日。</div></div></div><div class="col-md-4"><div class="side-bar-card"><div class="card-title">猜你喜欢</div><div class="card-body"><div class="list"><div class="item clearfix"><div class="col-xs-5 clear-image-padding"><img src="https://dummyimage.com/600x400/666/ccc"></div><div class="col-xs-7"><div class="title">美女大学生找你聊天</div><div class="dest">300w阅读 100w评论</div></div></div><div class="item clearfix"><div class="col-xs-5 clear-image-padding"><img src="https://dummyimage.com/600x400/666/ccc"></div><div class="col-xs-7"><div class="title">美女大学生找你聊天</div><div class="dest">300w阅读 100w评论</div></div></div><div class="item clearfix"><div class="col-xs-5 clear-image-padding"><img src="https://dummyimage.com/600x400/666/ccc"></div><div class="col-xs-7"><div class="title">美女大学生找你聊天</div><div class="dest">300w阅读 100w评论</div></div></div></div></div></div><div class="side-bar-card "><div class="card-title">老哥，我懂你系列</div><div class="card-body"><div class="list"><div class="item"><div class="title">祝老师包养的女大学生，为何如此貌美如花</div><div class="desc">300w点赞，20w评论</div></div><div class="item"><div class="title">祝老师包养的女大学生，为何如此貌美如花</div><div class="desc">300w点赞，20w评论</div></div><div class="item"><div class="title">祝老师包养的女大学生，为何如此貌美如花</div><div class="desc">300w点赞，20w评论</div></div><div class="item"><div class="title">祝老师包养的女大学生，为何如此貌美如花</div><div class="desc">300w点赞，20w评论</div></div></div></div></div></div></div><div class="footer">@2018 豪哥头条 中国互联网举报中心 京ICP证1401号 京ICP备忘135255号</div>
</body>
</html>

登录和注册页面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!--移动端和pc端各版本浏览器兼容--><title>登录页面</title>
</head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<!--创建自己的css样式以便覆盖引入的库文件样式-->
<body><div class="navbar navbar-default"><div class="container"><div class="navbar-header"><a class="navbar-brand" href="https://www.bilibili.com/video/av21061574?from=search&seid=17225233772752021614"></a><!--图片文件一定要是跟html是同一级的目录才可直接引用，向上一级，在地址栏前加../--></div><label id="toggle-label" class="visible-xs-inline-block" for="toggle-checkbox">导航栏</label><!--映射下面的，将其隐藏，美观--><input class="hidden" id="toggle-checkbox" type="checkbox"><!--只用css完成JS效果，提高运行效率，单一小功能，后面有配合的样式--><div class="hidden-xs"><!--在超小屏幕下隐藏--><ul class="nav navbar-nav"><li class="active"><a href="news.html">首页</a></li><li><a href="news.html">网站</a></li><li><a href="news.html">影片</a></li><li><a href="news.html">小说</a></li><li><a href="news.html">视频</a></li><li><a href="news.html">交友</a></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="login.html">登录</a></li><li><a href="signup.html">注册</a></li></ul><!--注意一定要在navbar-header的结构之外，才能完成指定的样式--></div></div></div><div class="container container-small"><h1>登录<small>没有账户？<a href="signup.html">注册</a></small></h1><from><div class="form-group"><label>用户名/手机/邮箱</label><input type="text" class="form-control"></div><div class="form-group"><label>密码</label><input type="password" class="form-control"></div><div class="form-group"><button type="submit" class="btn btn-primary btn-block">提交</button></div><div class="form-group"><a href="#">忘记密码</a></div></from></div><div class="footer">@2018 豪哥头条 中国互联网举报中心 京ICP证1401号 京ICP备忘135255号</div>
</body>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><!--移动端和pc端各版本浏览器兼容--><title>注册页面</title>
</head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<!--创建自己的css样式以便覆盖引入的库文件样式-->
<body><div class="navbar navbar-default"><div class="container"><div class="navbar-header"><a class="navbar-brand" href="https://www.bilibili.com/video/av21061574?from=search&seid=17225233772752021614"></a><!--图片文件一定要是跟html是同一级的目录才可直接引用，向上一级，在地址栏前加../--></div><label id="toggle-label" class="visible-xs-inline-block" for="toggle-checkbox">导航栏</label><!--映射下面的，将其隐藏，美观--><input class="hidden" id="toggle-checkbox" type="checkbox"><!--只用css完成JS效果，提高运行效率，单一小功能，后面有配合的样式--><div class="hidden-xs"><!--在超小屏幕下隐藏--><ul class="nav navbar-nav"><li class="active"><a href="news.html">首页</a></li><li><a href="news.html">网站</a></li><li><a href="news.html">影片</a></li><li><a href="news.html">小说</a></li><li><a href="news.html">视频</a></li><li><a href="news.html">交友</a></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="login.html">登录</a></li><li><a href="signup.html">注册</a></li></ul><!--注意一定要在navbar-header的结构之外，才能完成指定的样式--></div></div></div><div class="container container-small"><h1>注册<small>没有账户？<a href="signup.html">注册</a></small></h1><from><div class="form-group"><label>手机/邮箱</label><input type="text" class="form-control"></div><div class="form-group"><div class="input-group"><input type="text" class="form-control"><div class="input-group-btn"><div class="btn btn-default">获取验证码</div></div></div></div><div class="form-group"><label>密码</label><input type="password" class="form-control"></div><div class="form-group"><button type="submit" class="btn btn-primary btn-block">注册</button></div></from></div><div class="footer">@2018 豪哥头条 中国互联网举报中心 京ICP证1401号 京ICP备忘135255号
</div>
</body>

整个页面的样式：

/*body{*//*background-color: black;*/
/*}*/
.navbar-brand{background-image: url("appImage/logohao.jpg");width: 65px;background-size: 75%;/*cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。*//*contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。*/background-repeat: no-repeat;/*此框架背景默认重复，不让其重复*/background-position: center center;
}
/*导航栏样式*/.side-bar .list-group-item{border: 0px;border-radius: 8px;margin-bottom: 7px;
}
.side-bar .list-group-item.active{/*属性选择器中，选取类名时，不是一个类时，用空格隔开，同一个类的多个名字中间不加空格*/background-color: firebrick;
}
img{display: block;max-width: 100%;/*以区域块的形式显示，最大宽度不能超过父级元素的大小*/border-radius: 7px;
}
/*左侧导航栏*/.news-list-item{padding-top: 12px;padding-bottom: 12px;border-bottom:1px solid #eee;
}
.news-list-item:first-child{padding-top: 0px;padding-bottom: 12px;}
/*除第一条上边距不需要边距，父亲孩子选择器*/.news-list-item .title{display: block;/*后面的内容才会在内容上继承下来样式*/color: #444;/*颜色#000黑色，#999白色*/font-size: 18px;font-weight: bold;margin-bottom: 25px;line-height: 1.5;
}
.news-list-item .title:hover{color: #23527c;/*通过浏览器选中标题后审查元素，得到本来默认的颜色*/
}.news-list-item .info{color:#adadad;}
.author{display: inline-block;}
.author img{display: inline-block;width: 27px;height: 27px;margin-right: 5px;
}
a:hover{text-decoration: none;/*链接样式去掉*/
}
/*主题内容样式*/.side-bar-card{background: rgba(0,0,0,0.05);/*设置阴影*/margin-top: 17px;padding: 10px 2px;
}
.side-bar-card.police{padding: 20px 2px;
}
.note{padding-bottom: 10px;font-size: 150% ;
}.side-bar-card{border-radius: 10px;
}
.side-bar-card .card-title,
.side-bar-card .card-body .list .item{padding: 11px 20px;
}
.side-bar-card .card-title{font-size: 18px;font-weight: bold;padding-top: 0px;padding-bottom: 0px;
}
.side-bar-card .card-body .list .item:hover{background:rgba(0,0,0,0.1);
}
.card-body .list .item .title{padding-bottom: 5px;
}
.card-body .list .item .desc{color: #999999;
}
/*右侧导航栏样式*/.news-title{line-height: 1.2;font-size: 28px;font-weight: bold;
}
.new-info .label{opacity: 0.6;/*设置不透明度*/
}
.news-content{margin-top: 10px;font-size: 15px;
}
.news-content img{width: 450px;height: 250px;margin: 10px auto;
}
.clear-image-padding{padding-left: 0px;padding-right: 0px;/*这里添加的图片，继承了父元素的padding属性，重复了*/
}
/*跳转网页样式*/.footer{margin-top: 50px;margin-bottom: 50px;padding: 20px auto;text-align: center;color: #adadad;
}
/*底部*/.container-small{max-width: 500px;
}
.btn-primary{margin-top: 25px;background-color:burlywood;border-color:burlywood;
}
.btn-primary:hover{background-color: #c0a16b;border-color: #c0a16b;
}
/*登录注册样式*/#toggle-checkbox:checked ~ div{display: block !important;/*!important表示最高级别规则*/
}
#toggle-label{display:inline-block;position: absolute;right: 15px;top: 13px;font-size: 16px;color: #888888;display: none;/*默认隐藏，在小屏幕再显示*/
}#toggle-label:hover{color: #333333;
}

bootstrap开发的新闻网站相关推荐

jsp+servlet+bootstrap开发java web在线考试管理系统
jsp+servlet+bootstrap开发java web在线考试管理系统项目描述考试对于考试管理者来说无疑是一件非常繁重的工作,在线考试管理系统的出现,使考试变成一件简单易行的事情. 本系统 ...
java后台oa项目整套,[VIP源码]【S020】springboot+mybatis+bootstrap开发员工oa后台管理系统项目源码...
java源码项目名称:springboot+mybatis+bootstrap开发员工oa后台管理系统项目源码springboot项目源码0 `" C+ a" `" ~0 ...
使用Vue+Bootstrap开发在线音乐网站
牟云音乐1.0版本落地成功(nb) 链接请进牟云音乐因为我并不是主营前端,对于前端我只能说是浅薄了解,所以网站的界面设计大多借鉴了QQ音乐的设计,故在此声明. 牟云音乐首页歌单详情播放页面 ...
【1】Bootstrap 开发 - navs tabs pills 导航效果
目录一.目标 1.效果图如下 2.视频效果如下二.navs 类型讲解 1.基本的nav效果 2.nav-tabs 效果 3.nav-pills 效果 4.nav-pills dropdown效果 ...
Reactjs+BootStrap开发自制编程语言Monkey的编译器:发刊词
编译原理几乎是计算机专业中最晦涩难懂的课程.很多学生学这门课只不过是为了通过考试,学完后对编译原理之精妙仍然是摸不着头脑.而很多教这门课的老师,也只不过是混口饭吃,他自己未必对编译原理有多少深入的了解 ...
使用BootStrap开发一个响应式的页面
1.1 需求开发一套页面,可以适用在PC端,Pad端,和手机端.不影响你的浏览的效果 1.2 分析技术分析 [BootStrap的概述] 1).BootStrap的概念 2).什么是响应式: 响应 ...
Django Bootstrap开发笔记03 - Bootstrap环境配置
https://v3.bootcss.com/getting-started/#download下载bootstrap-3.3.7-dist.zip包在mysite/personal/文件夹下创建s ...
bootstrap开发tab选项卡事例
<html> <head> <title>选项卡</title> <meta charset="utf-8" ...
Django +python+bootstrap 开发web,app,接口测试平台（持续更新）
开发测试平台的初衷:希望web,app的UI自动化和接口的自动化能够一起执行,去掉jenkins构建,代码重构,繁多等问题. 本平台是1.0版本,后续还将完善更多的功能(考虑是作成一个测试的客户端还是 ...

bootstrap开发的新闻网站

写在开发前：

bootstrap开发的新闻网站相关推荐

最新文章

热门文章