仿阿里百秀响应式布局

最新推荐文章于 2024-07-17 15:26:15 发布
最新推荐文章于 2024-07-17 15:26:15 发布
阅读量388 收藏
点赞数
分类专栏： js&html 文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yss915/article/details/124988071
版权 
<!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>

KILIG_yss
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
阿里百秀模仿（基于bootstrap框架）
qq_34290436的博客
06-15 216
阿里百秀模仿（基于bootstrap框架）
仿写阿里百秀 : Bootstrap框架
m0_49896713的博客
01-11 188
移动网页开发 仿写案例 阿里百秀 核心: 其实就是利用别人写好的css样式
css中的 nav ul li ul 与 nav>ul>li 这两种写法的区别
angyangan9569的博客
06-08 1056
<nav> <ul id="a"> <li>a1</li> <li>a2</li> <li>a3</li> <li>a4</li> <li> <ul id="b"><li>b1</li><...
navLI鼠标滑上显示下拉导航
ann123_2016的博客
09-10 139
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>li导航</title> <style type="text/css"> *{padding: 0;margin: 0;} #box{width: 100%;backgrou...
学习笔记之JQuery 的$("#nav > li")中>的意思
BeStronger
10-29 1681
#nav > li 指的是#nav 下的直接li子元素. #nav li 指的是#nav下的所有li元素. #nav > li.first指的是#nav下直接li子元素的第一个li元素.
阿里百秀响应式页面布局
04-23
9. **响应式框架**：阿里百秀可能使用了如Bootstrap、Foundation等流行的响应式框架，这些框架提供了预设的响应式布局、组件和工具，能快速构建响应式网站。 10. **测试与调试**：设计完成后，必须在多种设备和...
阿里百秀 响应式布局 自动根据设备更改布局
03-21
总的来说，阿里百秀项目通过采用Bootstrap框架，成功地实现了响应式布局，确保了用户无论使用何种设备，都能享受到一致且优质的浏览体验。这不仅提升了用户体验，也降低了开发和维护成本，因为只需要编写一套代码就...
响应式布局-仿阿里百秀项目前端源码项目.zip
06-15
阿里百秀项目是一个展示响应式设计优秀实践的实例，通过仿造这个项目，我们可以深入理解响应式布局的核心原理和技术。 在前端开发中，Bootstrap是一个非常流行的响应式框架，它简化了创建响应式和移动优先的网站。...
移动开发之响应式开发----阿里百秀首页案例
05-16
首先，响应式布局的核心是媒体查询（Media Queries），这是CSS3引入的一个强大特性。媒体查询允许我们为不同的设备条件设置不同的样式规则。例如，我们可以定义在小屏幕设备上显示的样式，在大屏幕设备上则采用不同...
帝国CMS精仿阿里百秀第四版精美源码
12-14
因此，这套源码在设计上应该也遵循了这一原则，采用了响应式布局，确保在不同设备上都能提供良好的浏览体验。同时，可能会包含一些交互元素，如轮播图、下拉菜单、滑动效果等，以提升用户互动性。 在实际使用这套...
CSS样式中的 nav ul li ul 与 nav>ul>li
paullinjie的博客
04-26 8517
问题：CSS样式中的 nav ul li ul 与 nav>ul>li 这两种写法的区别是什么，“>”的作用是什么，谢谢。 style> *{ margin:0; padding:0; list-style:none; } nav ul li ul{
移动端WEB开发 响应式布局
Ulrica_Amaris的博客
03-20 371
响应式开发 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 <style> .container { height: 150px; background-color: pink; margin: 0 auto; } /* 1. 超小屏幕下 小于 768 布局容器的宽度为 100% */ @
响应式 导航_灵活的响应式导航方法
Web design 教程小屋
07-08 1534
许多响应式网站在大屏幕上提供水平导航栏，并在较小的视口中提供下拉导航。 这是一种非常体面的方法，但并非没有问题。 首先，设备不只是大小而已。 它们有各种可以想象的尺寸。 其次，导航可能会随着时间而改变。 第三，布局或字体大小可能会因屏幕大小而异。 我们将以不同的方式做事... 为什么不检查（使用JavaScript）以查看实际上有多少导航空间适合可用空间？ 知道这一点后，我们就可以将导航...
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 759
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
最新发布
OpenTiny的博客
07-17 675
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
uu0216的博客
07-16 527
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
高职软件技术实训室
whwzzc的博客
07-17 606
当前，软件行业正处于高速发展阶段，对人才的需求呈现出多元化、高精尖的特点。平台基于k8s实现公有云、混合云、私有云多种部署方式，提供在线html、css、js、jquery、vue等前端开发环境，实现真正的云开发，开箱即用，主要模块有课程制作工具、作业、活动、云盘、共享课、我的课、云优选课。平台基于k8s实现公有云、混合云、私有云多种部署方式，提供在线java、python等后台语言，实现真正的云开发，开箱即用，主要模块有课程制作工具、作业、活动、云盘、共享课、我的课、云优选课。
ReactRouter v6升级的步骤
feixin369的博客
07-14 359
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
JavaScript基础学习笔记
10-25
4. **Flex伸缩布局** 和 **移动Web开发**：适应响应式设计，确保网站在不同设备上的适配性。 5. **JavaScript基础语法**：讲解变量、数据类型、控制流、函数等基础知识，为后续学习打下坚实基础。 6. **Web API...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值