一、大型企业项目开发的流程：
1、新建一个JavaWeb项目
2、建立静态页面
3、编写后台业务逻辑
4、连接数据库（打通前后台）实现动态话化
5、测试（内测<黑盒、白盒>，公测<目标用户参与测试或客户参与测试>），即找Bug
6、上线试运行，即改Bug
7、正式上线运营（根据用户反馈和市场需求变化，不断迭代更新产品），即改版
8、维护
二、设置div方块的位置：
使用margin
margin: 上 右 下 左;
margin: 垂直 水平;
margin: 全部;
三、设置div里的文字位置：
text-align:canter;设置左右距离
line-height:40px:设置上下距离
font-size:12px;设置字体大小，注意：大小值要为偶数值，不能是13px、15px;
四、代码优化：
（1）颜色代码优化：#FFFFFF等同于#FFF（即两个相同的变为一个）
五、兼容浏览器样式
*{
margin: 0px;
padding: 0px;
}
使容器贴到边。
六、引入高德地图API接口：
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=您申请的key值"></script>
七、界面代码：
<!DOCTYPE html>
<html>
<head>
<!--声明当前页面的编码集-->
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
<!--声明当前页面三要素-->
<!--百度搜索的关键词-->
<title>ACE抢红包系统</title>
<meta name="keywords" content="关键词,关键词" />
<!--百度快照的内容-->
<meta name="description" content="" />
<!--js/css-->
<!--css:层叠样式表-->
<style type="text/css">
/*兼容浏览器样式*/
* {
margin: 0px;
padding: 0px;
}
body {
background-image: url("img/bg.jpg");
font-size: 12px;
font-family: "微软雅黑";
color: #666;
}
img {
border: none;
}
/*phone start*/
.phone {
width: 322px;
margin: 50px auto;
}
.phone .p_top {
height: 42px;
background-image: url("img/phone_top.png");
}
.phone .p_info {
height: 20px;
background-image: url(img/phonetitle1.gif);
}
.phone .p_title {
height: 40px;
background-color: black;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
text-align: center;
line-height: 40px;
font-size: 20px;
}
.phone .p_con {
height: 480px;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
.phone .p_bottom {
height: 47px;
background-image: url(img/phone_bottom.png);
}
/*end phone*/
.showbox {
width: 170px;
height: 170px;
background-color: white;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<!--phone start-->
<div class="phone">
<div class="p_top"></div>
<div class="p_info"></div>
<div class="p_title">ACE新婚大红包</div>
<div class="p_con" id="myMap"></div>
<div class="p_bottom"></div>
</div>
<!--end phone-->
<!-- 表单 -->
<form action="alipay.jsp" method="post" id="alipay_ACE">
<input type="text" name="orderId" id="orderId" />
<input type="text" name="orderName" id="orderName" />
<input type="text" name="orderMoney" id="orderMoney" />
<input type="text" name="orderDesc" id="orderDesc" />
<input type="text" name="orderUrl" id="orderUrl" />
</form>
<!--引入高德地图API接口-->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=您申请的key值"></script>
<!--调用API接口-->
<script type="text/javascript">
//初始化地图对象，加载地图
var map = new AMap.Map("myMap", {
resizeEnable: true
});
var lnglats = [
[116.368904, 39.923423],
[116.382122, 39.921176],
[116.387271, 39.922501],
[116.398258, 39.914600]
];
var infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -30)
});
for(var i = 0, marker; i < lnglats.length; i++) {
var marker = new AMap.Marker({
position: lnglats[i],
map: map
});
marker.content = '<div class="showbox">' +
' <a href="alipay.jsp" onclick="buy(this;)" title="ACE大红包（'+(i+1)+'）" price="'+(i+1)+'">' +
' <img src="img/hongbao.jpg" alt="ACE大红包" width="170" height="170"/>' +
' </a>' +
' </div>';
marker.on('click', markerClick);
marker.emit('click', {
target: marker
});
}
function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
}
map.setFitView();
//点击红包支付
function buy(obj){
var name=$(obj).attr("title");
var price=$(obj).attr("price");
$("#orderId").val("ACE"+Math.ceil(Math.random()*100000000));//订单随机数生成
$("#orderName").val(name);
$("#orderMoney").val(price);
$("#orderDesc").val("这是ACE即将新婚发送的大红包！非常感谢亲爱的您！")
$("#orderUrl").val("https://www.baidu.com/");
decument.getElementById("alipay_ACE").submit();
}
</script>
</body>
</html>
八、界面：
