bootstrap也是大概了解了,现在就是做一个案例,更加深入的学习它的使用.
整体划为三档.注意:bootstrap原先给我们的最大档位的宽度是1170px,但是我们的设计稿的宽度是1280px,所以需要我们手动增加一个档位.
看一下做完的效果:
页面的布局会随着屏幕的尺寸发生变化.
做的过程中也遇到了一些值得注意的地方.
1.在a链接中放了一个<img>标签,里面插入了图片,但是就无法自适应,图片不能正常显示. 解决办法:<img>标签的父亲a链接的大小是自适应的,会随着屏幕大小发生改变,所以我们给img一个宽度:100%即可.
2.我们在设置单独的样式时,没有效果.解决:可能是权重问题导致的,可以增加类名/!important, 而且要注意不要直接给"col-..."的类名直接修改样式.
3.我们使用bootstrap里面的字体图标,将类名直接拿来用就可以了,它的实现原理就是对我们取类名的盒子使用::before伪元素选择器,所以我们再修改样式时要使用::before选出.
4.很多元素会自带内外边距,要注意小心,绿色的是padding,橙色的是margin.
完整代码:
HTML部分:
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<title>Document</title>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="container">
<div class="row">
<!-- header部分 左侧 -->
<header class="col-md-2 ">
<div class="logo">
<a href="#"><img src="./images/logo.png" alt="" class="hidden-xs"></a>
<span class="visible-xs">阿里百秀</span>
</div>
<div class="nav">
<ul>
<li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
<li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>
<li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
<li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
<li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
</ul>
</div>
</header>
<article class="col-md-7">
<!-- 新闻模块 中间-->
<div class="news clearfix">
<ul>
<li>
<a href="#"><img src="./upload/lg.png" alt="">
<p>
阿里百秀
</p>
</a>
</li>
<li> <a href="#"><img src="./upload/1.jpg" alt="">
<p>
奇了 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</p>
</a></li>
<li><a href="#"><img src="./upload/1.jpg" alt="">
<p>
奇了 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</p>
</a></li>
<li><a href="#"><img src="./upload/1.jpg" alt="">
<p>
奇了 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</p>
</a></li>
<li><a href="#"><img src="./upload/1.jpg" alt="">
<p>
奇了 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</p>
</a></li>
</ul>
</div>
<!-- 发表模块 中间-->
<div class="publish">
<div class="row">
<div class="col-sm-9">
<h3>生活馆 关于指甲的10个健康知识,你知道几个?</h3>
<p class="text-muted hidden-xs">xxx发布于205-5-14</p>
<p class="hidden-xs">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈</p>
<p class="text-muted">阅读(2464) 评论(1) 赞(18)</p>
</div>
<div class="col-sm-3 pic hidden-xs"><img src="./upload/2.jpg" alt=""></div>
</div>
<div class="row">
<div class="col-sm-9">
<h3>生活馆 关于指甲的10个健康知识,你知道几个?</h3>
<p class="text-muted hidden-xs">xxx发布于205-5-14</p>
<p class="hidden-xs">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈</p>
<p class="text-muted">阅读(2464) 评论(1) 赞(18)</p>
</div>
<div class="col-sm-3 pic hidden-xs"><img src="./upload/2.jpg" alt=""></div>
</div>
<div class="row">
<div class="col-sm-9">
<h3>生活馆 关于指甲的10个健康知识,你知道几个?</h3>
<p class="text-muted hidden-xs">xxx发布于205-5-14</p>
<p class="hidden-xs">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈</p>
<p class="text-muted">阅读(2464) 评论(1) 赞(18)</p>
</div>
<div class="col-sm-3 pic hidden-xs"><img src="./upload/2.jpg" alt=""></div>
</div>
</div>
</article>
<aside class="col-md-3">
<a href="#" class="banner">
<img src="./upload/zgboke.jpg" alt="">
</a>
<a href="#" class="hot">
<span class="btn btn-primary">热搜</span>
<h4 class="text-primary">欢迎加入中国博客联盟</h4>
<p class="text-muted">哈哈哈哈哈哈红红火火恍恍惚惚红红火火恍恍惚发发发</p>
</a>
</aside>
</div>
</div>
</body>
</html>CSS部分:
代码语言：javascript复制body {
background-color: #f5f5f5;
}
.container {
background-color: #fff;
}
ul li {
list-style: none;
}
ul {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #666;
}
a:hover {
text-decoration: none;
}
/* 手动修改container最大宽度 */
@media screen and (min-width:1280px){
.container {
width: 1280px;
}
}
/* header部分 */
.logo a img {
display: block;
/* 要让图片宽度为100%,否则无法自适应 */
/* width: 100%; */
/* logo图片不需要缩放效果 */
max-width: 100%;
margin: 0 auto;
}
.logo span {
display: block;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
font-size: 18px;
}
header {
padding: 0!important;
background-color: #3795da;
}
.nav {
background-color: #eee;
border-bottom: 1px solid #ccc;
}
.nav a {
display: block;
height: 50px;
line-height: 50px;
padding-left: 30px;
font-size: 16px;
}
.nav a:hover {
background-color: #fff;
color: #333;
}
.nav a::before {
vertical-align: middle;
margin-right: 5px;
}
/* 当我们进入小屏和超小屏幕时,里面的li浮动起来并且宽度为20%. */
@media screen and (max-width:768px){
.nav ul li{
float: left;
width: 20%;
}
.nav ul li a {
font-size: 12px!important;
/* color: chartreuse; */
}
.news ul li:nth-child(1) {
width: 100%;
}
.news ul li:nth-child(n 2) {
width: 50%;
}
.publish h3 {
font-size: 14px;
}
}
@media screen and (max-width:992px){
.nav ul li {
float: left;
width: 20%;
}
.nav ul li a {
font-size: 14px;
}
article {
margin-top: 10px;
}
}
.news ul li {
float: left;
width: 25%;
height: 128px;
padding-right: 10px;
}
.news li:nth-child(1) {
height: 266px;
width: 50%;
}
.news a {
position: relative;
display: block;
/* 增加a的点击范围 */
width: 100%;
height: 100%;
}
.news a img {
width: 100%;
/* 高也要改! */
height: 100%;
vertical-align: middle;
}
/* 当我们处于超小屏幕,第一个li的宽度为100% */
.news li {
/* background-color: blue; */
margin-bottom: 10px;
}
.news li a p {
position: absolute;
bottom: 0px;
left: 0;
height: 41px;
width: 100%;
/* background-color: brown; */
background-color: rgba(0,0,0,.5);
font-size: 12px;
color: #fff;
/* p自带一个margin值 */
margin: 0;
padding: 5 10px;
}
.news li:nth-child(1) p {
line-height: 41px;
font-size: 20px;
padding-left: 10px;
}
.publish {
/* 上面的news没有高度,所以要清除浮动 */
border-top: 1px solid #ccc;
}
.publish img {
width: 100%;
}
.pic {
margin-top: 10px;
}
.publish .row {
border-bottom: 1px solid #ccc;
padding: 10px 0px;
}
.pic img {
width: 100%;
}
.banner {
width: 100%;
}
.banner img {
width: 100%;
}
.hot {
display: block;
border: 1px solid #ccc;
margin-top: 20px;
padding: 0 20px 20px;
}
.btn-primary {
border-radius: 0;
margin-bottom: 20px;
}
.hot p {
font-size: 12px;
}
