欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-07-14 10:18:53
...

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

所用技术为简单的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，操作更方便哦

相关标签： 小滴服务 html css html5 css3 定位

上一篇： 一个小白的HTML解析笔记

下一篇： 小白的边学边写，一个基于laravel的APP接口【API】（三）

推荐阅读