先看效果：
需求：
1、取到外箱下面的所有子包
2、 PSN和箱号一一对应
2024年12月27日
系列教程来了！毕业设计头大的伙伴，看过来了！基础薄弱的伙伴，需要视频教程的，可以留言，我整理后发大家！
做一个项目，首先是需求分析，将要做的东西说明白。
然后技术选型，根据需求选择合适的技术架构，小项目适宜采用简单快速的架构，不是什么项目都要搞的很复杂。
然后是开发环境安装，JDK、Eclipse、Tomcat、MySQL、Navicat(用来操作数据库)，这个专门拿出一章来讲讲。
2024年12月27日
又在别的地方嫖到了这个效果研究了亿下下，制作过程如下（超详细）：
2024年12月27日
Pure
这是Yahoo最新推出的一款CSS框架，它只有HTML和CSS，没有使用任何JavaScript语言。总大小只有4.4kb，但功能却非常丰富，支持响应式样式和各种导航、表格、表单、按钮、网格和排版。
Fries
Fries可以创建仿真Android界面的真实原型，它包含了最主要的一些模块，如标签、按钮、列表、spinners、操作条或表单。
Zoey
Zoey是一个非常强大的用于创建移动应用程序的HTML5-CSS3框架，它拥有的用户界面模块有组、列表、导航、按钮、网格和表单。
2024年12月27日
anillawebprojects里面是一些使用HTML5、CSS和JavaScript构建的小型项目。
2024年12月27日
随着互联网技术的不断发展和普及，网络与现实生活的结合越来越紧密，网站代表了企业和个人的形象，网页如同个人的社交名片，不可或缺。越来越多的人开始学习和制作网页，更多的企业和个人把自己的“家”搬到网上。
2024年12月27日
HTML5+CSS3是一种最新的网站网页布局方式。当我们打开某个网站，在网页的空白处点击右键查看网页源代码，那么我们网站之所以显示我们看到的版面，就是由于这些代码所决定的。
2024年12月27日
2019-10-19 14:16
10月19日，腾讯云与微信小程序团队联合举办的“小程序·云开发”技术峰会在北京召开。腾讯开源委员会核心成员郑苏波分享了大前端技术趋势的演进，从最原始的混沌年代到现在非常工业化开发时代的转变。
郑苏波表示，最早前端是从WWW开始的，那时候只有HTML+CSS，前端占比也非常低。前端有一个非常高大上的名词叫做“切图崽”，后来有了AJAX 这种异步能力，JavaScript乃至于前端在整个项目中的占比有所增加，也推出了很多的著名的前端框架。
2024年12月27日
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML+CSS 二级导航</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
a{
color: #000;
display: block;
width: 140px;
height: 40px;
text-align: center;
line-height: 40px;
text-decoration: none;
}
/* ******************************************* */
.nav{
width: 100%;
height: 40px;
background-color: skyblue;
}
.nav>ul{
width: 1200px;
height: 40px;
margin: 0 auto;
/* 这个背景色是方便大家伙看的 */
/* background-color: red; */
}
.nav>ul>li{
float: left;
width: 140px;
height: 40px;
/*让ol(二级导航根据他进行定位 所以li进行相对定位)*/
position: relative;
}
.nav>ul>li>ol{
background-color: skyblue;
position: absolute;
left: 0;
top: 40px;
display: none;/*初始值隐藏*/
}
/* 悬浮的效果 */
a:hover{
color: #fff;
background-color: deepskyblue;
}
.nav>ul>li:hover>a{
color: #fff;
background-color: deepskyblue;
}
.nav>ul>li:hover>ol{
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li>
<a href="">法师</a>
<ol>
<li><a href="">妲己</a></li>
<li><a href="">甄姬</a></li>
<li><a href="">安琪拉</a></li>
<li><a href="">张良</a></li>
</ol>
</li>
<li><a href="">战士</a></li>
<li>
<a href="">刺客</a>
<ol>
<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>
</ol>
</li>
<li><a href="">射手</a></li>
<li><a href="">坦克</a></li>
<li>
<a href="">辅助</a>
<ol>
<li><a href="">蔡文姬</a></li>
<li><a href="">鬼谷子</a></li>
<li><a href="">庄周</a></li>
</ol>
</li>
</ul>
</div>
<p>HTML+CSS 二级导航</p>
</body>
</html>