用idea从0到1创建一个超市购物平台的javaweb项目【详细版教程上】

最新推荐文章于 2024-09-07 14:30:54 发布

顾七a

最新推荐文章于 2024-09-07 14:30:54 发布

阅读量4.5k

点赞数 5

分类专栏： JavaWeb 文章标签： intellij-idea java ide

本文链接：https://blog.csdn.net/mengxiang_/article/details/126818904

版权

本教程详细介绍了如何使用IntelliJ IDEA从零开始创建一个超市购物平台的javaweb项目。内容涵盖前期准备，包括下载安装IDEA，创建项目文件结构，关联HTML、CSS和JS文件；接着讲解了页面头部的设计，包括logo、菜单栏和登录/注册列表的HTML、CSS和JS实现；最后分享了一些IDEA的快捷键技巧。

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

在这段时期，屯菜购物平台成了热门网站，解决了最后一公里的送货问题。今天分享的就是一个购物平台web界面的编写过程。
由于篇幅原因，今天先分享页眉部分的代码。

一、前期准备

1、下载并安装好idea程序

2、创建web工程必备的文件夹以及文件

image、css，js三个文件夹、index.html、css文件、js文件。

3、用idea打开这个项目

file–open选择你所创建的文件夹
在这里插入图片描述
图中的.didea文件夹及内容都是系统自动创建的。

4、在index.html文件中关联上css和js文件

如果想直接让系统给出index的框架，那么可以在idea中点击新建HTML
在这里插入图片描述
代码为：（可直接复制）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">//关联上css
    <script type="text/javascript" src="js/first.js"></script>//关联上js
</head>
<body>
buy some food.
</body>
</html>

5、运行程序，在浏览器上显示出

在这里插入图片描述

二、页面头部的基本信息

或者称为页眉区
在这里插入图片描述
页眉区有3个部分，一个是网站logo图片，一个是商品分类的菜单栏，还有一个就是登录/注册部分。这三部分的区分就在于div块。

（一）网站logo块

1、只需要将logo图片关联进div块即可

<div class="logo">
    <img class="logopng" src

最低0.47元/天解锁文章