阿里百秀响应式页面制作
文章目录
- 案例:阿里百秀移动端首页
- 一、技术选型
- 二、需求分析
- 1.页面布局分析
- 2.屏幕划分分析
- 三、页面制作
- 1.创建文件夹结构
- 2.创建html骨架结构
- 3.引入相关样式文件
- 4.书写内容
- header部分
- 5.container宽度修改
- 6.代码展示
- (1)html部分
- (2)css部分
- (3)效果图展示
- 四、移动端布局总结
- 1.移动端主流方案
- (1)单独制作移动端页面(主流)
- (2)响应式页面兼容移动端(其次)
- 2.移动端技术选型
案例:阿里百秀移动端首页
一、技术选型
方案: 采取响应式页面开发方案
技术: Bootstrap框架
设计图: 采用1280px设计尺寸
二、需求分析
1.页面布局分析
2.屏幕划分分析
- 屏幕缩放发现,中屏幕和大屏幕布局是一致的。因此列定义为col-md-就可以了,md是大于等于970px以上的。
- 屏幕缩放发现,小屏幕布局发生变化,因为需要为小屏幕根据需求改变布局。
- 屏幕缩放发现,超小屏幕布局又发生变化,因此需要为超小屏幕根据需求改变布局
- 策略:先布局md以上的pc端布局,最后根据实际需求再修改小屏幕和超小屁股木的特殊布局样式
三、页面制作
Bootstrap使用分为四步:1.创建文件夹结构。2.创建html骨架结构。3.引入相关样式文件。4.书写内容。
1.创建文件夹结构
2.创建html骨架结构
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
<!--[if lt IE 9]>
<script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
3.引入相关样式文件
<!-- 引入bootstrap的样式文件 --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><!-- 引入我们自己的首页样式文件 --><link rel="stylesheet" href="css/index.css">
4.书写内容
header部分
<header class="col-md-2"><div class="logo"><a href="#"><img src="data:images/logo.png" alt=""></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></div>
</header>
5.container宽度修改
因为本效果图采取1280的宽度,而bootstrap里面container宽度最大为1170px,因此需要手动改下container宽度。
6.代码展示
(1)html部分
<!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"><meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0"><!--[if lt IE 9]><script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]--><!-- 引入bootstrap的样式文件 --><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"><!-- 1.header --><header class="col-md-2"><div class="logo"><a href="#"><img src="data: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></div></header><!-- 2.article --><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/2.jpg" alt=""><p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p></a></li><li><a href="#"><img src="upload/3.jpg" alt=""><p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p></a></li><li><a href="#"><img src="upload/4.jpg" alt=""><p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p></a></li></ul></div><!-- 发表 --><div class="publish"><div class="row"><div class="col-sm-9"><h4>生活馆 关于之家的10个健康知识 你知道几个?</h4><p class="text-muted hidden-xs">alibaixiu 发布于 2021-8-25</p><p class="hidden-xs">指甲是经常容易被人们忽略的身体部位,事实上从指甲的健康状况可以看出一个人的身体健康状况,快来看看10个暗藏在指甲例的知识吧!</p><p class="text-muted">阅读(9901)评论(0)赞(0)<span class="hidden-xs">标签:健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p></div><div class="col-sm-3 pic hidden-xs"><img src="upload/4.jpg" alt=""></div></div><div class="row"><div class="col-sm-9"><h4>生活馆 关于之家的10个健康知识 你知道几个?</h4><p class="text-muted hidden-xs">alibaixiu 发布于 2021-8-25</p><p class="hidden-xs">指甲是经常容易被人们忽略的身体部位,事实上从指甲的健康状况可以看出一个人的身体健康状况,快来看看10个暗藏在指甲例的知识吧!</p><p class="text-muted">阅读(9901)评论(0)赞(0)<span class="hidden-xs">标签:健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p></div><div class="col-sm-3 pic hidden-xs"><img src="upload/4.jpg" alt=""></div></div><div class="row"><div class="col-sm-9"><h4>生活馆 关于之家的10个健康知识 你知道几个?</h4><p class="text-muted hidden-xs">alibaixiu 发布于 2021-8-25</p><p class="hidden-xs">指甲是经常容易被人们忽略的身体部位,事实上从指甲的健康状况可以看出一个人的身体健康状况,快来看看10个暗藏在指甲例的知识吧!</p><p class="text-muted">阅读(9901)评论(0)赞(0)<span class="hidden-xs">标签:健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p></div><div class="col-sm-3 pic hidden-xs"><img src="upload/4.jpg" alt=""></div></div><div class="row"><div class="col-sm-9"><h4>生活馆 关于之家的10个健康知识 你知道几个?</h4><p class="text-muted hidden-xs">alibaixiu 发布于 2021-8-25</p><p class="hidden-xs">指甲是经常容易被人们忽略的身体部位,事实上从指甲的健康状况可以看出一个人的身体健康状况,快来看看10个暗藏在指甲例的知识吧!</p><p class="text-muted">阅读(9901)评论(0)赞(0)<span class="hidden-xs">标签:健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活</span></p></div><div class="col-sm-3 pic hidden-xs"><img src="upload/4.jpg" alt=""></div></div></div></article><!-- aside --><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>
(2)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%;/* logo图片不需要缩放 */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 */@media screen and (max-width:767px) {.nav li a {font-size: 14px;padding-left: 15px;}/* 当处于超小屏幕时 第一个li 宽度为100% 剩下的小li各占50% */.news li:nth-child(1) {width: 100%!important;}.news li {width: 50%!important;}.publish h4 {font-size: 14px;}}/* article */.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:nth-child(1) {width: 50%;height: 266px;}.news li:nth-child(1) p {line-height: 41px;font-size: 20px;padding: 0 10px;}.news li a img {width: 100%;height: 100%;}.news li a p {position: absolute;bottom: 0;left: 0;width: 100%;height: 41px;padding: 5px 8px;margin-bottom: 0;background: rgba(0, 0, 0, .5);font-size: 10px;color: #fff;}/* publish */.publish {border-top: 1px solid #ccc;}.publish .row {border-bottom: 1px solid #ccc;padding: 10px 0;}.pic {margin-top: 10px;}.pic img {width: 100%;}/* aside */.banner img {width: 100%;}.hot {display: block;border: 1px solid #ccc;margin-top: 20px;padding: 0 20px 20px;}.hot span {border-radius: 0;}.hot p {font-size: 12px;}
(3)效果图展示
四、移动端布局总结
1.移动端主流方案
(1)单独制作移动端页面(主流)
京东……
(2)响应式页面兼容移动端(其次)
三星手机官网……
2.移动端技术选型
- 流式布局(百分比布局)
- flex弹性布局
- rem适配布局
- 响应式布局
建议:选取一种主要技术,其他技术作为辅助,混合技术开发
阿里百秀响应式页面制作相关推荐
- 移动 WEB 开发之 阿里百秀移动端页面制作
一.技术选型 二.需求分析 1.页面布局分析 2. 屏幕划分 三.页面制作 1. 项目前期准备 搭建项目结构 创建 html 骨架结构以及引入相关样式 <head><meta cha ...
- 仿阿里百秀响应式布局
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
- 网页设计与制作(项目二--响应式页面制作)
政务网站制作要点 (一 )响应式的制作 1.排列方式:导航:一行变为两行:水平结构:变成纵向排列: 2.隐藏显示:在某个宽度的时候,特定的标签显示或者隐藏: 3.尺寸变化:典型--->轮播部分, ...
- 前端学习(976):阿里百秀轮播图制作
引入js和css 复制html结构 结构调整
- 【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )
文章目录 一.移动端页面布局方案 1.单独制作的移动端页面 2.响应式页面兼容移动端 一.移动端页面布局方案 移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端 与 移动端 访问 ...
- 使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面
使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面 tips 在不同设备中显示的样式 页面布局思路 html css tips 这个页面里的图片忒难看,实际可以换一换 在不同设备中显 ...
- 移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
- 前端移动Web第四天案例:阿里百秀首页-响应式布局(bootstrap框架)
阿里百秀首页案例 技术选型 方案:我们采取响应式页面开发方案 技术:bootstrap框架 设计图: 本设计图采用 1280px 设计尺寸 1. 页面布局分析 2. 屏幕划分分析 ① 屏幕缩放发现 中 ...
- 移动WEB开发之响应式布局--阿里百秀首页案例
案例:阿里百秀移动端首页 技术选型 方案:我们采取响应式页面开发方案 技术:bootstrap框架 设计图: 本设计图采用 1280px 设计 案例:需求分析 1. 页面布局分析 2. 屏幕划分分析 ...
最新文章
- HDU 2859 Phalanx
- selenium界面元素定位
- 史上最硬核文科生,擅长解决数学难题,却视考试成为终生噩梦
- Chapter2-1_Voice Conversion(Feature Disentangle)
- java分割汉字_Java分割中英文,并且中文不能分割一半?
- Javascript获取For循环所用时间
- 前端开发学习之——dom ready和window onload的区别
- ip地址怎么设置才有效_房产遗嘱怎么写才有效?需要公证吗?
- YYKit 常见用法总结
- JZOJ5857. 【NOIP提高组模拟A组2018.9.8】没有上司的舞会
- 网站页面设计的原则有哪些呢?
- 东财《国际贸易法》综合作业
- 怎样才能画好古代汉服?画好古代汉服有哪些技巧?
- java 检测表情符号_java 过滤表情符号
- netty玩转irving聊天室(android整合netty客户端+springboot整合netty服务端),附源码
- uabntu镜像文件的后缀
- 没的选择时,存在就是合理的::与李旭科书法字QQ聊天记录
- 【linux】部署磁盘列阵RAID 10,报错mdadm: super1.x cannot open /dev/sdb: Device or resource busy
- Power law and Power law distribution(幂律和幂律分布)
- P4606 [SDOI2018]战略游戏
热门文章
- 火车票抢票软件哪个成功率高更靠谱?
- 关于arch配置touchpad触摸
- 外挂:一个因“快感”而崛起的暴利行业
- Wordpress企业网站建设SEO完整解决方案是什么?
- 十进制数转换为八进制(栈实现)
- JavaScript进阶-编程思想、构造函数的原型对象、对象原型、原型继承以及原型链
- 软件定义汽车之 Android Automotive OS 发展历程
- 【Axure视频教程】鼠标滚动缩放图片
- android 按钮手势,【一加 3T 安卓手机使用总结】系统|开关|按键|手势|模式_摘要频道_什么值得买...
- java实现时钟表盘教程方法