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

最新推荐文章于 2022-11-11 16:38:49 发布

浅过无痕，醉梦未央

最新推荐文章于 2022-11-11 16:38:49 发布

阅读量2.2k

点赞数 2

分类专栏： html 文章标签： html css html5 css3 定位

本文链接：https://blog.youkuaiyun.com/qq_40259528/article/details/110402869

版权

这篇博客分享了一个前端小白使用div+css完成的移动端项目。内容包括小滴服务和企业项目的代码展示，以及遇到的问题和解决方案。通过设置display: table和display: table-cell实现9宫格导航布局，同时探讨了position属性在absolute、relative和fixed定位中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

所用技术为简单的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