（简单课设）前端小白刚做的一个简单的移动端项目的分享和总结

最新推荐文章于 2024-05-12 13:19:14 发布
最新推荐文章于 2024-05-12 13:19:14 发布
阅读量2k 收藏 20
点赞数 2
分类专栏： html 文章标签： html css html5 css3 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40259528/article/details/110402869
版权
前端小白刚做的两个简单项目的分享和总结所用技术为简单的div+css直接上图片代码部分 小滴服务接下来是企业项目部分接下来是如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入所用技术为简单的div+css直接上图片代码部分 小滴服务<!DOCTYP
摘要由CSDN通过智能技术生成

前端小白刚做的一个简单的移动端项目的分享和总结

所用技术为简单的div+css

直接上图片

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码部分 小滴服务

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width initial-scale=1,user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" href="Common.css">

    <style>
        .cell{
    display: table;width: 100%;height: 80px;margin-bottom: 10px;
            background-color: white;}
        .cell a{
    display: table-cell;width: 33.3%;text-align: center;vertical-align: middle;text-decoration: none;color: black}

    </style>
</head>
<body>
<div class="title-top" >
    小滴服务
</div>

<div >
    <img src="../icon/banner1.png" alt="" class="middle-picture">
</div>

<div class="cell">
    <a href=""><img src="../icon/index1.png" alt=""><p>企业项目</p></a>
    <a href=""><img src="../icon/index2.png" alt=""><p>平台风采</p></a>
    <a href=""><img src="../icon/index3.png" alt=""><p>报名流程</p></a>
</div>
<div class="cell">
    <a href=""><img src="../icon/index4.png" alt=""><p>企业项目</p></a>
    <a href=""><img src="../icon/index5.png" alt=""><p>平台风采</p></a>
    <a href=""><img src="../icon/index6.png" alt=""><p>报名流程</p></a>
</div>
<div class="cell">
    <a href=""><img src="../icon/index7.png" alt=""><p>企业项目</p></a>
    <a href=""><img src="../icon/index8.png" alt=""><p>平台风采</p></a>
    <a href=""><img src="../icon/index9.png" alt=""><p>报名流程</p></a>
</div>
<div class="cell">
    <a href=""><img src="../icon/index7.png" alt=""><p>企业项目</p></a>
    <a href=""><img src="../icon/index8.png" alt=""><p>平台风采</p></a
最低0.47元/天 解锁文章
浅过无痕，醉梦未央
关注
  • 2
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端项目搭建
小剑儿的博客
08-15 982
首先新起一个项目 vue init webpact projectName 解决适配问题 引入lib-flexible和px2rem-loader,打开build文件夹，编辑utils.js exports.cssLoaders = function (options) { options = options || {} var cssLoader = { loade...
简易Android购物App开发的移动端项目代码
06-19
一份简化的小项目，为了让初学者了解基本的开发流程。可以在Android App上查看物品，购买物品，查看购物车，提交订单，查看历史订单。这个小项目主要是为了达成以下两个目的： - 理解购物车如何实现 - 理解订单怎样生成 Android App使用原生开发，主要借助ListView呈现数据。服务器端使用SpringMvc+Spring+Mybatis技术，数据库采用Mysql。App和服务器间传递数据借助字符串或JSON。
2024年Web前端最新vue3版本手把手教你如何搭建一个移动端项目。按照步骤来。，我的头条面试经历分享文案
2401_84411072的博客
05-12 335
最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。baseURL: ‘https://api.it120.cc’, // 项目发送axios请求的公共地址。// interceptors axios的拦截对象 request请求的意思 use使用的意思。// console.error(err) //将错误信息打印在控制台中。// 就会造成很多大的维护困难 所以我们讲所有的api请求放在请求模块中。
好程序员web前端技术分享移动端页面布局
weixin_33737134的博客
05-07 169
好程序员web前端技术分享移动端页面布局一、弹性布局（100%布局）的特点顶部与底部的bar不管分辨率怎么变，它的⾼度和位置都不变； 中间每条招聘信息不管分辨率怎么变，招聘公司的图标等信息 都位于条目的左边，薪资都位于右边.特点：关键元素高宽和位置都不变，只有容器元素在做伸缩变换。对于这类app，记住一个开发原则就好：文字流式，控件弹性，图片等比缩放​二、什么是屏幕尺寸？移动端屏幕尺寸:屏幕对角...
浅谈移动端浏览器及内核分析
Beckoning_的博客
12-25 1501
文章目录移动端项目移动端浏览器及内核分析viewport移动端布局解决方案 移动端项目 移动端浏览器及内核分析 手机浏览器种类： UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器， 搜狗手机浏览器，猎豹浏览器，其他杂牌浏览器。 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自助 研发的内核，就像国内的手机操作系统都是基于Android修改的。 viewport width:设置viewport的宽度（即之前所提及到的，浏览器的宽度），
移动端canvas_web前端开发分享-css,js移动篇
weixin_39606396的博客
12-01 159
随着移动市场的逐步扩大及相关技术的日趋完善，对前端开发提出了新的岗位要求，在继承前人成果的基础上需要在新的历史条件下有新的创新。移动端的开发，虽然没有IE6众多问题的折磨，但是多平台，多设备的兼容，也是如恶梦般存在。不过话说回来，着重还是考验基础的css 2.x的功底，只要基础扎实了，应付移动端的兼容也是手到擒来。当然css3.x, html5新增加的标签还是需要学习，具体的推荐：一. css1)...
移动端小项目的小总结~
weixin_34007886的博客
04-02 90
最近在做移动端的动画，其中还是碰到了很多的坑，在此记录一下。作为一个备忘！ 关于移动设备的不同屏幕分辨率 第一次做web app，前真的从来没做过移动端，真心感觉移动端还是也不容易啊。说说不同分辨率的处理方案吧。我采用的是最坑爹醉无语的缩放来解决的，定义了以iPhone4为基准的最小屏幕比（320*450），以此在JS进行判断设备的比...
毕设&课设&项目&实训-基于Vue2.0的单页面应用设计的一个完整移动端电商网站.zip
02-05
基于Vue2.0的单页面应用设计的一个完整移动端电商网站，网站提供的商品主要是日常生活必需品、服饰、鞋包、食品等。从日常用品到衣帽到食品，网站能满足用户大部分的日常购物需求。项目上线后，精选热门商品放到网站...
毕业设计&课设-智能信息直通车，一个具有后端+前端+移动端的全栈开发技术的项目源码，多团队开发无缝整合技术.zip
最新发布
06-24
2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。...
毕设&课设&项目&实训-基于 Vue 2.0 的移动端UI组件库.zip
01-26
毕设&课设&项目&实训GreeUI组件库文档 —— 一套基于 Vue 2.0 的移动端UI组件库（专为物联网研究院前端小组Mobile App开发而生）.zip所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎...
毕设&课设&项目&实训-基于WMS系统的移动端的操作.zip
02-09
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
一个小案例，移动端的大家可以参考下
08-28
移动端开发案例，大家可以看下，个人觉得还好
小滴
02-08
小滴
毕设&课设&项目&实训-基于百度EasyDL训练的模型，并可以部署在前端、PC，移动端和微信小程序端，视频流推断.zip
02-04
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
最新超简单的移动端手机适配
小时光的博客
11-26 215
//方法一 function setPxRem(){ var cssEl = document.createElement('style'); document.documentElement.firstElementChild.appendChild(cssEl); var dpr = 1; //把viewport分成10份的rem，html标签的font-si...
web前端课程技术内容之如何做一个简单的手机端页面的翻页
QF _WEB
11-23 611
【如何做一个简单的手机端页面的翻页】 第一步：创建移动端页面内 HTML + CSS 【注】可用弹性布局 但需要注意的是 外层盒子的定位 第二步： 思考问题 要实现怎样的效果？ 手指滑动时触发事件【左右】两个方向 2.点击footer部分的下标实现切换效果 3.点击footer部分的下标实现下标颜色变化 第三步；编写JS代码 添加监听事件 document.addEventListener(‘...
一个完整的移动端项目的构建步骤——框架搭构4
a23180012142的博客
06-28 128
1 window.routeModule = (function() { 2 //pageMap --> 页面映射存储关系表 3 var pageMap = { 4 home: homeModule, 5 rank: rankModule, 6 login: loginModule 7 ...
WebStorm开发应用——前端页面
qq_42069571的博客
05-23 9800
第一次上手WebStorm开发一个手机端应用，前端页面主要用到的是html（页面内容由html构成 ），css（利用排版，样式将页面内容进行美化），js（脚本语言使页面具有交互性） 首先上效果图
小滴课堂-学习笔记：（7）提效神器之代码自动生成MybatisPlus-Generator+Lombok
dev666的博客
01-25 915
愿景："让编程不再难学，让技术与生活更加有趣" 更多架构课程请访问 xdclass.net 目录 第1集 项目引入Mybatis-plus-generator代码自动生成工具 第2集 自动化生成代码-加入项目和自动化工具思考 第3集 提效神器-MyBatisPlus课程总结 干货文档 第1集 项目引入Mybatis-plus-generator代码自动生成工具 简介：介绍Mybatis-plus-generator代码自动化生成工具 Mybatis-plus-generator..
计算机网络课设要求做一个基于TCP协议的简易聊天机器人代码要求可多个客户端
06-01
好的，下面我将给出一个基于TCP协议的简易聊天机器人C语言示例代码，可以同时与多个客户端进行交互，希望能帮到您： ```c #include <stdio.h> #include <stdlib.h> #include <string.h> #include <sys/socket.h> #include <arpa/inet.h> #include <unistd.h> #include <pthread.h> #define PORT 8888 #define MAX_MSG_SIZE 1024 #define MAX_CLIENTS 10 void *handle_client(void *arg); int main() { int server_fd, new_socket, valread; struct sockaddr_in address; int opt = 1; int addrlen = sizeof(address); char buffer[MAX_MSG_SIZE] = {0}; char *hello = "Hello from server"; pthread_t thread_id; int i, client_sockets[MAX_CLIENTS], max_clients = MAX_CLIENTS, activity, sd, max_sd; fd_set readfds; // 创建TCP套接字 if ((server_fd = socket(AF_INET, SOCK_STREAM, 0)) == 0) { perror("socket failed"); exit(EXIT_FAILURE); } // 设置套接字选项 if (setsockopt(server_fd, SOL_SOCKET, SO_REUSEADDR | SO_REUSEPORT, &opt, sizeof(opt))) { perror("setsockopt"); exit(EXIT_FAILURE); } // 初始化服务器地址 address.sin_family = AF_INET; address.sin_addr.s_addr = INADDR_ANY; address.sin_port = htons(PORT); // 绑定地址和端口 if (bind(server_fd, (struct sockaddr *)&address, sizeof(address)) < 0) { perror("bind failed"); exit(EXIT_FAILURE); } // 监听连接 if (listen(server_fd, 3) < 0) { perror("listen"); exit(EXIT_FAILURE); } // 初始化客户端套接字列表 for (i = 0; i < max_clients; i++) { client_sockets[i] = 0; } // 循环等待客户端连接和消息 while (1) { // 清空文件描述符集合 FD_ZERO(&readfds); // 将服务器套接字加入文件描述符集合 FD_SET(server_fd, &readfds); max_sd = server_fd; // 将客户端套接字加入文件描述符集合 for (i = 0; i < max_clients; i++) { sd = client_sockets[i]; if (sd > 0) FD_SET(sd, &readfds); if (sd > max_sd) max_sd = sd; } // 等待读取文件描述符集合中的套接字 activity = select(max_sd + 1, &readfds, NULL, NULL, NULL); if ((activity < 0) && (errno != EINTR)) { printf("select error"); } // 如果服务器套接字有新的连接请求 if (FD_ISSET(server_fd, &readfds)) { if ((new_socket = accept(server_fd, (struct sockaddr *)&address, (socklen_t*)&addrlen))<0) { perror("accept"); exit(EXIT_FAILURE); } // 发送欢迎消息 send(new_socket, hello, strlen(hello), 0); printf("Hello message sent\n"); // 将新连接的客户端套接字加入列表中 for (i = 0; i < max_clients; i++) { if (client_sockets[i] == 0) { client_sockets[i] = new_socket; printf("Adding to list of sockets as %d\n" , i); break; } } } // 处理客户端消息 for (i = 0; i < max_clients; i++) { sd = client_sockets[i]; if (FD_ISSET(sd, &readfds)) { // 读取消息 if ((valread = read(sd, buffer, MAX_MSG_SIZE)) == 0) { getpeername(sd, (struct sockaddr*)&address, (socklen_t*)&addrlen); printf("Host disconnected , ip %s , port %d \n" , inet_ntoa(address.sin_addr) , ntohs(address.sin_port)); // 关闭套接字并从列表中移除 close(sd); client_sockets[i] = 0; } else { // 启动新线程处理客户端消息 pthread_create(&thread_id, NULL, handle_client, (void *)&sd); pthread_detach(thread_id); } } } } // 关闭套接字 close(server_fd); return 0; } void *handle_client(void *arg) { int sd = *(int*)arg; char buffer[MAX_MSG_SIZE] = {0}; // 读取客户端消息 read(sd, buffer, MAX_MSG_SIZE); // 根据客户端发送的消息，给出回复 if (strcmp(buffer, "Hello\n") == 0) { printf("Server: Hi there!\n"); send(sd, "Hi there!", strlen("Hi there!"), 0); } else if (strcmp(buffer, "How are you?\n") == 0) { printf("Server: I'm fine, thank you!\n"); send(sd, "I'm fine, thank you!", strlen("I'm fine, thank you!"), 0); } else if (strcmp(buffer, "Quit\n") == 0) { printf("Server: Goodbye!\n"); send(sd, "Goodbye!", strlen("Goodbye!"), 0); } else { printf("Server: Sorry, I don't understand.\n"); send(sd, "Sorry, I don't understand.", strlen("Sorry, I don't understand."), 0); } // 关闭套接字 close(sd); return NULL; } ``` 这个示例代码创建了一个TCP服务器程序，等待客户端连接和消息，并根据预先设定好的回复规则，与客户端进行交互。当收到客户端发送的消息后，服务器会根据预先设定好的回复规则，给客户端发送回复。当客户端发送“Quit”消息时，服务器会关闭连接。在实际应用中，可以根据需要修改回复规则和相关参数。同时，这个示例代码使用了多线程技术，可以同时处理多个客户端的消息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值