bootstrap使用:1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容
1.布局分析
首先有个container盒子把整个页面装进去,然后盒子又分为三部分,左边为header,header里面又可以分为上下两部分上边为logo盒子 下边为nav盒子。 中间为右侧为article,article也可以分为上下两个盒子news和publish。右侧为aside,aside也可分为bannner和hot两个a。
2.屏幕划分分析
(1)中屏幕和大屏幕是一致的,我们需要定义col-md-就可以了。
(2)小屏幕布局发生变化,我们需要为小屏幕根据需求改变布局。
(3)超小屏幕又发生变化,因此我们需要为超小屏幕根据需求改变布局。
(4)先布局md以上的pc端布局,最后根据实际需求在修改小屏幕和超小屏幕的特殊布局方式
3.遇见问题
(1)设计图尺寸为1280px。但是bootstrap原本的最大宽度仅仅为1170px,那么就需要使用媒体查询,修改布局容器.container的样式,使其满足设计图标出的实际需求。
@media screen and (min-width:1280px) {
.container {
width: 1280px;
}
}
(2)row属性会消除container内边距,使其紧紧顶着container盒子
(3)图片设置了 max-width: 100%;可以
让图片在其父元素中更好的缩放。
(4)进入超小屏幕下 logo的图片隐藏.然后事先准备好一个盒子元素,在logo里面 平时是隐藏的 只有在超小屏幕下显示.nav文字会变成14px,news里的第一个li宽度为100% 剩下的li占50%
(5)当进入小屏幕和超小屏幕的时候 nav里面的li浮动起来 宽度为20%
html部分
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!--[if lt IE 9]> 解决IE678的h5新标签和媒体查询方案 <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]--> <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="../Css/text.css"> <title>案例</title> </head> <body> <div class="container"> <div class="row"> <header class="col-md-2"> <div class="logo"> <a href="#"> <img src="../Images/logo.png" alt="" class=" hidden-xs"> <span class="visible-xs">阿里白秀</span> </a> </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-phone">科技湖</a> </li> <li> <a href="#" class="glyphicon glyphicon-gift">奇趣事</a> </li> <li> <a href="#" class="glyphicon glyphicon-glass">美食杰</a> </li> </ul> </div> </header> <article class="col-md-7"> <!--新闻模块--> <div class="news clearfix"> <ul> <li> <a href="#"> <img src="../Images/lg.png" alt=""> <p>阿里白秀</p> </a> </li> <li> <a href="#"> <img src="../Images/1.jpg" alt=""> <p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p> </a> </li> <li> <a href="#"> <img src="../Images/2.jpg" alt=""> <p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p> </a> </li> <li> <a href="#"> <img src="../Images/3.jpg" alt=""> <p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p> </a> </li> <li> <a href="#"> <img src="../Images/4.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">alibaixiu 发布于2015-11-23</p> <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位, 事实上从指甲的健康状况可以看出一个人的身体健康状况, 快来看看10个暗藏在指甲里知识吧!</p> <p class="text-muted ">阅读(2417) 评论(1) 赞(18) <span class="hidden-xs">标签:健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span > </p> </div> <div class="col-sm-3 pic hidden-xs"> <img src="../Images/3.jpg" alt=""> </div> </div> <div class="row"> <div class="col-sm-9"> <h3>生活馆 关于指甲的10个健康知识 你知道几个?</h3> <p class="text-muted hidden-xs">alibaixiu 发布于2015-11-23</p> <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位, 事实上从指甲的健康状况可以看出一个人的身体健康状况, 快来看看10个暗藏在指甲里知识吧!</p> <p class="text-muted ">阅读(2417) 评论(1) 赞(18) <span class="hidden-xs">标签:健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span > </p> </div> <div class="col-sm-3 pic hidden-xs"> <img src="../Images/3.jpg" alt=""> </div> </div> <div class="row"> <div class="col-sm-9"> <h3>生活馆 关于指甲的10个健康知识 你知道几个?</h3> <p class="text-muted hidden-xs">alibaixiu 发布于2015-11-23</p> <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位, 事实上从指甲的健康状况可以看出一个人的身体健康状况, 快来看看10个暗藏在指甲里知识吧!</p> <p class="text-muted ">阅读(2417) 评论(1) 赞(18) <span class="hidden-xs">标签:健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span > </p> </div> <div class="col-sm-3 pic hidden-xs"> <img src="../Images/3.jpg" alt=""> </div> </div> <div class="row"> <div class="col-sm-9"> <h3>生活馆 关于指甲的10个健康知识 你知道几个?</h3> <p class="text-muted hidden-xs">alibaixiu 发布于2015-11-23</p> <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位, 事实上从指甲的健康状况可以看出一个人的身体健康状况, 快来看看10个暗藏在指甲里知识吧!</p> <p class="text-muted ">阅读(2417) 评论(1) 赞(18) <span class="hidden-xs">标签:健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span > </p> </div> <div class="col-sm-3 pic hidden-xs"> <img src="../Images/3.jpg" alt=""> </div> </div> <div class="row"> <div class="col-sm-9"> <h3>生活馆 关于指甲的10个健康知识 你知道几个?</h3> <p class="text-muted hidden-xs">alibaixiu 发布于2015-11-23</p> <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位, 事实上从指甲的健康状况可以看出一个人的身体健康状况, 快来看看10个暗藏在指甲里知识吧!</p> <p class="text-muted ">阅读(2417) 评论(1) 赞(18) <span class="hidden-xs">标签:健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span > </p> </div> <div class="col-sm-3 pic hidden-xs"> <img src="../Images/3.jpg" alt=""> </div> </div> <div class="row"> <div class="col-sm-9"> <h3>生活馆 关于指甲的10个健康知识 你知道几个?</h3> <p class="text-muted hidden-xs">alibaixiu 发布于2015-11-23</p> <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位, 事实上从指甲的健康状况可以看出一个人的身体健康状况, 快来看看10个暗藏在指甲里知识吧!</p> <p class="text-muted ">阅读(2417) 评论(1) 赞(18) <span class="hidden-xs">标签:健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span > </p> </div> <div class="col-sm-3 pic hidden-xs"> <img src="../Images/3.jpg" alt=""> </div> </div> </div> </article> <aside class="col-md-3"> <a href="#" class="banner"> <img src="../Images/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部分
ul { list-style-type: none; margin: 0; padding: 0; } a { color: #666; text-decoration: none; } a:hover { text-decoration: none; } body { background-color: #f5f5f5; } .container { background-color: #fff; } /* 修改container的最大宽度为1280*/ @media screen and (min-width:1280px) { .container { width: 1280px; } } /*header*/ header { padding-left: 0!important; } .logo { background-color: #429ad9; } .logo img { display: block; /*width: 100%;*/ max-width: 100%; margin: 0 auto; } /* 1.进入超小屏幕下 logo的图片隐藏 2.事先准备好一个盒子显示四个字,在logo里面 平时是隐藏的 只有在超小屏幕下显示*/ .logo span { display: block; height: 50px; line-height: 50px; color: #fff; font-size: 18px; text-align: center; } .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; padding-right: 5px; } /* 当进入小屏幕和超小屏幕的时候 nav里面的li浮动起来 宽度为20%*/ @media screen and (max-width:991px) { .nav li { float: left; width: 20%; } article { margin-top: 10px; } } /* 进入超小屏幕的时候 nav文字会变成14px*/ /* 当我们处于超小屏幕 news里的第一个li宽度为100% 剩下的li占50%*/ @media screen and (max-width:767px) { .nav li a { font-size: 14px; padding-left: 3px; } .news li:nth-child(1) { width: 100%!important; } .news li { width: 50%!important; } .publish h3 { font-size: 14px; } } .news li { float: left; width: 25%; height: 128px; padding-right: 10px; margin-bottom: 10px; } .news li a { position: relative; display: block; width: 100%; height: 100%; } .news li a img { width: 100%; height: 100%; } .news li a p { position: absolute; bottom: 0; left: 0; width: 100%; height: 41px; padding: 5 10px; margin-bottom: 0; background: rgba(0, 0, 0, .5); font-size: 12px; color: #fff; } .news li:nth-child(1) { width: 50%; height: 266px; } .news li:nth-child(1) p { line-height: 41px; font-size: 20px; padding: 0 10px; } .publish { border-top: 1px solid #ccc; } .publish .row { border-bottom: 1px solid #ccc; padding: 10px 0; } .pic { margin-top: 10px; } .banner img { width: 100%; } .hot { display: block; margin-top: 20px; padding: 0 20px 20px; border: 1px solid #ccc; } .hot span { border-radius: 0; margin-bottom: 20px; } .hot p { font-size: 12px; }