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

  • 实验目的和要求

               

  • 完成以下页面设计。

 

   

  

  

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

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;

}

三、问题总结与体会

思路

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/12277.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

景源畅信:抖音小店比较冷门的品类分享?

在抖音小店的世界里&#xff0c;热门品类总是吸引着众多商家和消费者的目光。然而&#xff0c;就像星空中的繁星&#xff0c;虽不那么耀眼却依然存在的冷门品类同样值得我们关注。它们或许不似服装、美妆那样日进斗金&#xff0c;但正是这些小众市场的存在&#xff0c;为平台带…

Java面试之SpringCloud篇

Nacos有什么用&#xff1f; ①服务注册与发现 ②配置管理 Es为什么查询效率快&#xff1f; &#xff08;1&#xff09;首先&#xff0c;ES使用了倒排索引这种数据结构来快速查找文档。倒排索引是一种针对文本搜索而优化的数据结构&#xff0c;它将每个词与出现这个词的文档列…

Linux 服务器配置共享文件夹(NFS)

一、准备三台 linux 服务器 三台服务器: manger:172.16.11.178 ap1:172.16.11.179 ap2:172.16.11.180 /root/serverfiles/ 为共享目录 二、配置步骤 1、在服务端01的机器上安装nfs和rpcbind程序 yum -y install nfs* yum -y install rpcbind* 2、在安装完nfs以及rpcb…

基于IDEA快速创建一个SpringMVC项目并且配置Tomcat

1&#xff0c;打开IDEA&#xff0c;新建Maven项目【使用web模板创建】 使用社区版的同学创建普通的maven项目&#xff0c;并配置项目的webapp&#xff0c;详情可参考 快速创建一个SpringMVC项目&#xff08;IDEA&#xff09; 2&#xff0c;在main目录下创建Java和resource目录…

2024洗地机爆款榜单,哪个牌子洗地机值得买?助你轻松选对洗地机

随着现代生活节奏的加快&#xff0c;人们对于家庭清洁的需求也越来越高。家用洗地机作为一种高效清洁工具&#xff0c;能够帮助您轻松应对家庭地板的清洁问题&#xff0c;节省时间和精力。然而&#xff0c;在选择洗地机时&#xff0c;究竟哪个牌子的洗地机值得买呢&#xff1f;…

Protobuf(基本使用和IDA中的protobuf解包逆向识别和重新利用)

文章目录 安装protobuf 基本使用如何使用 .pb.cc&#xff08;实现文件&#xff09;和.pb.h&#xff08;头文件&#xff09;.pb.h&#xff08;头文件&#xff09;.pb.cc&#xff08;实现文件&#xff09; 生成的c和h文件ida中解包打包解题1. 定义.proto文件2. 生成Python代码3. …

SpringBoot版本问题,类文件具有错误的版本

项目场景&#xff1a; Spirng Boot 版本3.2.5 jdk 版本 1.8 问题描述 运行程序的时候报错&#xff0c;什么错误的版本&#xff0c;比如&#xff1a; java: 无法访问org.springframework.amqp.core.Binding 错误的类文件: /Maven/repository/org/springframework/amqp/spring…

Linux软硬链接

Linux软硬链接 1.指令 软链接指令&#xff08;link soft&#xff09; ln -s [被链接的文件的路径名字] [软件链接的路径名字].link 硬链接指令(默认) ln [被链接的文件的路径名字] [软件链接的路径名字].link 解除链接&#xff1a; unlink [link_name] 软硬链接的区别&#x…

Milvus 简介与核心特性

一、Milvus 概述 Milvus 是一个开源的向量数据库&#xff0c;由 Zilliz 公司发起并维护。它专为处理非结构化数据而设计&#xff0c;能够存储、检索和分析大量的向量数据。Milvus 的名字来源于拉丁语&#xff0c;意为“一万”&#xff0c;象征着其处理大规模数据集的能力。 M…

力扣爆刷第138天之哈希表五连刷(二三四数之和)

力扣爆刷第138天之哈希表五连刷&#xff08;二三四数之和&#xff09; 文章目录 力扣爆刷第138天之哈希表五连刷&#xff08;二三四数之和&#xff09;一、1. 两数之和二、454. 四数相加 II三、383. 赎金信四、15. 三数之和五、18. 四数之和 一、1. 两数之和 题目链接&#xf…

linux安装Openresty

安装必要的依赖库 指定仓库地址 下载openresty 添加环境变量 vi /etc/profile i export NGINX_HOME/usr/local/openresty/nginx/ export PATH${NGINX_HOME}/sbin:$PATH esc :wq source /etc/profile #启动 nginx # 重启 nginx -s reload #关闭 nginx -s stop

宿舍管理系统代码详解(主页面)

本篇将对管理系统的主页面的代码进行详细的介绍。 目录 一、主页面前端代码 1.样式展示 2.代码详解 &#xff08;1&#xff09;template部分 &#xff08;2&#xff09;script部分 &#xff08;3&#xff09;路由导航守卫 &#xff08;4&#xff09;在vue中引用vue 一、主页…

运维别卷系列 - 云原生监控平台 之 01.prometheus 入门和部署

文章目录 [toc]什么是 PrometheusPrometheus 架构及其一些生态系统组件Prometheus 的工作模式Prometheus 的适用场景Prometheus 的不适用场景Prometheus 词汇表 Prometheus 启动参数Prometheus 配置文件通用占位符定义配置文件示例解释服务发现 Prometheus 部署创建 namespace创…

Unity里的Time

Time and frame rate management Time类&#xff1a; Time script reference page. 一些常见的属性有&#xff1a; Time.time 返回从游戏开始经历的时间.Time.deltaTime 返回从上帧结束到现在经历的时间&#xff0c;和帧率成反比Time.timeScale 控制时间流逝的因子Time.fixe…

嵌入式学习-通用定时器

简介 框图介绍 时钟选择 计数器部分 输入捕获和输出比较框图 嵌入式学习全文参考&#xff08;小向是个der&#xff09;做笔记&#xff1a;https://blog.csdn.net/qq_41954556/article/details/129735708

C#中json数据序列化和反序列化的最简单方法(C#对象和字符串的相互转换)

文章目录 将C#对象转换为json字符串Newtonsoft模块的安装用Newtonsoft将对象转换为json字符串 将json字符串转换为C#对象 将C#对象转换为json字符串 本介绍将基于C#中的第三方库Newtonsoft进行&#xff0c;因此将分为Newtonsoft模块的安装和使用两部分。该模块的优势在于只需要…

Python以docker形式部署,flask简易服务器。

公司大部分都是springboot 服务器&#xff0c;有时候用到python写的一些模型&#xff0c;部署在linux上进行处理 首先项目这样&#xff1a; flask就不说了&#xff0c;快捷服务器&#xff0c; # -*- coding: utf-8 -*-from flask import Flask, request# 实例化Flask对象 app…

LVM - Linux磁盘逻辑卷管理器概念讲解及实践

1、lvm概念 逻辑卷管理器(LogicalVolumeManager)本质上是一个虚拟设备驱动,是在内核中块设备和物理设备之间添加的一个新的抽象层次,它可以将几块磁盘(物理卷,PhysicalVolume)组合起来形成一个存储池或者卷组(VolumeGroup)。LVM可以每次从卷组中划分出不同大小的逻辑卷(Logi…

c语言bug汇总中篇4

31. 错误的错误处理 在C语言编程中&#xff0c;错误处理是一个重要的环节。错误的错误处理方式可能会导致程序崩溃、数据丢失或安全问题。 为了避免这些问题&#xff0c;程序员应该&#xff1a; - 检查所有可能失败的函数调用&#xff0c;并正确处理返回值或错误代码。 - 使…

【核弹】我的第一款IDEA插件

SuperHotSwap 插件名称叫做&#xff1a;SuperHotSwap&#xff08;超级热更新&#xff09; 开发初心&#xff1a;旨在做出一款最便捷的IDEA热更新插件&#xff0c;减少用户操作步骤&#xff0c;提供零配置的可视化操作更新。 为什么要写这个插件&#xff1a; 每次改一下Mappe…