前端学习
关注
分享
扫一扫
文章平均质量分 64
前端学习
小羊摸鱼
XYMY6256
展开
-
实现菜单导航栏点击局部内容随之改变的效果的几种方法
方法1创建多个div,使用display,控制局部div是否隐藏和显示。这种方法操作简单，只需要掌握html,css,js的基本知识便可以实现。适合前端学习的新手实现导航栏点击局部改变内容的效果。但是这会使得页面的代码极为庞大，并且不易于代码得管理。示例1：（其中引用了bootstrap，对样式的布局可以自行根据需要修改）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-11-29 13:32:24 · 9848 阅读 · 7 评论 -
VUE中的 v-if和v-show的区别
v-if: 能够控制是否生成虚拟节点，也就间接控制了是否生成对象的dom。当v-if为true时，会生成对应的虚拟节点，并生成对应的dom元素；当其为false时，不会生成对应的vnode，自然不会生成任何dom元素。v-show: 始终会生成虚拟节点，也就间接导致了始终生成dom。它只是控制dom的display属性。当v-show为true时，不做任何处理；当其为false时，生成dom的display实现为none。使用 v-if 可以有效的减少树的节点和渲染量，但也会导致树不稳定；而使用v-sh原创 2021-10-24 18:58:20 · 1972 阅读 · 0 评论 -
超陋的小方块移动小游戏（鼠标触碰小方块，小方块会沿其他三个方向逃避鼠标的触碰）
超陋的代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实现小方块随机移动小游戏</title> <style> *{原创 2020-05-30 18:54:50 · 1995 阅读 · 0 评论 -
HTML5：拖拽属性
练习1 效果：实现当拖拽结束时小方块停在鼠标松开的位置<!-- HTML5 拖拽 --> <div class="a" draggable="true"></div> //draggabl是拖拽属性，为true时可拖拽，为flase时不可拖拽 //本身默认draggable为true的标签有<a> <img>; <script> var oDragDiv = document.getE原创 2021-08-02 16:45:56 · 781 阅读 · 0 评论 -
为何在html文本第一行写 !DOCTYPE html
Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的,声明文档的解析类型(document.compatMo...原创 2020-02-16 20:27:34 · 293 阅读 · 0 评论 -
HTML的表格
表格有很多行，很多列，有序排列的单元格就叫表格。表格是< table >标签来定义的，行用< tr > 标签来表示，而列用< td >标签来表示，必须先定义行才能定义列。因为html中，每一列是在一行当中的。< table>< /table>、< tr>< /tr>、< td>< /td>...原创 2020-02-14 10:36:58 · 265 阅读 · 0 评论 -
hover失效的一个和权重有关的原因
下面我们先来看一个代码：这串代码很明显，当鼠标放在这个50*50的方块上时，方块的颜色会由白杏色变成黑色。此时不管是把css中的div和div:hover如何放置，结果都不会变。那么请在来看看这个：此时的hover效果却消失了然而把div:hover和div.box换一下位置便会使重新达到原来的目的，那么为什么会这样呢？这就关系到了权重的问题了。标签选择器的权重值为1class...原创 2020-02-08 21:20:13 · 681 阅读 · 0 评论 -
标准盒模型和怪异盒模型
盒模型： 可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分。盒模型分为两种： 第一种是W3c标准的盒子模型（标准盒模型） 、第二种IE标准的盒子模型（怪异盒模型） 。标准盒模型与怪异盒模型的表现效果的区别之处：标准盒模型中 width 指的是内容区域 content 的宽度，height指的是内容区域content的高度。 padding和border不被包含在定义的w...原创 2020-02-06 19:38:21 · 709 阅读 · 0 评论 -
针对文字溢出，背景图片处理的一些小知识
处理单行文本溢出打省略号的功能：对于这个问题需要向来了解三个属性和相应的属性值1、white-space:nowarp; 作用： 强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。2、**overflow:hidden;**作用：属性overflow可以检索或设置当对象的内容超过其指定高度及宽度时如何管理内容，属性值hidden则是将超出对象尺寸的内容进行裁剪，...原创 2020-01-30 21:03:01 · 330 阅读 · 0 评论 -
利用属性position的属性值fixed使div在页面居中（详解）
首先，我们先来了解一下属性position当属性值取fixed时的作用：使对象脱离常规流，使用top，right，bottom，left等属性 以窗口为参考点 进行定位，当出现滚动条时，对象不会随着滚动。**接下来我们看下面这个关于div的css：div{ position: fixed; left: 50%; top:50%; width: 100px; ...原创 2020-01-30 12:00:21 · 2646 阅读 · 0 评论 -
认识HTML
一、认识HTMLHTML:Hyper Text Markup Language的缩写。中文：超文本标记浏览器创建的页面浏览器读到你的HTML时，它会翻译文本中所有标记，标记就是尖括号括起来的词或字符，列如< head>,< p>等标记会告诉浏览器文本的结构和含义。利用HTML,你可以用标记告诉浏览器哪些是标题，哪些是文本的段落，哪些文本需要强调，或者图像放在什么位置。...原创 2020-01-12 20:56:38 · 1756 阅读 · 1 评论 -
初步认识CSS
CSS是层叠样式表（Cascading Style Sheets)的缩写。CSS提供了一种方法来告诉浏览器页面中的元素如何显示，用来控制HTML的表现。（HTML是用来建立网页的结构）认识style元素eg:< style type=“text/css” >… （在这里定义页面的样式）< /style >这就是一个style元素。注：1、< st...原创 2020-01-13 12:14:19 · 293 阅读 · 0 评论 -
深入了解超文本
认识HTML中的“HT”"超文本"就是Web的基础。简单的认识了HTML之后，知道他是一种标记语言（HTML中的“ML”），用来描述网页的结构。而HTML中的“HT”则是超文本（hypertext）,有了它，我们就能摆脱单个页面的束缚，连接到其他的页面。初步学习<a>元素想要创建HTML链接，首先，需要把链接文本放在<a>元素中； &nbs...原创 2020-01-14 14:49:34 · 630 阅读 · 0 评论 -
HTNL中常用的一些标签
<div>标签和<span>标签：<div>标签：< div >是一个块元素，它是可用于组合其他 HTML 元素的容器。它没有特定的含义。除此之外，由于它是块元素，所以浏览器会在其前后显示换行。如果与 CSS 一同使用，它可用于对大的内容块设置样式属性。<span>标签：< span >它是内联元素，可用作文本的容器。它...原创 2020-01-16 23:51:32 · 225 阅读 · 0 评论 -
css的基础小知识
CSS(cascading style sheet）：层叠样式表###1、引入CSS的方法：在这里插入代码片行间样式<div style="color:#0ff">......</div>页面及CSS（写在head标签里）<htnl><head><style type="text/css"> div...原创 2020-01-19 21:57:20 · 138 阅读 · 0 评论 -
板块中文字居中
文字居中包括水平居中和垂直居中，当水平居中和垂直居中同时运用在一个块元素中就可以达到文字在一个板块中的居中效果了。垂直居中需要用到 line-height 属性。 <div style="width: 100px; height: 60px; line-height: 60px; ...原创 2020-01-22 21:18:36 · 610 阅读 · 0 评论