（简单课设）前端小白刚做的一个简单的移动端项目的分享和总结
2024-05-05 08:31:53
前端小白刚做的一个简单的移动端项目的分享和总结
- 所用技术为简单的div+css
- 直接上图片
- 代码部分 小滴服务
- 接下来是企业项目部分
- 接下来是我的小滴部分 （另外两个部分内容非常简单，没必要粘贴代码了）
- 我遇到的问题和总结
所用技术为简单的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><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><a href=""><img src="../icon/index9.png" alt=""><p>报名流程</p></a>
</div>
<div class="cell" style="padding-bottom: 50px"><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-navigation" ><a href="First-page.html"><img src="../icon/nav11.png" alt=""><p style="color: red">小滴服务</p></a><a href="EnterPrise-Project.html"><img src="../icon/nav20.png" alt=""><p>企业项目</p></a><a href="Service-process.html"><img src="../icon/nav30.png" alt=""><p>服务流程</p></a><a href="Platform-Style.html"><img src="../icon/nav40.png" alt=""><p>平台风采</p></a><a href="Myself.html"><img src="../icon/nav50.png" alt=""><p>我的小滴</p></a>
</div>
</body>
</html>
接下来是企业项目部分
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" name="viewport" content="width=device-width initial-scale=1,user-scalable=no"><title>公司项目</title><link rel="stylesheet" href="Common.css"><style>.two{padding-top: 40px;background-color: white;display: table;width: 100%;text-align: center;height: 44px;line-height: 44px;}.two a{display: table-cell;width: 33.3%;text-decoration: none;color:rgb(28,109,192);}</style>
</head>
<body><div class="title-top">创业项目
</div><div class="two"><a href="EnterPrise-Project.html">钻石创业者</a><a href="EnterPrise-Project-gold.html">金牌创业者</a><a href="EnterPrise-Project-Silver.html">银牌创业者</a>
</div><div style="background-color:white;" ><img src="../icon/banner3.png" alt="" style="width: 100%"><h5 style="text-align: center">服务内容</h5><img src="../icon/10w_1.png" alt="" style="width: 100%"><p style="font-size: 10px;text-align: center">提供以上两个学院的技术支持、咨询服务，课件学习等内容</p>
</div><div ><h5 style="text-align: center">创业者享受的回报收益</h5><img src="../icon/10w_2.png" alt="" style="width: 100%"><ol style="font-size: 10px"><li>渠到可以享有的股份额度</li><li>渠道个人业绩流水总额累计</li><li>历年渠道全部各方面业绩流水总额累计</li><li>宏鑫互联网集团所拥有的上市或者充足公司纵谷本数</li><li>宏鑫互联网集团上市总股本数的20%</li></ol>
</div>
<div style="background-color:white;padding-bottom: 50px"><h5 style="text-align: center">获得收益条件</h5><ol style="font-size: 10px"><li>N≥10人</li><li>业绩流水≥1.2亿。</li><li>当满足两个以上条件时，钻石创业者才能取得期权。<br>注：上面的y/z为财务数据，由财务部门按期提供，录入即可。</li></ol>
</div><div class="cell-navigation" ><a href="First-page.html"><img src="../icon/nav10.png" alt=""><p>小滴服务</p></a><a href="EnterPrise-Project.html"><img src="../icon/nav21.png" alt=""><p style="color: red">企业项目</p></a><a href="Service-process.html"><img src="../icon/nav30.png" alt=""><p>服务流程</p></a><a href="Platform-Style.html"><img src="../icon/nav40.png" alt=""><p>平台风采</p></a><a href="Myself.html"><img src="../icon/nav50.png" alt=""><p>我的小滴</p></a>
</div></body>
</html>
接下来是我的小滴部分 （另外两个部分内容非常简单，没必要粘贴代码了）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" name="viewport" content="width=device-width initial-scale=1 user-scalable=no"><title>我的小滴</title><link rel="stylesheet" href="Common.css"><style>.self{position: absolute;top: 83px;left: 50%;text-align: center;margin-left:-32px;}.frame{position: relative;left: 5%;}.arrow{position: relative;left: 50%;}td{border: 1px #dddddd solid;background-color: white;border-radius:5px;}</style>
</head>
<body>
<div class="title-top">我的小滴
</div><div style="padding-top: 40px"><img src="../icon/banner5.png" alt=""width="100%">
</div><div class="self"><img src="../icon/head.png" alt=""><br><p>华衫科技</p><span style="background-color:rgb(28,109,192);">退出登录</span>
</div>
<div style="padding-bottom: 50px"><table width="90%" class="frame"cellspacing="10px" ><tr style="height: 40px"><td ><span><img src="../icon/gr_1.png" alt=""></span><span>我的客户</span><span class="arrow"><img src="../icon/jt.png" alt=""></span></td></tr><tr style="height: 40px;"><td ><span><img src="../icon/gr_1.png" alt=""></span><span>我的客户</span><span class="arrow"><img src="../icon/jt.png" alt=""></span></td></tr><tr style="height: 40px;"><td ><span><img src="../icon/gr_1.png" alt=""></span><span>我的客户</span><span class="arrow"><img src="../icon/jt.png" alt=""></span></td></tr><tr style="height: 40px;"><td ><span><img src="../icon/gr_1.png" alt=""></span><span>我的客户</span><span class="arrow"><img src="../icon/jt.png" alt=""></span></td></tr><tr style="height: 40px;"><td ><span><img src="../icon/gr_1.png" alt=""></span><span>我的客户</span><span class="arrow"><img src="../icon/jt.png" alt=""></span></td></tr><tr style="height: 40px;"><td ><span><img src="../icon/gr_1.png" alt=""></span><span>我的客户</span><span class="arrow"><img src="../icon/jt.png" alt=""></span></td></tr><tr style="height: 40px;"><td ><span><img src="../icon/gr_1.png" alt=""></span><span>我的客户</span><span class="arrow"><img src="../icon/jt.png" alt=""></span></td></tr><tr style="height: 40px;"><td ><span><img src="../icon/gr_1.png" alt=""></span><span>我的客户</span><span class="arrow"><img src="../icon/jt.png" alt=""></span></td></tr><tr style="height: 40px;"><td ><span><img src="../icon/gr_1.png" alt=""></span><span>我的客户</span><span class="arrow"><img src="../icon/jt.png" alt=""></span></td></tr></table>
</div><div class="cell-navigation" ><a href="First-page.html"><img src="../icon/nav10.png" alt=""><p>小滴服务</p></a><a href="EnterPrise-Project.html"><img src="../icon/nav20.png" alt=""><p>企业项目</p></a><a href="Service-process.html"><img src="../icon/nav30.png" alt=""><p>服务流程</p></a><a href="Platform-Style.html"><img src="../icon/nav40.png" alt=""><p>平台风采</p></a><a href="Myself.html"><img src="../icon/nav51.png" alt=""><p style="color: red">我的小滴</p></a>
</div></body>
</html>
我遇到的问题和总结
------------------table和table cell-----------------
给父元素样式display:table,给子元素样式tablecell可以达到做9宫格导航的效果。
具体细节：1.常用标签 外套div 内嵌a标签
2.作为父元素的div如果不规定宽高则由子元素a的宽高决定
3.a标签可以使用 vertical-align: middle 把此元素a放置在父元素div的中部。
---------------------公共样式部分-----------------------------
首先是所有元素去内外边框部分
{
padding: 0;
margin: 0;
} 其中指的是所有的标签元素
第二
头部的标题栏和尾部的导航栏如何固定在屏幕的上下两部分且不影响正常内容的显示
方法-position:fixed进行定位然后将距离其最近的块加边框 margin或者padding距离为标题栏或者导航栏的宽度
-----------------------Position的使用-------------------------
在本项目中，position在使用的时候用到了绝对定位absolute,相对定位relative和
绝对定位中相对于浏览器窗口的定位fixed
bsolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
百度网盘分享链接
链接：https://pan.baidu.com/s/1QRfrfLvk4RCIr6SSXBHR2w
提取码：jzs2
复制这段内容后打开百度网盘手机App，操作更方便哦
（简单课设）前端小白刚做的一个简单的移动端项目的分享和总结相关推荐
- 【课设生成器】我做了一个代码生成器
文章目录 一.什么是代码生成器 0.视频介绍 1.做生成器的初衷 2.生成器的功能 4.资源内容 二.代码生成器的使用 1.文件目录介绍 2.启动系统 3.使用教程 3.1界面 3.2 生成 3.3 ...
- 奶气萌娃的声音怎么做？一个简单的小方法，奶娃配音轻松拿捏
奶气萌娃的声音怎么做?一个简单的小方法,奶娃配音轻松拿捏 平时在刷短视频的时候,经常会看到可可爱爱的短视频,配音则是奶气萌娃的声音,着实可爱,萌化人心.那么,如果我们自己也想要做这种可爱的奶气萌娃的声 ...
- 程序基于MATLAB yalmip 开发，做了一个简单的微网优化调度模型，模型中含有蓄电池储能、风电、光伏等发电单元，程序运行结果良好
微网 优化调度 机组组合 YALMIP cplex 编程语言:MATLAB平台 主题:基于YALMIP 的微网优化调度模型 内容简介:程序基于MATLAB yalmip 开发,做了一个简单的微网优化调 ...
- 做一个纯前端小程序，只需要简单几步
前段时间某神秘企业员工被禁止拥有自媒体,所以如果大家在盗版网站或者某条看到这篇文章,而且昵称还叫什么泽哥**钊,不用慌,就是我!!! 我这技术这么烂,也要被限制,辛苦某某部门了.也不知道啥时候禁止我发 ...
- 2022unity超简单课设-模拟太阳系的Unity小游戏
模拟太阳系的Unity小游戏(附下载链接) 下载链接 unity课程实践做的一个模拟太阳系的Unity小游戏,你可以使用飞船移动来查看太阳系中的各个星球. 飞船拥有两种驾驶模式,一种更加真实,是通过给 ...
- 工具人（超级赛亚人）学长写给超级可爱学妹的web简单课设（css3 动画 + 简单樱花飘落效果）
就是老工具人了. 学校web初级课程设计. 大概构思加完成1.5小时. 就这样. 大家想看拿走. 附上git地址:git地址,打包带走 部分页面效果展示: 只是一个简单web课程,后续会上传 雪花飘落 ...
- Android课设——理财小助手
一:app介绍 理财小助手是一款利用Android studio软件实现的APP,可以录入每天的消费项目以及消费金额,同时也可以查找消费记录.统计消费总额.我用到的Android studio版本如下 ...
- c语言课程设计作业求鞍点,求助，最近课设，不会做，求高手帮忙
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 C语言课程设计任务书 实训内容: 通过菜单设计,将实训所布置的题目连接到菜单上,是程序可以控制菜单选择不同的题目执行. 实训题目: 1.求100以内的素数 ...
- python简单小游戏代码_一个简单的python小游戏---七彩同心圆
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 用pygame做一个简单的python小游戏-七彩同心圆 玩法:每次点击鼠标时,会以鼠标为圆心,不断 ...
最新文章
- php base64尺寸,php实现base64编码
- Android面试真题解析火爆全网，薪资翻倍
- CTFshow 文件包含 web82
- include/caffe/common.cuh(9): error: function atomicAdd(double *, double) has already been defined
- .NET架构小技巧（5）——反射，架构人员法宝III
- linux内核更新 2.6.38,Linux内核 2.6.38版本预计到四月初完成
- mac 使用远程连接
- CentOS7 源码编译安装NodeJS 最新版本Shell脚本
- mybatis处理集合和循环数组问题
- C语言之局部变量全局变量变量存储方式
- JavaScript组成
- 【Java篇】 Java小游戏中加入背景音乐
- cad户型图练习_我的房子我做主 篇一：技多不压身—业内人士手把手教你学会用CAD绘制户型图...
- 如何用计算机算回归方程,简单线性回归方程与在线计算器_三贝计算网_23bei.com...
- Node.js meitulu图片批量下载爬虫1.01版
- 删除EFI系统分区（ESP）后Windows无法启动，重建引导分区并修复启动的过程
- 【2015NOIP模拟】【Ocd】【Mancity】【Captcha】10.31总结
- MySQL环境变量的配置mysqldump环境变量的配置
- 基于Byte Buddy的探针开发实践
- 达内终端端mysql命令_如何从Windows命令行启动MySQL