使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面
使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面
- tips
- 在不同设备中显示的样式
- 页面布局思路
- html
- css
tips
这个页面里的图片忒难看,实际可以换一换
在不同设备中显示的样式
页面布局思路
响应式页面开发方案
bootstrap框架
设计图采用1280px设计尺寸
屏幕划分分析
因为中屏和大屏布局一致 所以列定义为col-md-
就可以了
小屏幕布局发生变化 所以小屏幕需要根据需求改变布局
超小屏布局也发生变化 所以超小屏也要根据需求改变布局
先布局md
以上的pc端布局 在根据需求修改小屏和超小屏的样式
因为效果图为1280px container
最大宽度为1170px 所以需要手动修改container
的宽度
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.0"><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="css/index.css"><title>Document</title>
</head><body><div class="container"><div class="row"><header class="col-md-2"><div class="logo"><a href="#"><img src="data:images/logo.png" class="hidden-xs"><span class="visible-xs">阿里百秀</span></a></div><div class="nav clearfix"><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="upload/lg.png"><p>阿里百秀</p></a></li><li><a href="#"><img src="upload/1.jpg"><p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p></a></li><li><a href="#"><img src="upload/2.jpg"><p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p></a></li><li><a href="#"><img src="upload/3.jpg"><p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p></a></li><li><a href="#"><img src="upload/4.jpg"><p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p></a></li></ul></div><div class="publish"><div class="row"><div class="col-sm-9 paper"><h3>生活馆 关于指甲的10个健康知识 你知道几个?</h3><p class="text-muted">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="upload/3.jpg"></div></div><div class="row"><div class="col-sm-9 paper"><h3>生活馆 关于指甲的10个健康知识 你知道几个?</h3><p class="text-muted">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="upload/3.jpg"></div></div><div class="row"><div class="col-sm-9 paper"><h3>生活馆 关于指甲的10个健康知识 你知道几个?</h3><p class="text-muted">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="upload/3.jpg"></div></div><div class="row"><div class="col-sm-9 paper"><h3>生活馆 关于指甲的10个健康知识 你知道几个?</h3><p class="text-muted">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="upload/3.jpg"></div></div><div class="row"><div class="col-sm-9 paper"><h3>生活馆 关于指甲的10个健康知识 你知道几个?</h3><p class="text-muted">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="upload/3.jpg"></div></div></div></article><aside class="col-md-3"><a href="#" class="banner"><img src="upload/zgboke.jpg"></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
@media screen and (min-width:1280px) {.container {width: 1280px;}
}@media screen and (max-width:991px) {.logo {margin-left: 15px;}.nav {margin-left: 15px;}.nav li {float: left;width: 20%;}article {margin-left: 15px;margin-top: 10px;}
}@media screen and (max-width:767px) {.nav li a {font-size: 14px;padding-left: 0;text-align: center;}.news li:nth-child(1) {padding-right: 0!important;width: 100%!important;}.news li:nth-child(n+2) {width: 50%!important;}.publish h3 {font-size: 14px;margin-top: 10px;}
}body {background-color: #f5f5f5;
}.container {background-color: #fff;
}ul {list-style: none;margin: 0;padding: 0;
}a {color: #666;text-decoration: none;
}a:hover {text-decoration: none;
}header {padding-left: 0!important;
}.logo {background-color: #429ad9;
}.logo a img {display: block;margin: 0 auto;/* width: 100%; *//* logo不需要缩放 */max-width: 100%;
}.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: 50px;font-size: 16px;
}.nav a:hover {background-color: #fff;color: #333;
}.nav a::before {vertical-align: middle;padding-right: 5px;
}article {padding-left: 0!important;
}.news li {float: left;width: 25%;height: 128px;margin-bottom: 10px;
}.news li a {position: relative;display: block;width: 100%;height: 100%;
}.news li:nth-child(1) {width: 50%;height: 266px;padding-right: 10px;
}.news li:nth-child(2),
.news li:nth-child(4) {padding-right: 10px;
}.news li a img {width: 100%;height: 100%;
}.news li a p {position: absolute;margin-bottom: 0;padding: 5px 10px;bottom: 0;left: 0;width: 100%;height: 41px;background-color: rgba(0, 0, 0, 0.5);font-size: 12px;color: #fff;
}.news li:nth-child(1) a p {line-height: 41px;font-size: 18px;padding: 0 10px;
}.publish {border-top: 1px solid #ccc;
}.pic {margin-top: 0 10px;
}.publish .row {padding: 10px 0;
}.publish .row::after {position: relative;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);display: block;width: 96.2%;height: 1px;background-color: #ccc;content: "";
}.pic img {width: 100%;
}.banner {display: block;
}.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;
}
使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面相关推荐
- 移动端响应式布局项目之阿里百秀首页
移动端响应式布局项目之阿里百秀首页 文章目录 移动端响应式布局项目之阿里百秀首页 前言 一.前期准备 1.1 建立文件夹 1.2 需求分析 1.2.1 页面布局分析 `判断每一部分占据栅格系统多少份` ...
- Bootstrap响应式布局案例- -阿里百秀
文章目录 1.搭建结构 2.show.html 3.index.css 4.所需图片 1.搭建结构 2.show.html <!DOCTYPE html> <html lang=&q ...
- Bootstrap 前端框架制作响应式网站
放假突然兴起,想学点前端框架,制作一个页面玩玩(PS:一直做后端,怕忘了前端的知识,所以补一补).说做就做,花了一天的时间,谷歌开发者模式,仿制别人公司的页面(希望不会被查),做了个响应式小网页,可以 ...
- Bootstrap实现的响应式APP下载页面代码
这次分享的是,一个设计优雅的APP下载页面主题,这套HTML是用当下最流行的Bootstrap框架实现的版本是v3.3.3,这套代码非常适合再次开发,代码简介没有多余的部分,结构组织清晰,代码注释完整 ...
- 前端移动Web第四天案例:阿里百秀首页-响应式布局(bootstrap框架)
阿里百秀首页案例 技术选型 方案:我们采取响应式页面开发方案 技术:bootstrap框架 设计图: 本设计图采用 1280px 设计尺寸 1. 页面布局分析 2. 屏幕划分分析 ① 屏幕缩放发现 中 ...
- 移动web开发 17-1 响应式布局 bootstrap首页 框架 阿里百秀项目
1 响应式开发原理 1.1 响应式开发原理 核心:使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 1.20媒体查询(重点) 媒体查询区间的写法 当屏幕宽度<=768 ...
- BootStrap之前奏响应式布局
BootStrap 简介 概念: 课程目标: 响应式布局技术 了解BootStrap前端框架 一.响应式布局 1.1 历史问题 回顾之前HTML+CSS的布局方式,都是使用像素(px)来布局网页的,可 ...
- 移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
- 阿里百秀响应式页面制作
文章目录 案例:阿里百秀移动端首页 一.技术选型 二.需求分析 1.页面布局分析 2.屏幕划分分析 三.页面制作 1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容 he ...
最新文章
- re.split()用法详解
- 销售部门如何运用OKR管理法?看三大层面最新模板
- 基于图像到UV Map映射的3D手部高保真重建网络(ICCV2021)
- Xcode真机调试太慢
- php音译汉字,PHP中的西里尔语音译
- duilib 修复Text控件无法设置宽度的bug,增加自动加算宽度的属性
- 某省HW中遇到的提权
- spring基础——<bean>scope属性
- JavaScript中的prototype(Notes)
- 特斯拉AI Day首秀:FSD终极进化?AI超算Dojo、D1芯片、人形机器人亮相!
- 谁说五月是没有收获的季节
- python分离数字_python从字符串中提取数字_filter
- 不要错过!第十一届CDA考试Level Ⅰ优秀考生采访
- 定时器 java qua_Quartz定时任务调度机制解析(CronTirgger、SimpleTrigger )
- sim卡没坏但苹果手机无服务_iPhone 卡贴机换卡案例,无服务与SIM卡无效解决方案...
- 数据预处理-Excel 两列合并为一列中间加空格
- Linux驱动——mmc概念与框架(一)
- uhs3内存卡有哪些_高速内存卡是什么 3款热门高速内存卡推荐
- python对比两个数组的差异_数组对比差异
- 频域分析中的三频段理论
热门文章
- String boot 整合rabbitMQ
- sublime text unable to launch update installer
- 中职计算机老师个人月总结范文,2018年度中等专业学校计算机班主任老师工作总结范文...
- 安利一个免费英语在线听力练习网站
- linux ftp 文件夹错误,linux中ftp看到的文件创建时间与实际时间不一致问题的解决...
- HIT CSAPP 自设实验 Lab5 链接 Linkbomb 解析
- 5分钟完成桌面小游戏项目
- 2010-02-28 传智播客—Android(三)数据存储之三SQLite嵌入式数据库
- CCF大数据竞赛-面向电信行业存量用户的智能套餐个性化匹配模型
- 项目总结:vue.js2.5饿了么APP(5)主要组件实现 - 商品详情页部分