两个前端界面案例

最新推荐文章于 2023-05-17 11:04:32 发布

西柚.咻

最新推荐文章于 2023-05-17 11:04:32 发布

阅读量706

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_44788051/article/details/124737750

版权

本文分享了两个前端界面的实现案例，包括一个网页版的记作业本应用和一个基础的购物网站界面，涵盖了前端开发的基本元素和设计思路。

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

一、网页版记作业本

二、购物网站基础界面

一、记作业本

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>记作业本</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="robots" content="noindex, nofollow" />
  <meta name="googlebot" content="noindex, nofollow" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>

<body>
  <!-- 主体区域 -->
  <section id="todoapp">  
    <!-- 输入框 -->
    <header class="header">
      <h1>记作业本</h1>
      <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
        class="new-todo" />
    </header>
    <!-- 列表区域 -->
    <section class="main">
      <ul class="todo-list">
        <!-- 列表元素的罗列，加了索引和元素 -->
        <li class="todo" v-for="(item,index) in list">
          <div class="view">
            <span class="index">{
  { index+1 }}.</span>
            <label>{
  { item }}</label>
            <!-- 删除的小图标 -->
            <button class="destroy" @click="remove(index)"></button>
          </div>
        </li>
      </ul>
    </section>
    <!-- 统计list.length和清空 ,隐藏-->
    <footer class="footer" v-show="list.length!=0">
      <span class="todo-count" v-if="list.length!=0">
        <strong>{
  { list.length }}</strong> items left
      </span>
      <button v-show="list.length!=0" class="clear-completed" @click="clear">
        Clear
      </button>
    </footer>
  </section>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></s

最低0.47元/天解锁文章