Bootstrap响应式布局案例- -阿里百秀

文章目录

1.搭建结构
2.show.html
3.index.css
4.所需图片

1.搭建结构

2.show.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 视口的设置，视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 解决IE678的浏览器对html5新增标签的不识别和浏览器对css3 Media Query（媒体查询）的不识别的问题 --><!--[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]--><!-- 引入bootstrap样式文件 --><link rel="stylesheet" href="./lib/css/bootstrap.min.css"><!-- 引入自己的css文件 --><link rel="stylesheet" href="./css/index.css">
</head>
<body><div class="container"><div class="row"><header class="col-md-2"><!-- .logo+.nav 快捷生成 --><div class="logo"><!-- 在xs屏幕下隐藏img，显示span --><img src="./images/logo.png" class="hidden-xs"><span class="visible-xs">阿里百秀</span></div><div class="nav"><!-- ul>li*5>a --><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-th">奇趣事</a></li><li><a href="#" class="glyphicon glyphicon-cutlery">美食杰</a></li></ul></div></header><article class="col-md-7"><!-- 新闻模块 --><div class="news clearfix">   <!-- clearfix清除浮动，是bootstrap的类，由于上面的新闻模块有浮动，底下的发行模块要显示出来就需要清楚浮动 --><ul><li><a href="#"><img src="./uploads/baixiu.png"><p>阿里百秀</p></a></li><li>    <a href="#"><img src="./uploads/gushi.jpg"><p>漫漫豫闽路:唐末固始人移民福建的路线选择</p></a></li><li><a href="#"><img src="./uploads/mayun.jpg"><p>最具有影响力的企业家</p></a></li><li><a href="#"><img src="./uploads/haitunwan.jpg"><p>海豚湾--哪里还有海豚的家？</p></a></li><li><a href="#"><img src="./uploads/haimianbb.jpg"><p>海绵宝宝--充满勇气与力量，幽默而充满想象力</p></a></li></ul></div><!-- 发表模块 --><div class="publish"><div class="row"><div class="col-sm-9"><!-- bootstrap已经将h3预定好了是24px --><h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3><!-- class="text-muted"是bootstrap提供的关于文字颜色的样式（灰色） --><p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p><p class="hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲离的知识把！</p><p class="text-muted hidden-xs">阅读(2417) 评论(1) 赞(18) 标签:健康/感染/指甲/疾病/皮肤/营养/趣味生活</p><p class="text-muted visible-xs">阅读(2417) 评论(1) 赞(18)</p></div><div class="col-sm-3"><img src="./uploads/nail.jpg" class="hidden-xs"></div></div><div class="row"><div class="col-sm-9"><!-- bootstrap已经将h3预定好了是24px --><h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3><!-- class="text-muted"是bootstrap提供的关于文字颜色的样式（灰色） --><p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p><p class="hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲离的知识把！</p><p class="text-muted hidden-xs">阅读(2417) 评论(1) 赞(18) 标签:健康/感染/指甲/疾病/皮肤/营养/趣味生活</p><p class="text-muted visible-xs">阅读(2417) 评论(1) 赞(18)</p></div><div class="col-sm-3"><img src="./uploads/nail.jpg" class="hidden-xs"></div></div><div class="row"><div class="col-sm-9"><!-- bootstrap已经将h3预定好了是24px --><h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3><!-- class="text-muted"是bootstrap提供的关于文字颜色的样式（灰色） --><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"><img src="./uploads/nail.jpg" class="hidden-xs"></div></div></div></article><aside class="col-md-3"><!-- 图片 --><a href="#" class="banner"><img src="./uploads/boke.jpg"></a><!-- 热点 --><a href="#" class="hot"><!-- btn btn-primary,不是只有按钮才能使用 --><span class="btn btn-primary">热搜索</span><!-- class="text-primary"添加一个蓝色文字样式 --><h4 class="text-primary">欢迎加入中国博客联盟</h4><p class="text-muted">这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p></a></aside></div></div>
</body>
</html>

3.index.css

# index.css
ul{/* 取消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,想要把图片顶到角上，消除左侧带来的padding:15px,由于header标签的权重是1，类的权重是10 */
/* .col-md-3带来的padding:15px权重要高，使用！important可以强制将权重提到最高 */
header{padding-left: 0!important;
}.logo{background-color: #3595DA;
}/* 实现图片可以随着窗口的缩小而等比缩小，就让它的宽占父元素的100%即可 */
.logo img{/* width: 100%; *//* 当变成小屏的时候，logo图片不需要缩放 */max-width: 100%;height: 80px;
}.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{             /*bolck将超链接显示为块级元素 */display: block; height: 50px;line-height: 50px;  /* 文字垂直居中时，高多少，行高就多少 */padding-left: 30px;font-size: 16px;
}
.nav a:hover{      /* 鼠标滑动时背景颜色变为白色 */background-color: #fff;color: #333;
}
.nav a::before{   /*添加小图标是在超链接a中加了一个::before==$0,需要给小图标调整一下位置 */vertical-align: middle;padding-right: 5px;
}
/*当进入小屏幕或超小屏幕后*/
@media screen and (max-width:991px) {/* 让小li浮动，并且每个宽度占20% */.nav li{float: left;width: 20%;}/* 让article距离nav有一个外边距 */article{margin-top: 10px;}
}
/*当进入超小屏幕后让小li中的文字缩小*/
@media screen and (max-width:767px) {.nav li a{font-size: 14px;padding-left: 3px;}/* 当处于超小屏幕，news板块的第一个li宽度占100%，剩下的占50% */.news li{width: 50%!important;}.news li:nth-child(1){width: 100%!important;}.publish h3{font-size: 14px;}
}
/* 中间新闻部分 */
.news li{         /* 5个小li,4个小的宽度25%，浮动即可 */float: left;width: 25%;height: 128px;padding-right: 10px;   /*为了使图片之间有空隙，因为图片无法顶到padding中去，图片宽度设置为100%，空隙就出现了*/margin-bottom: 10px;
}
.news li:nth-child(1){  /* 一个大的宽度50% */width: 50%;height: 266px;     /*这个设置的高度会把上面给所有小li设置的高度刷新*/
}
.news li:nth-child(1) p{  /* 第一个小li的字体有特殊设置 */line-height: 41px;     font-size: 20px;padding: 0 10px;
}
.news li a{position: relative;  /* p标签的父标签,子绝父相（子元素相对定位，父元素要绝对定位）*/display: block;width: 100%;      height: 100%;
}
.news li a img{width: 100%;height: 100%;
}
.news li a p{position: absolute;   /* p标签，子元素相对父元素定位*/bottom: 0;            /* 因为在a的左下方，所以设置距离底边和左面都是0*/left: 0;width: 100%;height: 41px;padding: 5px 10px;      /* 上下0，左右10px，所有的p中的文字都与边框有个内边距*/font-size: 12px;color: #fff;background-color: rgba(0, 0, 0, .5);margin-bottom: 0;  /* 去掉p的外边距*/
}
.news li a p:nth-child(4){padding-top: 10px;
}/* 发布模块 */
.publish{border-top: 1px solid #ccc;    /* 顶上指定一个边框 */
}
.publish .row{border-bottom: 1px solid #ccc;    /* 每一行指定一个边框 */padding: 10px 0;
}
.publish .row div img{width: 100%;              /* 图片大小跟着屏幕大小变化而变化 */margin-top: 10px;padding-right: 10px;
}
.banner img{width: 100%;
}
.hot{display: block;             /* 把超链接变成块级元素*/margin-top: 20px;padding: 0 20px 20px 20px;  /* 文字的内边距*/border: 1px solid #ccc;   /* 边框 */
}
.hot span{border-radius: 0;           /* 去掉btn btn-primary带的圆角*/margin-bottom: 20px;
}
.hot p{font-size: 12px;
}

4.所需图片

Bootstrap响应式布局案例- -阿里百秀相关推荐

bootstrap响应式布局之阿里百秀
响应式布局移动端布局技术选型 -流式布局(百分比布局) -flex弹性布局 -rem适配布局 -响应式布局响应式就是页面布局会随着屏幕大小变化响应,做出不同的布局模式. 相应不同设备(手机,PAD ...
响应式布局-bootstap-阿里百秀案例
目录响应式开发原原理响应式布局容器 Bootstrap前端开发框架 Bootstrap简介 Bootstrap使用使用四部曲: bootstrap布局容器 bootstrap栅格系统 6.列排序 ...
使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面
使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面 tips 在不同设备中显示的样式页面布局思路 html css tips 这个页面里的图片忒难看,实际可以换一换在不同设备中显 ...
CSS——响应式布局案例以及点击出现下拉框实现过程
文章目录前言一.示例图二.实现过程 1.HTML结构 2.CSS样式 3.JS行为总结前言本文主要介绍有关响应式布局的案例实现过程. 一.示例图二.实现过程 1.HTML 代码如下(示例 ...
Bootstrap响应式布局以及栅格框架
一.Bootstrap简单配置简单使用Bootstrap,只需引入: <script type="text/javascript" src="js/jquery. ...
[JavaWeb-Bootstrap]Bootstrap响应式布局
响应式布局 * 同一套页面可以兼容不同分辨率的设备. * 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子 * 步骤:1. 定义容器.相当于之前的table.* 容器分类:1. ...
Bootstrap 响应式布局辅助类
为了针对移动设备进行快速开发,在 responsive.less 文件中,Bootstrap 为响应式开发提供了一些辅助 class,它们用于针对不同设备显示和隐藏内容.可用的 class 列表及它们 ...
html5响应式布案例,HTML5响应式布局案例
在本案例中,网页的界面布局将会根据当前浏览器的大小进行变化,做出响应.主要使用CSS的@media来进行设计.实现效果类似一淘网,一淘网使用的就是响应式布局.案例代码如下: (1)HTML代码如下: ...
html5响应式布局实例,CSS3响应式布局案例
布局结果图: 电脑全屏: 手机浏览: 竖屏: 横屏: 代码: 响应式布局 * { margin: 0; padding: 0; } html, body { height: 100%; font: 2 ...

Bootstrap响应式布局案例- -阿里百秀

文章目录

1.搭建结构

2.show.html

3.index.css

4.所需图片

Bootstrap响应式布局案例- -阿里百秀相关推荐

最新文章

热门文章