admin管理员组文章数量:1655684
一、效果展示
二、主要功能
1、当界面处于大屏幕下，顶部导航栏正常显示。
2、当界面处于小屏幕下，顶部导航栏除logo之外全部隐藏，显示出Menu，通过点击Menu将导航栏的信息展示出来。
3、点击顶部的“首页”，跳转至首页。
4、点击页面上的新闻，跳转至具体新闻页面。本项目中仅展示中间内容的第一条新闻跳转功能，如需完成其他新闻跳转至详情页，可自己实现。
5、分别点击注册、登录，跳转至注册和登录页面。
三、分析实现
1、开发工具与相关技术
开发工具：HBuilder
相关技术：HTML、CSS、Bootstrap
2、环境搭建
（1）引入bootstrap文件
（2）在CSS目录下创建index.css文件
（3）在index.html、news.html、login.html和register.html中引入上述文件。
目录结构如下：
3、结构分析与整体框架
（1）index页面
来看下图：
通过观察上图，可以发现：
a：从整体上，自上而下分为三部分：顶部导航栏、中间内容部分以及底部页脚部分。
b：主题内容部分，自左向右分为：左侧、中间和右侧三大区域。
c：主题内容的中间部分显示的是每条新闻的简要信息，每一条新闻信息可以分为左右两大部分。
d：主题内容的右边部分可分为上下两大部分，下部分的内容可分为标题和具体内容。如下：
经过上述分析，可以搭建起index.html的主体框架，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>新闻实战</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-default">
</nav>
<!-- 主题内容 -->
<div class="container">
<div class="row">
<!-- 左侧部分 -->
<div class="col-sm-2">
</div>
<!-- 中间部分 -->
<div class="col-sm-7">
<div class="news-list">
<div class="news-list-item clearfix">
<!-- 左边图片部分 -->
<div class="col-sm-5">
</div>
<!-- 右边文字部分 -->
<div class="col-sm-7">
</div>
</div>
</div>
</div>
<!-- 右侧部分 -->
<div class="col-sm-3 clearfix">
</div>
</div>
</div>
<!-- 页脚部分 -->
<div class="footer">
</div>
</body>
</html>
其中，对于中间内容的右侧部分可进行更为细致的划分，如下：
<div class="col-sm-3 clearfix">
<!-- 搜索框 -->
<div class="searhc-bar">
<input type="search" class="form-control" />
</div>
<!-- 报警区 -->
<div class="side-bar-card flag clearfix">
<div class="col-xs-5">
<img src="img/警察.png" />
</div>
<div class="col-xs-7 text-jb">
<p>有害信息举报专区</p>
<p>举报电话：12377</p>
</div>
</div>
<!-- 24小时热文 -->
<div class="side-bar-card">
<!-- 标题 -->
<div class="card-title">
24小时热文
</div>
<!-- 具体新闻信息 -->
<div class="card-body">
<div class="list">
</div>
</div>
</div>
</div>（2）news页面
新闻详情页如下：
观察上图：新闻详情页从上到下也分为三部分，由于截屏原因，页脚并未截取。中间内容部分可分为左右两大部分。左侧部分为新闻的具体信息，右侧部分包括了相关推荐和24小时热文。整体框架如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>新闻实战</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-default">
</nav>
<!-- 主题内容 -->
<div class="container">
<!-- 左侧占8列 -->
<div class="col-md-8">
</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 no-padding-h">
</div>
<div class="col-xs-7">
</div>
</div>
</div>
</div>
<div class="side-bar-card">
<div class="card-title">
24小时热文
</div>
<div class="card-body">
<div class="list">
<div class="item">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
（3）login页面
登陆页面如下：
观察上图可知：登录页面从上到下分为三部分：顶部导航栏、中间表单以及底部页脚三大部分，则其整体框架为：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>新闻实战</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-default">
</nav>
<!-- 表单项 -->
<div class="container contain-small">
<h1>
<small>没有账号？<a href="register.html">请注册</a></small>
</h1>
<form action="" method="">
</form>
</div>
<!-- 底部页脚 -->
<div class="footer">
</div>
</body>
</html>
（4）register页面
注册页面如下：
观察上图知：注册页面与登陆页面仅表单项不一致，其余部分基本一致。其主框架为：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>新闻实战</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-default">
</nav>
<!-- 表单项 -->
<div class="container contain-small">
<h1>
<small>欢迎注册</a></small>
</h1>
<form action="" method="">
</form>
</div>
<!-- 底部页脚 -->
<div class="footer">
</div>
</body>
</html>
4、超小屏幕下导航栏的隐藏
通过效果图，不难发现，在超小屏幕下将导航栏进行隐藏，取而代之的是Menu。通过点击Menu将导航栏再次显示出来。那么如果达到这个效果呢？
a：超小屏幕下将导航栏所在的div设置class属性hidden-xs
b：定义label标签。点击label的时候改变checkbox的属性，通过label的for属性与checkbox的id属性关联。如果label被点击，就代表checkbox被选中，则此时导航栏展示出来，反之，则将导航栏隐藏。
如下：
具体实现：
<label for="toggle-checkbox" id="toggle-label" class="visible-xs-inline-block">Menu</label>
<input type="checkbox" id="toggle-checkbox" class="hidden"/>
<div class="hidden-xs">
<ul class="nav navbar-nav">
<li><a href="index.html">首页</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">焦点</a></li>
<li><a href="#">文化</a></li>
<li><a href="#">搞笑</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="login.html">登录</a></li>
<li><a href="register.html">注册</a></li>
</ul>
</div>index.css中的实现：
#toggle-checkbox:checked ~ div{
display: block!important;
}四、具体代码
index.html的实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>新闻实战</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand"></a>
</div>
<label for="toggle-checkbox" id="toggle-label" class="visible-xs-inline-block">Menu</label>
<input type="checkbox" id="toggle-checkbox" class="hidden"/>
<div class="hidden-xs">
<ul class="nav navbar-nav">
<li><a href="index.html">首页</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">焦点</a></li>
<li><a href="#">文化</a></li>
<li><a href="#">搞笑</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="login.html">登录</a></li>
<li><a href="register.html">注册</a></li>
</ul>
</div>
</div>
</nav>
<!-- 主题内容 -->
<div class="container">
<div class="row">
<!-- 左侧部分 -->
<div class="col-sm-2">
<div class="list-group slider-bar">
<a href="#" class="list-group-item">首页</a>
<a href="#" class="list-group-item">国际</a>
<a href="#" class="list-group-item">国内</a>
<a href="#" class="list-group-item">社会</a>
<a href="#" class="list-group-item">影视</a>
<a href="#" 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-sm-5">
<img src="img/news-1.jpg" />
</div>
<div class="col-sm-7">
<div class="title">
<a href="news.html">中东部将现入冬以来最冷天气：羽绒服等抗寒物质热销、甚至断货</a>
</div>
<div class="info">
<p class="text-muted">出处：快科技 作者：雪花 编辑：雪花</p>
<p class="text-muted">2020-12-26 09:28:37 人气： 5010 次 评论(6)</p>
</div>
</div>
</div>
<div class="news-list-item clearfix">
<div class="col-sm-5">
<img src="img/news-3.png" />
</div>
<div class="col-sm-7">
<div class="title">
<a>6旬残疾老人回应跳井救男童：急得忘记了生死，即便牺牲也无所谓</a>
</div>
<div class="info">
<p class="text-muted">出处：北京晚报官网官方帐号</p>
<p class="text-muted">12-26 10:14 人气： 24060 次 评论(992)</p>
</div>
</div>
</div>
<div class="news-list-item clearfix">
<div class="col-sm-5">
<img src="img/news-4.PNG" />
</div>
<div class="col-sm-7">
<div class="title">
<a>保安为考研生建群共享教室信息 暖心！</a>
</div>
<div class="info">
<p class="text-muted">出处：北京晚报官网官方帐号</p>
<p class="text-muted">2020-12-26 10:29:51 人气： 9300 次 评论(4235)</p>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧部分 -->
<div class="col-sm-3 clearfix">
<div class="searhc-bar">
<input type="search" class="form-control" />
</div>
<div class="side-bar-card flag clearfix">
<div class="col-xs-5">
<img src="img/警察.png" />
</div>
<div class="col-xs-7 text-jb">
<p>有害信息举报专区</p>
<p>举报电话：12377</p>
</div>
</div>
<div class="side-bar-card">
<div class="card-title">
24小时热文
</div>
<div class="card-body">
<div class="list">
<div class="item">
<div class="title">苹果给用户发邮件：价格乌龙订单将被取消</div>
<div class="desc text-muted">发布时间：12-25 15:46 青岛软媒网络科技有限公司</div>
</div>
<div class="item"></div>
</div>
</div>
<div class="card-body">
<div class="list">
<div class="item">
<div class="title">为塞尔维亚带来首批援塞中国专家的英雄机长，因新冠肺炎去世</div>
<div class="desc text-muted">发布时间：12-2520:14上海观察者信息技术有限公司官方帐号,优质创作者</div>
</div>
<div class="item"></div>
</div>
</div>
<div class="card-body">
<div class="list">
<div class="item">
<div class="title">降温幅度堪比2016年“霸王级”寒潮！关于年末寒潮你必须知道的十大要点</div>
<div class="desc text-muted">发布时间：12-25 18:44中国天气网,优质创作者</div>
</div>
<div class="item"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源
</div>
</body>
</html>
news.html的实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>新闻实战</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand"></a>
</div>
<label for="toggle-checkbox" id="toggle-label" class="visible-xs-inline-block">Menu</label>
<input type="checkbox" id="toggle-checkbox" class="hidden"/>
<div class="hidden-xs">
<ul class="nav navbar-nav">
<li><a href="index.html">首页</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">焦点</a></li>
<li><a href="#">文化</a></li>
<li><a href="#">搞笑</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="login.html">登录</a></li>
<li><a href="register.html">注册</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="col-md-8">
<h1 class="news-title">中东部将现入冬以来最冷天气：羽绒服等抗寒物质热销、甚至断货</h1>
<div class="news-status">
2020-12-26 09:28:37 出处：快科技 作者：雪花 编辑：雪花 人气： 5010 次 评论(6)
</div>
<div class="news-content">
<blockquote>
<p>
羽绒服等抗寒物质热销、甚至断货
</p>
</blockquote>
中央气象台预计，12月28日至31日，将有一股强冷空气影响我国中东部地区，届时大风降温雨雪都会陆续登场，西北地区东部、华北、黄淮、江汉、江南等地可达10～12℃，并将伴有4～6级偏北风，阵风可达7～8级，级别堪称今冬最强寒潮。
据悉，此次天气过程具有影响范围广、降温剧烈、气温低、大风持续时间长等特点。其中，沈阳、呼和浩特等地最高气温低于-10℃；上海、合肥、无锡、武汉、西安等地最低气温都将跌破-5℃；广州的最低气温也将跌至4℃左右。具体预报如下：
大风降温方面，预计28日至31日，中东部大部地区气温将下降8～10℃，西北地区东部、东北地区东南部、华北西部和北部、黄淮南部、江淮、江南、华南中北部等地降温12～14℃，局地降温幅度可达14℃以上；降温过后，最低气温0℃线将南压至华南北部一带，最低气温-10℃线在黄河下游到秦岭一带；中东部大部地区将有4～6级、阵风7～9级偏北风，我国东部和南部海区有7～9级、阵风10～11级偏北风。
气象专家提醒，12月以来中东部大部地区气温较常年同期偏低，最低气温0℃线基本达到了今年入冬以来最南位置。
另外，因持续的低温和大风天气，中东部地区风寒效应明显。公众需及时关注天气，做好防风御寒措施，谨防感冒；还需防范雨雪和低温导致的道路积雪结冰对出行交通等的不利影响。
随着年末寒潮来袭，一些抗寒物质也出现了热销的情况，据统计羽绒服、围巾、手套、棉靴、暖宝宝之类的抗寒商品，近段时间同比增长了50%，不少甚至出现了断货的情况。
<br/>
<img src="img/news-1.jpg"/>
</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 no-padding-h">
<img src="img/news-2.jpeg"/>
</div>
<div class="col-xs-7">
<div class="title">元旦后将补缴电商税被阿里火速辟谣，电商征税正进入最后倒计时</div>
<div class="desc">发布时间：12-26 10:23</div>
</div>
</div>
<div class="item clearfix">
<div class="col-xs-5 no-padding-h">
<img src="img/news-2.jpeg"/>
</div>
<div class="col-xs-7">
<div class="title">元旦后将补缴电商税被阿里火速辟谣，电商征税正进入最后倒计时</div>
<div class="desc">发布时间：12-26 10:23</div>
</div>
</div>
<div class="item clearfix">
<div class="col-xs-5 no-padding-h">
<img src="img/news-2.jpeg"/>
</div>
<div class="col-xs-7">
<div class="title">元旦后将补缴电商税被阿里火速辟谣，电商征税正进入最后倒计时</div>
<div class="desc">发布时间：12-26 10:23</div>
</div>
</div>
</div>
</div>
<div class="side-bar-card">
<div class="card-title">
24小时热文
</div>
<div class="card-body">
<div class="list">
<div class="item">
<div class="title">苹果给用户发邮件：价格乌龙订单将被取消</div>
<div class="desc text-muted">发布时间：12-25 15:46 青岛软媒网络科技有限公司</div>
</div>
<div class="item"></div>
</div>
</div>
<div class="card-body">
<div class="list">
<div class="item">
<div class="title">苹果给用户发邮件：价格乌龙订单将被取消</div>
<div class="desc text-muted">发布时间：12-25 15:46 青岛软媒网络科技有限公司</div>
</div>
<div class="item"></div>
</div>
</div>
<div class="card-body">
<div class="list">
<div class="item">
<div class="title">苹果给用户发邮件：价格乌龙订单将被取消</div>
<div class="desc text-muted">发布时间：12-25 15:46 青岛软媒网络科技有限公司</div>
</div>
<div class="item"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源
</div>
</body>
</html>
login.html的实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>新闻实战</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand"></a>
</div>
<label for="toggle-checkbox" id="toggle-label" class="visible-xs-inline-block">Menu</label>
<input type="checkbox" id="toggle-checkbox" class="hidden"/>
<div class="hidden-xs">
<ul class="nav navbar-nav">
<li><a href="index.html">首页</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">焦点</a></li>
<li><a href="#">文化</a></li>
<li><a href="#">搞笑</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="login.html">登录</a></li>
<li><a href="register.html">注册</a></li>
</ul>
</div>
</div>
</nav>
<!-- 主题内容 -->
<div class="container contain-small">
<h1>
<small>没有账号？<a href="register.html">请注册</a></small>
</h1>
<form action="" method="">
<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">
<input type="submit" class="btn btn-primary btn-block"/>
</div>
<div class="form-group">
<a>忘记密码？</a>
</div>
</form>
</div>
<div class="footer">
转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源
</div>
</body>
</html>
register.html的实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>新闻小项目</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="navbar-brand"></a>
</div>
<label for="toggle-checkbox" id="toggle-label" class="visible-xs-inline-block">Menu</label>
<input type="checkbox" id="toggle-checkbox" class="hidden"/>
<div class="hidden-xs">
<ul class="nav navbar-nav">
<li><a href="index.html">首页</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">焦点</a></li>
<li><a href="#">文化</a></li>
<li><a href="#">搞笑</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="login.html">登录</a></li>
<li><a href="register.html">注册</a></li>
</ul>
</div>
</div>
</nav>
<!-- 主题内容 -->
<div class="container contain-small">
<h1>
<small>欢迎注册</a></small>
</h1>
<form action="" method="">
<div class="form-group">
<label>手机/邮箱</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>验证码</label>
<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">
<label>再次输入密码</label>
<input type="password" class="form-control"/>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn-block"/>
</div>
</form>
</div>
<div class="footer">
转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源
</div>
</body>
</html>
样式文件index.css
img{
display: inline-block;
width: 100%;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: none;
cursor: pointer;
}
.navbar{
text-align: center;
}
.navbar-brand{
background-image: url(../img/logo.png);
width: 100px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.navbar-default .navbar-nav>li {
width: 120px;
}
.navbar-default .navbar-nav>li>a {
font-size: 18px;
}
.navbar-default .navbar-nav>li>a:hover {
background-color: white;
color: #000000;
}
.slider-bar .list-group-item{
border: 0;
border-radius: 5px;
font-size: 14px;
text-align: center;
background-color:gainsboro;
}
.slider-bar .list-group-item:hover{
background-color: #efaccb;
}
.news-list-item {
padding-top: 15px;
padding-bottom: 15px;
border-bottom: 1px solid gainsboro;
}
.news-list-item .title{
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
line-height: 1.5;
}
.news-list-item .info p{
display: inline-block;
}
.side-bar-card{
background: rgba(0, 0, 0, 0.1);
margin-top: 15px;
padding: 10px 0;
}
.side-bar-card.flag{
padding: 20px 0;
}
.side-bar-card .text-jb{
font-size: 14px;
text-align: center;
line-height: 2;
}
.side-bar-card .card-title,
.side-bar-card .card-body .list .item{
padding: 10px 15px;
}
.side-bar-card .card-title{
font-size: 18px;
font-weight: bold;
padding-top: 0;
padding-bottom: 0;
}
.side-bar-card .card-body .list .item:hover{
background: rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.side-bar-card .card-body .list .title{
padding-bottom: 5px;
}
.news-title{
line-height: 1.5;
}
.news-status{
color: #999;
}
.news-content{
margin-top: 20px 0;
font-size: 18px;
line-height: 2;
}
.news-content img{
margin-top: 10px auto;
}
.no-padding-h{
padding-left: 0;
padding-right: 0;
}
.footer{
margin-top: 20px;
padding: 50px 0;
text-align: center;
color: #D4D4D4;
}
.contain-small{
max-width: 500px;
}
.btn-primary{
background-color: #efaccb;
border-color: #efaccb;
}
.btn-primary:hover{
background-color: hotpink;
border-color: hotpink;
}
.btn-primary:focus{
background-color: hotpink;
border-color: hotpink;
}
#toggle-checkbox:checked ~ div{
display: block!important;
}
#toggle-label{
display: inline-block;
position: absolute;
right: 10px;
top: 10px;
font-size: 16px;
font-weight: normal;
display: none;
}
版权声明：本文标题：Bootstrap实战之新闻网 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1729707117a1210847.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论