当前位置: 首页 > 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哈希值、提交…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...