【个人网站】零基础个人网站搭建完整教程（附免费源码）
2024-05-17 00:02:14
零基础个人网站搭建完整教程（一）
内容包括：前端搭建+后端搭建+源码网盘链接+搭建服务器+网站上线（完整教程）
从0到1搭建网站
- 零基础个人网站搭建完整教程（一）
- 前言
- 一、前端搭建
- 一、副页设计
- 1.显示文字
- 2.显示文字+图片
- 3.文字+图片+导航栏+轮播图+底部
- 二、主页设计
- 1.登录+简介+资讯
- 2.公告+论坛+热点
- 3.轮播图
- 4.底部信息栏
- 5.添加背景图片
- 二、后端搭建
- 三、选购服务器
- 一、国内还是国外？
- 二、虚拟主机还是云服务器？
- 三、服务器的位置？
- 四、连接服务器
- 五、打包上传程序代码
- 六、网站上线
前言
提示：目前网站在管局审核中，内容后续将继续更新：
搭建网站第一步要自己先完善第一个网页
内容参考链接: 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"}); //liif(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"}); //liif(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节点的形式去保证各个区域的用户能正常稳定的访问。
四、连接服务器
完整教程二将详细记录，敬请期待…
五、打包上传程序代码
完整教程二将详细记录，敬请期待…
六、网站上线
链接: 零基础个人网站搭建完整教程二（网站服务器配置）.
【个人网站】零基础个人网站搭建完整教程（附免费源码）相关推荐
- 微信小程序中引用FontAwesome字体 最完整教程 附下载源码
目的:在小程序实现,FontAwesome.省去制作图标,引用图标的烦恼 主要步骤,下载>转码>合并样式>引用 样式,不会的可下载源码 1.到Font Awesome官网下载字体包 ...
- C语言零基础项目：迷宫游戏！详细思路+源码分享
每天一个C语言小项目,提升你的编程能力! 迷宫游戏其实有很多种类型,比如说营救公主的一款,又比如说闯关的一款,其他的一些种类这里就不一一列举了.但是不管哪一款迷宫游戏,唯一不变的就是迷宫的实现这一核心 ...
- C语言零基础项目：生命游戏！详细思路+源码分享
每天一个C语言小项目,提升你的编程能力! 程序简介 生命游戏也叫康威生命游戏.细胞自动机.元胞自动机等. 生命游戏不需要任何玩家,它是一个二维矩形世界,这个世界中的每个方格居住着一个活细胞或为空. 一 ...
- 40个web前端实战项目，练完即可就业，从入门到进阶，基础到框架，html_css【附视频+源码】
当下前端开发可以说是一个比较火的职业,所以学习的人比较多,不管是培训还是自学都是希望通过前端可以找到一份好的工作,但是很多自学的朋友在自学过程中有些盲目,不仅大大降低了学习的效率,而且也会打击自己的学 ...
- C语言零基础项目：橘子钟表，详细思路+源码分享
目录 简介 程序截图 源码 简介 这个橘子钟表程序主要分成三个部分:画表盘.画表针.显示当前时间.画表盘部分运用到了三次贝塞尔曲线.HSL 颜色模型以及字符串格式化命令,其中三次贝塞尔曲 ...
- 从零推导一个多层感知机神经网络（附matlab源码，可直接运行）
可以先跳到代码示例部分看看效果 算法基础 激活函数 损失函数 链式法则 向量求导 代码示例 代码文件结构说明 函数脚本 可运行脚本 效果演示 代码下载链接 算法基础 激活函数 激活函数的作用 激活函数 ...
- 【个人网站】零基础个人网站搭建完整教程二（网站服务器配置）
零基础个人网站搭建完整教程(二) 内容包括:前端搭建+后端搭建+如何选购服务器和域名+连接服务器+上传代码+网站上线(完整教程) 从0到1搭建网站 零基础个人网站搭建完整教程(二) 前言 三.选购服务 ...
- 零基础新手自学Python编程教程入门精通学习资料网站大全
零基础新手自学Python编程教程入门精通学习资料网站大全 今天说下关于Python的一些普及知识,以及学习资料,这一节我来跟大家分享下. 1 为什么要学习Python? 1 Python是一个脚本语 ...
- 零基础编程入门python视频-Python编程零基础小白快速入门完整全系列精品课
1. 课程咨询加老师助理微信:助理1微信: chenjinglei88 ,助理2微信: omf6757 2. 决定购买并想得到陈敬雷老师亲自指导(课程或自己项目难题均可)加老师微信: chenjing ...
- 零基础教你搭建一个自己的靶场！
零基础教你搭建一个自己的靶场! 目录 零基础教你搭建一个自己的靶场! 前言 部署 准备工作 安装环境 docker 的安装 docker-compose的安装 配置环境 安装 下载 配置 总结 前言 ...
最新文章
- Linux 文件权限rwx
- 实训说明书 在线音乐平台项目规格说明书
- java反射的工具类的函数集合
- tornado学习笔记day07-同步与异步
- 今天，给我妈打电话聊了我爸
- Docker 使用 docker push 命令 推送本地镜像到远程DockerHub仓库服务器
- Win10 PC 能打电话了？腾讯追讨前员工 1940 万；淘宝进军 MR 购物 | 极客头条
- 使用delphi 开发多层应用（十四）使用Basic4android 显示kbmMW server数据
- Windows 7语言包下载
- 进度播报|广州地铁七号线全线29台盾构机全部完成始发
- 【Linux学习】实现石头剪刀布游戏
- 什么是固定资产管理系统？用固定资产管理系统管理固定资产的好处？
- MyBatis-plus执行自定义SQL
- Excel 集計機能
- 小酌重构系列[10]——分离职责
- 2017.3.29组合数学学习——帕斯卡三角形、二项式定理
- 投资利润率、内部收益率和回收期案例
- Java 反射 C 反射调用 java 方法
- 【华为机试真题 Python实现 】高矮个子排队
- 【VirtualAPP 双开系列03】动态代理-hook系统服务(Java层)