前端项目实践：基于HTML+CSS+jQuery，完成烘焙坊官网的设计

最新推荐文章于 2024-04-20 23:28:19 发布

璀璨子

最新推荐文章于 2024-04-20 23:28:19 发布

阅读量1.6k

点赞数 3

分类专栏：前端开发 JS库 jQuery 文章标签： javascript jquery css html

本文链接：https://blog.csdn.net/weixin_45222169/article/details/104670789

版权

学习前端有一段时间了，自己做了一个烘焙坊的登录页跳转到官方网站页面的项目，主要借鉴了好利来官网的设计，下面直接附上代码：

(1) HTML 登录页代码块

<!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>CakeBakery</title>
     <link rel="stylesheet" style="text/css" media="screen" href="./screen.css">
     <link rel="stylesheet" style="text/css" href="./style.css">
  </head>
  <body>
    <div class="background">
     <h1>CakeBakery</h1>
       <div class="form">
         <form action="file:///C:/Users/Zerot/Desktop/Web/cake/website.html" method="post">
           <label><b>用户：</b><input type="text" name="name" placeholder="字母、数字或下划线组成"></label><br/><br/>
           <label><b>密码：</b><input type="password" name="password" placeholder="6位数字"></label><br/><br/>
           <button type="submit">登录</button>
         </form>
       </div>
    <div>
  </body>
</html>

(2) HTML官网代码块

<!DOCTYPE html>
<html>
  <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>CakeBakery官方网站</title>
     <link rel="stylesheet" style="text/css" href="./style.css">
     <script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
     <script type="text/javascript" src="./slide.js"></script>
  </head>
  <body>
    <div class="header_con">
        <div class="welcome">
            欢迎来到CakeBakery~
        </div>
        <div class="user">
            zym，您好！
        </div>
    </div>


    <div class="baner">
         <ul>
            <li class="navmenu">
                <a href="#">
                    <span>Home Page</span><br>
                    <span>首页</span>
                </a>
                <span id="line"><b>|</b></span>
            </li>
            <li class="navmenu">
                <a href="#">
                    <span>Wagashi</span><br>
                    <span>零食糕点</span>
                </a>
                <span id="line">

最低0.47元/天解锁文章

璀璨子

关注

3
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
前端项目实践：基于HTML+CSS+jQuery，完成烘焙坊官网的设计

学习前端有一段时间了，自己做了一个烘焙坊的登录页跳转到官方网站页面的项目，主要借鉴了好利来官网的设计，下面直接附上代码：(1) HTML 登录页代码块<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content...
复制链接

扫一扫