一口气从零到全栈开发（结合ai快速入门）【视频学习】1-CSDN博客

前情提要

原视频链接：一口气从零到全栈开发_哔哩哔哩_bilibili

本篇作为笔记，主要用做复习，会以持续更新合集，最后会整一个全部的内容给大家

学到哪里，写到哪里

菜鸟教程（包含html和css教程）

菜鸟教程 - 学的不仅是技术，更是梦想！

vscode下载：官网直接查

改中文：点左侧扩展-搜索chinese

创建代码文件

一、基础补充内容

1.1html以及css定义

HTML:超文本标记语言，是构建网页的标准语言，用来定义网页的结构、内容和部分行为。可以理解为框架，像盖完没有装修的毛坯房。
CSS:层叠样式表，是用来给 HTML 网页添加样式的，比如设置文字颜色、背景、布局、动画等等。无法单独存在，基于毛坯房上的装修。

1.2vscode放大字体

有些电脑无法用鼠标滚轮+ctrl

那我们就换一种方法：

1.文件中点击首选项-设置，右边字体自行调节即可

1.3注释

/* 这是 css的注释 */

二.创建文件及基础标签使用

2.1创建一个文件

vscode中创建一个html文件，文件后缀名.html
输入英文!+Tab自动补齐，在中填充内容，css需要在中建立内填充内容。

所有标签打的时候最好直接用回车或特殊键直接补全

2.2添加网页内容文字以及标题

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>cuz</title> <!--两个title之间，更改题目，这些都是标签->

</head>

<body>

<h1>xst</h1> <!--两个body之间，h1+tab补全-，这些都是标签->

</body>

</html>

修改后，ctrl+s保存好，再打开我们创建的文件夹打开就可以看到网页内容

2.3创建一个小盒子并修改颜色

创建盒子：div（最常用标签）

给div添加一个类名

div.(类名）

盒子中的内容需要用style来包住他

<body>

<div class="box"></div> /* 创建一个盒子*/

<style>

.box{ /* 表示为box这个盒子来更改样式 */

width: 100px; /* 宽度 */

height: 100px; /* 高度 */

background-color: black;/* 背景颜色 */

}

</style>

</body>

现在我们进入实战

三.实例制作一个todo网页

（这是我们最终想要达到的效果）

3.1首先修改背景颜色+添加白色盒子为底框

因为背景是渐变色，我们不会直接请教我们的ai老师，接下来给body写样式需要写到style标签中

在用F12查看网页本身颜色可知具体数值

body {

background: linear-gradient(to right,rgb(113, 65, 168),rgba(44, 114, 251,1) );

}

3.1.1颜色表示

（这次我们的宽度没有用百分比，而是16进制）

3.1.2.宽度表示

百分数是无论网页什么大小都是占比这么多

3.1.3圆角效果

border-radius: 5px;

3.1.4改变盒子位置

  margin-top: 40px;

        margin-left: 1%;

3.2向盒子中间填充内容

注意：这次我们照常加margin-top发现没有任何作用，那我们就在外面的盒子里加padding

3.2.1margin和padding的作用区别

margin：是在盒子外面加距离（外边距）

padding:是在里面加距离，直接将文字下移（内边距）

盒子实际高度=边距+实际高度

解决方式：加一个box-sizing:border-box，让这个高度一直都保持设置的模式

3.2.2添加小框

placeholder

    .todo-button{

      width: 100px;/* 宽度*/  

      height: 52px;/* 高度*/  

      border-radius: 0 20px 20px 0;/* 顺时针加圆角*/  

      line-height: 52px;/* 行高*/

      text-align:center;/* 剧中*/

      background: linear-gradient(to right,rgb(113, 65, 168),rgba(44, 114, 251,1) );

      cursor: pointer;/* 当鼠标放上的时候是指向而非标*/

      user-select: none;/* 不可选择*/

      color: #ffff;



    }



     .todo-input

     {

      padding-left: 15px;

      border:1px   solid    #dfeae5;/* 三个属性  宽度  样式  颜色 */

      width: 60%;

      height: 50px;

      border-radius: 20px 0 0 20px;/* 顺时针加圆角*/  

     

    }

3.2.3在小框中添加3个内容

<div class="item">

<div>

<input type="checkbox">

<span class="name">吃饭</span> 横着排

</div>

<div class="del">del</div>

</div>

.item{

display: flex;

/* 让框里面的所有元素横着排列*/

align-items: center;

/* 让框里面的所有元素在垂直的情况下剧中 */

justify-content: space-between;

/* 让框里面的所有元素自动平分里面的空间 */

box-sizing: border-box; /* 加一个box-sizing:border-box，让这个高度一直都保持设置的模式 */

width: 80%;

height: 50px;

margin: 8px auto; /* 一个上下，一个左右自动适应 */

/* 给盒子加一个外边距 */

padding:16px;

/* 给盒子加一个内边距 */

border-radius: 20px; /* 给圆角属性*/

box-shadow: rgba(149,157,165,0.2) 0px 8px 20px; /* 给盒子加一个阴影*/

}

3.2.4将3个元素放在合适位置

接下来需要实现，框和文字在前，del拍在后面，并且拖动网页·的时候保持技巧不变

1.在item中要添加指令

align-items: center;

/* 让框里面的所有元素在垂直的情况下剧中 */

justify-content: space-between;

/* 让框里面的所有元素自动平分里面的空间 */

2.其次，我们要将原先盒子里的三部分改为图二中的两部分，这样才能达到，框和文字在前，del拍在后面两部分的效果

</div>

<div class="item">

<div> 

<input type="checkbox">

<span class="name">吃饭</span>



</div>

<div class="del">del</div>

</div>

</div>

达到平分效果：

（这里用到的是Flex布局语法（菜鸟中有，大家可以直接去搜索）

3.同样的复制3份就可以达到，同样效果

4.del颜色是红色的

style中添加del

四.复盘-今日学习

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>前前前前端</title> 

</head>

<body>



<div class="todo-app">

<div class="title">XST的TodoAPP</div>

<div class="todo-form">

<input class="todo-input" type="text" placeholder="Add a todo">

<div class="todo-button">Add todo</div>

</div>

<div class="item">

<div>

<input type="checkbox">

<span class="name">吃饭</span>

</div>

<div class="del">del</div>

</div>

<div class="item">

<div>

<input type="checkbox">

<span class="name">吃饭</span>

</div>

<div class="del">del</div>

</div>

<div class="item">

<div>

<input type="checkbox">

<span class="name">吃饭</span>

</div>

<div class="del">del</div>

</div>

</div>

<style>

.del

{

color: red;

}

.item{

display: flex;

/* 让框里面的所有元素横着排列*/

align-items: center;

/* 让框里面的所有元素在垂直的情况下剧中 */

justify-content: space-between;

/* 让框里面的所有元素自动平分里面的空间 */

box-sizing: border-box;

width: 80%;

height: 50px;

margin: 8px auto; /* 一个上下，一个左右自动适应 */

/* 给盒子加一个外边距 */

padding:16px;

/* 给盒子加一个内边距 */

border-radius: 20px;

box-shadow: rgba(149,157,165,0.2) 0px 8px 20px;

}

.todo-button{

width: 100px;/* 宽度*/

height: 52px;/* 高度*/

border-radius: 0 20px 20px 0;/* 顺时针加圆角*/

line-height: 52px;/* 行高*/

text-align:center;/* 剧中*/

background: linear-gradient(to right,rgb(113, 65, 168),rgba(44, 114, 251,1) );

cursor: pointer;/* 当鼠标放上的时候是指向而非标*/

user-select: none;/* 不可选择*/

color: #ffff;

}

.todo-input

{

padding-left: 15px;

border:1px solid #dfeae5;/* 三个属性宽度样式颜色 */

width: 60%;

height: 50px;

border-radius: 20px 0 0 20px;/* 顺时针加圆角*/

}

.todo-form{

display: flex;

margin-top: 30px;

margin-left: 20px;

} /* 想让两个东西横着排的时候 */

/* 给我们创建的盒子里加上样式 */

body {

background: linear-gradient(to right,rgb(113, 65, 168),rgba(44, 114, 251,1) );

}

/* 类名写一个todoapp,把宽和高都写进去*/

.todo-app

{

width:98%;

height:500px;

padding-top: 30px;

box-sizing: border-box;

background-color: #ffff;

border-radius: 5px; 圆角

margin-top: 40px;

margin-right: 1%;

}

.title{

font-size: 30px;/*字的大小，字重，剧中*/

font-weight: 700;

text-align: center;

}

</style>

</div>

</body>

</html>