我的个人主页地址： http://zhangminghui.iok.la/
GitHub: https://github.com/18121259693/welcome.git
效果图
主要代码：
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>张明辉的个人主页</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<section id="banner">
<div class="inner split">
<section>
<h2>欢迎来到我的个人主页</h2>
</section>
<section>
<p>这是一个使用安卓手机安装虚拟机执行的html5静态页面。通过花生壳内网穿透到英特网上。</p>
<ul class="actions">
<li><a href="http://leanote.com/blog/post/5a7123b6ab644112a600056d" target="_blank" class="button special">查看教程</a></li>
</ul>
</section>
</div>
</section>
<!-- One
<section id="one" class="wrapper">
<div class="inner split">
<section>
<h2>Magna feugiat adipiscing</h2>
<p>Lorem ipsum nisl sed cursus magna et amet veroeros. Sed phasellus aliquam et tempus lorem feugiat adipiscing lorem. Morbi pharetra vitae felis placerat pharetra. Nulla risus orci, dapibus id malesuada et nec, malesuada quis orci. Pellentesque eget consequat.</p>
<ul class="actions">
<li><a href="#" class="button alt">Learn more</a></li>
</ul>
</section>
<section>
<ul class="checklist">
<li>Ipsum nisl sed cursus magna</li>
<li>Amet veroeros sed aliquam consequat</li>
<li>Tempus lorem adipiscing et lorem</li>
<li>Morbi pharetra vitae felis placerat</li>
<li>Pharetra nulla risus orci dapibus</li>
</ul>
</section>
</div>
</section>
-->
<!-- Two -->
<section id="two" class="wrapper style2 alt">
<div class="inner">
<div class="spotlight">
<div class="image">
<img src="http://i2.bvimg.com/630857/84ee4ae77a16ae43.jpg" alt="" />
</div>
<div class="content">
<h3>我的毕业设计 </h3>
<p>OA 企业后台管理页面<br>页面尚在开发中，可以点击查看详情，预览Amaze模板</p>
<ul class="actions">
<li><a href="oaproject/admin-index.html" target="_blank" class="button alt">查看详情</a></li>
</ul>
</div>
</div>
<div class="spotlight">
<div class="image">
<img src="http://i1.bvimg.com/630857/551a92c5042b09ab.jpg" alt="" />
</div>
<div class="content">
<h3>我的学习笔记</h3>
<p>蚂蚁笔记</p>
<ul class="actions">
<li><a href="http://blog.leanote.com/18121259693" target="_blank" class="button alt">查看详情</a></li>
</ul>
</div>
</div>
<div class="spotlight">
<div class="image">
<img src="http://i1.bvimg.com/630857/465e5f365ee8168c.jpg" alt="" />
</div>
<div class="content">
<h3>我的个人简历</h3>
<p>JAVA工作及学习的经历</p>
<ul class="actions">
<li><a href="#" onclick="showMsg()" class="button alt">查看详情</a></li>
</ul>
</div>
</div>
<div class="spotlight">
<div class="image">
<img src="http://i2.bvimg.com/630857/73b0fc47e61cbe27.jpg" alt="" />
</div>
<div class="content">
<h3>本站的源代码</h3>
<p>本站是一个H5静态页面，留言板是通过ajax post到jsp实现写入数据库操作</p>
<ul class="actions">
<li><a href="#" onclick="showMsg()" class="button alt">查看详情</a></li>
</ul>
</div>
</div>
<!--
<ul class="actions special">
<li><a href="#" class="button alt">Ipsum magna tempus</a></li>
</ul>
-->
</div>
</section>
<!-- Contact -->
<section id="contact" class="wrapper">
<div class="inner split">
<!---->
<section>
<h2>留言板</h2>
<p>有什么想对我说的呢，可以在这里留言哈，有空了我就会查看留言！</p>
<div class="row uniform">
<div class="6u 12u$(xsmall)">
<input id="name" name="name" placeholder="昵称" type="text">
</div>
<div class="6u$ 12u$(xsmall)">
<input id="phone" name="phone" placeholder="手机号码" type="phone">
</div>
<div class="12u$">
<textarea id="message" name="message" placeholder="想要留言的内容" rows="4"></textarea>
</div>
</div>
<ul class="actions">
<li><button class="alt" style="margin-top: 20px" onclick="sendMsg()">发送留言</button></li>
</ul>
</section>
<section>
<h2>联系方式</h2>
<ul class="contact">
<li class="fa fa-envelope" aria-hidden="true"><a href="#">361186482@qq.com</a></li><br/>
<li class="fa fa-qq" aria-hidden="true">361186482</a></li><br/>
<li class="fa fa-weixin" aria-hidden="true">qq361186482</a></li><br/>
<li class="fa fa-pencil-square-o" aria-hidden="true"><a href="#">http://blog.leanote.com/18121259693</a></li><br/>
<li class="fa fa-github" aria-hidden="true"><a href="#">https://github.com/18121259693</a></li><br/>
</ul>
</section>
</div>
</section>
<script src="https://use.fontawesome.com/3d696b33f3.js"></script>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function sendMsg(){
var name = $("#name").val();
var phone = $("#phone").val();
var message = $("#message").val();
if(!name){alert("昵称还没写哟");}
else if(!phone){alert("手机号还没写哟");}
else if(!message){alert("留言还没写哟");}
else if(message.length > 1000 ){alert("不要超过1000字，不然服务器受不了啦~\r\n当前字数:"+message.length);}
else{
$.post("save.jsp", { "name": name, "phone": phone , "message": message } );
var name = $("#name").val("");
var phone = $("#phone").val("");
var message = $("#message").val("");
alert("已经留言成功啦~");
}
}
function showMsg(){
alert("我还没弄完呢！还在开发当中。。。。");
}
</script>
</body>
</html>save.jsp （需要jdbc驱动）
<%@page contentType="text/html;charset=UTF-8"%>
<%@ page import="com.mysql.jdbc.Driver"%>
<%@ page import="java.sql.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; UTF-8">
<title>save</title>
</head>
<body>
<%
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
try {
//参数
String name = (String) request.getParameter("name");
String phone = (String) request.getParameter("phone");
String message = (String) request.getParameter("message");
String ip = request.getRemoteAddr();
//数据库
String sql = "INSERT INTO message (name, phone, mssage, ip) VALUES ('" + name + "', '" + phone + "', '"
+ message + "', '" + ip + "')";
String url = "jdbc:mysql://localhost/你的表名?useSSL=false&user=你的用户名&password=你的密码";
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection conn = DriverManager.getConnection(url);
PreparedStatement psmt = conn.prepareStatement(sql);
psmt.executeUpdate();
if(psmt != null) psmt.close();
if(conn != null) conn.close();
} catch (Exception e) {
//e.printstacktrace();
}
%>
</body>
</html>
