—— Alone � ?? 2023-03-11 13:48 采纳率: 40%
浏览 106
已结题

按以下要求完成一个简易移动端页面的布局要求：

6）使用HTML5的语义化标签
7）使用弹性盒子完成布局
8）要求适配所有移动端设备
9）精品推荐只显示4条数据即可
10)顶部的搜索框不随着滚动条的滚动而滚动
11）最终效果与效果图一致 不使用js
12）代码书写规范
实现的效果如下：

img

  • 写回答

3条回答 默认 最新

  •  赵先生. 2023-03-11 17:45
    关注

    以下是该移动端页面的示例代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端页面</title>
    <style>
        /* 弹性盒子布局 */
        body {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        header {
            flex: 0 0 auto;
            position: fixed;
            top: 0;
            background-color: #fff;
            width: 100%;
            z-index: 1;
        }
        main {
            flex: 1 1 auto;
            padding-top: 60px;
        }
        /* 精品推荐只显示4条数据 */
        .recommendations {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .recommendations > li {
            width: 48%;
            margin-bottom: 20px;
        }
        /* 顶部的搜索框不随着滚动条的滚动而滚动 */
        .search-container {
            position: relative;
        }
        .search-container input[type="search"] {
            width: 100%;
            padding: 10px;
            font-size: 16px;
        }
        .search-container button[type="submit"] {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            padding: 10px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <header>
        <div class="search-container">
            <input type="search" placeholder="Search...">
            <button type="submit">Go</button>
        </div>
    </header>
    <main>
        <ul class="recommendations">
            <li><img src="<https://via.placeholder.com/150>"></li>
            <li><img src="<https://via.placeholder.com/150>"></li>
            <li><img src="<https://via.placeholder.com/150>"></li>
            <li><img src="<https://via.placeholder.com/150>"></li>
        </ul>
    </main>
</body>
</html>
    评论

报告相同问题？

  • 简易移动端响应导航页面
    2023-02-18 18:22
    在本文中，我们将深入探讨如何使用HTML、CSS和JavaScript创建一个简易的移动端响应式导航页面。这个项目非常适合前端开发新手，因为它将引导你逐步了解这三个核心技术的基础知识。 首先，我们从HTML开始。HTML...
  • 手机移动端简易投票活动页面html模板
    2022-07-14 02:38
    【标题】中的“手机移动端简易投票活动页面html模板”指的是一个专为移动设备设计的、用于创建简单投票活动的HTML模板。这样的模板通常包含了必要的HTML、CSS和可能的JavaScript代码，使得用户无需深入编程知识就能...
  • 基于Vue.js的简易移动端电影院项目设计源码
    2025-02-20 04:28
    本项目是一个基于Vue.js框架构建的简易移动端电影院应用。Vue.js是一种构建用户界面的渐进式JavaScript框架，它通过组件化的开发方式，使得前端开发更加模块化，易于理解和维护。在本项目中，Vue.js不仅作为核心框架...
  • 移动端简易jquery轮播图.zip
    2019-07-11 09:29
    在移动端简易jQuery轮播图中，主要涉及以下几个关键知识点： 1. **DOM操作**：jQuery库提供了选择器（如$("#id")，$(".class")）来快速定位页面元素，并提供了操作DOM的方法，如`.html()`、`.append()`等，用于更新...
  • 前端一套代码多端通用，pc端、移动端适配方案
    2024-12-21 14:16
    m0_74823611的博客 超过1200px，设置左右内边距，此处提一点，如果你想固定页面的宽度，不随页面变化，那么需要写行内样式，因为lib-flexible插件的原因，页面内容宽度会随着页面宽度变化，但是行内样式不受影响。网上关于这方面的文章...
  • 风尚云网前端学习：手把手教你撸一个简易的HTML官网万能模板
    2024-11-22 22:57
    风尚云网的博客 今天，我们将通过风尚云网前端学习系列，手把手教你如何制作一个简易的HTML官网万能模板。这个模板将包含所有基本的页面元素，如导航栏、首页、关于我们、服务、团队、新闻和联系方式等，适合大多数小型至中型企业的...
  • 移动端简易投票系统
    2021-06-01 20:07
    【移动端简易投票系统】是一个专为手机和平板设备设计的应用，它集成了活动介绍、排行榜展示和详情查看功能，同时具备下拉滚动效果，提供用户友好的交互体验。这个系统的核心在于利用JavaScript（可能包括jQuery库）...
  • 简约APP展示下载网页模板-适配移动端&PC端-HTML网站源码.zip
    2024-03-31 13:26
    这套源代码文件具有极高的可定制性，您可以根据您的项目需求，对页面布局、颜色和内容进行个性化调整，轻松打造出独具特色的网站。同时，我们的代码结构清晰、注释详细，便于您学习和掌握HTML、CSS和JavaScript等...
  • html写前端手机页面,前端编写手机兼容页面（简易方式）
    2021-06-10 16:08
    凹凸曼喜欢小怪兽的博客 HTMLCSSHTML5CSS3前端编写手机兼容页面(简易方式) 这两天开始编写手机页面，作为类似官网一样的使用，因为实在手机端访问的web端，没有做过尝试，而且由于手机的种类很多，导致兼容性要求很高，在网上找了一些教程，...
  • html仿写简易淘宝购物页面
    2022-07-14 14:09
    在本项目中，“html仿写简易淘宝购物页面”是一个基于HTML、CSS和Bootstrap技术的实践教程，旨在帮助初学者或开发者了解如何构建一个类似于淘宝网的简单购物平台的前端界面。我们将深入探讨这三个核心技术，以及它们...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 3月19日
  • 赞助了问题酬金15元 3月11日
  • 创建了问题 3月11日