前言提示：目前网站在管局审核中，内容后续将继续更新：搭建网站第一步要自己先完善第一个网页内容参考链接: CSS 语法.在第一个网页的基础上不断加入更多的CSS和JS元素进行网站修饰，就像树根一样不断向上衍生，到每一处枝叶。

简单的一个网站我做了近80个HTML页面，然后进入下一阶段：连接数据库这一块对于初学者有些难度，建议有能力的去尝试一下（我搭建的网站目前是静态网页，后续如果有时间会连接数据库）最后就是购买服务器、域名、网站备案、连服务器、打包程序、上传、发布，后面逐个讲到。

这是今天最终效果图

一、前端搭建一、网站由0到1一、副页设计一、显示文字

网页内容是最基础的一部分，HTML可以全部实现，也是你做网站的第一步 h2{ text-indent: 50px; text-align: justify; letter-spacing: 3px; }

二、显示文字+图片

添加图片，让网页变得活起来！ h2{ text-indent: 50px; text-align: justify; letter-spacing: 3px; }

三、文字+图片+导航栏+轮播图+底部

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

function frlink(selObj){ window.open(selObj.options[selObj.selectedIndex].value);} h1{ color:#000000; } h2{ text-indent: 50px; text-align: justify; letter-spacing: 3px; color:#000000; } h3{ color:#ffffff; }

。

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

搭建属于自己的网站 function frlink(selObj){ window.open(selObj.options[selObj.selectedIndex].value);}

二、公告+论坛+热点

搭建属于自己的网站 function frlink(selObj){ window.open(selObj.options[selObj.selectedIndex].value);}

三、轮播图

搭建属于自己的网站 function frlink(selObj){ window.open(selObj.options[selObj.selectedIndex].value);} $.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) { _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);}

$(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); }); } }); $(document).ready(function(){ $(".scrollleft").imgscroll({ speed: 10, amount: 0, width: 1, dir: "left" }); });

四、底部信息栏至此，网站主页基本框架完成

搭建属于自己的网站 function frlink(selObj){ window.open(selObj.options[selObj.selectedIndex].value);} $.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) { _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);}

$(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); }); } }); $(document).ready(function(){ $(".scrollleft").imgscroll({ speed: 10, amount: 0, width: 1, dir: "left" }); });

五、添加背景图片此处添加CSS代码，实现背景图片body { background-image: url("../img/bg.jpg"); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }

至此，前端页面搭建完毕，具体CSS和JS代码后续讲到，由于目前建立的只是一个框架，各模块内容需要另增十多个页面进行完善，在此不做过多解释二、后端搭建一、连接数据库暂未实现，后续更新三、选购服务器？一、国内还是国外？

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

二、虚拟主机还是云服务器？如果小网站，个人博客，预算不高，可以考虑用虚拟主机；如果自己技术水平较高，预算充足，并且有自己的特殊需求，可以用独立主机 /VPS 之类的三、服务器的位置影响一个网站访问速度快慢的因素就是节点或者服务器所在位置离访问者的距离的远近。

在选择服务器地区的时候，应提前做好用户全体分布区域统计，尽量选择离用户比较近的地方的服务器用户如果主要是面向南方的客户，一般选择华东和华南的服务器会好些如果客户在北方，选择华北区域的服务器会好些当然如果您的客户是国外的用户，也可以根据用户集中于哪个国家去挑选哪个国家的服务器。

如果您的客户是全国各地都有的话，可以居中选择服务器后，在添加CDN节点的形式去保证各个区域的用户能正常稳定的访问四、连接服务器？完整教程二将详细记录，敬请期待…五、打包上传程序代码？完整教程二将详细记录，敬请期待…

六、网站上线？完整教程二将详细记录，敬请期待…————————————————版权声明：本文为CSDN博主「九芒星#」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明原文链接：

亲爱的读者们，感谢您花时间阅读本文。如果您对本文有任何疑问或建议，请随时联系我。我非常乐意与您交流。