草庐IT

【个人网站】零基础个人网站搭建完整教程（附免费源码）

九芒星# 2023-04-03 原文

零基础个人网站搭建完整教程（一）

内容包括：前端搭建+后端搭建+源码网盘链接+搭建服务器+网站上线（完整教程）

从0到1搭建网站

前言

提示：目前网站在管局审核中，内容后续将继续更新：
搭建网站第一步要自己先完善第一个网页
内容参考链接: https://www.w3school.com.cn/css/css_syntax.asp.
在第一个网页的基础上不断加入更多的CSS和JS元素进行网站修饰，就像树根一样不断向上衍生，到每一处枝叶。简单的一个网站我做了近80个HTML页面，然后进入下一阶段：连接数据库。这一块对于初学者有些难度，建议有能力的去尝试一下（我搭建的网站目前是静态网页，后续如果有时间会连接数据库）。最后就是购买服务器、域名、网站备案、连服务器、打包程序、上传、发布，后面内容会逐个讲到。

这是今天最终效果图


一、前端搭建

一、副页设计

1.显示文字


网页内容是最基础的一部分，HTML可以全部实现，也是你做网站的第一步。

<!DOCTYPE html>
<html>
	<head>
		<style>
		h2{
		  text-indent: 50px;
		  text-align: justify;
		  letter-spacing: 3px;
		}
		</style>
	</head>
	<body>
		<div>
		  <center><h1>百度百科</h1></center>
		  <h2>百度百科是一部内容开放、自由的网络百科全书,旨在创造一个涵盖<所有领域知识,服务所有互联网用户的中文知识性百科全书。在这里你可以参与词条编辑,分享贡献你的知识。</h2>
		</div>
	</body>
</html>

2.显示文字+图片


添加图片，让网页变得活起来！

<!DOCTYPE html>
<html>
	<head>
		<style>
		h2{
		  text-indent: 50px;
		  text-align: justify;
		  letter-spacing: 3px;
		}
		</style>
	</head>
	<body>
		<div>
		  <center><h1>百度百科</h1></center>
			<h2>百度百科是一部内容开放、自由的网络百科全书,旨在创造一个涵盖所有领域知识,服务所有互联网用户的中文知识性百科全书。在这里你可以参与词条编辑,分享贡献你的知识。</h2>
			<center><img src="photo.jpg"></center>
		</div>
	</body>
</html>

3.文字+图片+导航栏+轮播图+底部

在单一页面的基础上添加更多CSS和JS布局元素，让网页变得更美观。
首先添加网站布局核心要素—导航栏，其次添加下拉菜单，最后增加轮播图。（字体自己调整）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="gb2312" />
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" href="css/style1.css" type="text/css" media="all"/>
		<script lang="javascript" type="text/javascript" src="js/swiper.min.js"></script>
		<script lang="javascript" type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
		<script lang="javascript" type="text/javascript" src="js/index.js"></script>
		<script type="text/javascript">
			function frlink(selObj){
			window.open(selObj.options[selObj.selectedIndex].value);}
		</script>
		<style>
			h1{
				  color:#000000;
			}
			h2{
			  text-indent: 50px;
			  text-align: justify;
			  letter-spacing: 3px;
			  color:#000000;
			}
			h3{
				color:#ffffff;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="nav">
				<div class="container">
					<ul class="clearfix">
						<li><a href="#">导航1</a>					
						</li>
						<li>
							<a href="#">导航2</a>
							<dl>
								<dd><a href="#">分页1</a></dd>
								<dd><a href="#">分页2</a></dd>
								<dd><a href="#">分页3</a></dd>
							</dl>
						</li>
						<li><a href="#">导航3</a>
							<dl>
								<dd><a href="#">分页1</a></dd>
								<dd><a href="#">分页2</a></dd>
								<dd><a href="#">分页3</a></dd>
							</dl>
						</li>
						<li><a href="#">导航4</a>
							<dl>
								<dd><a href="#">分页1</a></dd>
								<dd><a href="#">分页2</a></dd>
								<dd><a href="#">分页3</a></dd>
							</dl>
						</li>
						<li><a href="#">导航5</a>
							<dl>
								<dd><a href="#">分页1</a></dd>
								<dd><a href="#">分页2</a></dd>
								<dd><a href="#">分页3</a></dd>
							</dl>
						</li>						
					</ul>
				</div>
			</div>
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide slide1"></div>
				</div>
				<div class="swiper-button-prev"></div>
				<div class="swiper-button-next"></div>
			</div>
			<div>
				<center><h1>百度百科</h1></center>
					<h2>百度百科是一部内容开放、自由的网络百科全书,旨在创造一个涵盖所有领域知识,服务所有互联网用户的中文知识性百科全书。在这里你可以参与词条编辑,分享贡献你的知识。</h2>
				<center><img src="photo.jpg" width="700" height="400"></center>
			</div>
		</div>	
	</body>
</html>

二、主页设计

1.登录+简介+资讯

网页规划可以自己发挥，先写出具体框架，各模块分几十个网页组成，具体实现后续会谈到，先说明大题框架。
首先按照方框为一模块组织内容体系。当前实现的是主页登录、中心简介、新闻资讯模块。

<!doctype html>
<html>
	<head>
	<meta charset="gb2312">
			<title>搭建属于自己的网站</title>
				<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
				<link rel="stylesheet" type="text/css" href="css/reset.css" />
				<link rel="stylesheet" type="text/css" href="css/index.css" />
				<link rel="stylesheet" href="css/style1.css" type="text/css" media="all"/>
				<script lang="javascript" type="text/javascript" src="js/swiper.min.js"></script>
				<script lang="javascript" type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
				<script lang="javascript" type="text/javascript" src="js/index.js"></script>
				<script type="text/javascript">
				<link rel="stylesheet" href="css/index.css" type="text/css" media="all"/>
				<script src="js/jquery-1.8.3.min.js"></script>
				<script type="text/javascript">
					function frlink(selObj){
					window.open(selObj.options[selObj.selectedIndex].value);}
				</script>
	</head>
	<body>
		<div id="hearder2" class="clearfix">
			<div class="logo-name">######</div>
		</div>
		<div id="menu-box" class="clearfix">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">导航1</a></li>
				<li><a href="#">导航2</a></li>
				<li><a href="#">导航3</a></li>
				<li><a href="#">导航4</a></li>
				<li><a href="#">导航5</a></li>
			</ul>
		</div>
		<div id="slider-box" style="background:url(img/banner01.jpg) center center;"></div>
		<!-- div1 -->
		<div id="div1" class="clearfix">
			<div class="left260">
				<div class="title-box">登录</div>
				<form id="form1" name="form1" method="post" action="login.html">
					<input type="text" name="textfield2" id="textfield2" placeholder="用户名" class="uname">
					<input type="password" name="password" id="password" placeholder="密码" class="upass">
					<div class="t-link">
					<input type="checkbox" name="checkbox" id="checkbox" class="chek">记住密码
					<a href="#" target="_blank">忘记密码？</a>
					</div>
					<input type="submit" name="submit" id="submit" value="登录" class="input-login">
					<input type="button" name="button" id="button" value="注册" class="input-but" onClick="window.open('#')">
				</form>
			</div>
			<div class="center450">
				<div class="title-box">中心简介</div>
				<p><img src="img/logo.png" align="left" width="50" height="50">此处省略一千字##################################################################################################################...<a href="#">查看更多...</a></p>
			</div>
			<div class="right260">
				<div class="title-box">新闻资讯<a href="#" class="title-more">更多...</a></div>
				<div class="video-box">
					<embed src='img/news.jpg' allowFullScreen='true' quality='high' width='260' height='150' align='middle' allowScriptAccess='always' ></embed>
				</div>
				<ul>
					<li><a href="#">##########</a></li>
					<li><a href="#">##########</a></li>
					<li><a href="#">##########</a></li>
				</ul>
			</div>
		</div>	
	</body>
</html>

2.公告+论坛+热点

<!doctype html>
<html>
	<head>
	<meta charset="gb2312">
			<title>搭建属于自己的网站</title>
				<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
				<link rel="stylesheet" type="text/css" href="css/reset.css" />
				<link rel="stylesheet" type="text/css" href="css/index.css" />
				<link rel="stylesheet" href="css/style1.css" type="text/css" media="all"/>
				<script lang="javascript" type="text/javascript" src="js/swiper.min.js"></script>
				<script lang="javascript" type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
				<script lang="javascript" type="text/javascript" src="js/index.js"></script>
				<script type="text/javascript">
				<link rel="stylesheet" href="css/index.css" type="text/css" media="all"/>
				<script src="js/jquery-1.8.3.min.js"></script>
				<script type="text/javascript">
					function frlink(selObj){
					window.open(selObj.options[selObj.selectedIndex].value);}
				</script>
	</head>
	<body>
		<div id="hearder2" class="clearfix">
			<div class="logo-name">######</div>
		</div>
		<div id="menu-box" class="clearfix">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">导航1</a></li>
				<li><a href="#">导航2</a></li>
				<li><a href="#">导航3</a></li>
				<li><a href="#">导航4</a></li>
				<li><a href="#">导航5</a></li>
			</ul>
		</div>
		<div id="slider-box" style="background:url(img/banner01.jpg) center center;"></div>
		<!-- div1 -->
		<div id="div1" class="clearfix">
			<div class="left260">
				<div class="title-box">登录</div>
				<form id="form1" name="form1" method="post" action="#">
					<input type="text" name="textfield2" id="textfield2" placeholder="用户名" class="uname">
					<input type="password" name="password" id="password" placeholder="密码" class="upass">
					<div class="t-link">
					<input type="checkbox" name="checkbox" id="checkbox" class="chek">记住密码
					<a href="###" target="_blank">忘记密码？</a>
					</div>
					<input type="submit" name="submit" id="submit" value="登录" class="input-login">
					<input type="button" name="button" id="button" value="注册" class="input-but" onClick="window.open('#')">
				</form>
			</div>
			<div class="center450">
				<div class="title-box">中心简介</div>
				<p><img src="img/logo.png" align="left" width="50" height="50">此处省略一千字##################################################################################################################...<a href="#">查看更多...</a></p>
			</div>
			<div class="right260">
				<div class="title-box">新闻资讯<a href="#" class="title-more">更多...</a></div>
				<div class="video-box">
					<embed src='img/news.jpg' allowFullScreen='true' quality='high' width='260' height='150' align='middle' allowScriptAccess='always' ></embed>
				</div>
				<ul>
					<li><a href="#">##########</a></li>
					<li><a href="#">##########</a></li>
					<li><a href="#">##########</a></li>
				</ul>
			</div>
		</div>
		<div id="div2" class="clearfix">
			<div class="left260">
				<div class="title-box">通知公告<a href="#" class="title-more">更多...</a></div>
					<ul>
						<li><a href="#">关于2022年###有关事项的通告</a></li>
						<li><a href="#">关于2022年###有关事项的通告</a></li>
						<li><a href="#">关于2022年###有关事项的通告</a></li>
						<li><a href="#">关于2022年###有关事项的通告</a></li>
						<li><a href="#">关于2022年###有关事项的通告</a></li>
						<li><a href="#">关于2022年###有关事项的通告 </a></li>
					</ul>
			</div>
			<div class="center450">
				<div class="tabbox">
					<div class="tab">
						<a href="#" class="on">政务中心</a>
						<a href="#">文化论坛</a>
						<a href="#">时尚前沿</a>
					</div>
					<div class="content">
							<div style="display:block;" class="tb">
								<ul>
									<li><a href="#">###</a><span>2021-09-08</span></li>
									<li><a href="#">###</a><span>2021-06-21</span></li>
									<li><a href="#">###</a><span>2021-06-17</span></li>
									<li><a href="#">###</a><span>2021-05-07</span></li>
									<li><a href="#">###</a><span>2021-05-06</span></li>
									<li><a href="#">###</a><span>2021-04-25</span></li>
								</ul>
							</div>
							<div class="tb">
								<ul>
									<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>
								</ul>
							</div>
							<div class="tb">
								<ul>
									<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>
								</ul>
							</div>
					</div>
				</div>
			</div>
			<div class="right260">
				<div class="title-box">就业热点<a href="#" class="title-more">更多...</a></div>
				<div class="video-box">
					<embed src='img/news-1.jpg' allowFullScreen='true' quality='high' width='260' height='150' align='middle' allowScriptAccess='always'></embed>
				</div>
				<ul>
					<li><a href="#">###</a></li>
					<li><a href="#">###</a></li>
					<li><a href="#">###</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

3.轮播图

<!doctype html>
<html>
	<head>
	<meta charset="gb2312">
			<title>搭建属于自己的网站</title>
				<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
				<link rel="stylesheet" type="text/css" href="css/reset.css" />
				<link rel="stylesheet" type="text/css" href="css/index.css" />
				<link rel="stylesheet" href="css/style1.css" type="text/css" media="all"/>
				<script lang="javascript" type="text/javascript" src="js/swiper.min.js"></script>
				<script lang="javascript" type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
				<script lang="javascript" type="text/javascript" src="js/index.js"></script>
				<script type="text/javascript">
				<link rel="stylesheet" href="css/index.css" type="text/css" media="all"/>
				<script src="js/jquery-1.8.3.min.js"></script>
				<script type="text/javascript">
					function frlink(selObj){
					window.open(selObj.options[selObj.selectedIndex].value);}
				</script>
				<script type="text/javascript">
				$.fn.imgscroll = function(o){
					var defaults = {
						speed: 40,
						amount: 0,
						width: 1,
						dir: "left"
					};
					o = $.extend(defaults, o);					
					return this.each(function(){
						var _li = $("li", this);
						_li.parent().parent().css({overflow: "hidden", position: "relative"}); //div
						_li.parent().css({margin: "0", padding: "0", overflow: "hidden", position: "relative", "list-style": "none"}); //ul
						_li.css({position: "relative", overflow: "hidden"}); //li
						if(o.dir == "left") _li.css({float: "left"});						
						var _li_size = 0;
						for(var i=0; i<_li.size(); i++)
							_li_size += o.dir == "left" ? _li.eq(i).outerWidth(true) : _li.eq(i).outerHeight(true);						
						if(o.dir == "left") _li.parent().css({width: (_li_size*3)+"px"});
						_li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone());
						_li = $("li", this);
						var _li_scroll = 0;
						function goto(){
							_li_scroll += o.width;
							if(_li_scroll > _li_size)
							{
								_li_scroll = 0;
								_li.parent().css(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll });
								_li_scroll += o.width;
							}
								_li.parent().animate(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }, o.amount);
						}						
						var move = setInterval(function(){ goto(); }, o.speed);
						_li.parent().hover(function(){
							clearInterval(move);
						},function(){
							clearInterval(move);
							move = setInterval(function(){ goto(); }, o.speed);
						});
					});
				};
				function frlink(selObj){
				window.open(selObj.options[selObj.selectedIndex].value);}
				</script>
	</head>
	<body>
		<div id="hearder2" class="clearfix">
			<div class="logo-name">######</div>
		</div>
		<div id="menu-box" class="clearfix">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">导航1</a></li>
				<li><a href="#">导航2</a></li>
				<li><a href="#">导航3</a></li>
				<li><a href="#">导航4</a></li>
				<li><a href="#">导航5</a></li>
			</ul>
		</div>
		<div id="slider-box" style="background:url(img/banner01.jpg) center center;"></div>
		<div id="div1" class="clearfix">
			<div class="left260">
				<div class="title-box">登录</div>
				<form id="form1" name="form1" method="post" action="#">
					<input type="text" name="textfield2" id="textfield2" placeholder="用户名" class="uname">
					<input type="password" name="password" id="password" placeholder="密码" class="upass">
					<div class="t-link">
					<input type="checkbox" name="checkbox" id="checkbox" class="chek">记住密码
					<a href="###" target="_blank">忘记密码？</a>
					</div>
					<input type="submit" name="submit" id="submit" value="登录" class="input-login">
					<input type="button" name="button" id="button" value="注册" class="input-but" onClick="window.open('#')">
				</form>
			</div>
			<div class="center450">
				<div class="title-box">中心简介</div>
				<p><img src="img/logo.png" align="left" width="50" height="50">此处省略一千字##################################################################################################################...<a href="#">查看更多...</a></p>
			</div>
			<div class="right260">
				<div class="title-box">新闻资讯<a href="#" class="title-more">更多...</a></div>
				<div class="video-box">
					<embed src='img/news.jpg' allowFullScreen='true' quality='high' width='260' height='150' align='middle' allowScriptAccess='always' ></embed>
				</div>
				<ul>
					<li><a href="#">##########</a></li>
					<li><a href="#">##########</a></li>
					<li><a href="#">##########</a></li>
				</ul>
			</div>
		</div>
		<div id="div2" class="clearfix">
			<div class="left260">
				<div class="title-box">通知公告<a href="#" class="title-more">更多...</a></div>
					<ul>
						<li><a href="#">关于2022年###有关事项的通告</a></li>
						<li><a href="#">关于2022年###有关事项的通告</a></li>
						<li><a href="#">关于2022年###有关事项的通告</a></li>
						<li><a href="#">关于2022年###有关事项的通告</a></li>
						<li><a href="#">关于2022年###有关事项的通告</a></li>
						<li><a href="#">关于2022年###有关事项的通告 </a></li>
					</ul>
			</div>
			<div class="center450">
				<div class="tabbox">
					<div class="tab">
						<a href="#" class="on">政务中心</a>
						<a href="#">文化论坛</a>
						<a href="#">时尚前沿</a>
					</div>
					<div class="content">
							<div style="display:block;" class="tb">
								<ul>
									<li><a href="#">###</a><span>2021-09-08</span></li>
									<li><a href="#">###</a><span>2021-06-21</span></li>
									<li><a href="#">###</a><span>2021-06-17</span></li>
									<li><a href="#">###</a><span>2021-05-07</span></li>
									<li><a href="#">###</a><span>2021-05-06</span></li>
									<li><a href="#">###</a><span>2021-04-25</span></li>
								</ul>
							</div>
							<div class="tb">
								<ul>
									<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>
								</ul>
							</div>
							<div class="tb">
								<ul>
									<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>
								</ul>
							</div>
					</div>
				</div>
			</div>
			<div class="right260">
				<div class="title-box">就业热点<a href="#" class="title-more">更多...</a></div>
				<div class="video-box">
					<embed src='img/news-1.jpg' allowFullScreen='true' quality='high' width='260' height='150' align='middle' allowScriptAccess='always'></embed>
				</div>
				<ul>
					<li><a href="#">###</a></li>
					<li><a href="#">###</a></li>
					<li><a href="#">###</a></li>
				</ul>
			</div>
		</div>
		<script>
		$(function(){
			$(".tabbox .tab a").mouseover(function(){
				$(this).addClass('on').siblings().removeClass('on');
				var index = $(this).index();
				number = index;
				$('.tabbox .content .tb').hide();
				$('.tabbox .content .tb:eq('+index+')').show();
			});
			var auto = 1; 
			if(auto ==1){
				var number = 0;
				var maxNumber = $('.tabbox .tab a').length;
				function autotab(){
					number++;
					number == maxNumber? number = 0 : number;
					$('.tabbox .tab a:eq('+number+')').addClass('on').siblings().removeClass('on');
					$('.tabbox .content .tb:eq('+number+')').show().siblings().hide();
				}
				var tabChange = setInterval(autotab,3000);
				$('.tabbox').mouseover(function(){
					clearInterval(tabChange);
				});
				$('.tabbox').mouseout(function(){
					tabChange = setInterval(autotab,3000);
				});
			  }
		});
		</script>
		<div id="div3"><img src="img/banner01.jpg"></div>
			<div id="div4">
				<div class="title-box">照片展示</div>
			</div>
		<div class="scrollleft clearfix">
			<ul>
				<li>
					<a href="img/employment-02.jpg"><img  src="img/employment-02.jpg"/></a>
					<span></span>
				</li>
				<li>
					<a href="img/news-photo1.jpg"><img  src="img/news-photo1.jpg"/></a>
					
				</li>
				<li>
					<a href="img/news-photo2.jpg"><img  src="img/news-photo2.jpg"/></a>
					<span></span>
				</li>
				<li>
					<a href="img/news-photo3-1.jpg"><img  src="img/news-photo3-1.jpg"/></a>
					
				</li>
				<li>
					<a href="img/news-photo4-1.jpg"><img  src="img/news-photo4-1.jpg"/></a>
					<span></span>
				</li>	
			</ul>
		</div>
		<script type="text/javascript">
		$(document).ready(function(){
			$(".scrollleft").imgscroll({
				speed: 10,    
				amount: 0,    
				width: 1,     
				dir: "left"   
			});	
		});
		</script> 
	</body>
</html>

4.底部信息栏

至此，网站主页基本框架完成

<!doctype html>
<html>
	<head>
	<meta charset="gb2312">
			<title>搭建属于自己的网站</title>
				<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
				<link rel="stylesheet" type="text/css" href="css/reset.css" />
				<link rel="stylesheet" type="text/css" href="css/index.css" />
				<link rel="stylesheet" href="css/style1.css" type="text/css" media="all"/>
				<script lang="javascript" type="text/javascript" src="js/swiper.min.js"></script>
				<script lang="javascript" type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
				<script lang="javascript" type="text/javascript" src="js/index.js"></script>
				<script type="text/javascript">
				<link rel="stylesheet" href="css/index.css" type="text/css" media="all"/>
				<script src="js/jquery-1.8.3.min.js"></script>
				<script type="text/javascript">
					function frlink(selObj){
					window.open(selObj.options[selObj.selectedIndex].value);}
				</script>
				<script type="text/javascript">
				$.fn.imgscroll = function(o){
					var defaults = {
						speed: 40,
						amount: 0,
						width: 1,
						dir: "left"
					};
					o = $.extend(defaults, o);					
					return this.each(function(){
						var _li = $("li", this);
						_li.parent().parent().css({overflow: "hidden", position: "relative"}); //div
						_li.parent().css({margin: "0", padding: "0", overflow: "hidden", position: "relative", "list-style": "none"}); //ul
						_li.css({position: "relative", overflow: "hidden"}); //li
						if(o.dir == "left") _li.css({float: "left"});						
						var _li_size = 0;
						for(var i=0; i<_li.size(); i++)
							_li_size += o.dir == "left" ? _li.eq(i).outerWidth(true) : _li.eq(i).outerHeight(true);						
						if(o.dir == "left") _li.parent().css({width: (_li_size*3)+"px"});
						_li.parent().empty().append(_li.clone()).append(_li.clone()).append(_li.clone());
						_li = $("li", this);
						var _li_scroll = 0;
						function goto(){
							_li_scroll += o.width;
							if(_li_scroll > _li_size)
							{
								_li_scroll = 0;
								_li.parent().css(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll });
								_li_scroll += o.width;
							}
								_li.parent().animate(o.dir == "left" ? { left : -_li_scroll } : { top : -_li_scroll }, o.amount);
						}						
						var move = setInterval(function(){ goto(); }, o.speed);
						_li.parent().hover(function(){
							clearInterval(move);
						},function(){
							clearInterval(move);
							move = setInterval(function(){ goto(); }, o.speed);
						});
					});
				};
				function frlink(selObj){
				window.open(selObj.options[selObj.selectedIndex].value);}
				</script>
	</head>
	<body>
		<div id="hearder2" class="clearfix">
			<div class="logo-name">######</div>
		</div>
		<div id="menu-box" class="clearfix">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">导航1</a></li>
				<li><a href="#">导航2</a></li>
				<li><a href="#">导航3</a></li>
				<li><a href="#">导航4</a></li>
				<li><a href="#">导航5</a></li>
			</ul>
		</div>
		<div id="slider-box" style="background:url(img/banner01.jpg) center center;"></div>
		<div id="div1" class="clearfix">
			<div class="left260">
				<div class="title-box">登录</div>
				<form id="form1" name="form1" method="post" action="#">
					<input type="text" name="textfield2" id="textfield2" placeholder="用户名" class="uname">
					<input type="password" name="password" id="password" placeholder="密码" class="upass">
					<div class="t-link">
					<input type="checkbox" name="checkbox" id="checkbox" class="chek">记住密码
					<a href="###" target="_blank">忘记密码？</a>
					</div>
					<input type="submit" name="submit" id="submit" value="登录" class="input-login">
					<input type="button" name="button" id="button" value="注册" class="input-but" onClick="window.open('#')">
				</form>
			</div>
			<div class="center450">
				<div class="title-box">中心简介</div>
				<p><img src="img/logo.png" align="left" width="50" height="50">此处省略一千字##################################################################################################################...<a href="#">查看更多...</a></p>
			</div>
			<div class="right260">
				<div class="title-box">新闻资讯<a href="#" class="title-more">更多...</a></div>
				<div class="video-box">
					<embed src='img/news.jpg' allowFullScreen='true' quality='high' width='260' height='150' align='middle' allowScriptAccess='always' ></embed>
				</div>
				<ul>
					<li><a href="#">##########</a></li>
					<li><a href="#">##########</a></li>
					<li><a href="#">##########</a></li>
				</ul>
			</div>
		</div>
		<div id="div2" class="clearfix">
			<div class="left260">
				<div class="title-box">通知公告<a href="#" class="title-more">更多...</a></div>
					<ul>
						<li><a href="#">关于2022年###有关事项的通告</a></li>
						<li><a href="#">关于2022年###有关事项的通告</a></li>
						<li><a href="#">关于2022年###有关事项的通告</a></li>
						<li><a href="#">关于2022年###有关事项的通告</a></li>
						<li><a href="#">关于2022年###有关事项的通告</a></li>
						<li><a href="#">关于2022年###有关事项的通告 </a></li>
					</ul>
			</div>
			<div class="center450">
				<div class="tabbox">
					<div class="tab">
						<a href="#" class="on">政务中心</a>
						<a href="#">文化论坛</a>
						<a href="#">时尚前沿</a>
					</div>
					<div class="content">
							<div style="display:block;" class="tb">
								<ul>
									<li><a href="#">###</a><span>2021-09-08</span></li>
									<li><a href="#">###</a><span>2021-06-21</span></li>
									<li><a href="#">###</a><span>2021-06-17</span></li>
									<li><a href="#">###</a><span>2021-05-07</span></li>
									<li><a href="#">###</a><span>2021-05-06</span></li>
									<li><a href="#">###</a><span>2021-04-25</span></li>
								</ul>
							</div>
							<div class="tb">
								<ul>
									<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>
								</ul>
							</div>
							<div class="tb">
								<ul>
									<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>
								</ul>
							</div>
					</div>
				</div>
			</div>
			<div class="right260">
				<div class="title-box">就业热点<a href="#" class="title-more">更多...</a></div>
				<div class="video-box">
					<embed src='img/news-1.jpg' allowFullScreen='true' quality='high' width='260' height='150' align='middle' allowScriptAccess='always'></embed>
				</div>
				<ul>
					<li><a href="#">###</a></li>
					<li><a href="#">###</a></li>
					<li><a href="#">###</a></li>
				</ul>
			</div>
		</div>
		<script>
		$(function(){
			$(".tabbox .tab a").mouseover(function(){
				$(this).addClass('on').siblings().removeClass('on');
				var index = $(this).index();
				number = index;
				$('.tabbox .content .tb').hide();
				$('.tabbox .content .tb:eq('+index+')').show();
			});
			var auto = 1; 
			if(auto ==1){
				var number = 0;
				var maxNumber = $('.tabbox .tab a').length;
				function autotab(){
					number++;
					number == maxNumber? number = 0 : number;
					$('.tabbox .tab a:eq('+number+')').addClass('on').siblings().removeClass('on');
					$('.tabbox .content .tb:eq('+number+')').show().siblings().hide();
				}
				var tabChange = setInterval(autotab,3000);
				$('.tabbox').mouseover(function(){
					clearInterval(tabChange);
				});
				$('.tabbox').mouseout(function(){
					tabChange = setInterval(autotab,3000);
				});
			  }
		});
		</script>
		<div id="div3"><img src="img/banner01.jpg"></div>
			<div id="div4">
				<div class="title-box">照片展示</div>
			</div>
		<div class="scrollleft clearfix">
			<ul>
				<li>
					<a href="img/employment-02.jpg"><img  src="img/employment-02.jpg"/></a>
					<span></span>
				</li>
				<li>
					<a href="img/news-photo1.jpg"><img  src="img/news-photo1.jpg"/></a>
					
				</li>
				<li>
					<a href="img/news-photo2.jpg"><img  src="img/news-photo2.jpg"/></a>
					<span></span>
				</li>
				<li>
					<a href="img/news-photo3-1.jpg"><img  src="img/news-photo3-1.jpg"/></a>
					
				</li>
				<li>
					<a href="img/news-photo4-1.jpg"><img  src="img/news-photo4-1.jpg"/></a>
					<span></span>
				</li>	
			</ul>
		</div>
		<script type="text/javascript">
		$(document).ready(function(){
			$(".scrollleft").imgscroll({
				speed: 10,    
				amount: 0,    
				width: 1,     
				dir: "left"   
			});	
		});
		</script> 
		<div class="footer">
			<div class="container clearfix">	
				<div class="rgt">
					<p>Developers：###</p>
					<p>ADD：###</p>
					<p>Copyright @### 版权所有</p>
				</div>			
			</div>			
		</div>		
	</body>
</html>

5.添加背景图片

此处添加CSS代码，实现背景图片

body {
    background-image: url("../img/bg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}


至此，前端页面搭建完毕，具体CSS和JS代码后续讲到，由于目前建立的只是一个框架，各模块内容需要另增十多个页面进行完善，在此不做过多解释。

源码链接: https://pan.baidu.com/s/11XXpTU2f16DmVLcAEA07lw .
提取码：5kcx

二、后端搭建

三、选购服务器

一、国内还是国外？

国内性价比一般都低于国外，这里的性价比指的是单位硬盘空间的价格，国内的主机的稳定性一般也不高，除非是 VPS，但国内有一个好处就是速度快，国外的主机，ping 延迟一般都不小，尤其是学生党用户，在教育网的体验很差。

二、虚拟主机还是云服务器？

如果小网站，个人博客，预算不高，可以考虑用虚拟主机；如果自己技术水平较高，预算充足，并且有自己的特殊需求，可以用独立主机 /VPS 之类的。

三、服务器的位置？

影响一个网站访问速度快慢的因素就是节点或者服务器所在位置离访问者的距离的远近。在选择服务器地区的时候，应提前做好用户全体分布区域统计，尽量选择离用户比较近的地方的服务器。
用户如果主要是面向南方的客户，一般选择华东和华南的服务器会好些。如果客户在北方，选择华北区域的服务器会好些。当然如果您的客户是国外的用户，也可以根据用户集中于哪个国家去挑选哪个国家的服务器。如果您的客户是全国各地都有的话，可以居中选择服务器后，在添加CDN节点的形式去保证各个区域的用户能正常稳定的访问。

四、连接服务器

完整教程二将详细记录，敬请期待…

五、打包上传程序代码

完整教程二将详细记录，敬请期待…

六、网站上线

链接: 零基础个人网站搭建完整教程二（网站服务器配置）.

零基个人网站spanclasstokenhtml$前端$css$php$数据库

有关【个人网站】零基础个人网站搭建完整教程（附免费源码）的更多相关文章

  1. ruby - Ping ruby 网站？ - 2

    在Ruby中可以使用哪些替代方法来ping一个ip地址？标准库“ping”库的功能似乎非常有限。我对在这里滚动我自己的代码不感兴趣。有没有好的gem？我应该接受它并忍受它吗？(我在Linux上使用Ruby1.8.6编写代码) 最佳答案 net-ping值得一看。它允许TCPping(如标准ruby​​ping)，但也允许UDP、HTTP和ICMPping。ICMPping需要root权限，但其他则不需要。 关于ruby-Pingruby网站？，我们在StackOverflow上找到一个类

  2. UE4 源码阅读：从引擎启动到Receive Begin Play - 2

    一、引擎主循环UE版本：4.27一、引擎主循环的位置：Launch.cpp:GuardedMain函数二、、GuardedMain函数执行逻辑：1、EnginePreInit：加载大多数模块int32ErrorLevel=EnginePreInit(CmdLine);PreInit模块加载顺序：模块加载过程：（1）注册模块中定义的UObject，同时为每个类构造一个类默认对象（CDO，记录类的默认状态，作为模板用于子类实例创建）（2）调用模块的StartUpModule方法2、FEngineLoop::Init()1、检查Engine的配置文件找出使用了哪一个GameEngine类（UGame

  3. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，

  4. 在VMware16虚拟机安装Ubuntu详细教程 - 2

    在VMware16.2.4安装Ubuntu一、安装VMware1.打开VMwareWorkstationPro官网，点击即可进入。2.进入后向下滑动找到Workstation16ProforWindows，点击立即下载。3.下载完成，文件大小615MB，如下图：4.鼠标右击，以管理员身份运行。5.点击下一步6.勾选条款，点击下一步7.先勾选，再点击下一步8.去掉勾选，点击下一步9.点击下一步10.点击安装11.点击许可证12.在百度上搜索VM16许可证，复制填入，然后点击输入即可，亲测有效。13.点击完成14.重启系统，点击是15.双击VMwareWorkstationPro图标，进入虚拟机主

  5. 阿里云国际版免费试用：如何注册以及注意事项 - 2

    作为新的阿里云用户，您可以50免费试用多种优惠，价值高达1,700美元（或8,500美元）。这将让您了解和体验阿里云平台上提供的一系列产品和服务。如果您以个人身份注册免费试用，您将获得价值1,700美元的优惠。但是，如果您是注册公司，您可以选择企业免费试用，提交基本信息通过企业实名注册验证，即可开始价值$8,500的免费试用！本教程介绍了如何设置您的帐户并使用您的免费试用版。​关于免费试用在我们开始此试用之前，您还必须遵守以下条款和条件才能访问您的免费试用：只有在一年内创建的账户才有资格获得阿里云免费试用。通过此免费试用优惠，用户可以免费试用免费试用活动页面上列出的每种产品一次。如果您有多个帐

  6. hadoop安装之保姆级教程（二）之YARN的配置 - 2

    1.1.1 YARN的介绍 为克服Hadoop1.0中HDFS和MapReduce存在的各种问题⽽提出的，针对Hadoop1.0中的MapReduce在扩展性和多框架⽀持⽅⾯的不⾜，提出了全新的资源管理框架YARN. ApacheYARN（YetanotherResourceNegotiator的缩写）是Hadoop集群的资源管理系统，负责为计算程序提供服务器计算资源，相当于⼀个分布式的操作系统平台，⽽MapReduce等计算程序则相当于运⾏于操作系统之上的应⽤程序。 YARN被引⼊Hadoop2,最初是为了改善MapReduce的实现，但是因为具有⾜够的通⽤性，同样可以⽀持其他的分布式计算模

  7. ruby - 在 RUBY 上的 PADRINO 框架上使用 RSPEC 进行测试的教程 - 2

    我是Ruby新手，并被要求在我们的新项目中使用它。我们还被要求使用Padrino(Sinatra)作为后端/框架。我们被要求使用Rspec进行测试。我一直在寻找可以指导在Padrino上使用RspecforRuby的教程。我得到的主要是引用RoR。但是，我需要RubyonPadrino。请在任何入门/指南/引用/讨论等方面指导我。如有不妥之处请指正。可能是我没有针对我的问题搜索正确的词/短语组合。我正在使用Ruby1.9.3和Padrinov.0.10.6。注意:我还提到了SOquestion,但它没有帮助。 最佳答案 我没用过Pa

  8. ruby - 使用 Ruby 和 Mechanize 登录网站 - 2

    我需要从站点抓取数据，但它需要我先登录。我一直在使用hpricot成功地抓取其他网站，但我是使用mechanize的新手，我真的对如何使用它感到困惑。我看到这个例子经常被引用:require'rubygems'require'mechanize'a=Mechanize.newa.get('http://rubyforge.org/')do|page|#Clicktheloginlinklogin_page=a.click(page.link_with(:text=>/LogIn/))#Submittheloginformmy_page=login_page.form_with(:act

  9. 区块链入门教程(6)--WeBASE-Front节点前置服务安装 - 2

    文章目录1.任务背景2.任务目标3.相关知识点4.任务实操4.1安装配置JDK4.2启动FISCOBCOS4.3下载解压WeBASE-Front4.4拷贝sdk证书文件4.5启动节点4.6访问节点4.7检查运行状态5.任务总结1.任务背景FISCOBCOS其实是有控制台管理工具，用来对区块链系统进行各种管理操作。但是对于初学者来说，还是可视化界面更友好，本节就来介绍WeBASE管理平台，这是一款微众银行开源的自研区块链中间件平台，可以降低区块链使用的门槛，大幅提高区块链应用的开发效率。微众银行是腾讯牵头设立的民营银行，在国内民营银行里还是比较出名的。微众银行参与FISCOBCOS生态建设，一定

  10. 网站日志分析软件--让网站日志分析工作变得更简单 - 2

    网站的日志分析，是seo优化不可忽视的一门功课，但网站越大，每天产生的日志就越大，大站一天都可以产生几个G的网站日志，如果光靠肉眼去分析，那可能看到猴年马月都看不完，因此借助网站日志分析工具去分析网站日志，那将会使网站日志分析工作变得更简单。下面推荐两款网站日志分析软件。第一款：逆火网站日志分析器逆火网站日志分析器是一款功能全面的网站服务器日志分析软件。通过分析网站的日志文件，不仅能够精准的知道网站的访问量、网站的访问来源，网站的广告点击，访客的地区统计，搜索引擎关键字查询等，还能够一次性分析多个网站的日志文件，让你轻松管理网站。逆火网站日志分析器下载地址：https://pan.baidu.

随机推荐