仿阿里百秀响应式布局
2024-05-15 11:29:43
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 --><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://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="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><link rel="shortcut icon" href="https://www.alibaixiu.cn/favicon.ico"><title>阿里百秀</title><style>body{background-color: #EEEEEE;}ul{list-style: none;}.logo{vertical-align: middle;max-width: 100%;}.logo a{display: block;height: 120px;line-height: 120px;overflow: hidden;background-color: #FF5E52;color: #fff;text-indent: -99999;}.logo img{display: block;margin: 0 auto;height: 100%;}.left{background-color: #F6F6F6;padding: 0px;}.nav ul{height: 100%;padding: 0px;}.nav li{height: 44px;line-height: 44px;width: 100%;padding-left: 10px;}.nav li:hover{background-color: #fff;}.nav a{color: #666666;}.nav a::before{padding: 0px 5px;}.cen{background-color: #fff;}.firli{width: 48%;height: 262px;float: left;}.firli a{color: #EEEEEE;position: relative;}.othrli{float: left;width: 24%;height: 128px;margin: 0px 0px 5px 5px;}.othrli a{color: #EEEEEE;position: relative;}.news{padding-top:10px;}.news p{position: absolute;bottom: 0px;width: 100%;height: 41px;line-height: 40px;padding-left: 10px;font-size: 16px;margin: 0px;overflow: hidden;background-color: #00000091;}.othrli p{font-size: 8px;}.news p:hover{background-color: #FE6C5F;}.news img{display: block;width: 100%;height: 100%;}.pic{width: 23%;float: left;margin-top: 20px;padding: 0;}.pic img{display: block;width: 100%;}.right{background-color: #fff;}.banner img{display: block;width: 100%;height: 100%;}.hot{display: block;border: 1px solid #ccc;padding: 5px;margin-top: 5px;}@media screen and (max-width: 992px) {.nav li{float: left;width: 20%;}.banner{display: block;margin-top: 5px;}}@media screen and (max-width: 768px) {.firli{width: 98%;height: 262px;float: left;margin: 5px 5px;}.othrli{width: 48%;}}</style>
</head><body><div class="container"><div class="row"><div class="col-md-2 left"><div class="logo"><a href="#"><img src="https://www.alibaixiu.cn/wp-content/uploads/2016/03/f08bfae670ebe6b60b06.png" alt=""></a></div><div class="nav"><ul><li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li><li><a href="#" class="glyphicon glyphicon-tree-deciduous">自然汇</a></li><li><a href="#" class="glyphicon glyphicon-blackboard">科技潮</a></li><li><a href="#" class="glyphicon glyphicon-eye-open">奇趣事</a></li><li><a href="#" class="glyphicon glyphicon-glass">美食杰</a></li></ul></div></div><div class="col-md-7 cen"><!-- 新闻模块 --><div class="news clearfix"><ul class="row" style="padding-left: 15px;"><li class="firli"><a href="#"><img src="https://www.alibaixiu.cn/wp-content/uploads/2015/10/e6a2497d372c43ea2690.jpg" alt=""><p>同步赞百科营销服务正式发布</p></a></li><li class="othrli"><a href="#"><img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/20151130092792289228-150x150.jpg" alt=""><p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p></a></li><li class="othrli"><a href="#"><img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/E47E03D9108E63E-150x150.jpeg" alt=""><p>震惊！巨型蜈蚣遭毒蛇吞噬 穿肚而出同归于尽</p></a></li><li class="othrli"><a href="#"><img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/EC8CCE0746F6E27-150x150.jpeg" alt=""><p>另类教育！外国老爸怒传女儿不雅照到Facebook</p></a></li><li class="othrli"><a href="#"><img src="https://www.alibaixiu.cn/wp-content/uploads/2015/11/EC8CCE0746F6E27-150x150.jpeg" alt=""><p>竹子真的是大熊猫最爱吗？NO，国宝也吃肉</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="https://www.alibaixiu.cn/wp-content/uploads/2021/04/125e06abe4a0a3ecdb1a-150x150.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="https://www.alibaixiu.cn/wp-content/uploads/2021/04/125e06abe4a0a3ecdb1a-150x150.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="https://www.alibaixiu.cn/wp-content/uploads/2021/04/125e06abe4a0a3ecdb1a-150x150.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="https://www.alibaixiu.cn/wp-content/uploads/2021/04/125e06abe4a0a3ecdb1a-150x150.jpg" alt=""></div></div></div></div><div class="col-md-3 right"><a href="#" class="banner"><img src="https://www.alibaixiu.cn/wp-content/uploads/2018/02/zgboke.jpg" alt=""></a><a href="#" class="hot"><span class="btn btn-primary">热搜</span><h4 class="text-primary">欢迎加入中国博客联盟</h4><p>这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p></a></div></div></div>
</body></html>仿阿里百秀响应式布局相关推荐
- 阿里百秀响应式页面制作
文章目录 案例:阿里百秀移动端首页 一.技术选型 二.需求分析 1.页面布局分析 2.屏幕划分分析 三.页面制作 1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容 he ...
- 移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
- 前端移动Web第四天案例：阿里百秀首页-响应式布局（bootstrap框架）
阿里百秀首页案例 技术选型 方案:我们采取响应式页面开发方案 技术:bootstrap框架 设计图: 本设计图采用 1280px 设计尺寸 1. 页面布局分析 2. 屏幕划分分析 ① 屏幕缩放发现 中 ...
- 移动WEB开发之响应式布局--阿里百秀首页案例
案例:阿里百秀移动端首页 技术选型 方案:我们采取响应式页面开发方案 技术:bootstrap框架 设计图: 本设计图采用 1280px 设计 案例:需求分析 1. 页面布局分析 2. 屏幕划分分析 ...
- bootstrap响应式布局之阿里百秀
响应式布局 移动端布局技术选型 -流式布局(百分比布局) -flex弹性布局 -rem适配布局 -响应式布局 响应式就是页面布局会随着屏幕大小变化响应,做出不同的布局模式. 相应不同设备(手机,PAD ...
- 移动端（响应式布局--阿里百秀）
技术栈:响应式布局 bootstrap框架 less flex html程序 <!DOCTYPE html> <html lang="en"><hea ...
- 移动端响应式布局项目之阿里百秀首页
移动端响应式布局项目之阿里百秀首页 文章目录 移动端响应式布局项目之阿里百秀首页 前言 一.前期准备 1.1 建立文件夹 1.2 需求分析 1.2.1 页面布局分析 `判断每一部分占据栅格系统多少份` ...
- 移动web开发 17-1 响应式布局 bootstrap首页 框架 阿里百秀项目
1 响应式开发原理 1.1 响应式开发原理 核心:使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 1.20媒体查询(重点) 媒体查询区间的写法 当屏幕宽度<=768 ...
- Bootstrap响应式布局案例- -阿里百秀
文章目录 1.搭建结构 2.show.html 3.index.css 4.所需图片 1.搭建结构 2.show.html <!DOCTYPE html> <html lang=&q ...
最新文章
- ElasticSearch(六) Update API
- ES内存持续上升问题定位
- python安装在什么系统下最好-python开发环境哪个好用？如何搭建？
- 阿里数据中台系列之Apsara Stack控制台用户角色权限及操作界面（一）
- PE学习（六）第六章 栈与重定位表 实例栈溢出、模拟加载器加载DLL、遍历重定位表
- CentOS 6.8 上 MySQL-server 数据库安装失败
- Ubuntu SSH Algorithm negotiation failed
- 云计算：大数据时代的系统工程(二)
- dateutils java_DateUtils.java
- 管家婆普及版_昆明逸马软件 — 管家婆服装普及版
- 专升本高等数学考试知识点汇总（二）
- ubuntu 19.04下交叉编译64位vlc 3.0.8
- mysql 在不同数据库中创建定时同步任务，将每分钟数据转每5分钟统计
- [论文阅读：姿态识别Transformer] TransPose: Keypoint Localization via Transformer 2021 ICCV
- 解决URP资源的材质成洋红色问题
- 楼兰古城如何变成了沙漠戈壁的
- python网易云热歌榜歌曲信息爬取（iframe框架内数据爬取，src为空）
- Python基础入门：条件语句--阿里云天池
- oceanbase导入csv文件异常
- html引用外部css文件（使用绝对路径）