响应式布局案例

最新推荐文章于 2023-05-15 20:13:36 发布
最新推荐文章于 2023-05-15 20:13:36 发布
阅读量589 收藏 9
点赞数 1
分类专栏： html、css 文章标签： html css css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DcTbnk/article/details/104757278
版权

1.案例一

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /* 正常的样式 , 针对PC端的 */
    *{ margin:0; padding:0;}
    ul{ list-style: none;}
    a{ text-decoration: none;}
    img{ display: block;}

    #header{ height:50px; width:100%; position: fixed; top:0; left:0; background:rgba(0,0,0,0.5); display: flex; justify-content: space-between; align-items: center;}
    #header .logo{ width:140px; margin-left: 55px;}
    #header .logo img{ width:100%;}
    #header .nav{ display: flex; width:450px; justify-content: space-between;}
    #header .nav a{ color:white;}
    #header .login{ margin-right: 16px;}
    #header .login a{ color:white;}
    #header .menu{ margin-left:20px; display: none;}
    #header .menu a{ color:white;}

    #banner{ height:auto; overflow: hidden;}
    #banner img{ width:100%;}

    #ad{ height:auto; overflow: hidden; margin-top:10px; display: flex;}
    #ad .ad-1{ width:50%; margin:0 10px;}
    #ad .ad-1 img{ width:100%;}
    #ad .ad-2{ width:50%; display: flex;}
    #ad .ad-2 a{ width:50%; display: block; margin:0 10px;}
    #ad .ad-2 img{ width:100%;}

    #list{ display: flex; justify-content: space-around; flex-wrap: wrap;}
    #list li{ width:24%; border:1px #ccc solid; margin-top:10px;}
    #list img{ width:100%;}
    #list h3{line-height: 30px; margin-left:10px;}
    #list p{ display: flex; justify-content: space-between;}
    #list p span{ margin:5px;}

    /* 针对pad pro  */
    @media all and (max-width:1024px){
        #list li{ width:32%;}
    }

    /* 针对pad mini 和 mobile 横屏  */
    @media all and (max-width:768px){
        #header .nav{ display: none; position: absolute; width:100%; top:50px;}
        #header .nav li{ height:50px; text-align: center; line-height: 50px; background:rgba(0,0,0,.5); border-top: 1px #7c7469 solid;}
        #header .menu{ display: block;}
        #header .logo{ width:120px; margin-left: 0;}

        #ad{ flex-wrap: wrap;}
        #ad .ad-1 , #ad .ad-2{ width:100%;}
        #ad .ad-2{ margin-top:10px;}

        #list li{ width:49%;}
    }

    /* 针对 mobile 竖屏  */
    @media all and (max-width:450px){
        #list{ margin:10px;}
        #list li{ width:98%;}
    }
    </style>
</head>
<body>
    <div id="header">
        <div class="menu">
            <a href="#">menu</a>
        </div>
        <div class="logo">
            <a href="#"><img src="./images/logo.png" alt=""></a>
        </div>
        <ul class="nav">
            <li><a href="#">文章</a></li>
            <li><a href="#">素材</a></li>
            <li><a href="#">活动</a></li>
            <li><a href="#">素材</a></li>
            <li><a href="#">活动</a></li>
            <li><a href="#">更多</a></li>
        </ul>
        <div class="login">
            <a href="#">登录</a>
        </div>
    </div>
    <div id="banner">
        <a href="#"><img src="./images/top-bg.png" alt=""></a>
    </div>
    <div id="ad">
        <div class="ad-1">
            <a href="#"><img src="./images/swiper1.jpeg" alt=""></a>
        </div>
        <div class="ad-2">
            <a href="#"><img src="./images/1.png" alt=""></a>
            <a href="#"><img src="./images/2.png" alt=""></a>
        </div>
    </div>

    <ul id="list">
        <li>
            <img src="./images/1.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
        <li>
            <img src="./images/1.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
        <li>
            <img src="./images/1.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
        <li>
            <img src="./images/1.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
        <li>
            <img src="./images/2.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
        <li>
            <img src="./images/2.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
        <li>
            <img src="./images/2.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
        <li>
            <img src="./images/2.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
        <li>
            <img src="./images/3.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
        <li>
            <img src="./images/3.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
        <li>
            <img src="./images/3.jpg" alt="">
            <h3>迷你微型摄影展</h3>
            <p>
                <span>2016-12-12</span>
                <span>作者：tom</span>
            </p>
        </li>
      
    </ul>

    <script>

    /* var menu = document.querySelector('.menu');
    var nav = document.querySelector('.nav');
    menu.onclick = function(){
        nav.style.display = 'block';
    }; */
    
    </script>
</body>
</html>

2.案例二

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
    /* css reset */
    *{ margin:0; padding:0;}
    ul,ol{ list-style: none;}
    a{ text-decoration: none; color:#505050;}
    img{ display: block;}
    h1,h2,h3{ font-size:16px;}
    body{ background:#ebebeb;}

    /* css common */
    .l{ float:left;}
    .r{ float:right;}
    .clear:after{ content:""; display: block; clear:both;}
    .container{ width:1140px; margin:0 auto; position: relative;}
    .container-fluid{ position: relative;}

    /* css header */
    #header{ height:190px; overflow: hidden; background:white; text-align: center; line-height: 190px;}
    #header h1{ font-size: 48px;}

    /* css nav */
    #nav{ background:white; border-top:1px #ebebeb solid; border-bottom:2px #e1e1e1 solid;}
    #nav .nav-menu{ display: none; height:56px; text-align: center; line-height: 56px;}
    #nav .nav-menu i{ cursor: pointer; font-size:30px;}
    #nav ul{ text-align: center; font-size:0; line-height: 56px;}
    #nav ul li{ display:inline-block; font-size:16px; height: 56px; padding:0 21px; position: relative;}
    /* #nav ul li.active{ border-bottom: 2px #e67e22 solid;} */
    #nav ul li.active:after{ content:""; position: absolute; width:100%; height: 2px; background:#e67e22; bottom: -2px; left:0;}

    /* css main */
    #main{}
    #main article{ width:750px;}
    #main article section{ margin-top:35px; background:white;}
    #main .article-title{ text-align: center; overflow: hidden;}
    #main .article-title h2{ font-size:34px; line-height: 34px; margin:36px 0 21px;}
    #main .article-title p{ font-size:12px; line-height: 12px;}
    #main .article-text{ font-size:18px; line-height: 30px; margin:36px 34px 0 34px;}
    #main .article-btn{ margin:30px 34px; width: 86px; height:36px; background:#e67e22; text-align: center; line-height: 36px;}
    #main .article-btn a{ color:white;}
    #main .article-tag{ margin:0 34px; border-top:1px #ccc solid; line-height: 66px;}

    #main aside{ width:360px;}
    #main aside section{ margin-top:35px; background: white; overflow: hidden;}
    #main aside h3{ height: 37px; line-height: 37px; font-size:20px; border-bottom:1px #ccc solid; margin:14px 30px; font-weight:normal; position: relative;}
    #main aside h3:after{ content:""; position: absolute; width:90px; height:1px; background:#e67e22; left:0; bottom: -1px;}
    #main aside .aside-text{ margin:0 30px 20px 30px; font-size:14px;}
    #main aside .aside-btn{ margin:0 30px 20px 30px; height:36px; text-align: center; line-height: 36px;  background:#e67e22;}
    #main aside .aside-btn a{ color:white;}
    #main aside .aside-list{ margin:0 30px 20px 30px; font-size:14px;}
    #main aside .aside-list a{ padding:5px 10px; border:1px #ccc solid; margin-right:10px; margin-bottom:10px; float:left;}

    @media all and (max-width:1200px){
        .container{ width:940px;}
        #main article{ width:616px;}
        #main aside{ width:294px;}
    }
    @media all and (max-width:990px){
        .container{ width:720px;}
        #main article{ float:none; width:100%;}
        #main aside{ float:none; width:100%;}
    }
    @media all and (max-width:768px){
        .container{ width:auto; margin:0 15px;}
        #nav .nav-menu{ display: block;}
        #nav ul{ text-align: left; display: none;}
        #nav ul li{ display:block;}
        #nav .nav-menu:hover + ul{ display: block;}
    }
    </style>
</head>
<body>
    <header id="header" class="container-fluid">
        <div class="container">
            <h1>Ghost 开源博客平台</h1>
        </div>
    </header>
    <nav id="nav" class="container-fluid">
        <div class="container">
            <div class="nav-menu">
                <i class="iconfont iconcaidan"></i>
            </div>
            <ul>
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">论坛</a></li>
                <li><a href="#">快捷手册</a></li>
                <li><a href="#">中文文档</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </div>
    </nav>
    <main id="main" class="container clear">
        <article class="l">
            <section>
                <hgroup class="article-title">
                    <h2>全新的 Ghost 文档上线</h2>
                    <p>作者：<a href="#">王赛</a> • 2018年11月20日</p>
                </hgroup>
                <p class="article-text">
                    我们的整个 Ghost 文档 已经全新改版了！并且添加了一些新的补充，包括使用教程和功能集成。 新文档的目标是帮助更多人有效地安装并管理他们发布的内容，并且最大限度地发挥 Ghost 作为一个开源发布平台的灵活性。文档的设计和结构已经修订完毕，我们的改进包括 Ghost 安装和设
                </p>
                <div class="article-btn"><a href="#">阅读全文</a></div>
                <div class="article-tag">
                    <i class="iconfont iconwenjianjia"></i> <a href="#">Android</a>, <a href="#">客户端</a>
                </div>    
            </section>
            <section>
                <hgroup class="article-title">
                    <h2>全新的 Ghost 文档上线</h2>
                    <p>作者：<a href="#">王赛</a> • 2018年11月20日</p>
                </hgroup>
                <p class="article-text">
                    我们的整个 Ghost 文档 已经全新改版了！并且添加了一些新的补充，包括使用教程和功能集成。 新文档的目标是帮助更多人有效地安装并管理他们发布的内容，并且最大限度地发挥 Ghost 作为一个开源发布平台的灵活性。文档的设计和结构已经修订完毕，我们的改进包括 Ghost 安装和设
                </p>
                <div class="article-btn"><a href="#">阅读全文</a></div>
                <div class="article-tag">
                    <i class="iconfont iconwenjianjia"></i> <a href="#">Android</a>, <a href="#">客户端</a>
                </div>    
            </section>
            <section>
                <hgroup class="article-title">
                    <h2>全新的 Ghost 文档上线</h2>
                    <p>作者：<a href="#">王赛</a> • 2018年11月20日</p>
                </hgroup>
                <p class="article-text">
                    我们的整个 Ghost 文档 已经全新改版了！并且添加了一些新的补充，包括使用教程和功能集成。 新文档的目标是帮助更多人有效地安装并管理他们发布的内容，并且最大限度地发挥 Ghost 作为一个开源发布平台的灵活性。文档的设计和结构已经修订完毕，我们的改进包括 Ghost 安装和设
                </p>
                <div class="article-btn"><a href="#">阅读全文</a></div>
                <div class="article-tag">
                    <i class="iconfont iconwenjianjia"></i> <a href="#">Android</a>, <a href="#">客户端</a>
                </div>    
            </section>
        </article>
        <aside class="r">
            <section>
                <h3>声明</h3>
                <p class="aside-text">Ghost 中文版不再继续维护，请去官方下载。</p>
            </section>
            <section>
                <h3>下载 Ghost</h3>
                <div class="aside-btn"><a href="#">Ghost最新版</a></div>
            </section>
            <section>
                <h3>标签云</h3>
                <div class="aside-list">
                    <a href="#">客户端</a>
                    <a href="#">Android</a>
                    <a href="#">jQuery</a>
                    <a href="#">Ghost 0.7 版本</a>
                    <a href="#">开源</a>
                    <a href="#">助手函数</a>
                    <a href="#">客户端</a>
                    <a href="#">客户端</a>
                    <a href="#">Android</a>
                    <a href="#">jQuery</a>
                    <a href="#">Ghost 0.7 版本</a>
                    <a href="#">开源</a>
                    <a href="#">助手函数</a>
                    <a href="#">客户端</a>
                </div>
            </section>
        </aside>
    </main>
    <nav id="navmap" class="container-fluid">
        <div class="container">
            <section>第一块</section>
            <section>第二块</section>
            <section>第三块</section>
        </div>
    </nav>
    <footer id="footer" class="container-fluid">
        <div class="container">
            <p>Copyright © Ghost中文网 | 京ICP备11008151号-11 | 京公网安备11010802014853</p>
        </div>
    </footer>
</body>
</html>
咩有猫腻.
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter 教程之如何构建响应式布局(教程含源码)
iCloudEnd的博客
03-28 211
使用 Flutter 开发移动应用程序可能具有挑战性，尤其是在适应各种屏幕尺寸和像素密度时。Flutter 开发人员面临着创建响应式布局的任务，这些布局可以毫不费力地适应各种设备，同时利用支持多个平台的单一代码库。响应式设计对于移动应用程序至关重要，因为它可确保在所有设备上提供一致的用户体验。设计良好的响应式布局可以增强应用程序的可用性，并使用户更容易导航并与界面交互。本文将探讨 Flutter 开发人员可以采用的各种方法来设计无缝适应不同屏幕尺寸的布局。为了帮助说明这些方法，我还提供了代码示例。
【HTML】响应式布局 例子
m0_49442965的博客
11-24 796
中等大小（左侧导航栏消失，图片换行显示）小屏幕（图片单行显示）
六个响应式布局案例
m0_58467275的博客
05-15 846
响应式布局案例分析，内含弹性布局使用
html5响应式布局案例
逸轩
03-17 2926
在本案例中，网页的界面布局将会根据当前浏览器的大小进行变化，做出响应。主要使用CSS的@media来进行设计。实现效果类似一淘网，一淘网使用的就是响应式布局。案例代码如下： （1）HTML代码如下： [html] view plain copy  print? >   html lang="en">   head>       meta
【源码共享】我花2小时写了微信官网的响应式布局HTML+CSS 换成旅行主题风格更炫酷了
lxidw7的博客
04-15 1464
能学习写好这个首页，就能掌 握HTML网页设计前端盒子的布局、嵌套，及css效果的 使用...
响应式布局小案例
m0_57774967的博客
11-17 149
响应式布局小案例 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：VS Code 撰写时间：2021/11/8 全部代码： <!DOCTYPEhtml> <htmllag="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X...
响应式布局案例实战
达摩院洗碗工的博客
08-03 850
响应式布局案例实战 前几天做了一个响应式布局的案例，这里和大家分享一下，主要是总结一些经验。 1.html代码 <body> <!-- 头部 --> <header id="header"> <div class="logo"> <img src="images/largelogo.jpg" alt="logo" class="large"> <i
响应式布局的简单案例
09-24
下面小编就为大家带来一篇响应式布局的简单案例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
响应式布局
02-21
挺不错的页面可供参考 学习 希望能帮到你们 挺不错的页面可供参考 学习
响应式布局实例
09-23
css3中响应式布局的案例,新手们可以参考噢！
27个手机网站源码（响应式布局）
04-20
1，微官网美食订餐html5触屏响应式手机wap网站订餐模板 2，仿Midifan新闻触屏版手机wap新闻网站模板解压密码联系旺旺sunzhipeng1234 3，Ocean微官网触屏版html5响应式手机wap网站模板 4，微官网html5触屏响应式手机wap网站模板 5，Epsilon Elements触屏版html5响应式手机wap网站模板 6，凤凰汽车触屏版html5手机wap汽车网站模板
基于Bootstrap3的响应式布局网站教程源码（二）
05-22
基于Bootstrap3的响应式布局网站教程源码（二），基础入门，适合新手，有齐全的注释，详细教程参考我的博文。除了博文所写之外，我还更新了如何制作BOX的源码。 为了防止有些人不知道怎么用，我还不厌其烦的讲解下，源码部分不带jquery和bootstrap的js和css文件，所以要自己下，另外要吧程序打包成web应用，使用tomcat或者nginx之类的服务器启动服务器后在访问。
基于Bootstrap3的响应式布局网站教程源码（五）
06-12
基于Bootstrap3的响应式布局网站教程源码（五），基础入门，适合新手，有齐全的注释，详细教程参考我的博文。除了博文所写之外，我还更新了许多实用的源码。 为了防止有些人不知道怎么用，我还不厌其烦的讲解下，源码部分不带jquery和bootstrap的js和css文件，所以要自己下，另外要吧程序打包成web应用，使用tomcat或者nginx之类的服务器启动服务器后在访问。 记得配置默认欢迎页为login.jsp，登录账号和密码可以参考login.js
响应式网站前端源码
05-16
直接打开index.html进入浏览，适合新手学习用，写的第一个网站，不喜勿喷
在固定框高内图片剧中显示，不变形
12-05 494
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com...
css响应式布局_Skeleton源码阅读：一个极简、响应式CSS库
weixin_39640417的博客
11-11 529
Skeleton是我在阅读10 Best CSS Frameworks for Front-End Developers时发现的CSS库，以下是文章对其的描述： Skeleton is so minimal that it doesn’t even call itself a CSS framework, library, or even module. It’s boilerplate, and...
如何设置响应式布局,给出案例
最新发布
07-27
要设置响应式布局，可以使用CSS媒体查询来根据不同的屏幕大小和设备类型应用不同的样式。以下是一个简单的案例： ```html <!DOCTYPE html> /* 默认样式 */ .box { width: 300px; height: 200px; ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值