html5-移动端布局模板

最新推荐文章于 2024-02-27 22:41:54 发布
最新推荐文章于 2024-02-27 22:41:54 发布
阅读量1k 收藏 3
点赞数
文章标签： 人工智能
原文链接：http://www.cnblogs.com/houweidong/p/7520476.html
版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合实例-移动端页面开发</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
    <style type="text/css">
    body{margin: 0}
    header{width: 100%;height: 50px;background:#FFCCCC}
    h4{display:inline;}
    aside{width: 20%;height: 540px;background:#CCCCCC;float: left;}
    section{width: 80%;height: 540px;background:#f0f0f0;float: left;overflow: auto;}
    footer{width: 100%;height: 50px;background:#FFCCCC;clear: left;}
    img{max-width: 70%}
    ul{list-style-type: none;}
    li{display: inline;}
    a{text-decoration: none;}
    </style>
</head>
<body>
<header>
    <hgroup>
        <img src="imges/ss.png" alt="">
        <h4>移动端页面</h4>
    </hgroup>
</header>
<aside>
    <nav>
        <ul>
            <li><a href=""><img src="imges/zhi.png" alt=""></a></li>
            <li><a href=""><img src="imges/ka.png" alt=""></a></li>
            <li><a href=""><img src="imges/tuan.png" alt=""></a></li>
            <li><a href=""><img src="imges/ding.png" alt=""></a></li>
            <li><a href=""><img src="imges/vip.png" alt=""></a></li>
            <li><a href=""><img src="imges/sc.png" alt=""></a></li>
        </ul>
    </nav>
</aside>
<section>
    <figure><img src="sp/sp1.png" alt="" width="50%"><img src="sp/sp2.png" alt="" width="50%"></figure>
    <figcaption>食品/家电</figcaption>
    <figure><img src="sp/sp3.png" alt="" width="50%"><img src="sp/sp4.png" alt="" width="50%"></figure>
    <figcaption>家电/家居</figcaption>
    <figure><img src="sp/sp5.png" alt="" width="50%"><img src="sp/sp6.png" alt="" width="50%"></figure>
    <figcaption>数码/珠宝</figcaption>
    <figure><img src="sp/sp1.png" alt="" width="50%"><img src="sp/sp2.png" alt="" width="50%"></figure>
    <figcaption>食品/家电</figcaption>
    <figure><img src="sp/sp3.png" alt="" width="50%"><img src="sp/sp4.png" alt="" width="50%"></figure>
    <figcaption>家电/家居</figcaption>
    <figure><img src="sp/sp5.png" alt="" width="50%"><img src="sp/sp6.png" alt="" width="50%"></figure>
    <figcaption>数码/珠宝</figcaption>        
</section>
<footer>
    <nav>
        <ul>
            <li><a href=""><img src="imges/zy.png" alt="" width="45"></a></li>
            <li><a href=""><img src="imges/qb.png" alt="" width="45"></a></li>
            <li><a href=""><img src="imges/gw.png" alt="" width="45"></a></li>
            <li><a href=""><img src="imges/dl.png" alt="" width="45"></a></li>    
        </ul>
    </nav>
</footer>
</body>
</html>

转载于:https://www.cnblogs.com/houweidong/p/7520476.html

weixin_34220963
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
极简风格响应式html5模板自适用手机端bootstrap模板
02-19
基于boostrap开发的可自适应手机的极简风格的前端模板，交互效果做的还可以
html5手机端商城模板，完整的一套商城系统的所有静态网页
12-19
html5手机端商城模板，完整的一套商城系统的所有静态网页 。登陆页面、首页、分类、购物车、我的等等，基本一个商城所有的模块都覆盖到了，希望能帮到你。
HTML5响应式手机模板：电商网站设计——房地产移动端网页模板(15个页面)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
08-05 2080
HTML5响应式手机模板：电商网站设计——房地产移动端网页模板(15个页面) HTML+CSS+JavaScript 手机模板wap 手机网站模板 手机网页模板 手机网站模板 手机模板 响应式手机网站 html5手机网站模板 企业手机网站模板 公司手机网站模板 原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。 作品介绍 1.网页作品简介方面 ：一款红色多用途的房地产资讯，家居产业，图片新闻资讯类wap网页模板。包含：主页、列表
移动端布局基础（html+css+js）
qq_64970126的博客
04-02 2482
1、视口:布局视口、视局视口、理想视口 2、二倍图：物理像素和像素比、背景图片的二倍图、image图片的二倍图 3、移动端常见样式修改方法：-webkit-box-sizing（盒子实际大小）、-webkit-tap-highlight-color（超链接高亮样式修改法）、-webkit-apperance(按钮和文本框自定义样式)、-webkit-touch-callout(长按状态下禁止弹出菜单栏)
静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别
weixin_33936401的博客
06-22 4814
一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。2、设计方法：　　PC：居中...
60多套html5移动端模板
06-09
60多套html5移动端模板，适合研究一下，请放心下载，如有疑问，请留言
手机端html模板
05-09
有共31个html模板，全部试用于手机端，我也是平时一个一个收集起来的，均非原创。
移动端的布局
最新发布
2302_80152806的博客
02-27 1684
剩余空间用flew来表示占多少份数.item{数值越小，排列越靠前（默认为0，与z-size不同）.item{若想让某盒子提前显示，可改为order：-1。三.rem适配布局。
适配移动端的html模板
大炮哥的博客
12-13 578
<!DOCTYPE html> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" /> <body> <div class="title">模板</div> </body> <script> </script> &lt
移动端页面布局
sl105105的博客
06-09 351
移动端页面布局
HTML移动端APP注册登录页面模板.zip
05-24
HTML移动端APP注册登录页面模板，全套模板，包括首页、注册、登录、密码修改等多个手机WAP模板页面。
Html 5 App 界面模板（HTML5模板）
12-26
Html 5 App 界面模板Html 5 App 界面模板Html 5 App 界面模板
css3+html5 响应式布局网站模板
10-15
css3+html5 响应式布局网站模板，绝对会让喜欢
商城H5移动端模板
01-03
移动端的h5商城,感兴趣的可以拿去学习,有更好的改动欢迎留言
jQueryMobile-HTML5模板
01-26
jquerymobile是用于创建移动 Web 应用的前端开发框架，此资源包含了几套jquerymobile的模板，供新手学习。
HTML-移动端APP注册登录页面模板
06-01
5. **图标字体**：为了保持图形在不同设备上的一致性，模板可能使用图标字体（Icon Fonts）如Font Awesome，这样可以确保图标在没有图像加载的情况下也能正常显示。 6. **字体与排版**：考虑到移动端阅读习惯，模板...
移动端H5商城模板源码-34个页面
09-07
在这个模板中，HTML5被用于创建响应式的页面布局，确保在不同设备上都能提供良好的用户体验。HTML5的新特性如离线存储、拖放功能、媒体元素等也被充分利用，增强了页面的交互性和功能性。 2. **JavaScript**: 作为...
h5响应式适配移动端网站模板
06-06
8. **Flexbox布局**：HTML5响应式模板可能使用CSS3的Flexbox模型来创建灵活的、自适应的布局，这使得元素可以在容器内按需调整大小和位置。 9. **Grid布局**：另一种强大的布局工具是CSS Grid，它允许开发者创建二...
Html-移动端与响应式
m0_70274918的博客
05-05 132
display: none; transition: all 0.5s; transform-origin: left center; } .togglebtn .line:nth-child(1) { position: absolute; top: 15px; } .togglebtn .line:nth-child(2) { position: absolute; top: 27px; } /* 设定屏幕小于768像素时的像素 */ .navpage { width: 100vw; overflow:
html5 移动端登录模板
10-19
HTML5移动端登录模板是为移动设备用户提供方便快捷的登录界面的模板。该模板使用HTML5技术开发，可以适配不同尺寸的移动设备屏幕，提供用户友好的交互体验。以下是一些常见的特点和设计要素： 1. 响应式设计：该模板能够根据用户设备的屏幕大小和方向进行自适应布局，确保在不同设备上都能够正常显示和操作。 2. 美观简洁：登录界面通常采用简洁的设计和色彩搭配，使用户能够快速找到登录入口和相关操作。 3. 表单验证：在登录表单中，使用HTML5的表单验证功能，对用户输入的用户名和密码进行实时检查，并提供相应的提示信息，确保用户输入的准确性。 4. 手势控制：考虑到移动设备的特性，该模板可能会使用手势控制功能，例如滑动、拖拽等，以提供更直观的操作方式。 5. 记住登录状态：登录模板还可能包括"记住我"选项，方便用户下次免登录或自动登录。 6. 第三方登录：为了增加登录的便利性，该模板还可能集成第三方登录功能，比如使用微信、QQ或其他社交账号直接登录。 总之，HTML5移动端登录模板通过简洁的设计、自适应布局和方便的交互，为移动设备用户提供了快捷、安全的登录体验。用户可以通过填写用户名和密码等信息，完成登录过程，访问需要身份认证的功能或内容。这种模板的设计可以帮助开发者减少登录界面的开发成本和时间，并提升用户的登录体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值