首页 > 分享 > 全网最详细之从0搭建网站系列，学不会来打我（前端篇1）

全网最详细之从0搭建网站系列，学不会来打我（前端篇1）

花匠小妙招
2024-11-15 19:32

1、css框架的选用

2、JS框架的选用

3、（可选）前端模板的选用

4、从0开始编写自己风格的网站

1、自定义我们框架的主要js：

2、自定义我们框架的主css

1、：root

2、ol，ul，li 列表标签最好去掉前面的东西

3、a标签的定制

4、选中的样式修改

5、input框去掉选中边框

6、自定义滚动条

3、html页面首页

1、html内容

2、html布局之栅格布局

3、flex布局

没有完整写过一整套网站的人可能感受不到，有一个完美的前端框架对于开发来说有多么便捷，因为它可以让你只专注于开发网站内容跟样式，不必考虑整体细节（如自适应、不同分辨率下的展示效果、风格）等等。所以，在开发网站前搭建一个强大的框架十分重要。

本文在线访问：链接

本文源代码：链接

1、css框架的选用

css框架能帮你尽量保证不同分辨率下网页能正常展示，并预设了相当多的样式，这个其实你自己实现也是可以的，根据笔者的经验，如果你这个网站是真的要给用户使用，必须要先做移动端！必须要先做移动端！必须要先做移动端！PC端可以不美观，移动端也可以没有那么多功能，但是必须要先做移动端。

目前流行的css框架有Bootstrap跟最近大热的Tailwind CSS。笔者就选用的Bootstrap，它可以简单的帮你做到页面自适应。有关css框架我将在之后详细讲解，本网站初期就先不使用任何css框架，而是直接就是一个手写。

2、JS框架的选用

得益于现在大火的“前后端分离”的架构思想，目前的网站前端框架无非是Vue跟React，但是无论是什么框架都是基于原生js的，原生js经过多年的迭代生态极其强大（尤其是JQuery）。那么在选用框架之前，先明确网站的内容，如果不是xxx管理系统，抑或是前后端不分离，很建议你使用原生的js，因为这些网站基本上不会有表格、树、表单等等，也不会有太多可复用的内容供你写成组件。因为是面向所有用户，因此必须要有很多很秀的功能，这些用原生js实现是相当简单的，也有益于帮助你研究源码和优化网站内容。

笔者网站的框架选用的原生JS+JQuery。

3、（可选）前端模板的选用

（该模板不是vue文件跟React的jsx文件）模板技术伴随着“前后端分离”的架构设计也逐渐淡出人们的视线，尤其目前基本都用SpringBoot作为后台，对模板支持不是很好。但是目前很多老项目都还在使用模板，如xxx.jsp。目前笔者使用beetl作为自己的html模板，但是本专栏不会涉及模板语言。

4、从0开始编写自己风格的网站

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

1、自定义我们框架的主要js：

我们知道在dom加载完会执行onload方法，JQuery是ready或者$(fn)，如果你喜欢用$(fn)作为脚本入口也无所谓，但是既然要有自己风格，我们就自己写一个！

新建一个js为zq.js，这个js将作为我们整个网站的框架的js。刚开始的内容很简单很少，是这样的：

zq = function() {

var me = this;

var defaultConfig = {

}

zq.prototype = {

constructor : zq,

elementType: function(obj){

return Object.prototype.toString.call(obj).replace(/^[object (.+)]$/, '$1').toLowerCase();

alert:function(str){

var me = this;

var type=me.elementType(str);

if(type!="string"){

alert("该数据类型是:"+type+",已在控制台打印!");

me.log("来自zqAlert的内容："+str);

}else{

alert(str);

}

isChrome : function() {

return /Chrome/i.test(navigator.userAgent);

log(obj){

console.log(obj);

}

zq = new zq();

zq.$ = function(fn) {

document.addEventListener('DOMContentLoaded', fn, false);

}

这个语法思想跟java一样，只不过语法得用js的，我们新建一个zq类，在类里添加一些默认参数和装配函数方法。最后使用new去实例化，调用就直接用zq.方法就行。注意，我们只需要在该js里面实例化一次就行了。

代码的最后有一个DOMContentLoaded事件，这个就是dom初始化完成后触发的方法，我们就通过添加监听绑定该事件，就可以实现自己的初始化方法了。

最后，页面将会是这样的：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

zq.$(function(){

zq.log("qwe");

zq.log(zq.isChrome())

zq.alert({asd:123});

})

</script>

</html>

这不会是多此一举，后面我们网站的样式跟组件库会都拓展进来，这样的网站才是我们自己的网站，使其充满自己独特的风格。

2、自定义我们框架的主css

新建一个zq.css，这个css将会是我们整个网站的css，也是你自定义自己网站风格的css

:root {

--blue: #007bff;

--indigo: #6610f2;

--purple: #6f42c1;

--pink: #e83e8c;

--red: #dc3545;

--orange: #fd7e14;

--yellow: #ffc107;

--green: #28a745;

--teal: #20c997;

--cyan: #17a2b8;

--white: #fff;

--gray: #767575;

--gray-dark: #434242;

--primary: #5FCB71;

--secondary: #4f4f4f;

--success: #28a745;

--info: #17a2b8;

--warning: #ffc107;

--danger: #dc3545;

--light: #c2c2c2;

--dark: #434242;

--breakpoint-xs: 0;

--breakpoint-sm: 576px;

--breakpoint-md: 768px;

--breakpoint-lg: 992px;

--breakpoint-xl: 1200px;

--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace

}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav,li,fieldset,form,label,legend,table,caption,tbody,tfoot,

thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,

footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {

display: block;

}

ol,ul {

list-style: none;

margin: 0px;

padding: 0px;

}

blockquote,q {

quotes: none;

}

blockquote:before,blockquote:after,

q:before,q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

::selection {

background: var(--primary);

color: #fff;

text-shadow: none;

}

a {

color: var(--primary);

text-decoration: none;

background-color: transparent;

cursor: pointer;

}

.txt-rt {

text-align: right;

}

.txt-lt {

text-align: left;

}

.txt-center {

text-align: center;

}

.float-rt {

float: right;

}

.float-lt {

float: left;

}

.clear {

clear: both;

}

.pos-relative {

position: relative;

}

.pos-absolute {

position: absolute;

}

.vertical-base {

vertical-align: baseline;

}

.vertical-top {

vertical-align: top;

}

css样式我觉得用到的时候再写就行，上面简单介绍几个：

1、：root

在这里面可以预设一些样式，然后var(自定义的名称)去使用，主要是用来主题换肤、统一样式。

2、ol，ul，li 列表标签最好去掉前面的东西

使用list-style: none即可

3、a标签的定制

a标签很强大，因为它拥有跳转链接跟下载的属性，所以很多按钮都用a标签去做，但是遗憾的是，a标签是文本标签，根据a标签不同的使用情形，我们可以给a标签加上display:block，就可以将其转为块状元素，就拥有块状元素的属性了（宽高等）。这是一个极好的标签。

4、选中的样式修改

::selection {

background: #5FCB71;

color: #fff;

text-shadow: none;

}

5、input框去掉选中边框

使用outline:none即可，只能说很丑

6、自定义滚动条

滚动条是overflow:scroll显示，可通过xy只修改横向竖向，然后下面的参数自己测吧

html::-webkit-scrollbar {

width: 5px;

height: 1px;

}

html::-webkit-scrollbar-thumb {

border-radius: 10px;

box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);

background: #c2bebe;

}

html::-webkit-scrollbar-track {

box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);

border-radius: 10px;

background: #ededed;

}

3、html页面首页

主页的html非常重要，因为它是你网站的门户跟搜索引擎的入口，因此不仅要美观，还有能被蜘蛛爬虫抓取到主要内容：

<!DOCTYPE html>

<html>

<head>

addEventListener("load", function() {

setTimeout(hideURLbar, 0);

}, false);

function hideURLbar() {

window.scrollTo(0, 1);

}

</script>

</head>

<body>

</body>

zq.$(function(){

})

</script>

</html>

1、html内容

1、这个必须要加，这个是设计不同分辨率下样式的关键

2、这两个标签是爬虫爬取的内容，用于搜索引擎收录关键词和快照展示

3、这是请求头，目前可忽略

4、清除滚动条缓存。用户刷新页面的时候应该是回到页面顶部，如果不清除滚动条缓存，刷新页面会回到之前滚动条所在的页面位置。一般而言，用户在你的网站通过a标签跳转到另外的网站后，在返回到你的网站，如果你不想让用户回到之前浏览的位置，添加以下代码。

清除滚动条缓存在开发网站的时候是必要的，这样可以更舒服的调试网页。在上线后就可以去掉了。

addEventListener("load", function() {

setTimeout(hideURLbar, 0);

}, false);

function hideURLbar() {

window.scrollTo(0, 1);

}

</script>

5、其他分析网站、分析用户行为和广告投放的js，可以在上线引入。

2、html布局之栅格布局

栅格布局的原理很简单，只是通过浮动结合width的百分比实现，这点对不同分辨率自适应比较好。这个我建议直接用bootstrapCSS就行，不过我们手写一个也行，直接在zq.css补充以下代码。

注意：1、再给类标签命名时并放在我们公用的css里时，最好加上自己风格的前缀，不要太用一些公共的名称，避免与其他组件的css冲突。

2、在栅格结构里，border是最危险的，必须使用 box-sizing: border-box将边框并排，因为栅格结构的宽都是严格通过屏幕百分比定义好的，border的一个像素都会导致之后的栅格宽度因超出屏幕宽度而换行。

3、在不需要浮动的时候，在不需要浮动的dom前使用样式clear:both来取消之后的dom浮动

4、栅格广泛用于整体布局，它对box的padding，margin，border等是很敏感的，对此经常需要微调。

* {

box-sizing: border-box;

}

.zq-col-pc-16{

float:left;

width: 100%;

}

.zq-col-pc-12{

float:left;

width: 75%;

}

.zq-col-pc-10{

float:left;

width: 62.5%;

}

.zq-col-pc-8{

float:left;

width: 50%;

}

.zq-col-pc-6{

float:left;

width: 37.5%;

}

.zq-col-pc-4{

float:left;

width: 25%;

}

.zq-col-pc-2{

float:left;

width: 12.5%;

}

.zq-col-pc-1{

float:left;

width: 6.25%;

}

@media (min-width: 768px) {

}

<style>

.div-grid {

width: 100vw;

height: 100vh;

}

.div-grid div {

border: 1px solid var(--primary);

background: var(--gray);

text-align: center;

font-size: 16px;

padding: 20px 0;

}

div .grid-title{

color: var(--primary);

font-weight: bold;

}

</style>

</div>

zq.$(function() {

$(".div-grid").find("div").each(function(index,element){

$(element).off("click").on("click",function(){

$(this).toggle(500);

})

</script>

3、flex布局

有一句话说的好：“44 年前我们就把人类送上月球了，但现在我们仍然无法在 CSS 中实现垂直居中”，flex在页面的局部布局用的非常多，就是因为它对于垂直居中非常友好，而且摆脱了栅格固定宽度百分比的限制，在实现同一个较复杂的布局里，flex比栅格要容易很多。由于对移动端没有栅格布局友好，所以我们使用栅格作为整体布局。也不能说flex布局在移动端没用，flex布局在PC端跟移动端的切换十分平滑，就是因为它可以随意切换主轴方向，从而使某些样式在PC端显示为水平，在移动端表现为垂直。

我们先看一下一个简单的效果：