Bootstrap新闻页面设计
发布时间
阅读量：
阅读量
1.必须写的头, 以及引入的文件
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.4.0.js"></script>
<script src="js/bootstrap.min.js"></script>
2.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻页面</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.4.0.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/newStyle.css">
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">中公头条</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li ><a href="#">首页</a></li>
<li ><a href="#">下载app</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="#">java</a></li>
<li><a href="#">web</a></li>
<li><a href="#">大数据</a></li>
<li class="divider"></li>
<li><a href="#">物联网</a></li>
<li class="divider"></li>
<li><a href="#">考研</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ><a href="#">登录</a></li>
<li ><a href="#">注册</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<!--左边部分-->
<div class="col-md-2">
<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
<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>
</ul>
</div>
<!--中间部分-->
<div class="col-md-7">
<div class="row item">
<div class="col-md-3">
<img src="image/img2.jpg" height="159" width="284" class="img-responsive img-rounded"/></div>
<div class="col-md-9">
<div class="title">U就业赵老师上课风格，严格中不失幽默，知识点丰富，形式多样……</div>
<div class="info">作者：林中浪. 12000评论. 2小时前</div>
</div>
</div>
<div class="row item">
<div class="col-md-3">
<img src="image/img2.jpg" height="159" width="284" class="img-responsive img-rounded"/></div>
<div class="col-md-9">
<div class="title">U就业赵老师上课风格，严格中不失幽默，知识点丰富，形式多样……</div>
<div class="info">作者：林中浪. 12000评论. 2小时前</div>
</div>
</div>
<div class="row item">
<div class="col-md-3">
<img src="image/img2.jpg" height="159" width="284" class="img-responsive img-rounded"/></div>
<div class="col-md-9">
<div class="title">U就业赵老师上课风格，严格中不失幽默，知识点丰富，形式多样……</div>
<div class="info">作者：林中浪. 12000评论. 2小时前</div>
</div>
</div>
<div class="row item">
<div class="col-md-3">
<img src="image/img2.jpg" height="159" width="284" class="img-responsive img-rounded"/></div>
<div class="col-md-9">
<div class="title">U就业赵老师上课风格，严格中不失幽默，知识点丰富，形式多样……</div>
<div class="info">作者：林中浪. 12000评论. 2小时前</div>
</div>
</div>
<div class="row item last_botton">
<div class="col-md-3">
<img src="image/img2.jpg" height="159" width="284" class="img-responsive img-rounded"/></div>
<div class="col-md-9">
<div class="title">U就业赵老师上课风格，严格中不失幽默，知识点丰富，形式多样……</div>
<div class="info">作者：林中浪. 12000评论. 2小时前</div>
</div>
</div>
</div>
<!--右边部分-->
<div class="col-md-3">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-danger" type="button">搜索</button>
</span>
</div><!-- /input-group -->
<div class="row danger-info">
<div class="col-md-4"><img src="image/wj.png" height="100" width="114" class="img-responsive img-rounded"/></div>
<div class="col-md-8">
<div class="info">网上有害信息举报专区</div>
<div class="tel">举报电话：12377</div>
</div>
</div>
<div class="row last_info">
<div class="new-title">最新热文</div>
<div class="new-title-info">
<div class="title">U就业某赵姓老师授课风格幽默并且颜值爆表，学生竟然纷纷在课堂上...</div>
<div class="info">1500阅读.1000评论</div>
</div>
<div class="new-title-info">
<div class="title">U就业某赵姓老师授课风格幽默并且颜值爆表，学生竟然纷纷在课堂上...</div>
<div class="info">1500阅读.1000评论</div>
</div>
<div class="new-title-info">
<div class="title">U就业某赵姓老师授课风格幽默并且颜值爆表，学生竟然纷纷在课堂上...</div>
<div class="info">1500阅读.1000评论</div>
</div>
<div class="new-title-info">
<div class="title">U就业某赵姓老师授课风格幽默并且颜值爆表，学生竟然纷纷在课堂上...</div>
<div class="info">1500阅读.1000评论</div>
</div>
</div>
</div>
</div>
<div class="row footer">Copyright©1999-2019 中公教育科技股份有限公司 All Rights Reserved</div>
</div>
</body>
</html>
3.自定义的样式
.nav>li>a{
text-align: center;
}
.nav{
border-bottom: none;
}
.nav>li>a:hover{
background-color: #2e6da4;
color: aliceblue;
}
.item{
padding: 10px 0;
border-bottom: 1px solid silver;
}
.item .title{
font-size: 16px;
font-weight: 700;
}
.item .info{
font-weight: 300;
font-size: 13px;
color: darkgray;
padding-top: 19px;
}
.item.last_botton{
border-bottom: none;
}
.danger-info{
background-color: lightgray;
margin:20px 0;
height: 80px;
border-radius: 4px;
padding:13px 0;
}
.danger-info .info{
font-weight: 700;
padding-right: 0px;
font-size: 14px;
}
.danger-info .tel{
font-weight: 300;
color: ghostwhite;
padding-top: 15px;
}
div.last_info{
background-color: lightgray;
margin:20px 0;
border-radius: 4px;
padding-top: 12px;
}
div.last_info .new-title{
font-weight: 600;
font-size: 16px;
padding-left: 10px;
}
div.last_info .new-title-info{
padding-left: 10px;
padding-top: 10px;
}
div.last_info .new-title-info .title{
font-size: 15px;
}
div.last_info .new-title-info .info{
padding-top: 5px;
color: ghostwhite;
font-size: 13px;
padding-top:12px;
}
.footer{
text-align: center;
color: darkgrey;
padding-top: 15px;
border-top: 1px solid grey;
}
全部评论 (0)
还没有任何评论哟~