当前位置: 首页 > news >正文

实验十 智能手机互联网程序设计(微信程序方向)实验报告

  • 实验目的和要求

               

  • 完成以下页面设计。

 

   

  

  

二、实验步骤与结果(给出对应的代码或运行结果截图)

Wxml

<view class="container">

  <view class="header">

      <view class="logo">标志</view>

      <view class="nav">

        <view>首页</view>

        <view>产品</view>

        <view>关于我们</view>

      </view>

  </view>

<view class="feature">特色内容</view>

  <view class="main">

    <view class="content">

        <view class="section">内容部分 1</view>

        <view class="section">内容部分 2</view>

        <view class="section">内容部分 3</view>

      </view>

        <view class="sidebar">侧边栏链接</view>

  </view>

  <view class="footer">

    <view class="footer-section">

        <view>联系电话</view>

        <view>电话:123-456-7890</view>

    </view>

      <view class="footer-section">

        <view>快速链接</view>

        <view>常见问题</view>

        <view>支持服务</view>

    </view>

      <view class="footer-section">

        <view>版权信息</view>

        <view>2024 公司名</view>

    </view>

  </view>

</view>

Wxss

.container{

  display: flex;

  flex-direction: column;

  height: 100vh;

}

.header{

  display: flex;

  height: 60rpx;

  background-color: rgb(85, 84, 84);

  color: white;

  justify-content: center;

  padding: 0 20rpx;

}

.nav{

  flex-grow: 2;

  display: flex;

  justify-content: space-around;

}

.feature{

  height: 100rpx;

  background-color: rgb(123, 194, 212);

  display: flex;

  justify-content: center;

  align-items: center;

  color: white;

}

.main{

  flex-grow: 1;

  flex-basis: 0;

  display: flex;

}

.content{

  flex-grow: 3;

  flex-basis: 0;

  display: flex;

  flex-direction: column;

  padding: 10rpx;

}

.section{

  flex-grow: 1;

  margin: 10rpx;

  background-color:  rgb(153, 212, 230);

  display: flex;

  justify-content: center;

  align-items: center;

}

.sidebar{

  flex-grow: 1;

  flex-basis: 0;

  background-color: rgb(149, 215, 235);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}

.footer{

  height: 200rpx;

  display: flex;

  background-color: rgb(85, 84, 84);

  color: white;

  justify-content: center;

}

.footer-section{

  display: flex;

  flex-direction: column;

  align-items: center;

}

三、问题总结与体会

思路

相关文章:

实验十 智能手机互联网程序设计(微信程序方向)实验报告

实验目的和要求 完成以下页面设计。 二、实验步骤与结果&#xff08;给出对应的代码或运行结果截图&#xff09; Wxml <view class"container"> <view class"header"> <view class"logo"…...

Python图形复刻——绘制母亲节花束

各位小伙伴&#xff0c;好久不见&#xff0c;今天学习用Python绘制花束。 有一种爱&#xff0c;不求回报&#xff0c;有一种情&#xff0c;无私奉献&#xff0c;这就是母爱。祝天下妈妈节日快乐&#xff0c;幸福永远&#xff01; 图形展示&#xff1a; 代码展示&#xff1a; …...

【算法优选】 动态规划之子数组、子串系列——壹

文章目录 &#x1f38b;前言&#x1f38b;最大子数组和&#x1f6a9;题目描述&#x1f6a9;算法思路&#x1f6a9;代码实现 &#x1f334;环形子数组的最大和&#x1f6a9;题目描述&#x1f6a9;算法思路&#xff1a;&#x1f6a9;代码实现 &#x1f332;乘积最大子数组&#x…...

PXE+Kickstart无人值守安装安装Centos7.9

文章目录 一、什么是PXE1、简介2、工作模式3、工作流程 二、什么是Kickstart1、简介2、触发方式 三、无人值守安装系统工作流程四、实验部署1、环境准备2、服务端&#xff1a;关闭防火墙和selinux3、添加一张仅主机的网卡4、配置仅主机的网卡4.1、修改网络连接名4.2、配IP地址4…...

C语言实现通讯录,包括增删改查以及动态开辟内存,写入文件等功能

文章目录 前言一、注意二、源码1. test.c源文件2. contact.h头文件3. contact.c源文件 总结 前言 C语言实现通讯录&#xff0c;包括增删改查以及动态开辟内存&#xff0c;写入文件等功能 一、注意 在通讯录菜单栏使用枚举定义PeoInfo类型时&#xff0c;每个结构体类型的成员…...

flowable多对并发网关跳转的分析

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; h…...

【嵌入式——QT】QT集成Ymodem协议使用UDP进行传输

【嵌入式——QT】QT集成Ymodem协议使用UDP进行传输 Ymodem协议帧的数据格式帧头包号校验 通讯过程握手信号起始帧数据帧结束帧代码块 Ymodem命令 QT实现YmodemFileTransmit.hYmodemFileTransmit.cppBootLoader.hBootLoader.cppYmodem协议源码 Ymodem协议 帧的数据格式 帧头、…...

python笔记(17)输入输出

一、标准输入与输出简介 Python通过内置的sys模块管理标准输入&#xff08;stdin&#xff09;、标准输出&#xff08;stdout&#xff09;和标准错误&#xff08;stderr&#xff09;。但对大多数简单应用而言&#xff0c;直接使用内置函数就足够了。 二、输入&#xff1a;inpu…...

408数据结构总结复习笔记一:线性表

408数据结构总结复习笔记一&#xff1a;线性表 从现在开始慢慢更新我的考研复习笔记系列吧~ PS&#xff1a;主要是我自己个人复习过程中觉得重点的点&#xff0c;大家仅供参考哈~ 上岸&#xff01;&#xff01;&#xff01;大家一起加油! 顺序表和链表的比较 顺序表链表存取…...

Docker——目录迁移

我们在生产环境中安装Docker时&#xff0c;默认的安装目录是/var/lib/docker&#xff0c;而通常情况下&#xff0c;规划给系统盘的目录一般为50G&#xff0c;该目录是比较小的&#xff0c;一旦容器过多或容器日志过多&#xff0c;就可能出现Docker无法运行的情况&#xff0c;所…...

SpringAMQP-消息转换器

这边发送消息接收消息默认是jdk的序列化方式&#xff0c;发送到服务器是以字节码的形式&#xff0c;我们看不懂也很占内存&#xff0c;所以我们要手动设置一下 我这边设置成json的序列化方式&#xff0c;注意发送方和接收方的序列化方式要保持一致 不然回报错。 引入依赖&#…...

轻松拿下指针(5)

文章目录 一、回调函数是什么二、qsort使用举例三、qsort函数的模拟实现 一、回调函数是什么 回调函数就是⼀个通过函数指针调⽤的函数。 如果你把函数的指针&#xff08;地址&#xff09;作为参数传递给另⼀个函数&#xff0c;当这个指针被⽤来调⽤其所指向的函数 时&#x…...

Nginx反向代理配置

一、介绍 Nginx 的反向代理功能在现代网络架构中扮演着至关重要的角色。首先&#xff0c;它充当了客户端与后端服务器之间的中介。当客户端发送请求时&#xff0c;这些请求先到达 Nginx 服务器&#xff0c;Nginx 会根据预先设定的规则和配置&#xff0c;将请求准确地转发到相应…...

突破编程界限:探索AI编程新境界

文章目录 一、AI编程助手1.1 Baidu Comate智能代码助手1.2 阿里云 通义灵码 二、场景需求三、体验步骤3.1 官网下载3.2 手动下载 四、试用感受4.1 提示4.2 注释生成代码4.3 代码生成4.4 选中生成注释4.5 查看变更&新建文件4.6 调优建议4.7 插件使用 五、结尾推荐 一、AI编程…...

C语言(指针)2

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸各位能阅读我的文章&#xff0c;诚请评论指点&#xff0c;关注收藏&#xff0c;欢迎欢迎~~ &#x1f4a5;个人主页&#xff1a;小羊在奋斗 &#x1f4a5;所属专栏&#xff1a;C语言 本系列文章为个人学习笔记&#x…...

go学习笔记

1基础搭建 1.1&#xff0c;安装vscode https://code.visualstudio.com/download 64位 1.2&#xff0c;Windows 下搭建Go 开发环境-安装和配置 SDK SDK 的全称(Software Development Kit 软件开发工具包) Go 语言的官网为&#xff1a;golang.org , 因为各种原因&#xff0c;可…...

MacApp自动化测试之Automator初体验

今天我们继续讲Automator的使用。 初体验 启动Automator程序&#xff0c;选择【工作流程】类型。从资源库区域依次将获取指定的URL、从网页中获得文本、新建文本文件三个操作拖进工作流创建区域。 然后修改内容&#xff0c;将获取指定的URL操作中的URL替换成https://www.cnb…...

Vue学习v-html

Vue学习v-html 一、前言1、基本用法2、注意事项 二、总结 一、前言 学习 Vue.js 中的 v-html 指令意味着你想要在你的应用程序中动态地渲染 HTML。这个指令允许你将数据中包含的 HTML 代码直接插入到你的模板中&#xff0c;而不是将其作为纯文本处理。虽然这个功能非常强大&am…...

C++并发:锁

一、前言 C中的锁和同步原语的多样化选择使得程序员可以根据具体的线程和数据保护需求来选择最合适的工具。这些工具的正确使用可以大大提高程序的稳定性和性能&#xff0c;本文讨论了部分锁。 二、std::lock 在C中&#xff0c;std::lock 是一个用于一次性锁定两个或多个互斥…...

Git | git log 和 git status 的区别

如是我闻&#xff1a; git log和git status是Git中的两个非常有用的命令&#xff0c;它们用于不同的目的&#xff0c;并提供不同类型的信息。 git log git log命令用于显示一个或多个分支的提交历史记录。这个命令会列出提交历史&#xff0c;包括每次提交的SHA-1哈希值、提交…...

实战演练:基于快马平台将java面试题库转化为模拟面试与代码挑战场

最近在准备Java面试时&#xff0c;发现单纯背诵面试题效果很有限。于是尝试用InsCode(快马)平台搭建了一个实战模拟系统&#xff0c;把静态题库变成了动态训练场。分享下具体实现思路和收获&#xff1a; 场景还原设计 模拟真实面试的倒计时压力&#xff0c;每个问题设置2-5分钟…...

Linux内核模块加载机制深度解析

1. Linux内核模块加载机制深度解析在Linux系统开发中&#xff0c;内核模块的动态加载机制为开发者提供了极大的灵活性。作为一名长期从事内核开发的工程师&#xff0c;我经常需要深入理解模块加载的完整流程&#xff0c;这对调试复杂驱动问题和性能优化至关重要。本文将以linux…...

AViShaWiFi:ESP8266/ESP32轻量级WiFi与HTTPS通信封装库

1. 项目概述AViShaWiFi 是一款面向 ESP8266 和 ESP32 平台的轻量级 WiFi 连接与网络通信封装库&#xff0c;其核心设计目标是降低嵌入式设备接入 Wi-Fi 网络及发起 HTTP/HTTPS 请求的工程门槛。该库并非从零实现 TCP/IP 协议栈或 TLS 加密层&#xff0c;而是深度封装 Arduino C…...

socket.io-redis-adapter高级特性:服务器端事件广播与响应处理

socket.io-redis-adapter高级特性&#xff1a;服务器端事件广播与响应处理 【免费下载链接】socket.io-redis-adapter Adapter to enable broadcasting of events to multiple separate socket.io server nodes. 项目地址: https://gitcode.com/gh_mirrors/so/socket.io-redi…...

避开这个坑!WPS2019添加VBA按钮的正确姿势(含宏录制技巧)

WPS 2019中VBA按钮添加全攻略&#xff1a;从宏录制到界面定制的完整流程 如果你是从Excel转向WPS的办公自动化用户&#xff0c;可能会惊讶地发现&#xff1a;熟悉的VBA按钮添加方式在WPS中竟然完全行不通。这不是你的操作问题&#xff0c;而是两个软件在设计理念上的本质差异。…...

城通网盘解析终极指南:如何免费获取高速直连下载地址

城通网盘解析终极指南&#xff1a;如何免费获取高速直连下载地址 【免费下载链接】ctfileGet 获取城通网盘一次性直连地址 项目地址: https://gitcode.com/gh_mirrors/ct/ctfileGet 在数字化信息时代&#xff0c;城通网盘作为国内广泛使用的文件分享平台&#xff0c;却因…...

零基础入门:借助claude code在快马平台轻松创建第一个web应用

作为一个刚接触编程的新手&#xff0c;我最近尝试用InsCode(快马)平台做了一个待办事项应用&#xff0c;整个过程比想象中顺利很多。这里记录下我的学习过程&#xff0c;希望能帮到同样零基础的朋友。 项目准备阶段 刚开始我连HTML、CSS和JavaScript的区别都分不清。好在平台…...

2026最权威的十大AI论文工具推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 当今&#xff0c;人工智能技术于学术写作范畴的运用愈发广泛&#xff0c;该技术的关键价值在…...

湖南长沙正规的空调工厂名声

在湖南长沙&#xff0c;寻找一家正规的空调工厂并非易事&#xff0c;但长沙荣幸商贸有限责任公司&#xff08;以下简称“荣幸商贸”&#xff09;凭借其卓越的服务和优质的产品&#xff0c;成为了众多消费者的首选。本文将通过具体数据和案例&#xff0c;为您详细介绍荣幸商贸的…...

3步实现跨平台文献管理效率跃升:WPS-Zotero开源工具深度应用指南

3步实现跨平台文献管理效率跃升&#xff1a;WPS-Zotero开源工具深度应用指南 【免费下载链接】WPS-Zotero An add-on for WPS Writer to integrate with Zotero. 项目地址: https://gitcode.com/gh_mirrors/wp/WPS-Zotero 在学术研究的数字化工作流中&#xff0c;如何解…...