响应式布局开发 -3

最新推荐文章于 2023-07-14 20:37:08 发布
最新推荐文章于 2023-07-14 20:37:08 发布
阅读量374 收藏 1
点赞数
分类专栏： web前端 文章标签： html5 lte ie 8 响应式 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33936481/article/details/68946628
版权

IE=edge表示强制以最新的IE浏览器模式渲染页面
IE11这个文档模式已经废除了
gt=greater than lt=less than
gte=greater than or equal
lte=less than or equal
IE8不兼容html5标签和媒体查询，so

<!--[if lte IE8]>
    <p class="browserupgrade">您的浏览器版本已经去世了，请到<a href="http://browsehappy.com">这里</a>更新，升级装备再来打怪赚钱!</p>
    <![endif]-->

这里写图片描述
必不可少的图片使用引用，可有可无的装饰性图片可以用标签的style引用
内容大纲：https://gsnedders.html5.org/outliner/process.py
section最好要有标题，nav可以没有标题

<!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">
    <link rel="stylesheet" type="text/css" href="">
    <title>理财宝</title>
</head>
<body>
    <!--[if lte IE8]>
    <p class="browserupgrade">您的浏览器版本已经去世了，请到<a href="http://browsehappy.com">这里</a>更新，升级装备再来打怪赚钱!</p>
    <![endif]-->
    <header>
        <nav class="top">
            <span class="tel">理财热线：400-888-8888</span>
            <ul>
                <li><a href="#">登录</a></li>
                <li><a href="#">快速注册</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">帮助</a></li>
                <li><a href="#">APP下载</a></li>
            </ul>
        </nav>
        <nav class="main">
            <a href="#" class="brand"><img src="img/logo.ico" alt="回到首页"></a>
            <ul>
                <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>
        </nav>
    </header>
    <div class="container">
        <div class="transaction">
            <div class="trans-content">
                <div class="trans-data">
                    <span>平台累计成交金额</span>
                    <span class="trans-money">2017</span>
                    <span>万元</span>
                </div>
                <div class="trans-data">
                    <span>过去7日成交金额</span>
                    <span class="trans-money">2017</span>
                    <span>万元</span>
                </div>
                <div class="trans-report">
                    <a href="#">查看平台运营报告</a>
                </div>
            </div>
        </div>
        <div class="ad">
            <div class="item"><img src="img/ad001-l.png" alt=""></div>
            <div class="item"><img src="img/ad002-l.png" alt=""></div>
            <div class="item"><img src="img/ad003-l.png" alt=""></div>
        </section>
        <section class="feature">
            <div class="item">
                <h3>安全</h3>
                <p>国家AAA信用平台<br>银行资金托管<br>上市公司保证</p>
            </div>
            <div class="item">
                <h3>权威</h3>
                <p>中央电视台推荐<br>互联网百强企业<br>标准起草单位</p>
            </div>
            <div class="item">
                <h3>省心</h3>
                <p>100元起投<br>用户利益保障机制<br>保险公司承保</p>
            </div>
        </div>
        <div class="notice">
            <a href="#"><span>2017-4-1</span>清明期间业务受理及值班公告</a>
            <a href="#" class="more">更多公告</a>
        </div>
        <section class="product">
            <h2>
                固定期限产品
                <em>甄选优质基金</em>
                <em>省时省力</em>
                <em>坐等收益</em>
            </h2>
            <div class="prouct-content">
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益率：<span class="year-rate">3.50%</span><i>起</i></p>
                        <p>总成交金额：<span class="money">1880</span><i>万元</i></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益率：<span class="year-rate">3.50%</span><i>起</i></p>
                        <p>总成交金额：<span class="money">1880</span><i>万元</i></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益率：<span class="year-rate">3.50%</span><i>起</i></p>
                        <p>总成交金额：<span class="money">1880</span><i>万元</i></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益率：<span class="year-rate">3.50%</span><i>起</i></p>
                        <p>总成交金额：<span class="money">1880</span><i>万元</i></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益率：<span class="year-rate">3.50%</span><i>起</i></p>
                        <p>总成交金额：<span class="money">1880</span><i>万元</i></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
            </div>
        </section>
        <section class="product">
            <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益率：<span class="year-rate">3.50%</span><i>起</i></p>
                        <p>总成交金额：<span class="money">1880</span><i>万元</i></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益率：<span class="year-rate">3.50%</span><i>起</i></p>
                        <p>总成交金额：<span class="money">1880</span><i>万元</i></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益率：<span class="year-rate">3.50%</span><i>起</i></p>
                        <p>总成交金额：<span class="money">1880</span><i>万元</i></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益率：<span class="year-rate">3.50%</span><i>起</i></p>
                        <p>总成交金额：<span class="money">1880</span><i>万元</i></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
                <div class="item">
                    <h3><em>3</em>个月</h3>
                    <div class="info">
                        <p>约定年化收益率：<span class="year-rate">3.50%</span><i>起</i></p>
                        <p>总成交金额：<span class="money">1880</span><i>万元</i></p>
                    </div>
                    <div class="buy">
                        <a href="#">购买</a>
                    </div>
                </div>
            </div>
        </section>
        <nav class="footer">
            <div class="footer-content">
                <p class="brand"></p>
                <ul>
                    <li class="title">关于我们</li>
                    <li><a href="#">公司介绍</a></li>
                    <li><a href="#">业务模式</a></li>
                    <li><a href="#">合作机构</a></li>
                    <li><a href="#">服务协议</a></li>
                </ul>
                <ul>
                    <li class="title">风险防范</li>
                    <li><a href="#">账户安全</a></li>
                    <li><a href="#">安全保障</a></li>
                </ul>
                <ul>
                    <li class="title">理财产品</li>
                    <li><a href="#">固定期限</a></li>
                    <li><a href="#">债权/散标</a></li>
                </ul>
                <ul>
                    <li class="title">交易帮助</li>
                    <li><a href="#">购买</a></li>
                    <li><a href="#">赎回</a></li>
                    <li><a href="#">提现</a></li>
                </ul>
                <ul>
                    <li class="title">机构服务</li>
                    <li><a href="#">机构中心</a></li>
                    <li><a href="#">合作联系</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <footer>
        <ul>
            <li><span class="icon icon-zfywxk">支付业务许可证</span></li>
            <li><span class="icon icon-pcirk">PCI认证</span></li>
            <li><span class="icon icon-visayz">Visa 验证</span></li>
            <li><span class="icon icon-vsjmfw">VerSign加密服务</span></li>
            <li><span class="icon icon-wlgs">网络工商</span></li>
            <li><span class="icon icon-rzcx">电子商务协会认证诚信网</span></li>
            <li><span class="icon icon-gs">北京工商</span></li>
        </ul>
        <p>北京某互联网金融公司 版权所有 &reg; 2015-2016</p>
    </footer>
</body>
</html>
侠客岛的含笑
关注
专栏目录
实现响应式变化---自适应页面（各种css样式文字图片大小）
xiuxialala的博客
01-03 928
3.webpack.prod.conf.js和webpack.dev.conf.js。4.根文件index.html添加根font-size大小。4.工程根目录下postcss.config.js。
响应式页面的实现方式
xiaolong446的博客
01-24 1198
响应式网页设计，指的是，利用 CSS 或 JavaScript，让同一个网页，能根据屏幕的大小，自动调整布局和样式，包括对容器元素、布局、图片和字体的响应式调整。要注意的是，原生的 HTML 元素，在没有编写任何 CSS 的情况下，本身就是响应式的，不过每个网页都避免不了使用 CSS 设置样式，响应式则主要针对设置了固定宽度，或者影响布局的元素进行调整。之后，网页的可视区域（视口）就会取移动设备屏幕的宽度，设置了 initial-scale 为 1.0 之后，就会使用正常的缩放比例，即 1 倍，不缩放。
前端响应式布局
qq_43658148的博客
07-14 1087
一、媒体查询一、媒体查询1.基本语法目标：能够根据设备宽度的变化，设置差异化样式开发常用语法媒体特性常用语法：max-widthmin-width1）媒体查询实现的效果就是当网页大大小不同的时候，显示不同的布局样式。
如何实现响应式（自适应）网页
zyf971020的博客
10-14 1036
如何实现响应式（自适应）网页
响应式布局方法总结
weixin_45189747的博客
11-10 1902
定义 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够。 优点 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点 仅适用布局、信息、框架并不复杂的部门类型网站 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到...
前端响应式布局笔记-媒体查询
最新发布
06-05
在前端开发中，媒体查询常用于实现响应式布局。例如，我们可以为窄屏设备定义一套布局，为宽屏设备定义另一套。以下是一个简单的例子： ```css /* 默认样式，适用于所有设备 */ .container { width: 100%; } /* 当...
响应式布局案例--微金所.rar
11-03
响应式布局是现代网页设计的关键技术之一，它允许网页在不同设备上自适应显示，无论是桌面、平板还是手机，都能提供良好的用户体验。本案例“微金所”将深入探讨响应式布局的应用，结合HTML、CSS以及LESS这三种核心...
基于layui框架响应式布局的一些使用详解
12-13
在实际开发中，layui的响应式布局不仅可以用于主容器的设置，还可以应用于导航栏、侧边栏、表格、表单等组件，实现全站的响应式设计。layui框架的文档提供了详细的用法和示例，对于初学者来说，通过实践和查阅文档，...
响应式布局
02-21
在实现响应式布局时，设计师和开发者通常会采用框架，如Bootstrap、Foundation等，它们提供了预设的响应式组件和样式，可以大大简化开发过程。此外，工具如Google的Material Design也可以为响应式设计提供灵感和指导...
响应式页面实现
逸尘的专栏
04-21 1477
响应式网页设计最初是由 Ethan Marcotte 提出的一个概念：为什么一定要为每个用户群各自打造一套设计和开发方案？Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式；我们应当向下兼容、移动优先。首先我们应该遵循移动优先原则，交互&设计应以移动端为主，PC则作为移动端的一个扩展；一个页面需
css响应式页面实现
ajhongshaorou的博客
03-02 9493
响应式页面概念部分1.响应式页面的由来在很久很久以前，我们做的网页只是为了PC端的观看、使用，直到2000年，2.5G手机的出现，人们可以通过手机来访问网络，使得服务商们纷纷做了另一套网页为手机访问服务，这个情况一直持续到2009年，3G智能手机的出现，手机可以访问PC端页面，只是对PC端页面进行了压缩，接着IOS提出了viewport(视口)的概念，才得以改进，大型网页可以不经缩放直接显示在手机—
css如何让height:100%起作用？
allenmu1982的博客
12-06 145
当你设置一个元素的高度为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大对数情况下，这样做法没有任何效果，你知道为什么height:100%不起作用吗？ 按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100px;，那它应该在页面的竖向空间里占满100px...
用3个步骤实现响应式网页设计
huobengle
12-18 1550
写在前面的话：随着移动设备的逐渐普及和Web技术的发展，跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢？我们可以利用CSS3的Media Query来实现。本文主要介绍了移动开发和CSS3结合，来进行多种分辨率适配的例子。 文中提到的响应式网页设计（Responsive web design）是一种现代网页设计方法，基于CSS3的媒介查询（Media Query）特性使...
如何用一简单的CSS制作响应式HTML网页
热门推荐
hzp666的博客
12-12 2万+
如何用简单的CSS制作响应式HTML网页#故事前端开发在这篇文章中，我将教你如何使用CSS网格来创建一个超级酷的图像网格，它随着屏幕的宽度而改变列的数量。最赞的一点就是：这个响应式效果只需要添加一行CSS。这意味着我们不必给HTML取很乱的类名（即col-sm-4，col-md-8），或者为每一个屏幕大小创建媒体查询。现在让我们开始吧！设置对于本文，我们将继续使用我们在第一篇CSS Grid文章中...
如何实现响应式布局
qq_32216775的博客
01-09 1万+
个人博客文章链接：http://www.huqj.top/article?id=149 一、什么是响应式布局     所谓响应式布局，就是指同一个网页，在不同的终端上的显示效果不同，但是访问的确实是同一个页面，只是因为浏览器会根据终端的不同（例如屏幕宽度、横竖屏、移动端还是pc端等）选择的渲染方式也不同。相信大家做前端页面的时候都会有这样的困惑：一个页面在自己电脑上看着好好的，一旦从别的分辨率...
HTML5 移动Web App阅读器-1
含笑
04-06 6449
html5本地存储，渐强式理念（兼容性处理） 苹果APP商店审核非常慢 微信朋友圈的H5广告和游戏 H5相比Native APP优点： 快速的更新和迭代 一次开发多终端受益 Native APP的优缺点：流畅；更新迭代，速度降低 HTML5 WEB APP的现状与发展趋势 不能实现多终端适配； 相比于Native APP,Hybrid APP动画方面和DOM操作是要差的
HTML5 移动Web App阅读器-4(页面基本结构开发)
含笑
04-18 3627
上下边栏：绝对定位或者fixed.相对独立，所以可以放到一个相对独立过程中去。 然后就是内容区：标题，内容，操作条 。 引用normailze.css，zepto.min.js，jquery.base64.js，jquery.jsonp.js Zepto是为现代智能手机浏览器推出的Javascript 框架, 有和jQuery相似的语法，不过更小<meta name="viewport" co
HTML5 移动Web App阅读器-2（技术点讲解）
含笑
04-07 3548
1.使用Base64格式的图片制作icon 记得写备注 缺点：图片体积更大，因为base64是未经压缩的，比原图大；维护不方便。 优点：base64图片利于页面加载，可以减少请求；加快首屏数据的显示速度。background: url............. url(data:image/png;base64,{img_data})2.使用CS3的图片制作icon(一般用在规格图形上面)
CSS响应式布局设计技巧详解
响应式布局不仅降低了开发成本，还提高了用户体验，使内容更容易被发现和访问。它能够无缝地适应从桌面到手机的各种屏幕尺寸，确保无论用户使用何种设备，都能获得一致、流畅的浏览体验。因此，掌握CSS响应式布局...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值