div+css静态网页设计 HTML5期末大作业：出行网站设计——假期旅游(7页) 关于城市旅游的HTML网页设计

最新推荐文章于 2023-03-28 22:33:34 发布

优质内容贡献

最新推荐文章于 2023-03-28 22:33:34 发布

阅读量815

点赞数

分类专栏： web大学生个人网站作业模 HTML5期末大作业 html网页设计作业文章标签： css html html5 前端 javascript

本文链接：https://blog.csdn.net/qq_524614081/article/details/122353702

版权

web大学生个人网站作业模同时被 3 个专栏收录

558 篇文章 35 订阅

订阅专栏

html网页设计作业

547 篇文章 22 订阅

订阅专栏

HTML5期末大作业

281 篇文章 39 订阅

订阅专栏

本文介绍了使用HTML5创建移动应用的布局实现方法，包括头部导航样式、滑动布局的配置以及相关源码展示。通过api.openSlidLayout实现左右滑动效果，展示了HTML、CSS和JavaScript的结合应用。

摘要由CSDN通过智能技术生成

HTML5

一、作品展示

在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/common.css" />


    <style>
        /* 头部导航样式 */
        .header {position: relative;height: 50px;line-height: 50px;background-color: #3993cf;}
        .header .left  {position: absolute;left: 0;height: 50px;}
        .header .right {position: absolute;right: 0;height: 50px;}
        .header .right img {height: 30px;padding: 10px;}

        .swiper-slide img {width: 100%;}

        html,body{height:100%}
        .spirit{position:absolute;width:50px;height:50px;background-color:red;}
        #canvas{position:relative;width:100%;height:200px;background-color:#ccc}
        
    </style>
</head>
<body>

</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
    apiready = function  () {
        api.openSlidLayout({
            type:'left',
            fixedPane:{
                name: 'homeFixed',
                url: './html/homeFixed.html'
            },
            slidPane:{
                name: 'homeSlide',
                url: './html/homeSlide.html'
            }
        }, function(ret) {
            /* 暂时不需要做任何事. */

        });
    }
</script>
</html>