在这段时期，屯菜购物平台成了热门网站，解决了最后一公里的送货问题。今天分享的就是一个购物平台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="image/logo.png">
</div>
2、处于美观考虑，需要设置相关的css
比如图片距离上方和左方的位置，有留白的区域会看着舒服。
.header .logo .logopng{
float:left;
/*让logo的图片向左浮动*/
position:relative;
max-width:150px;
max-height:150px;
/*等比例缩小logo图片*/
}
补充：
类的选择器是.开头，并且每一步都不能跳过
而id选择器由于其唯一性，可以直接用#ID名来选择。
比如上方的logopng如果不是class类名，而是id名。那么在css中可以改为。
#logopng{
float:left;
/*让logo的图片向左浮动*/
position:relative;
max-width:150px;
max-height:150px;
/*等比例缩小logo图片*/
}
（二）菜单栏块
1、基础的HTML代码
<div class="menu" onmouseleave="show_menu1()">
<div class="menu-title" onclick="show_menu0()">
<a href="#">商品分类</a>
</div>
<!-- href=#代表链接到当前页面但不刷新。-->
<ul id="menu0">
<li>蔬菜瓜果</li>
<li>米面油盐</li>
<li>日用百货</li>
<li>肉类蛋类</li>
</ul>
</div>
前两个div标签中的on开头的语句，是涉及到js的动态交互。第一句是鼠标移开menu模块后的状态。而第二句是鼠标点击商品分类文字时的状态。
2、css代码
.header .menu ul{
display: none;
/*将列表中内容隐藏*/
}
.header .menu ul li{
margin-top: 15px;
/*设置每个子列表之间的距离*/
list-style: none;
/*将列表前面的小圆圈去掉*/
text-align: center;
/*将列表中的文字也设置在中间*/
}
.header .menu{
float:left;
position:relative;
margin-top:12px;
margin-left:60px;
}
.header .menu .menu-title{
border-bottom: aqua 2px solid;
//设置商品分类下划线的颜色、宽度。
padding-bottom: 10px;
width: 75px;
text-align: center;
}
a{
text-decoration: none;
/*将超链接的下划线去掉*/
}
补充：
如果想要让菜单相对于logo的位置不变
必须将logo块和菜单块的浮动都为相对
3、js代码
show_menu0
鼠标点击商品分类时会跳出子菜单
点击第二次时，会隐藏子菜单
show_menu1
鼠标移出menu菜单时隐藏子菜单
var flag = true;
function show_menu0(){
var menu0 = document.getElementById("menu0");
// 获取到列表的内容
if(flag){
menu0.style.display="block";
flag=false;
}else{
menu0.style.display="none";
flag=true}
}
function show_menu1(){
var menu1=document.getElementById("menu0");
menu1.style.display="none";
flag=true;
}
（三）登录/注册列表
1、基础的HTML代码
<div class="auth">
<ul id="author">
<li><a href="#">注册</a></li>
<li><a href="#">登录</a></li>
</ul>
</div>
2、css代码
列表默认的是竖向排列。
如果要将列表从竖向排列转向横向排列
那么就单独设置li的关系
浮动方式为左侧或者右侧
.header .auth ul{
float:right;
}
.header .auth ul li{
float:right;
margin-right: 30px;
/*设置每个子列表之间的距离*/
margin-top: 18px;
list-style: none;
/*将列表前面的小圆圈去掉*/
}
web快捷键合集
1、自动生成HTML框架
输入：
html:5再按下tab键
2、自动生成成对标签的方法
以
为例直接输入标签名字div
然后点击tab键
温馨提示💓
如果在运用时遇到问题，可以直接关注并私信我，发送报错问题，我看到后会第一时间回复~