前几天在本地虚拟服务器环境下使用jQuery制作了一个个人博客，实现功能如下：
代码在Github：个人博客
截图如下：
个人博客
html引入css和js代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>乘风破浪-努力做前端</title>
<link rel="shotcut icon" href="img/icon.png">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!-- 顶部 -->
<header id="header">
<div class="container">
<a href="index.html"><img class="logo" src="img/logo.png" alt="乘风破浪" /></a>
<div class="header_right">
<a href="javascript:void(0)" class="regbtn">注册</a>
<a href="javascript:void(0)" class="member">用户</a>
|
<a href="javascript:void(0)" class="loginbtn">登录</a>
<a href="javascript:void(0)" class="logout">退出</a>
<span class="info"></span>
<div class="center">个人中心
<ul class="center_ul">
<li><a href="javascript:void(0)" class="issuebtn">发文</a></li>
<li><a href="javascript:void(0)" class="skinbtn">换肤</a></li>
<li><a href="###">设置</a></li>
<li><a href="###">帮助</a></li>
</ul>
</div>
</div>
</div>
</header>
<!-- /顶部 -->
<!-- 交互中弹窗 -->
<div id="loading">数据交互中...</div>
<!-- /交互中弹窗 -->
<!-- 错误弹窗 -->
<div id="error">请登录后操作...</div>
<!-- /错误弹窗 -->
<!-- 底部 -->
<footer id="footer">
<div class="container">
<!-- 备案信息 -->
<span>© 2016 guochengfeng 浙ICP备12345678号-1</span>
<span>guochengfeng.cn 京ICP备87654321号-2 京公安网备110110110110-2</span>
<!-- /备案信息 -->
</div>
</footer>
<!-- /底部 -->
<script type="text/javascript" src="js/jquery-2.2.3.js"></script>
<script type="text/javascript" src="js/jquery.ui.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
连接数据库的php代码
<?php
header('Content-Type:text/html; charset=utf-8');
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PWD', '数据库用户密码');
define('DB_NAME', '数据库名称');
$conn = @mysql_connect(DB_HOST, DB_USER, DB_PWD) or die('数据库链接失败：'.mysql_error());
@mysql_select_db(DB_NAME) or die('数据库错误：'.mysql_error());
@mysql_query('SET NAMES UTF8') or die('字符集错误：'.mysql_error());
?>