阶段一:前端开发基础
文章平均质量分 66
王祎0825
这个作者很懒,什么都没留下…
展开
-
HTML思维导图
HTML思维导图原创 2022-06-20 16:13:59 · 105 阅读 · 0 评论 -
2D转换及相关案例实现
2D转换之移动、旋转、中心点,缩放以及转换的综合写法原创 2022-03-29 19:13:14 · 434 阅读 · 0 评论 -
HTML5和CSS3提高
HTML5新增的语义化标签、多媒体标签(video、audio)、input类型、表单属性css3新特性:属性选择器、结构伪类选择、伪元素选择器、css盒子模型、css其他特性(图片变模糊以及calc函数)以及过渡还有什么是广义的HTML5原创 2022-03-27 15:09:40 · 71 阅读 · 0 评论 -
CSS进阶
css用户界面样式:鼠标样式、轮廓线、防止拖拽文本域;vertical-align属性应用:图片、表单和文字对齐以及解决图片底部默认空白缝隙等问题溢出的文字省略号显示:单行/多行文本溢出显示省略号常见的布局技巧:margin负值、文字围绕浮动元素、行内块、css三角等的运用css初始化原创 2022-03-26 11:00:00 · 153 阅读 · 0 评论 -
精灵图与字体图标
精灵图、字体图标、css三角的使用以及简单案例原创 2022-03-25 11:00:00 · 516 阅读 · 0 评论 -
网页布局总结及案例
网页布局总结以及淘宝焦点图布局制作原创 2022-03-23 11:00:00 · 978 阅读 · 0 评论 -
元素的显示与隐藏
display显示隐藏、visibility可见性、overflow溢出以及相关应用案例原创 2022-03-24 11:00:00 · 102 阅读 · 0 评论 -
CSS四种定位
为什么需要定位?静态定位、相对定位、绝对定位、固定定位、粘性定位以及定位的相关拓展原创 2022-03-22 11:00:00 · 235 阅读 · 0 评论 -
学成在线项目
1.典型的企业级网站2.目的是为了整体感知企业级网站布局流程以及复习以前知识。一、准备素材和工具学成在线psd源文件开发工具=PS(切图)/cutterman插件+vscode(代码)+chrome(调试)二、案例准备工作采用结构与样式相分离思想:创建study目录文件夹(用于存放这个网页的相关内容)用vscode打开目录文件夹study目录新疆images文件夹,用于保存图片新建首页文件index.html(网站首页统一规定为index.html)新建style.css样式文件原创 2022-03-21 14:07:20 · 2365 阅读 · 0 评论 -
清除浮动+PS切片
为什么需要清除浮动,清除浮动的本质以及清除浮动的方法原创 2022-03-20 18:53:56 · 119 阅读 · 0 评论 -
浮动(float)
浮动特性以及注意点原创 2022-03-20 14:23:35 · 150 阅读 · 0 评论 -
圆角和阴影
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、圆角边框二、盒子阴影1.引入库2.读入数据三、文字阴影前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、圆角边框示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。二、盒子阴影1.引入库代码如下(示例):.原创 2022-03-17 22:41:38 · 59 阅读 · 0 评论 -
CSS盒子模型总结
布局为什么用不同盒子,而不是只用div?原创 2022-03-17 20:35:55 · 54 阅读 · 0 评论 -
综合案例:产品模块
相关代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title原创 2022-03-17 20:29:17 · 96 阅读 · 0 评论 -
案例:新闻快报模块
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、pandas是什么?示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代.原创 2022-03-17 20:58:52 · 93 阅读 · 0 评论 -
小米侧边栏修改
padding内边距可以撑开盒子,有时候,也会让我们修改宽度所以小米侧边栏这个案例,文字距离左侧不应该用text-indent,这样不精确。实际开发的合法做法是给padding值,这样更加精确。修改如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge原创 2022-03-13 22:05:08 · 507 阅读 · 0 评论 -
新浪导航案例-padding影响盒子好处
padding内边距可以撑开盒子,可以进行巧妙运用。因为每个导航栏里面的字数不一样多,我们可以不用给每个盒子宽度了,直接给padding最合适。新浪导航栏相关取值:上边框为3像素,颜色为#ff8500下边框为1像素,颜色为#fedeef0盒子高度为41像素,背景颜色为#fcfcfc文字颜色为#4c4c4c <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2022-03-13 21:57:49 · 334 阅读 · 0 评论 -
CSS盒模型
文章目录前言一、盒子模型(Box Model)组成二、边框1.边框的复合写法(简写)2.边框实际会影响盒子实际大小三、表格细线边框四、内边距(padding)1.padding复合属性2.padding会影响盒子实际大小3.padding不会影响盒子大小的情况五、外边距(margin)1.外边距典型应用2.外边距合并(1)相邻块元素垂直外边距的合并(2)嵌套块元素垂直外边距的塌陷前言页面布局要学习三大核心,盒子模型、浮动和定位。学习好盒子模型可以非常好的帮助我们对页面进行布局看透网页布局的本质网页原创 2022-03-13 21:39:15 · 132 阅读 · 0 评论 -
CSS三大特性
文章目录前言一、层叠性二、继承性行高的继承性三、优先级权重叠加前言css有三个非常重要的特性:层叠性、继承性、优先级一、层叠性相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题层叠性原则:样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠二、继承性现实中的继承:我们继承了父的姓css中的继承:子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业。恰当地使用继承可以简化代码原创 2022-03-10 20:54:14 · 54 阅读 · 0 评论 -
王者荣耀官网大图
案例1:<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title>原创 2022-03-10 16:47:47 · 234 阅读 · 0 评论 -
CSS的背景
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、背景颜色二、背景图片三、背景平铺总结前言通过CSS背景属性,可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。一、背景颜色background- color属性定义了元素的背景颜色。background-color:颜色值;一般情况下元素背景颜色默认值是transparent (透明) , 我们也可以手动指定背景颜色为透明色。二、背景图片back.原创 2022-03-09 22:33:13 · 140 阅读 · 0 评论 -
简单小米侧边栏案例
小米侧边栏案例原创 2022-03-08 23:38:12 · 126 阅读 · 0 评论 -
CSS的元素显示模式
文章目录前言一、什么是元素显示模式二、块元素三、行内元素四、总结前言了解元素的显示模式可以更好的让我们布局页面一、什么是元素显示模式作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的页面。元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如一行可以饭多个<span>.HTML元素一般分为块元素和行内元素两种类型。二、块元素常见块元素有<h1>~<h6>、<p>、&原创 2022-03-08 22:06:47 · 87 阅读 · 0 评论 -
CSS复合选择器
文章目录前言一、Emmet语法1.快速生成HTML结构语法2.快速生成css样式语法二、使用步骤前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、Emmet语法Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度,Vscode内部已经集成该语法。1.快速生成HTML结构语法生成标签,直接输原创 2022-03-08 17:32:24 · 118 阅读 · 0 评论 -
CSS引入方式
文章目录前言一、内部样式表二、行内样式表三、外部样式表四、总结前言按照css样式书写的位置(或者引入方式),css样式表可以分为三大类:行内样式表(行内式)内部样式表(嵌入式)外部样式表(链接式)一、内部样式表内部样式表(内嵌样式表)是写道html页面内部。是将所有的css代码抽取出来,单独放到一个<style>标签中。<style> div{ color: red; font-size: 12px; }</style><st原创 2022-03-05 21:11:11 · 69 阅读 · 0 评论 -
CSS文本属性
文章目录前言一、文本颜色二、文本对齐三、装饰文本四、文本缩进五、行间距六、文本属性总结前言CSS Text (文本)属性可定义文本的外观,比如文本的颜色、对齐文本装饰文本、文本缩进、行间距等。一、文本颜色color属性用于定义文本的颜色。div{ color: red; }颜色表示属性值预定义的颜色值red, green, blue十六进制#FF000O,#FF6600, #29D794RGB代码rgb(255,0,0)或rgb(10096,0%6原创 2022-03-05 19:02:59 · 274 阅读 · 0 评论 -
CSS字体属性
文章目录前言一、字体系列二、使用步骤1.引入库2.读入数据总结前言CSS Fonts (字体)属性用于定义字体系列、大小粗细、和文字样式(如斜体)。一、字体系列CSS使用font- family属性定义文本的字体系列。p { font- family: "微软雅黑";}div { font- family: Arial, "Microsoft Yahei","微软雅黑";}● 各种字体之间必须使用英文状态下的逗号隔开● 一般情况下,如果有空格隔开的多个单词组成的字体加引号。● 尽量原创 2022-03-05 17:20:22 · 123 阅读 · 0 评论 -
CSS基础选择器
文章目录前言一、CSS选择器的作用二、选择器分类1.基础选择器(1)标签选择器(2)类选择器①多类名使用方式②多类名开发中使用场景类选择器总结(3)id选择器id选择器和类选择器的区别(4)通配符选择器(5)基础选择器总结2、复合选择器前言我想把div里面的文字改为红色?我想把第一个div里面的文字改为红色?我想把ul 里面的li文字改为红色?一、CSS选择器的作用选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说 ,就是选择标签用的。h1原创 2022-03-05 16:33:12 · 94 阅读 · 0 评论 -
CSS简介
文章目录前言一、 HTML的局限性二、使用步骤1.引入库2.读入数据总结前言css的主要使用场景就是美化网页,布局页面的。一、 HTML的局限性说起HTML ,这其实是个非常单纯的家伙,他只关注内容的语义。比如<h1>表明这是一个大标题,<p>表这是一个段落,表明这儿有一个图片,<a>表示此处有链接。很早的时候,世界上的网站虽然很多,但是他们都有一个共同的特点:丑.虽然HTML可以做简单的样式,但是带来的是无尽的臃肿和繁…二、使用步骤1.引入库代原创 2022-03-05 00:24:19 · 439 阅读 · 0 评论 -
使用表单标签注册页面
注册页面图2.代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &.原创 2022-03-04 23:01:35 · 453 阅读 · 0 评论 -
表单标签总结
表单元素分为三大类:input输入表单元素、select下拉表单元素、text area文本域表单元素。这三组表单元素都应该包含在form表单域里面,表且有name属性。<form> <input type="text" name="username"> <select name="籍贯"> <option>北京</option> <textarea name="message"></t.原创 2022-03-04 18:51:33 · 55 阅读 · 0 评论 -
表单(table)标签
文章目录一、为什么需要表单标签?二、表单组成三、表单域四、表单元素(表单控件)1、input表单元素提问2、label标签3、select表单元素4、textarea表单元素五、查阅文档一、为什么需要表单标签?使用表单目的是为了收集用户信息。在网页中,我们需要跟用户进行交互,收集用户资料,此时就需要表单。二、表单组成在HTML中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分构成。三、表单域表单域是一个包含表单元素的区域。在HTML标签中,<form>原创 2022-03-03 23:11:44 · 961 阅读 · 0 评论 -
HTML表格和列表
文章目录一、表格标签1. 表格的主要作用2. 表格的基本语法3. 表头单元格标签4. 表格属性5. 表格结构标签6. 合并单元格(1)合并单元格方式(2)目标单元格(3)合并单元格的步骤7. 案例分析8. 总结二、列表标签1.无序列表2. 有序列表3. 自定义列表总结1.表格总结2. 列表总结一、表格标签1. 表格的主要作用表格主要用于显示,展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条原创 2022-03-03 16:46:34 · 352 阅读 · 0 评论 -
超链接标签、注释标签
文章目录一、链接的语法格式二、链接的分类1.引入库2.读入数据总结一、链接的语法格式<a href="跳转目标"target="目标窗口的弹出方式">文本或图案</a>单词anchor的缩写,意为:锚。两个属性的作用如下:属性作用centered 文本居中right-aligned 文本居右二、链接的分类1.引入库代码如下(示例):import numpy as npimport pandas as pdimport matplot原创 2022-03-02 22:57:14 · 1508 阅读 · 0 评论 -
HTML常用标签——路径
文章目录前言一、相对路径二、绝对路径前言目录文件夹和根目录:实际工作中,我们的文件不能随便乱放,否则用起来很难快速的找到他们,因此我们需要一个文件夹来管理他们。目录文件夹:就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如html文件、图片等。根目录:打开目录文件夹的第一层就是根目录。页面中的图片会非常多,通常我们会新建一个文件夹来存放这些图像文件 ( images) , 这时再查找图像,就需要采用“路径”的方式来指定图像文件的位置。路径可以分为:1.相对路径2.绝对路径一原创 2022-01-30 13:15:19 · 1698 阅读 · 0 评论 -
初始HTML(下)——HTML常用标签
文章目录前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、pandas是什么?示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下(示例):import numpy as npimport原创 2022-01-29 20:10:59 · 67 阅读 · 0 评论 -
初始HTML(上)
文章目录一、HTML语法规范1.基本语法概述2.标签关系二、HTML基本结构标签三、开发工具总结一、HTML语法规范1.基本语法概述①HTML 标签是由尖括号包围的关键词,例如<html>.②HTML 标签通常是成对出现的,例如<html>和</html>, 我们称为双标签。标签对中的第一个标签是开始标签,第二个标签是结束标签。③有些特殊的标签必须是单个标签(极少情况) , 例如<br/>,我们称为单标签。2.标签关系双标签关系可以分为两类:包含原创 2022-01-26 21:04:47 · 96 阅读 · 0 评论 -
HTML简介
文章目录一、网页的基本组成1.什么是网页?2.什么是HTML?3.网页的形成二、常用的浏览器1.常用浏览器2.浏览器内核三、web标准1.为什么需要web标准2. Web标准的构成一、网页的基本组成1.什么是网页?网站是指在因特网上根据一定的规则 ,使用HTML等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页” , 通常是HTML格式的文件,它要通过浏览器来阅读。网页是构成网站的基本元素,它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页,常见以.htm或.html后原创 2022-01-25 23:10:42 · 146 阅读 · 0 评论 -
vscode安装及插件安装
vscode简介、安装、使用及插件安装原创 2022-01-24 23:51:15 · 8385 阅读 · 0 评论