Html5 手机端网页

最新推荐文章于 2024-07-18 13:52:01 发布
最新推荐文章于 2024-07-18 13:52:01 发布
阅读量745 收藏 6
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/ligenyun/p/7862506.html
版权 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,
    width=device-width,initial-scale=1.0" />
    <title></title>
    <style>
        body
        {
            margin: 0;
        }
        header
        {
            width: 100%;
            height: 50px;
            background: #AEFEEE;
        }
        header h4
        {
            display: inline;
        }
        aside
        {
            width: 20%;
            height: 540px;
            background: #708090;
            float: left;
        }
        
        section
        {
            width: 80%;
            height: 540px;
            background: #D8BFD8;
            float: left;
            overflow: auto;
        }
        footer
        {
            width: 100%;
            height: 50px;
            background: green;
            clear: left;
        }
        figure
        {
            padding: 0;
        }
        img
        {
            max-width: 70%;
        }
        ul
        {
            list-style-type: none;
        }
        
        footer li
        {
            display:inline;
        }
    </style>
</head>
<body>
    <header>
    <hgroup>
    <img src="../Images/bb.png" width="30px"/>
     <h4>移动端页面练习</h4>
    </hgroup>
     
    </header>
    <aside>
        <nav>
         <ul>
            <li>
                <a href="">
                <img src="../Images/bb.png" width="30px"/>
                </a>
            </li>
              <li>
                <a href="">
                <img src="../Images/bb.png" width="30px"/>
                </a>
            </li>
              <li>
                <a href="">
                <img src="../Images/bb.png" width="30px"/>
                </a>
            </li>
        </ul>
        </nav>
    </aside>
    <section>
        <figure>
            <img src="../Images/bb.png" alt="" width="45%"  />
            <img src="../Images/bb.png" alt="" width="45%" />
        </figure>
        <figcation>衣服</figcation>  
         <figure>
            <img src="../Images/bb.png" alt="" width="40%"  />
            <img src="../Images/bb.png" alt="" width="40%" />
        </figure>
        <figcation>衣服</figcation>    
         <figure>
            <img src="../Images/bb.png" alt="" width="40%"  />
            <img src="../Images/bb.png" alt="" width="40%" />
        </figure>
        <figcation>衣服</figcation>    
         <figure>
            <img src="../Images/bb.png" alt="" width="40%"  />
            <img src="../Images/bb.png" alt="" width="40%" />
        </figure>
        <figcation>衣服</figcation>    
         <figure>
            <img src="../Images/bb.png" alt="" width="40%"  />
            <img src="../Images/bb.png" alt="" width="40%" />
        </figure>
        <figcation>衣服</figcation>          
    </section>
    <footer>
      <nav>
         <ul>
            <li>
                <a href="">
                <img src="../Images/bb.png" width="30px"/>
                </a>
            </li>
              <li>
                <a href="">
                <img src="../Images/bb.png" width="30px"/>
                </a>
            </li>
              <li>
                <a href="">
                <img src="../Images/bb.png" width="30px"/>
                </a>
            </li>
        </ul>
        </nav>
    </footer>
</body>
</html>

 

转载于:https://www.cnblogs.com/ligenyun/p/7862506.html

weixin_30480583
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5手机端页面布局,移动端H5常见的布局方式有哪些
weixin_39880328的博客
06-07 2590
随着智能手机的普及以及社会的发展，传统的网站布局已经无法适应现状，我们编写的网页不仅仅要展示在电脑上， 也要展示在移动设备上，而移动设备种类繁多，苹果、小米、三星等等很不好适配移动端设备屏幕尺寸非常多，碎片化严重，Android和苹果设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等一般的电脑端的页面布局在手机上无法完全适应，那么如何让一...
html网页如何在手机上实现,html和css结合实现手机端网页自适应的代码
weixin_39687301的博客
06-20 1944
一，最近在做项目，写移动端的网页，主要是自适应的问题。bootstrap等前端框架用的不好，又不想耽误时间，不能自适应很烦人，这里给大家介绍下我的方法，也是结合了很多人的思路。1.在头部加入这样的一行代码：这句话是自动设置缩放，然而，它并不能完全适应所有的手机，并且你在用浏览器手机模式调试的时候可能正常，但是换到真实的手机端其实是不正常的。所以我们还要进行改动。2.这里推荐大家在用magin,pa...
html5 手机端 select,适配性强的移动端select选项框
weixin_30849865的博客
06-16 2067
需求来源原生的select有很多样式不能随意改动，比如不能设置居中不生效，select框长度不能根据内容自适应等。而且在ios端和安卓端显示的样式不统一。所以为了解决以上问题，基于swiper对select进行了优化改进，改进后的样式可以随意设置，实现多端样式统一。html源码需要在html中引入需要依赖的css和js然后创建一个select大容器selectbL，然后在容器里面分别创建选项回显容...
Html-移动端与响应式
2401_84091502的博客
05-11 370
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
html手机端网页如何在手机显示
m0_48639378的博客
05-27 4167
手机查看移动端html文件
html5 手机端 手机邮箱唤醒
weixin_43152468的博客
04-15 2400
HTML5 <a href="tel:150***16891">手机号码</a> <a href="mailto:xxx@qq.com">邮箱</a> 点击唤醒拨打界面 把a超链接初始化 style=“text-decoration:none;color: black” 效果图如下
html5手机静态页面,html手机端WEB纯静态页面
weixin_34404199的博客
06-03 1738
【实例简介】html手机端WEB纯静态页面 我这个是一个点餐系统的web 手机端静态页面，兼容主流的浏览器。【实例截图】【核心代码】WEB纯静态页面└── 手机端WEB纯静态页面├── css│ ├── add2home.css│ ├── buttons.css│ ├── flexslider.css│ ├── photoswipe.css│ ├── style.css│ ...
HTML5手机端网站开发meta设置
weixin_37861326的博客
04-27 3213
前端在进行手机端页面开发时，需要在页面head中完成很多基本设置，确保页面在手机端的显示效果。在开发的过程中，是通过meta标签的设置。1.viewport标签&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /&gt; 属性介绍...
html页面适配手机端方法
jiangwei1994的博客
04-19 6733
在head中加： <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 注释： viewport ：用户网页的可视区域. width：控制viewport的大小，可以指定一个值，如...
html手机端页面meta,移动端网页meta设置和响应式
weixin_39634900的博客
06-03 3498
苏宁易购WAP的meta分析响应式meta设置媒体查询时读的width为viewport的宽度。viewport宽度为手机分辨率。比如note2 1280*720.需要重置为设备 640*360方式类型cssjavascript原理媒体查询宽、高范围。设置html的font-size基准值(window.innerWidth/psd的初始化宽度)*psd的初始font-size。算出当前网页的fo...
html手机端自动全屏,HTML5在手机端实现视频全屏展示方法
weixin_36420089的博客
05-31 2215
最近做项目，遇到一个问题，在手机上要实现视频的全屏播放功能。测试了很久，终于找到解决办法。第一种：将视频放大来控制。视频在播放的时候，全屏是根据高度来的，如果设置视频 video 标签的宽度是 100% 高度是 110% ，可以实现全屏，超过是溢出隐藏就可以了。确定：手机屏幕尺寸不固定，这个高度110%不好确定。第二种：使用 object-fit 来解决直接上代码： 不支持video 编译后在页面...
html5手机端网页电子书翻页特效.zip
11-18
HTML5手机端网页电子书翻页特效是一种利用现代Web技术为移动设备创建模拟真实书籍翻页体验的效果。这种效果通常由HTML、CSS、JavaScript以及jQuery等技术共同实现，旨在提升用户体验，使在线阅读更加生动有趣。 ...
HTML5手机端刮奖代码
06-24
HTML5手机端刮奖代码是基于现代Web技术实现的一种互动式网页应用，它利用HTML5的强大功能，为手机用户提供了类似实物刮刮乐的游戏体验。HTML5是超文本标记语言的第五个版本，其主要特点是增强了网页的交互性和多媒体...
html5手机端上传图片
03-06
HTML5是现代网页开发的重要标准，它为网页应用带来了许多增强功能，其中之一就是对手机端图片上传的支持。在移动设备上，用户可能希望通过点击或拖拽来上传照片，或者从设备的媒体库中选择图片。以下是对这个主题的...
HTML5手机端万年历日历特效代码
03-20
总的来说，HTML5手机端万年历日历特效代码是一款集成了HTML5、CSS3和JavaScript技术的高级日历组件，它具有响应式布局、农历显示和良好的用户交互性，是移动应用或网页开发中增强日期选择功能的理想选择。...
web前端基础面试85题（一）
柯晓楠
07-18 1332
1、什么是HTML语义化？<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2、为什么要语义化？为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
【中科院1区】Matlab实现天鹰优化算法AO-RF锂电池健康状态估计算法研究.rar
最新发布
08-02
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
汽车行业数字化转型报告顶层规划设计.docx
08-02
汽车行业数字化转型报告顶层规划设计.docx
毕业设计，基于ASP.NET+SqlServer开发的企业投资价值分析系统，内含完整源代码，数据库，毕业论文
08-02
毕业设计，基于ASP.NET+SqlServer开发的企业投资价值分析系统，内含完整源代码，数据库，毕业论文 自中国证券市场产生以来，投资者进行投资理财迫切需要有一个科学的理论依据，在众多投资理论体系中，确定企业的价值和股票的价值，是一个重要的流派。著名的投资专家巴非特就是通过分析企业的内在价值，寻找价值被低估的股票，等到市场认可了该企业的价值，再将股票抛出，从而获得了的投机收益，其管理的基金也一度成为世界上最成功的投资基金之一。从西方国家理论界对相关领域的研究结果来看，也取得了一些成果，包括：CAPM 模型、 ICAPM模型、APT模型等，也有人用市盈率方法对股票进行定价。国内在相关的领域也取得了一些研究成果。然而，尽管国内外理论界研究成果较多，但真正适应中国证券市场、适应中国广大投资者的切实有效的理论至今仍是一个空白。在中国这样一个特殊的背景下，股权结构的特殊性、证券市场初创时期的投资性等因素，使得一些模型受到挑战，而且这些模型的精确化程度也受到限制，有必要探求新的思路和方法，为广大的投资者提供切实可靠的操作依据。对股票的价值进行评估必须综合尽可能全面的因素才能使得这些评估更加科
html网页手机端适配
10-28
为了在手机端更好地展示网页，我们需要进行手机端适配。其中一种方法是通过设置理想视口（ideal viewport），即在head标签中加入meta标签，设置viewport的宽度为设备宽度，同时禁止用户缩放页面。这样可以保证页面在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值