HTML+BootStrap实现蛋糕商城Demo

原文链接：HTML+BootStrap实现蛋糕商城Demo – 每天进步一点点

0.背景

本文主要是实现《Java Web程序设计任务教程》第2版第一章中的任务：蛋糕商城。

技术：HTML+BootStrap

工具：vscode

1.创建项目

我们在电脑D盘下创建一个文件夹，名称就叫cake，使用VSCode打开这个文件夹，然后创建第一个文件，index.html，写下基础代码框架

可以把BootStrap下载下下来，也可以使用在线版本

简介 · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网

CDN地址：

参考代码如下：

<!DOCTYPE html>

<head>

</head>

<body>

这是body

</body>

</html>

基础效果如下：

2.网页跳转

我们在网站中经常使用页面跳转功能，原生的HTML一般使用网页的堆叠的形式。

比如我当前创建index.html，我如果创建一个header.html，一般情况下需要把index.html里面的内容全部复制到header.html，然后再编写header.html里面的具体内容，类似于“增量开发”，这种方式比较费时费力，目前想最新的vue、angular等前端开发框架，早就可以实现“组件式”开发了。

本文为了演示，使用原始的方式进行操作。

3.创建header.html

我们在项目文件夹中创建header.html文件，参考代码如下：

<!DOCTYPE html>

<head>

</head>

<body>

</button>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

</nav>

</body>

</html>

效果如下：

使用样式优化一下，加入样式、首页欢迎词、下拉框和图标

<!DOCTYPE html>

<head>

<style>

.navbar-custom {

-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; line-height: inherit; font-size: 1.25em; font-family: inherit;"> #000; /* 导航栏背景为黑色 */

}

.navbar-custom .navbar-brand,

.navbar-custom .nav-link {

color: #fff; /* 字体颜色为白色 */

font-size: 18px; /* 加大字体字号 */

}

.navbar-custom .nav-link:hover {

color: #ccc; /* 鼠标悬停时字体颜色变浅 */

}

.navbar-custom .icons {

margin-left: auto; /* 将图标推到最右侧 */

}

.navbar-custom .icons i {

font-size: 24px; /* 图标变大 */

font-weight: bold; /* 图标加粗 */

}

</style>

</head>

<body>

</button>

</li>

商品分类

</a>

</ul>

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

</nav>

<h1>欢迎来到蛋糕商城</h1>

<p>这里有各种美味的蛋糕，欢迎选购！</p>

</div>

</body>

</html>

效果如下：

4.创建footer

footer主要用于描述友情链接于作者署名内容，一般放在页面的底部。如果单独写一个footer.html，那么它的代码大概如下：

<!DOCTYPE html>

<head>

<style>

footer {

position: fixed; /* 固定定位 */

bottom: 0; /* 固定在页面底部 */

width: 100%; /* 宽度占满整个页面 */

-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; line-height: inherit; font-size: 1.25em; font-family: inherit; color: rgb(139, 233, 253);">rgba(0, 0, 0, 0.2); /* 页脚背景色 */

text-align: center;

padding: 10px 0;

}

</style>

</head>

<body>

</div>

</footer>

</body>

</html>

效果如下：

我们把footer这段代码整合到header中，这样就是一个比较完整的页面了。

参考代码：

<!DOCTYPE html>

<head>

<style>

.navbar-custom {

-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; line-height: inherit; font-size: 1.25em; font-family: inherit;"> #000; /* 导航栏背景为黑色 */

}

.navbar-custom .navbar-brand,

.navbar-custom .nav-link {

color: #fff; /* 字体颜色为白色 */

font-size: 18px; /* 加大字体字号 */

}

.navbar-custom .nav-link:hover {

color: #ccc; /* 鼠标悬停时字体颜色变浅 */

}

.navbar-custom .icons {

margin-left: auto; /* 将图标推到最右侧 */

}

.navbar-custom .icons i {

font-size: 24px; /* 图标变大 */

font-weight: bold; /* 图标加粗 */

}

footer {

position: fixed; /* 固定定位 */

bottom: 0; /* 固定在页面底部 */

width: 100%; /* 宽度占满整个页面 */

text-align: center;

padding: 10px 0;

}

</style>

</head>

<body>

</button>

</li>

商品分类

</a>

</ul>

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

</nav>

<h1>欢迎来到蛋糕商城</h1>

<p>这里有各种美味的蛋糕，欢迎选购！</p>

</div>

</div>

</footer>

</body>

</html>

这样的话，基础骨架就搭建完了，下面开始搭建其他页面。

5.登录页面login.html

我们创建login.html文件，把header.html里面的代码全部复制过来(删掉欢迎内容)，然后编写login.html的主体内容：

<!DOCTYPE html>

<head>

<style>

.navbar-custom {

-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; line-height: inherit; font-size: 1.25em; font-family: inherit;"> #000; /* 导航栏背景为黑色 */

}

.navbar-custom .navbar-brand,

.navbar-custom .nav-link {

color: #fff; /* 字体颜色为白色 */

font-size: 18px; /* 加大字体字号 */

}

.navbar-custom .nav-link:hover {

color: #ccc; /* 鼠标悬停时字体颜色变浅 */

}

.navbar-custom .icons {

margin-left: auto; /* 将图标推到最右侧 */

}

.navbar-custom .icons i {

font-size: 24px; /* 图标变大 */

font-weight: bold; /* 图标加粗 */

}

footer {

position: fixed; /* 固定定位 */

bottom: 0; /* 固定在页面底部 */

width: 100%; /* 宽度占满整个页面 */

text-align: center;

padding: 10px 0;

}

.login-container {

max-width: 400px; /* 表单最大宽度 */

margin: 100px auto; /* 居中 */

padding: 20px;

-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; line-height: inherit; font-size: 1.25em; font-family: inherit;"> #fff; /* 表单背景色 */

border-radius: 8px; /* 圆角 */

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影 */

}

.form-icon {

font-size: 24px; /* 图标大小 */

color: #6c757d; /* 图标颜色 */

}

.form-control {

padding-left: 40px; /* 输入框左边距 */

}

.btn-login {

width: 100%; /* 按钮宽度 */

-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; line-height: inherit; font-size: 1.25em; font-family: inherit;"> #007bff; /* 按钮背景色 */

color: #fff; /* 按钮文字颜色 */

}

.btn-login:hover {

-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; line-height: inherit; font-size: 1.25em; font-family: inherit;"> #0056b3; /* 按钮悬停背景色 */

}

</style>

</head>

<body>

</button>

</li>

商品分类

</a>

</ul>

</li>

</li>

</li>

</li>

</li>

</ul>

</div>

</nav>

<form>

</div>

</div>

</form>

</div>

</div>

</footer>

</body>

</html>

效果如下：

测试跳转效果：

6.登录页面register.html

我们创建register.html文件，把header.html里面的代码全部复制过来(删掉欢迎内容)，然后编写register.html的主体内容：

<!DOCTYPE html>

<head>

<style>

.navbar-custom {

-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; line-height: inherit; font-size: 1.25em; font-family: inherit;"> #000; /* 导航栏背景为黑色 */

}

.navbar-custom .navbar-brand,

.navbar-custom .nav-link {

color: #fff; /* 字体颜色为白色 */

font-size: 18px; /* 加大字体字号 */

}

.navbar-custom .nav-link:hover {

color: #ccc; /* 鼠标悬停时字体颜色变浅 */

}

.navbar-custom .icons {

margin-left: auto; /* 将图标推到最右侧 */

}

.navbar-custom .icons i {

font-size: 24px; /* 图标变大 */

font-weight: bold; /* 图标加粗 */

}

footer {

position: fixed; /* 固定定位 */

bottom: 0; /* 固定在页面底部 */

width: 100%; /* 宽度占满整个页面 */

text-align: center;

padding: 10px 0;

}

.register-container {

max-width: 500px; /* 表单最大宽度 */

margin: 50px auto; /* 居中 */

padding: 20px;

-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; line-height: inherit; font-size: 1.25em; font-family: inherit;"> #fff; /* 表单背景色 */

border-radius: 8px; /* 圆角 */

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影 */

}

.form-icon {

font-size: 24px; /* 图标大小 */

color: #6c757d; /* 图标颜色 */

}

.form-control {

padding-left: 40px; /* 输入框左边距 */

}

.btn-register {

width: 100%; /* 按钮宽度 */

-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; line-height: inherit; font-size: 1.25em; font-family: inherit;"> #28a745; /* 按钮背景色 */

color: #fff; /* 按钮文字颜色 */

}

.btn-register:hover {

-webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; line-height: inherit; font-size: 1.25em; font-family: inherit;"> #218838; /* 按钮悬停背景色 */

}

</style>

</head>

<body>