下载bootstrap
https://getbootstrap.com/docs/4.1/getting-started/download/
解压到本地目录：
- css： bootstrap.min.css
- font: 所有文件
- js: bootstrap.min.js
创建项目news
news
├── css
│ ├── bootstrap.min.css
│ └── main.css
├── fonts
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
├── img
│ └── logo.jpg
├── index.html // 主页面
├── js
│ └── bootstrap.min.js
├── login.html //登陆页面
├── news.html //新闻详情页面
└── signup.html //注册页面
编写主页面(index.html)
编写主页面的内容可以参考 https://v3.bootcss.com/components/#navbar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-default">
<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-brand" href="index.html"></a>
</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 class="active" style="padding-bottom: 15px;"><a href="index.html">首页<span class="sr-only">(current)</span></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="signup.html">注册</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container container-fluid">
<div class="row">
<!--左侧导航-->
<div class="col-xs-2">
<div class="list-group left-side">
<a class="list-group-item left-side-active" href="#">综合</a>
<a class="list-group-item" href="#">电影</a>
<a class="list-group-item" href="#">电视剧</a>
<a class="list-group-item" href="#"> 明星</a>
<a class="list-group-item" href="#">娱乐</a>
</div>
</div>
<!--中间新闻-->
<div class="col-xs-7">
<div class="media">
<div class="media-left">
<a href="news.html">
<img class="media-object news-png"
src="img/index1.jpg"
alt="新闻图片"></a>
</div>
<div class="media-body">
<h4 class="media-heading"><b>2年前他为教育和高圆圆分手，今成这般，高圆圆：我有一句MMP如哽在喉</b></h4>
<div class="news-info">
<img class="news-logo" src="img/u=1271327272,62771227&fm=26&gp=0.jpg">
<span>王花花</span>.
<span>25K评论</span>.
<span>7分钟前</span>
</div>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="news.html">
<img class="media-object news-png"
src="img/2.2.jpg"
alt="新闻图片"></a>
</div>
<div class="media-body">
<h4 class="media-heading"><b>2年前他为教育和高圆圆分手，今成这般，高圆圆：我有一句MMP如哽在喉</b></h4>
<div class="news-info">
<img class="news-logo" src="img/u=1271327272,62771227&fm=26&gp=0.jpg">
<span>王花花</span>.
<span>25K评论</span>.
<span>7分钟前</span>
</div>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="news.html">
<img class="media-object news-png"
src="img/2.jpg"
alt="新闻图片"></a>
</div>
<div class="media-body">
<h4 class="media-heading"><b>2年前他为教育和高圆圆分手，今成这般，高圆圆：我有一句MMP如哽在喉</b></h4>
<div class="news-info">
<img class="news-logo" src="img/u=1271327272,62771227&fm=26&gp=0.jpg">
<span>王花花</span>.
<span>25K评论</span>.
<span>7分钟前</span>
</div>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="news.html">
<img class="media-object news-png"
src="img/2.2.jpg"
alt="新闻图片"></a>
</div>
<div class="media-body">
<h4 class="media-heading"><b>2年前他为教育和高圆圆分手，今成这般，高圆圆：我有一句MMP如哽在喉</b></h4>
<div class="news-info">
<img class="news-logo" src="img/u=1271327272,62771227&fm=26&gp=0.jpg">
<span>王花花</span>.
<span>25K评论</span>.
<span>7分钟前</span>
</div>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="news.html">
<img class="media-object news-png"
src="img/index1.jpg"
alt="新闻图片"></a>
</div>
<div class="media-body">
<h4 class="media-heading"><b>2年前他为教育和高圆圆分手，今成这般，高圆圆：我有一句MMP如哽在喉</b></h4>
<div class="news-info">
<img class="news-logo" src="img/u=1271327272,62771227&fm=26&gp=0.jpg">
<span>王花花</span>.
<span>25K评论</span>.
<span>7分钟前</span>
</div>
</div>
</div>
<div class="media">
<div class="media-left">
<a href="news.html">
<img class="media-object news-png"
src="img/2.2.jpg"
alt="新闻图片"></a>
</div>
<div class="media-body">
<h4 class="media-heading"><b>2年前他为教育和高圆圆分手，今成这般，高圆圆：我有一句MMP如哽在喉</b></h4>
<div class="news-info">
<img class="news-logo" src="img/u=1271327272,62771227&fm=26&gp=0.jpg">
<span>王花花</span>.
<span>25K评论</span>.
<span>7分钟前</span>
</div>
</div>
</div>
<!--页角-->
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">上一页</span></a>
</li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
<li><a href="#">2 <span class="sr-only">(current)</span></a></li>
<li><a href="#">3 <span class="sr-only">(current)</span></a></li>
<li><a href="#">4 <span class="sr-only">(current)</span></a></li>
<li><a href="#">... <span class="sr-only">(current)</span></a></li>
<li><a href="#">10 <span class="sr-only">(current)</span></a></li>
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">下一页</span></a>
</li>
</ul>
</nav>
</div>
<div class="col-xs-3">
<!--搜索栏-->
<div class="input-group input-info">
<input type="text" class="form-control" placeholder="搜一下">
</div>
<!--有害信息-->
<div class="bad-infomation">
<table id="bad-table">
<tr>
<td rowspan="2">
<img class="bad-jpg" src="img/4.png">
</td>
<td id="bad-font1">有害信息举报专区</td>
</tr>
<tr>
<td id="bad-font2">
举报电话12377
</td>
</tr>
</table>
</div>
<!--新闻推荐-->
<div class="list-group hot-news">
<a href="#" class="list-group-item">
<span style="font-size: larger"><b>24小时热闻</b></span>
</a>
<a href="#" class="list-group-item"><span style="font-size: large"> Lorem ipsum dolor sit amet,consectetur adipisicing</span><div class="news-info">
<span>25K评论</span>
<span>7分钟前</span></div></a>
<a href="#" class="list-group-item"><span style="font-size: large"> Lorem ipsum dolor sit amet,consectetur adipisicing</span><div class="news-info">
<span>25K评论</span>
<span>7分钟前</span></div></a>
<a href="#" class="list-group-item"><span style="font-size: large"> Lorem ipsum dolor sit amet,consectetur adipisicing</span><div class="news-info">
<span>25K评论</span>
<span>7分钟前</span></div></a>
<a href="#" class="list-group-item"><span style="font-size: large"> Lorem ipsum dolor sit amet,consectetur adipisicing</span><div class="news-info">
<span>25K评论</span>
<span>7分钟前</span></div></a>
<a href="#" class="list-group-item"><span style="font-size: large"> Lorem ipsum dolor sit amet,consectetur adipisicing</span><div class="news-info">
<span>25K评论</span>
<span>7分钟前</span></div></a>
</div>
</div>
</div>
</div>
<div class="footer">
京ICP备11008151号京公网安备11010802014853
</div>
</body>
</html>
登陆界面(login.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-default">
<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-brand" href="index.html"></a>
</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 class="active" style="padding-bottom: 15px;"><a href="index.html">首页<span class="sr-only">(current)</span></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="signup.html">注册</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--登陆界面-->
<div class="container container-small login">
<h1>登录
<small>没有账号？<a href="signup.html">注册</a></small>
</h1>
<form>
<div class="form-group">
<label>用户名/手机/邮箱</label>
<input type="text" class="form-control username-text">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control passwd-text">
</div>
<div class="form-group">
<button class="btn btn-primary btn-block block-sure" type="submit">登录</button>
</div>
<div class="form-group">
<a href="#">忘记密码？</a>
</div>
</form>
</div>
</body>
</html>
注册界面(signup.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>signup</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-default">
<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-brand" href="index.html"></a>
</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 class="active" style="padding-bottom: 15px;"><a href="index.html">首页<span class="sr-only">(current)</span></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="signup.html">注册</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--注册界面-->
<div class="container container-small login">
<h1>注册
<small>没有账号？<a href="signup.html">注册</a></small>
</h1>
<form>
<div class="form-group">
<label>手机</label>
<input type="text" class="form-control username-text">
</div>
<div class="form-group username-text">
<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 username-text">
</div>
<div class="form-group">
<button class="btn btn-primary btn-block block-sure" type="submit">注册</button>
</div>
<div class="form-group">
注册咖啡或浮云即代表您同意<a href="#">咖啡或浮云服务条款</a>
</div>
</form>
</div>
</body>
</html>
新闻页(news.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>news</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-default">
<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-brand" href="index.html"></a>
</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 class="active" style="padding-bottom: 15px;"><a href="index.html">首页<span class="sr-only">(current)</span></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="signup.html">注册</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="col-xs-1"></div>
<!--新闻-->
<div class="col-xs-7">
<h2>2年前他为教育和高圆圆分手，今成这般，高圆圆：我有一句MMP如哽在喉</h2>
<h6>25k阅读 35分钟之前发布 <span class="label label-default">教育</span> <span class="label label-default">情感</span></h6>
China has approved 17 new cancer drugs for inclusion in its national health insurance system,
China's State Medical Insurance Administration announced on Wednesday.<br>
<img src="img/2.2.jpg"><br>
<p>The 17 adopted drugs are crucial to treating cancers including kidney,
colorectal and lymphoma,
the statement released by the administration read.</p>
<p>The addition would make cancer drugs more affordable to the general public and
improve their treatment, administration head Hu Jinglin told China Central Television (CCTV).
Ten out of the 17 are new drugs that came onto the market after 2017, the CCTV report said.
Purchasing new drugs encouraged pharmaceutical companies to expand their
investment in research, Hu was quoted as saying.</p>
<p>Shortly after its establishment at the end of May,
the administration began negotiating with pharmaceutical
companies for the purchase of new cancer drugs for listing on
China's national health system.</p>
<p>Previously the 17 drugs were mainly imported and not
covered by the country's health insurance.
Negotiations sought to balance patient demand with adequate
profits for pharmaceutical companies, CCTV reported.
The price of new China-made drugs on the list was
slashed 56.7 percent, while the imported drugs would cost
"36 percent lower than neighboring countries," the statement read.</p>
<p>Chinese pharmaceutical companies lag behind their international
counterparts in research and development due to the high up front investment
threshold and the risk of failure after decades of research, Chinese experts noted.</p>
</div>
<!--右边推荐栏-->
<div class="col-xs-3">
<div class="media right-news">
<h4 style="padding-left: 7px">相关推荐</h4>
<div class="media-left">
<a href="news.html">
<img class="media-object news-png-html"
src="img/2.2.jpg"
alt="新闻图片"></a>
</div>
<div class="media-body">
<h4 class="media-heading">Shortly after its <br>at the end of May</h4>
<div class="news-info">
<span>25K阅读</span>.
<span>7分钟前</span>
</div>
</div>
<div class="media right-news">
<div class="media-left">
<a href="news.html">
<img class="media-object news-png-html"
src="img/2.jpg"
alt="新闻图片"></a>
</div>
<div class="media-body">
<h4 class="media-heading">Shortly after its <br>at the end of May</h4>
<div class="news-info">
<span>25K阅读</span>.
<span>7分钟前</span>
</div>
</div>
</div>
<div class="media right-news">
<div class="media-left">
<a href="news.html">
<img class="media-object news-png-html"
src="img/2.2.jpg"
alt="新闻图片"></a>
</div>
<div class="media-body">
<h4 class="media-heading">Shortly after its <br>at the end of May</h4>
<div class="news-info">
<span>25K阅读</span>.
<span>7分钟前</span>
</div>
</div>
</div>
<div class="media right-news">
<div class="media-left">
<a href="news.html">
<img class="media-object news-png-html"
src="img/2.2.jpg"
alt="新闻图片"></a>
</div>
<div class="media-body">
<h4 class="media-heading">Shortly after its <br>at the end of May</h4>
<div class="news-info">
<span>25K阅读</span>.
<span>7分钟前</span>
</div>
</div>
</div>
</div>
<!--新闻推荐-->
<div class="list-group hot-news">
<a href="#" class="list-group-item">
<span style="font-size: larger"><b>24小时热闻</b></span>
</a>
<a href="#" class="list-group-item"><span style="font-size: large"> Lorem ipsum dolor sit amet,consectetur adipisicing</span><div class="news-info">
<span>25K评论</span>
<span>7分钟前</span></div></a>
<a href="#" class="list-group-item"><span style="font-size: large"> Lorem ipsum dolor sit amet,consectetur adipisicing</span><div class="news-info">
<span>25K评论</span>
<span>7分钟前</span></div></a>
<a href="#" class="list-group-item"><span style="font-size: large"> Lorem ipsum dolor sit amet,consectetur adipisicing</span><div class="news-info">
<span>25K评论</span>
<span>7分钟前</span></div></a>
<a href="#" class="list-group-item"><span style="font-size: large"> Lorem ipsum dolor sit amet,consectetur adipisicing</span><div class="news-info">
<span>25K评论</span>
<span>7分钟前</span></div></a>
</div>
</div>
</body>
</html>
main.css
/*index*/
.navbar-brand{
background-image: url("../img/u=1271327272,62771227&fm=26&gp=0.jpg");
width: 50px;
background-position: center center;
background-size: 75%;
background-repeat: no-repeat;
height: 40px;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 15px;
}
.navbar{
box-shadow: 5px 5px 5px #f3eded;
background: rgba(228, 227, 227, 0.25);;
border: 1px solid rgba(228, 227, 227, 0.25);
font-size: 120%;
height: 40px;
padding-top: 4px;
}
.left-side a, .left-side{
/*设置边框为0*/
border: 0;
border-radius: 2px ;
margin-top: 5px;
font-size: 110%;
margin-right: 20px;
text-align: center;
}
.left-side a:hover, .left-side-active{
background: #F35F5F;;
/*background: mediumpurple;*/
border: 1px #F35F5F;
}
.news-png {
width: 210px;
height: 110px;
margin-right: 10px;
}
.media-heading{
margin-top: 0;
}
.news-logo{
width: 20px;
height: 20px;
}
.news-info{
color: rgba(138, 140, 138, 0.69);
}
.input-info{
width: 100%;
}
.bad-infomation{
width: 100%;
height: 150px;
border-radius: 3px;
background-color: #E6E2E1;
margin-top: 20px;
}
.bad-jpg{
height: 120px;
}
#bad-table{
width: 100%;
height: 100%;
}
#bad-font1{
font-size: x-large;
}
#bad-font2{
height: 50px;
padding-bottom: 25px;
}
.hot-news a {
width: 100%;
margin-top: 7px;
background: #E6E2E1;
border-radius: 3px;
border: 0;
}
.hot-news{
width: 100%;
margin-top: 20px;
background: #E6E2E1;
border-radius: 3px;
border: 0;
}
.footer{
text-align: center;
margin-top: 50px;
color: darkgrey;
}
/*login signup*/
.login{
width: 50%;
padding-top: 20px;
}
.username-text, .passwd-text{
width: 80%;
}
.block-sure{
width: 80%;
background-color: #F35F5F;
border: 1px solid #F35F5F;
}
.block-sure:hover{
background-color: #EF4646;
border: 1px solid #EF4646;
}
/*news*/
.news-png-html {
width:160px;
height: 80px;
margin-right: 10px;
padding-left: 7px;
}
.right-news{
background-color: #E6E2E1;
}