前端基础
关注
分享
扫一扫
文章平均质量分 52
倔强的小白菜
油菜油爱玩就不爱学习
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS3的新特性——属性选择器
属性选择器可以根据特定属性来选择元素，这样就可以不用借助于类或者id选择器。E[att]选择具有att属性的E元素注意：类选择器、属性选择器、为类选择器，权重为10.练习：原创 2022-07-04 16:20:23 · 213 阅读 · 0 评论 -
HTML5新增特性——新增的表单属性
当用户在字段开始键入时，浏览器基于之前键入的值，应该显示出在字段中填写的选项默认已经打开，如autocomplete="on",关闭autocomplete="off"需要放在表单内，同时加上name属性，同时成功提交可以通过以下设置方式修改placeholder里面的字体颜色：input::placeholder{ color:pink; }...原创 2022-06-15 16:11:01 · 266 阅读 · 0 评论 -
HTML5新增特性——新增的input类型
HTML5新增特性——新增的input类型原创 2022-06-15 15:43:19 · 322 阅读 · 1 评论 -
HTML5新增特性——新的多媒体标签
新增的多媒体标签主要包含两个：使用他们可以很方便的在页面中嵌入音频和视频，而不是去使用flash和其他浏览器插件。HTML5在不适用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的。当前元素支持三种视频格式：尽量使用MP4格式YES从Firefox21版本开始Linux系统从Firefox30开始YES从Opera25版开始语法：preload（预加载）auto（预先加载视频）none（不应加载视频） 2.音频当前元素支持三种音频...原创 2022-06-15 15:04:31 · 511 阅读 · 0 评论 -
HTML5新特性——新的语义化标签
HTML5的新增特性主要是针对于以前的不足，增勖加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是9+以上版本的浏览器才支特，如果不考虑兼容性问题，可以大量使用这些新特性。声明：1.新特性增加了很多，但是我们专注于开发常用的新特性2.基础班我们讲解部分新特性，到了就业班还会继续讲解其他新特性。语义 = 意义什么是语义元素?一个语义元素能够清楚的描述其意义给浏览器和开发者。无语义 元素实例: 和 - 无需考虑内容.语义元素实例: , ......原创 2022-06-08 16:11:47 · 1635 阅读 · 0 评论 -
高级技巧之css初始化
不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照频刘览器的兼容，我们需要对CSS初始化。简单理解：CSS初始化是指重设浏览器的样式。（也称为CSSreset)每个网页都必须首先进行CSS初始化.这里我们以京东c3s初始化代码为例。Unicode编码字体：把中文字体的名称用相应的Unic0d编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现团乱码的问题。比如：黑体19ED14F53宋体15B8B趴4F53微软雅黑15FAE8F6FH96C59ED原创 2022-06-07 16:21:09 · 120 阅读 · 0 评论 -
高级技巧之常见布局技巧
巧妙利用一个技术更快更好的布局：1.margin负值的运用2.文字围绕浮动元素3.行内块的巧妙运用4.css三角强化1.让每个盒子margin往做移动-1px正好压住相邻盒子边框2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index）1.2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果有定位，则加z-index） 2.文字围绕浮动元素巧妙运用浮动元素不会压住文字的特性：浮动元素只会压住它下面标准流的盒子，但是不会原创 2022-06-07 16:14:52 · 134 阅读 · 0 评论 -
高级技巧之溢出的文字省略号显示
1.先强制一行内显示文本2.超出的部分隐藏3.文字用省略号代替超出的部分2. 多行文字溢出显示省略号多行文本溢出显示省略号，有较大的兼容性问题，适合于webkit浏览器或移动端（移动端大部分是webkit内核）注意：更推荐后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。...原创 2022-06-07 10:14:22 · 2109 阅读 · 0 评论 -
高级技巧之vertical-align属性应用
css的vertical-align属性使用场景：经常 用于设置图片或者表单（行内块元素）和文字垂直对齐。官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内块元素或者行内元素有效。语法：图片、表单都属于行内块元素，默认的vertical-align是基线对齐。 此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文本和图片垂直居中对齐。 2.解决图片底部默认空白缝隙问题bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。主要解决原创 2022-06-02 09:52:24 · 823 阅读 · 0 评论 -
高级技巧之界面样式
所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。设置或检索在对象上移动的鼠标指针采用何种系统定义 的光标形状。1.2.轮廓线outline给表单添加outline：0；或者outline：none；样式之后，就可以去掉默认的蓝色边框。实际开发中，文本域右下角是不可以拖拽的。原创 2022-06-02 09:35:07 · 129 阅读 · 0 评论 -
高级技巧之css三角
网页中常见一些三角形，使用css直接画出来就可以，不必做成图片或者字体图标。一张图就知道css三角是怎么做出来的，如下：案例一： 案例二：原创 2022-06-02 09:24:16 · 161 阅读 · 0 评论 -
高级技巧之精灵图
一个网页中往往会应用很多小的背景图像作为装饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器压力过大，这将大大降低页面的加载速度。因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了css精灵技术（也称CSS Sprites 、CSS雪碧）。核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。1.1.1.1使用精灵图核心：1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到张大图片中。2.这个大图片也称为sprit原创 2022-06-01 16:49:42 · 687 阅读 · 0 评论 -
高级技巧之字体图标的使用
字体图标使用场景：主要用于显示网页中通用、常用的一些小图标精灵图是有诸多优点的，但是缺点很明显。1.图片文件还是比较大的2.图片本身放大和缩小会失真。3.一旦图片制作完毕想要更换非常复杂。此时，有一种技术的出现很好的解决了以上问题，就是字体图标iconfont。.字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。总结：1.如果遇到一些结构和样式比较简单的小图标，就用字体图标。2.如果遇到一原创 2022-06-01 16:48:03 · 634 阅读 · 0 评论 -
元素的显示与隐藏
类似网站广告，当我们点击关闭就不见，但是我们重新刷新页面，会重新出现！本质：让一个元素在页面中隐藏或者显示出来。1.display 显示隐藏2.visibility 显示隐藏3.overflow 溢出显示隐藏1.display属性***display属性用于设置一个元素应如何显示。display：none； 隐藏对象 display：block；除了转换为块级元素之外，同时还显示元素的意思、display隐藏属性后，不再占有原来的位置。后面应用及其广泛，搭配js可以做很多原创 2022-05-31 16:47:09 · 305 阅读 · 0 评论 -
定位（1）***
1.为什么需要定位？标准流或浮动无法实现随意布局的情况下需要定位来实现。浮动可以让多个块级盒子一行没有缝隙的排列显示，经常用语横向排列盒子 定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子2.定位组成定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位=定位模式+边偏移定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了元素的最终位置。2.1.定位模式定位模式决定元素的定位方式，它通过css的posit原创 2022-05-31 16:04:01 · 275 阅读 · 0 评论 -
综合案例：学成在线案例
1.准备素材和工具1.学成在线PDS源文件。2.开发工具=PS（切图）/cutterman插件+vscode（代码）+Chrome（测试）。2.案例准备工作本次采取结构与样式相分离思想：1.创建study目录文件夹（用于存放页面的相关内容）2.用vscode打开这么目录文件夹3.study目录内新建images文件夹，用于保存图片4.新建首页文件index.heml(网站首页统一规定为index.html5.新建style.css样式文件，采用外链接样式表6.使用&l原创 2022-05-26 10:03:57 · 1660 阅读 · 0 评论 -
（三）清除浮动
思考：前面说到的浮动元素有一个标准流的父级元素，他们有一个共同的特点，都是有高度的。但是，所有的父级盒子都必需要有高度吗？答：理想状态下，让盒子撑开父亲，有多少孩子，父级就有多高。但是。。。。。。1.为什么需要清除浮动？由于父级盒子很多情况下，不方便给高度，但是盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。由于浮动元素不占原文档流的位置，所以他会对后面的元素排版产生影响<!DOCTYPE html><html lang="en原创 2022-05-18 17:05:52 · 195 阅读 · 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" /&g.原创 2022-05-18 15:27:33 · 742 阅读 · 0 评论 -
（一）浮动***
1.传统网页布局的三种方式网页布局的本质——用css来摆放盒子，把盒子摆放到相应位置。css提供了三种传统布局方式（简单说，就是盒子如何进行排列顺序）：普通流（标准流） 浮动 定位2.标准流（普通流/文档流）所谓的标准流：就是标签按照规定好默认的方式排列。块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table2.行内元素会按照顺序，从左到右顺序排列，碰到父级元素边缘则会自动换行。常用元素：span、a（超链接标签原创 2022-05-16 15:52:38 · 343 阅读 · 0 评论 -
盒子阴影***
css3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。语法：box-shadow：h-shadow v-shadow blur spread color inset；值 描述 h-shadow 必需，水平阴影位置，允许负值 v-shadow 必需，垂直阴影的位置，允许负值 blur 可选，模糊距离（阴影的虚实） spread 可选，阴影的尺寸 color 可选，阴影的颜色 inset 可选，将...原创 2022-05-13 11:44:54 · 471 阅读 · 0 评论 -
圆角边框***
在css3中，新增了圆角边框样式，这样盒子就可以变圆角了。border-radius属性用于设置元素的外边框圆角。语法：border-radius：length；radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果以上为圆角边框原理参数值可以为数值或百分比的形式 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50% 如果是一个矩形，设置为高度的一半就可以做 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下.原创 2022-05-12 17:19:36 · 2492 阅读 · 0 评论 -
（四）盒子模型之外边距
1.外边距margin属性用于设置外边距，即控制盒子和盒子之间的距离。属性 作用 margin-left 左外边距 margin-right 右外边距 margin-top 上外边距 margin-bottom 下外边距 margin简写方式代表的意义跟padding完全一致。 如下：<!DOCTYPE html><html lang="en"> <head> <meta charset=原创 2022-05-12 11:21:03 · 2875 阅读 · 0 评论 -
（三）盒子模型之内边距padding
padding属性用于设置内边距，级边框与内容之间的距离。单位是px。属性 作用 padding-left 左内边距 padding-right 有内边距 padding-top 上内边距 padding-bottom 下内边距 练习<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta h原创 2022-05-05 17:51:14 · 760 阅读 · 0 评论 -
（二）盒子模型之边框border
1.边框的组成及用法border可以设置元素的边框，边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色。语法：border：border-width | border-style | border-color属性 作用 border-width 定义边框粗细，单位是px border-style 边框样式 border-color 边框颜色 1.1 边框语法练习<!DOCTYPE html><html lang="原创 2022-05-05 17:23:40 · 970 阅读 · 0 评论 -
（一）什么是盒子模型
1.看透网页布局的本质网页布局过程：先准备好相关的网页元素，网页元素基本都是盒子Box 利用css设置好盒子样式，然后摆放相应位置 往盒子里面装内容网页布局的核心本：就是利用css摆盒子2.盒子模型（Box Model）组成 所谓盒子模型：就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是一个盛装内容的容器。 css盒子模型本质上是一个盒子，封装周围的HTML元素，他包括：边框、外边距、内边距和实际内容，如图所示：...原创 2022-05-05 16:16:37 · 313 阅读 · 0 评论 -
HTML-列表标签
什么是列表？把…制成表,以表显示。容器里面装载着文字或图表的一种形式，叫列表。列表最大的特点就是 整齐 、整洁、 有序。根据情境不同，列表可以分为三大类：无序列表、有序列表和自定义列表。1.无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用 <ul> 标签，每个列表项始于 <li> 标签。<ul> <li>列表项1</ li> <li>列表项1...原创 2022-05-05 10:40:17 · 1814 阅读 · 0 评论 -
css的三大属性
css有三个非常重要的三大属性：层叠性、继承性、优先级。1.层得性相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。层叠性原则：样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式 样式不冲突，不会层叠1.1练习<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met原创 2022-04-28 23:45:23 · 859 阅读 · 0 评论 -
css的背景
通过css背景属性，可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景平铺、背景图片、背景图片位置、背景图片固定等。1.1 背景颜色background-color属性定义了元素的背景颜色。background-color :颜色值;一般情况下背景颜色默认是transparent（透明），可以手动指定背景颜色为透明色。1.2 练习<!DOCTYPE html><html lang="en"> <head> <.原创 2022-04-25 17:44:16 · 547 阅读 · 0 评论 -
css的元素显示模式
1、什么是元素显示模式 网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。 元素显示模式就是元素标签以什么方式显示，比如div标签自己占一行，比如一行可以放多个span。 HTML元素一般分为块元素 和 行内元素两种类型。2、块元素 常见的块元素<h1>-<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中...原创 2022-04-25 10:55:57 · 352 阅读 · 0 评论 -
复合选择器之：focus伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。input：focus{ background-color: yellow;}练习：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equi原创 2022-04-25 09:37:48 · 703 阅读 · 0 评论 -
复合选择器之链接伪类选择器
在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。1、复合选择器可以更准确、更高效的选择目标元素（标签）2、复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的3、常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等原创 2022-04-24 11:26:20 · 1546 阅读 · 0 评论 -
复合选择器之并集选择器
在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。1、复合选择器可以更准确、更高效的选择目标元素（标签）2、复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的3、常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等原创 2022-04-24 11:01:43 · 5110 阅读 · 0 评论 -
复合选择器之子选择器
在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。1、复合选择器可以更准确、更高效的选择目标元素（标签）2、复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的3、常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等原创 2022-04-21 18:03:50 · 581 阅读 · 0 评论 -
复合选择器之后代选择器
在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。1、复合选择器可以更准确、更高效的选择目标元素（标签）2、复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的3、常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等原创 2022-04-20 11:46:38 · 1439 阅读 · 0 评论 -
Emmet语法
1.Emmt语法Emmet语法的前身是Zen coding,它使用缩写,来提高HTML/CSS的编写速度,VScode内部已经集成该语法.2.快速生成HTML结构语法 ①生成标签 直接输入标签名 按tab键即可 比如 div 然后tab键,就可以生成<div></div> ②如果想要生成多个相同标签 加上 * 就可以 比如 div*3 就可以快速生成3个div ③如果有父子级关系,可以用> 比如 ul>li就可以 ④如果有...原创 2022-04-18 22:44:21 · 469 阅读 · 0 评论 -
css引入方式
1.css的三种样式表：按照css样式书写的位置（或者引入的方式），css样式表可以分为三大类：1.行内样式表（行内式）2.内部样式表（嵌入式）3.外部样式表（链接式）2.内部样式表内部样式表（内嵌式样式）是写到HTML页面内部，是将所有的css代码抽取出来，单独放到一个<sytle>标签中。<style> div { color: red; font-size: 12px; }</style>原创 2022-04-18 11:34:33 · 99 阅读 · 0 评论 -
css文本属性
1.文本颜色color属性用于定义文本的颜色。div{ color:red;}开发中常见的是十六进制练习：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport".原创 2022-04-15 17:55:15 · 375 阅读 · 0 评论 -
css字体属性
1.字体系列css使用font-family属性定义文本系列。p { font-family:"微软雅黑";}div {font-family:Arial,"Microsoft YaHei","微软雅黑";}各种字体之间必须使用英文状态下的逗号隔开 一般情况下，如果有空格隔开的多个单词组成的字体，加引号 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示 常见的几种字体：body{font-family:"Microsoft YaHei",tahoma,arial,"Hir原创 2022-04-15 17:21:24 · 359 阅读 · 0 评论 -
基础选择器之通配符选择器
在CSS中，通配符选择器使用“*”定义，他表示选取页面中所有元素（标签）。语法：* { 属性1：属性1； ....}通配符选择器不需要调用，自动就给所有的元素使用样式 特殊情况才使用，后面讲解使用场景练习：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"原创 2022-04-14 11:00:43 · 1960 阅读 · 0 评论 -
基础选择器之id选择器
id选择器可以为标有特定id的HTML元素指定特定样式。HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。#id名{ 属性1：属性值1； ....}例如，将id为Nav元素中的内容设置为红色。#nav { color：red；}注意：id属性只能在每个HTML文档中出现一次。每个标签都有一个属性叫id. 在同一界面中id名称是不可以重复的。 编写id选择器时，一定要在id前加上#。 id名称只能由字母，数字，下划线组成。[原创 2022-04-13 14:17:42 · 7568 阅读 · 0 评论