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

最新推荐文章于 2024-06-18 21:35:17 发布
最新推荐文章于 2024-06-18 21:35:17 发布
阅读量1.8k 收藏 8
点赞数 6
分类专栏： 搭建网站的一些感触 hoppinzq的小破站 文章标签： html css js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41544289/article/details/118959969
版权

目录

 

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>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

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

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

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

//基类，包含所有操作dom、注册方法等等
zq = function() {
	var me = this;
	var defaultConfig = {
		//默认配置
	}
}
//为zq对象添加函数
zq.prototype = {
	constructor : zq,
	/**
	 * 该方法将返回元素类型
	 * @param {Object} obj
	 */
	elementType: function(obj){
		return Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, '$1').toLowerCase();
	},
	/**
	 * 自定义alert 只允许弹字符串（这只是一个测试，不要在意）
	 * @param {Object} str
	 */
	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);
	},
	/**
	 * 自定义打印，就是简单的打印。。。
	 * @param {Object} obj
	 */
	log(obj){
		console.log(obj);
	}
	//方法待补充
}
//自定义js的入口
zq = new zq();
//自定义初始化方法，必须等待函数和常量装载完成后，将该方法添加进zq对象
zq.$ = function(fn) {
	document.addEventListener('DOMContentLoaded', fn, false);
}

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script src="zq.js"></script>
	<script>
		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;/*这些都是非block元素，非block不具备块状样式的属性，使用display将其转块状*/
}
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>
		<meta charset="utf-8">
		<title>demo1</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<meta name="Keywords" contect="测试网站">
		<meta name="description" content="这是测试网站">
		<link href="zq.css" rel='stylesheet' type='text/css' />
		<script type="application/x-javascript">
			addEventListener("load", function() { //阻止网页滚动条缓存
				setTimeout(hideURLbar, 0);
			}, false);
		
			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		</script>
	</head>
	<body>

	</body>
	<script src="jquery-3.3.1.js"></script>
	<script src="zq.js"></script>
	<script>
		zq.$(function(){
			
		})
	</script>
</html>

1、html内容

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

<meta name="Keywords" contect="测试网站">
<meta name="description" content="这是测试网站">

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

<meta http-equiv="X-UA-Compatible" content="ie=edge">

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

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

<script type="application/x-javascript">
	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%;
}
/*当屏幕宽度小于768个像素时，使用以下的样式*/
@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 class="div-grid">
            <div class="zq-col-pc-16 grid-title">栅格布局</div>
			<div class="zq-col-pc-16">zq-col-pc-16</div>
			<div class="zq-col-pc-8">zq-col-pc-8</div>
			<div class="zq-col-pc-8">zq-col-pc-8</div>
			<div class="zq-col-pc-4">zq-col-pc-4</div>
			<div class="zq-col-pc-4">zq-col-pc-4</div>
			<div class="zq-col-pc-4">zq-col-pc-4</div>
			<div class="zq-col-pc-4">zq-col-pc-4</div>
			<div class="zq-col-pc-2">zq-col-pc-2</div>
			<div class="clear" style="border: 0px;padding: 0px;"></div>
			<div class="zq-col-pc-2">zq-col-pc-2</div>
			<div class="zq-col-pc-4">zq-col-pc-4</div>
			<div class="zq-col-pc-8">zq-col-pc-8</div>
			<div class="zq-col-pc-1">zq-col-pc-1</div>
			<div class="zq-col-pc-1">zq-col-pc-1</div>
			<div class="zq-col-pc-2">zq-col-pc-2</div>
			<div class="zq-col-pc-4">zq-col-pc-4</div>
			<div class="zq-col-pc-8">zq-col-pc-8</div>
		</div>

    <script src="jquery-3.3.1.js"></script>
	<script src="zq.js"></script>
	<script>
		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端显示为水平，在移动端表现为垂直。

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

        在父div添加样式display: flex;即可启用flex布局，你需要了解以下的概念：

        flex布局的排列都是通过主轴去排列的，默认是水平方向，垂直方向则是交叉轴，每个轴都有起点、中间点跟终点。下面就是定义在父标签的flex的属性：

.div-main-flex{
	display: flex;
	flex-direction: row;/*row , row-reverse , column , column-reverse*/
	flex-wrap: wrap;/*nowrap , wrap , wrap-reverse*/
	justify-content: flex-start; /*flex-start ,  flex-end , center , baseline*/
	align-items: flex-start; /*flex-start , flex-end , center , baseline*/
	align-content: flex-start; /*flex-start , flex-end , center , space-between , space-around*/	
}

1、flex-direction:这个就是定义主轴方法：默认值是row代表从左往右的水平行，就是我们上图那一条主轴方向；row-reverse是从右往左的水平行；column是以上图中从上往下的垂直交叉轴作为主轴；column-reverse则是以从下往上作为主轴方向。

 2、flex-wrap 这个是定义在主轴方向如何换行：默认值是nowrap，代表不换行；wrap表示换行，并往下延伸；wrap-reverse表示换行，但是往上顺延。虽然默认是nowrap，但是我们最常使用的是wrap。

 3、justify-content 这个是定义在主轴的对齐方式：默认是flex-start，从前（主轴方向的start）往后（主轴方向的end）；flex-end则是从后往前；center就是中间。baseline用的很少，它是根据里面的文本去对齐，感兴趣可以自己百度。

 4、剩下的几个大家跟子元素的属性（flex属性，很重要）可以自己百度，由于篇幅原因就不说了。

在线访问：链接

本文源代码：链接

                                未完待续。。。。。。

hoppinzq
关注
专栏目录
全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[搭建篇]
禅思院
02-18 520
本文从实战出发，初步单间一个为 turbo的基础项目工程项目，本文我估计，是全网唯一一个手把手第一次真正从0到一的完整的教程，纯属个人见解，因为我没有看到像我这么全的！，本文旨意在搭建一个vue3的组件库，后面还有更多的文章信息，我也不知道后面文章什么时候更新，本人很赖！希望搭建鼓励鼓励我！
全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[vitePress篇]
禅思院
02-19 444
一个好的工程化项目，必然有一个好的文档管理，这样才算称得上一个好的工程化，也大大提高后面的工作和文档查找的效率！
手把手教你搭建一个属于自己的网站-适合零基础小白，文末附网站模板
qq_46788925的博客
08-23 8813
手把手教你搭建一个属于自己的网站-适合零基础小白写在前面搭建需求功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 写在前面 前段时间休息想着搭一个属于自己的网站，几经尝试终于成功了，网上其实有很多教程，但很多，希望这篇文章能够帮助到
从零开始学WEB前端——前置知识以及环境搭建
m0_67266042的博客
03-06 1039
??项目介绍 先做个自我介绍，本人是一个没人写前端所以就自学前端的后端程序员??。在此项目中我会和大家一起从零基础开始学习前端，从后端程序员的视角来看前端，受限于作者的水平本项目暂时只会更新到前端框架VUE，不会涉及node.js。该项目适合零基础的小白或者和我一样开发网站没人写前端所以自学前端的后端程序员??。 该项目的学习顺序是按照我自己学习时总结出来的，其中的每个知识点都是我认真去理解的，同时也查了很多的资料，所有的参考资料我都放在了文章末尾。尊重开源，尊重知识产权。每一个案例我都亲手写过并觉得不错才
从0开始开发一个简单web界面的学习笔记(HTML类)
最新发布
月临水的博客
06-18 917
HTML叫做超文本标记语言把它拆分一下拆成：超文本：（意味着页面支持文本、声音、图片、视频、表格、链接）标记：（在页面上展示数据就需要标签啦，这些标签就组成了一个个的标记）HTML页面是运行在浏览器上面的有序列表[用的不多]olli< ol > < li > 内容 < ol > < li > 内容 < ol > < li > 内容 < li > 内容
从零开始搭建自己的网站五：登录功能编写
juewang_love的博客
02-01 3601
在之前的文章中，我们已经完成网站的整个框架，今天我们就来实现登录功能。登录功能我会把全部代码都贴出来 1、代码如下，分别是对应LoginController，UserService，UserServiceImpl，UserDao，users_sqlmap.xml，login.html，User @Controller @RequestMapping("/login") public class
HTML 简介及简单的html标签
q906646429的专栏
01-21 201
实例 My First Heading My first paragraph. 亲自试一试 什么是 HTML？ HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签
从零开始开发一个网站-01搭建环境
weixin_34364071的博客
06-22 206
2019独角兽企业重金招聘Python工程师标准>>> ...
全网首发html小霸王游戏网站搭建，童年经典200款游戏【源码+教程】
04-30
HTML小霸王游戏网站搭建...对于想要尝试自己动手搭建游戏网站或者对网页开发有兴趣的人来说，这是一个极好的实践项目。通过跟随教程，不仅可以重温童年游戏的乐趣，还能提升Web开发技能，为自己的技术之路添砖加瓦。
全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇三]
禅思院
03-06 363
接上文的全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇二]，进行详细编写rollup打包脚本
全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[组件篇四]
禅思院
03-12 356
在这实现第一个组件space[间距]到这里，第一个间隔组件开发完成啦，很简单，按照自己定义的打包规则去处理自己的组件，所以在规则下，开发组件就像自己的开发页面一样，唯一的就是开发组件要有统一的设计和思考，不然长时间下来很难把控。
前端：搭建自己的个人网站
AllenZouJ的博客
07-02 5718
作为一名h5开发者，我常常不会满足于仅仅写页面业务逻辑和对接后端接口。 （当然，如果是想当摸鱼王，我还是会满足的，哪怕只写一个静态页面，我也满足了。） 我不甘心只看到界面上的这一点区域，我渴望，了解更广阔的世界。 于是乎，就有了搭建自己的个人网站的想法。 使用的工具和技术包括：墨刀-vue-node.js-mysql-navicate-宝塔面板 步骤 以下步骤不用严格按照先后顺序，比如网站备案可能要花很久，可以作为第一步。 又比如，我一边开发，一边有点新想法，我又可以回来修改原型。 毕竟在这里，我是产品
从零开始建网站（一）：
夜狼青禾的博客
12-29 1499
       出来工作也快两年了，一直做的是前端工程师的工作，临近年底，想到现在也是比较空闲，就打算自己建立一个个人网站。这个系列的博文我也是打算一直持续更新下去，记录下自己建站的一点一滴。        好了，话不多说了，现在就开始搭建网站：        要建立个人网站，有三个必备要素：域名、服务器和程序。域名我是从腾讯云上购买的，最近刚好有活动1块钱就可以买一个域名使用一年，毕竟是打算自...
会前端就可以轻松建网站
ZKEASOFT
03-26 3196
网站其本质就是HTML + CSS 外加一些JavaScript构成的。所以基本上只要你会一些前端，就可以开始花样搭网站了。 如果只用HTML/CSS那做出来的网站只能叫静态网站，性能好但维护不方便，所以你需要一个建站程序来帮你做这个事情。 如果你已经有一台VPS（阿里的ECS或者腾讯的CVM）无所谓都可以，一行命令你就能把网站搭起来，然后网站内容结构就随你自己折腾了。 Linux (Cen...
从0开始开发网页，需要学什么？（小白向）
TheBestRookie的博客
11-02 572
一直以来都有开发个人网站的想法，正巧学校这个学期开了门实践课需要通过网页来实现。然而在中文网站搜到的相关博客中，只能说相当的不友好……于是开这篇博客，力求用最简单的语言，向同样想开发网页，但没有基础的你讲解需要学会什么。 当然前提是你得有一些编程的基础，不然可能还是挺难受的…… （2020.11.02 连载中） ...
从零开始建网站（二）：
夜狼青禾的博客
01-02 1298
       上次已经申请了一个域名，不过有一点我没有改，那就是在域名解析添加记录值时我填写的ip地址是我的本地服务器，也就是说只要我这台电脑一关机那么你们通过那个网站是访问不到我的域名的。如果要想别人随时都可以访问到我的网站，那么这个时候就需要租一个云服务器了。 那么接下来就是云服务器的购买了，顺便提一句上次购买的域名已经认证成功用，用来3天的时间。 好的，那么现在来看一下服务器，我...
前端电商项目实战，如何从 0 开始创造一个【考拉海购官网】？（ 共6节教程 ）
数据库爆破专家的博客
04-22 9306
文章目录声明：本次开发仅针对考拉海购的官网首页进行前端UI开发教程目录 从0开始做一个【考拉海购网站】 声明：本次开发仅针对考拉海购的官网首页进行前端UI开发 我写了6篇教程，代码中有大量注释，尽可能地去解释因果，只愿阅读教程的你能够学到一些知识，关于本次开发的还原度，因为一些细节比较费时间，之后我会将更多的经历投入到h5的游戏开发或者其他demo开发中，所以还原度会有些差距，我们来看两组图 ： ...
2019最新《分享网页前端制作教程+php网站搭建课程》
zz951159的博客
05-12 743
课程概述： 本课程为前端网页实例制作及网站搭建入门与提高， 课程分为3部分 首先是网页前端的学习，从零基础开始，学习HTML、DIV+CSS，最后搭建出线上网站当当网页面。 其次为MySQL的讲解，从零基础，MySQL的安装到DDL、DML的讲解，理论结合实例， 让同学们快速掌握MySQL的使用。 最后为widows系统上，PHP语言编写及运行环境的搭建， 从零基础由浅入深讲解P...
sql实现a-b_全网最详细SQL语法汇总，快来偷偷收藏学习吧
06-03
好的，以下是实现a-b_的 SQL 语句： ``` SELECT REPLACE(REPLACE(REPLACE(REPLACE(REPLACE(REPLACE(REPLACE(REPLACE(REPLACE(REPLACE(LOWER(column_name), 'a', ''), 'b', ''), 'c', ''), 'd', ''), 'e', ''), 'f', ''), 'g', ''), 'h', ''), 'i', ''), 'j', '') AS new_column_name FROM table_name; ``` 其中，`column_name` 是需要处理的字段名，`table_name` 是需要处理的表名，可以根据实际情况替换。 这个 SQL 语句使用了多个 `REPLACE` 函数，把字段中的字母 `a` 到 `j` 全部替换为空字符串，然后通过 `LOWER` 函数把字段中的大写字母转换成小写字母，并且新建一个名为 `new_column_name` 的列来存储处理后的结果。 希望对你有所帮助，记得收藏哦！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值