html+css网页设计 淘宝登录页面 大学生HTML5期末作业 Web前端网页制作 html5+css3+js

网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

获取源码

1，访问该网站 https://download.csdn.net/download/qq_42431718/89652003
2，点击上方下载

目录1

在这里插入图片描述

项目视频

html+css网页设计 淘宝登录页面

页面1

在这里插入图片描述

代码展示

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="keywo rds" content="淘宝" />
    <meta name="description" content="淘宝是一个大型的购物网站" />
    <title>淘宝网-淘！我喜欢</title>
    <link type="text/css" rel="stylesheet" href="css/base.css" />
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <style type="text/css">
      .userbox .delete {
        width: 16px;
        height: 16px;
        border-radius: 10px;
        background-color: #000;
        color: #fff;
        text-align: center;
        font-size: 9.5px;
        font-weight: bold;
        left: 276px;
      }
    </style>
  </head>

  <body>
    <script>
      $(document).ready(function () {
        $("#username").focus();
      });
    </script>

    <div class="taobaoBox">
      <!--header-->
      <div class="header">
        <div class="headerContainer">
          <a href="#"><img src="images/taobaologo.png" /></a>
          <a href="#" class="advice"><img src="images/message.png" />"登录界面"改进建议</a>
        </div>
      </div>

      <!--ad-->
      <div class="ad">
        <div class="box">
          <div class="container">
            <div class="tips1">密码登录</div>
            <div class="form">
              <div class="userbox">
                <label for="username"></label>
                <input type="text" name="username" id="username" placeholder="会员名/手机号/邮箱" />
                <span class="delete">x</span>
                <!--  <span class="usertips" id="username">会员名/邮箱/手机号</span> -->
              </div>

              <div class="passwdbox">
                <label for="password"></label>
                <input type="password" name="password" id="passwd" />
              </div>

              <div class="submitbox">
                <button type="submit" name="submit">登录</button>
              </div>

              <div class="loginbox">
                <a href="#" class="sina"><img src="images/weibo.png" />&nbsp;微博登录</a>
                <a href="#" class="alipay"><img src="images/alipay.png" />&nbsp;支付宝登录</a>
              </div>
              <div class="forget-register">
                <a href="#" class="register">免费注册</a>
                <a href="#" class="forget">忘记密码</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--footer-->
      <div class="footer">
        <div class="footerContainer">
          <ul class="contactCompany">
            <li><a href="#">阿里巴巴集团</a></li>
            <li><a href="#">阿里巴巴国际站</a></li>
            <li><a href="#">阿里巴巴中国站</a></li>
            <li><a href="#">全球速卖通</a></li>
            <li><a href="#">淘宝网</a></li>
            <li><a href="#">天猫</a></li>
            <li><a href="#">聚划算</a></li>
            <li><a href="#">一淘</a></li>
            <li><a href="#">阿里妈妈</a></li>
            <li><a href="#">淘宝旅行</a></li>
            <li><a href="#">虾米</a></li>
            <li><a href="#">阿里云计算</a></li>
            <li><a href="#">云OS</a></li>
            <li><a href="#">万网</a></li>
            <li><a href="#">支付宝</a></li>
            <li><a href="#">来往</a></li>
          </ul>
          <ul class="explain">
            <li><a href="#">关于淘宝</a></li>
            <li><a href="#">合作伙伴</a></li>
            <li><a href="#">营销中心</a></li>
            <li><a href="#">廉正举报</a></li>
            <li><a href="#">联系客服</a></li>
            <li><a href="#">开放平台</a></li>
            <li><a href="#">诚征英才</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">网站地图</a></li>
            <li><a href="#">法律声明</a></li>
            <li class="copy">&copy;&nbsp;2017 Taobao.com 版权所有</li>
          </ul>
          <ul class="admit">
            <li class="admit1">&nbsp;网络文化经营许可证：<a href="#">文网文[2010]040号</a></li>
            <li class="admit2">增值电信业务经营许可证：浙B2-20080224-1</li>
            <li class="admit2">信息网络传播视听节目许可证：1109364号</li>
          </ul>
          <div class="footerimage">
            <a href="#"><img src="images/footer.gif" /></a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

总结

设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性；

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!

更多优质博客文章、网页模板点击以下链接查阅：

html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客

关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型:

在这里插入图片描述

# html # css # 前端
Logo
快递鸟一站式物流API解决方案

电商企业物流数字化转型必备！快递鸟 API 接口，72 小时快速完成物流系统集成。全流程实战1V1指导，营造开放的API技术生态圈。

更多推荐

苹方字体跨平台解决方案：告别Windows与Mac的字体显示鸿沟

在Web开发中，我们经常面临一个令人头疼的问题：精心设计的页面在Mac上优雅精致，到了Windows设备上却因字体差异而显得平庸。今天，我们为您介绍一个专业的解决方案——PingFangSC字体包，它让苹方字体的优雅设计能够在所有平台上完美呈现。这个开源项目提供了完整的6种字重，支持ttf和woff2双格式，真正实现了跨平台字体统一。## 为什么跨平台字体一致性如此重要？🔍现代Web应用

avatar 快递鸟社区

Ascend-SACT/Mineru-Optimization后端引擎对比：Pipeline、Hybrid与VLM模式如何选择？

Ascend-SACT/Mineru-Optimization提供三种强大的后端引擎模式——Pipeline、Hybrid和VLM，帮助用户高效处理各类文档。本文将深入对比这三种模式的核心特性、性能表现和适用场景，助你快速找到最适合的解决方案。## 三大引擎模式核心特性解析 🚀### Pipeline模式：传统OCR流程的极致优化**核心架构**：采用模块化设计，包含版面分析、OCR、

avatar 快递鸟社区

如何永久保存微信聊天记录？WeChatMsg免费开源工具终极指南

你是否曾担心更换手机后，那些珍贵的微信对话会永远消失？与家人的温馨聊天、重要的工作沟通、朋友间的难忘回忆，这些数字记忆都值得被永久珍藏。**WeChatMsg**是一款完全免费的开源工具，专门用于**微信聊天记录永久保存和深度分析**，让你的每一段对话都能成为永恒的数字资产。## 🔍 你的聊天记录正在面临什么风险？微信已经成为我们日常生活中不可或缺的沟通工具，但官方并未提供完整的聊天记录

avatar 快递鸟社区