HTML与CSS专栏
关注
分享
扫一扫
文章平均质量分 64
此专栏专门介绍HTML与CSS的知识与骚操作
吴迪98
喜欢敲代码的吴小迪~
展开
-
content-visibility:可以提高项目的渲染性能
content-visibility:新的CSS属性，可以提高渲染性能。通过跳过屏幕外内容的呈现来改善初始加载时间。在Chromium 85中推出的content-visibility属性可能是对提高页面加载性能最有影响的新CSS属性之一。内容可见性允许用户代理跳过元素的呈现工作，包括布局和绘制，直到需要它为止。因为会跳过呈现，如果大部分内容不在屏幕上，那么利用content-visibility属性可以使初始用户加载速度更快。它还允许与屏幕上的内容进行更快的交互。很整洁。原创 2023-05-30 14:57:30 · 937 阅读 · 0 评论 -
HTML5新特性 之 Web SQL
感谢内容提供者：金牛区吴迪软件开发工作室文章目录前言：一、初步了解 Web SQL的使用1. 创建数据库2. 创建表并向表里新增数据3. 查询数据4. 修改数据5. 删除数据二、做一个 Todo List1. 创建一个简单的html页面2. 写js逻辑① 功能1：点击新增代办事项的时候出现modal② 新增代办事项③ 渲染代办事项列表④ 修改代办事项【包括更改描述以及更改状态】+ 删除代办事项前言：学习此内容需要事先掌握基本的 html、css、js 以及简单的 SQL。SQL的学习：SQL与.原创 2021-11-28 15:27:16 · 2239 阅读 · 4 评论 -
CSS Modules介绍
前景：今年四月份的时候面试了一家公司，技术面的时候被人家问到了CSS Module有了解过么，我说没有了解过，他就继续问到，那你在平时开发的时候给组件和元素起类名要怎么办呢？我说给元素和组件加指定前缀，这样就能够保证自己写的类名和其他同事写的类名不会起冲突。然后就没然后了，，后续又问了我很多React原理啥的面试就过了。今天我们就把CSS Modules是个啥子东西给他弄明白，这样会更...原创 2019-08-04 10:36:22 · 32919 阅读 · 0 评论 -
多行文本溢出变成省略号【附带失效解决代码】
很多的朋友们都会用CSS实现单行文本溢出超出部分显示省略号，但是如何控制不仅仅是单行而是指定行数文本呢？看完这篇文章你就会了！有代码！HTML内容如下：<div class="wrap"> 我是CSDN的吴小迪啊！喜欢我的麻烦亲关注哈~后面的内容为隐藏部分，由于浏览器默认字体大小可能会出现偏差！</div>单行文本溢出隐藏的CSS代码：.wrap{ ...原创 2019-05-15 15:03:45 · 36553 阅读 · 0 评论 -
css的z-index权重问题【最简洁，没有废话】
文章目录一、跟笔者一起看下面实战中z-index的几种情况：二、设置基本的dom结构与样式，准备测试三、开始测试测试问题1：测试问题2：测试问题3：测试问题4：测试问题5：四、结论五、笔者致广大读者的话今天笔者就与大家分享一下css的z-index权重问题。到底怎么样才能让我们想要排在上面的元素能在上面，想在下面的元素就老老实实的在下面。一、跟笔者一起看下面实战中z-index的几种情况：...原创 2020-03-26 20:43:39 · 22931 阅读 · 0 评论 -
css处理超出指定数的文字的时候剩下的变成省略号
相信前端朋友都知道如何让超出文本变成省略号，不管是单行还是多行估计都难不倒大家。如果不会多行超出文本变成省略号的可看笔者的这篇博客：多行文本溢出变成省略号【附带失效解决代码】但是我们之前都是设置的固定多少px宽度然后让他超出那个宽度换行，现在的需求改为了超过二十个字或者十五个字的时候才开始变成省略号，那我们怎么办呢？笔者之前开发的时候的解决办法是用js处理，判断多少个字了，如果到多少字剩...原创 2020-03-20 23:31:13 · 20788 阅读 · 0 评论 -
text-shadow好看特效代码展示
文章目录一：全部效果展示：二：代码展示：三：代码说明：一：全部效果展示：二：代码展示：<!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>Document</title> <style> ...原创 2020-03-20 22:25:20 · 20374 阅读 · 0 评论 -
解决网页乱码以及为什么会出现网页乱码？
网页为什么会出现乱码？网页乱码是因为网页没有明确设置字符编码。有时候用户在网页中没有明确指定网页的字符编码，但是网页能够正常显示，这是因为网页字符的编码与浏览器解析网页时默认采用的编码一致，所以不会出现乱码。如果浏览器的默认编码与网页的字符编码不一致时，而网页又没有明确定义字符编码，则浏览器依然使用默认的字符编码来解析，这时候就会出现乱码。乱码的情况：解决办法：设置编码为“简体中文...原创 2020-03-20 21:14:19 · 19609 阅读 · 0 评论 -
让animation在循环的每一次开始前都停顿一定的时间这样做就OK了
在我们实际的开发过程中想要让animation在做每一次动画之前都停留几秒，我们应该怎么做呢？首先笔者第一时间就看到了animation-delay属性，于是我就非常高兴的加上了！以为需求就OK了，但是我们发现，animation-delay仅仅是在你动画开启的第一次才会有暂停效果，之后的每一次循环就不生效了。那么看来我们用animation提供的属性是无望了。我们只能自己另寻他法。请注意看...原创 2020-03-19 13:31:11 · 14318 阅读 · 0 评论 -
CSS3的border-image-slice属性详细介绍
border-image-slice说明：基础知识：参数：具体使用：小总结：首先我们来了解一下它是干嘛的。说明：文档说明：它是控制图像边界向内偏移的。what？？？这是嘛意思啊？根本看不懂！！！好的，我们先不要急，我们在看看：基础知识：当我们通过 border-image-source 引用边框图片后，border-image-slice属性会将图片分割为9个区域：四个角，四个边（ed...原创 2020-03-18 12:08:33 · 26325 阅读 · 0 评论 -
CSS3新特性详细介绍
文章目录一、CSS3实现圆角 - border-radius二、盒子阴影 - box-shadow三、文本阴影 - text-shadow四、线性渐变 - gradient五、变化样式 - transformrotate - 旋转scale - 缩放translate - 定位skew - 倾斜六、增加了更多css选择器七、多背景、rgba八、新增加的伪元素 ::selection九、媒体查询与多...原创 2020-03-15 12:52:43 · 9298 阅读 · 0 评论 -
iframe的优缺点
Iframe介绍：它的优点：解决加载缓慢的第三方内容，如图标和广告等的加载问题Security sandbox 【安全的一个小盒子】并行加载脚本它的缺点：iframe会阻塞主页面的onload事件即使内容为空，加载也需要时间没有语意常见开发场景：反爬虫【增加爬取难度】...原创 2020-03-14 14:56:38 · 1693 阅读 · 0 评论 -
纯CSS实现tooltip，css更改html标签的title样式
html代码：以下代码直接可用，tootip的样式可以自己调试。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ ma...原创 2020-02-27 18:55:57 · 18573 阅读 · 0 评论 -
前端点击图片的某个区域进行映射
比如现在UI同事给了你一张图【如下】，让你在点击这个图的每一个行星的时候进行页面跳转。那么首先我们先引入这个图片：<img src="planets.png" alt="Planets" usemap="#planetmap">请注意一个特殊的属性：usemap。翻译成中文就是使用地图。其实map在html当中也是一个标签。我们想要在点击图片的某个区域进行跳转或者其他操作的时...原创 2020-02-26 20:55:04 · 27223 阅读 · 6 评论 -
前端调用系统发邮件，打电话，调用qq
笔者遇到了个需求，前端直接调用系统内容发送邮件。后来发现html的a标签直接就给我们提供了方法：<a href="mailto:1336791007@qq.com">到吴迪的邮箱</a>只需要在href的地址前面加上mailto:即可，后面填入邮箱地址，效果美美哒~Windows，MAC，Android，IOS都完美驾驭！...原创 2020-02-25 22:27:58 · 21492 阅读 · 0 评论 -
项目上线后中英文翻译问题解决
笔者目前是遇到俩种情况，分别都进行了对应的解决，如果你遇到了其他的关于浏览器对你项目进行翻译导致的问题的话可以在下方评论。笔者会第一时间和你一起解决。问题一：谷歌浏览器自动会帮客户翻译英文网站解决方法：如果你是单页应用，那么就请看看你的最外层的html的lang属性是否为zh-CN。如果是默认的en请将它改成“zh-CN”。这样谷歌浏览器就不会自动翻译你的项目了。如果不是单页应用，那么就...原创 2020-02-24 17:03:15 · 21844 阅读 · 0 评论 -
前端做按钮的方法介绍以及input与button的区别「最简洁易懂」
在一个页面上画一个按钮，有四种办法：四种方法：<input type=“button” /> 这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。<input type=“submit” /> 这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。会提交到form标签的指定action路径中，详细请翻阅文档查看...原创 2020-02-24 12:23:44 · 26583 阅读 · 0 评论 -
书写HTML的规范
html与css肯定是前端开发的入门第一课，相信大部分朋友都已经感觉自己很熟悉我们的这俩个好朋友了。但是大家是否了解其规范呢？今天我们一起看看Html的开发规范。文章目录1.1通用约定标签Class 与 ID属性顺序引号嵌套语义嵌套约束严格嵌套约束布尔值属性1.2语义化常见标签语义示例1.3HEAD文档类型语言属性字符编码IE兼容模式SEO优化viewportiOS图标favicon完整的HEA...原创 2019-11-22 17:40:01 · 24527 阅读 · 1 评论 -
最全CSS基础知识图片形式整理
额外的CSS冷门实用小技巧：calc()可以计算宽度高度。注意的是calc的参数中间的计算符号的前后要加空格。例如：width: calc(100% - 100px);object-fit:cover; —改变图片根据容器自适应...原创 2019-07-14 12:39:30 · 51796 阅读 · 4 评论 -
HTML，CSS的class与id命名规则
外套 wrap - - 用于最外层头部 header - - 用于头部主要内容 main - - 用于主体内容（中部）左侧 main-left - - 左侧布局右侧 main-right - - 右侧布局导航条 nav - - 网页菜单导航条内容 content - - 用于网页中部主体底部 footer - - 用于底部...原创 2019-07-14 12:02:44 · 39654 阅读 · 3 评论 -
CSS新布局之display: grid
我们一起来学习一下CSS 的Grid布局是如何使用的通过这篇文章以后等我们自己做UI库的时候就会多了一种做法。我们来使用CSS Grid创建一个超酷的图像网格图，它可以根据屏幕的宽度来改变列的数量。最精彩的地方在于：所有的响应特性被添加到了一行css代码中。这意味着我们不必将HTML与丑陋的类名(如col-sm-2, col-md-4)混杂在一起，也不必为每个屏幕创建媒体查询。我们首先根据...原创 2019-06-23 12:33:57 · 42912 阅读 · 11 评论 -
让div占据父元素剩下的所有位置
场景模拟：现在有一个父容器，里面有俩个div，左边的要给一个固定的200px的宽度，父容器剩下的宽度都归右边的div该怎么完成？HTML代码：<div class="wrap"> <div class="left"></div> <div class="right">CSDN吴小迪</div></div>...原创 2019-05-15 14:44:35 · 40178 阅读 · 0 评论 -
在父容器没有高度的情况下给元素设置百分比高度
在实际的开发过程中经常会有这种CSS问题，就是父容器是没有高度的，可是我还要给子容器设置百分比的高度。所以本篇博客就诞生了。就是为了帮助朋友们解决这个问题。一：设置vh单位vh单位就是自动检测你的设备的高度，会根据你设备高度的变化而调整，相对应的还要vw单位，自动检测设备的宽度的。关于vw和vh的实战可观看自适应屏幕的方法。代码如下：<!DOCTYPE html><h...原创 2019-05-15 13:05:32 · 32026 阅读 · 0 评论 -
更改input的样式【单选框、输入框、上传文件的都有】
今天给朋友们带来的是更改input的样式，下面分别是对单选框和上传文件的input的样式做了改变，效果如下：注：不喜欢这个样式可以自行修改color和background。HTML代码如下：<div> <label class="label-one"><input name="nex" type="radio"/><span class="...原创 2019-05-15 15:34:37 · 42677 阅读 · 2 评论 -
flex布局与position:absolute/fixed的冲突问题
之前笔者在开发项目的过程中就遇到了这个坑，flex布局与position:absolute/fixed的冲突问题。后来想到了解决办法，今天就与大家一起交流一下：项目实战：我们现在想做一个头部的导航栏，又想用fixed把它固定在上方，又想用弹性盒布局去设置它内部的样式，可是发现其中的弹性盒布局已经失效了。HTML代码如下：<ul> <li>协会简介</...原创 2019-05-15 15:17:35 · 41264 阅读 · 6 评论 -
元素在其父元素垂直水平都居中的方法
元素在其父元素的垂直和水平方向都居中的方法话不多说直接上代码html代码统一如下：复制到你的***.html目录下的<body></body>标签里面<div class="wrap"> <div class="inner"> </div></div>以下为CSS代码：复制到你的***.html目录下的...原创 2019-04-13 19:08:56 · 32802 阅读 · 5 评论 -
前端瀑布流布局实现
前端开发的过程中难免会遇到瀑布流布局的需求，接下来我就给大家展示代码然后与大家一起分析首先你的目录结构可以和笔者保持一致：JS笔者单独封装了一个小的工具，用来获取DOM元素tools.js代码如下：/** * 解决根据类名查找元素的兼容问题 * @param className 待查找的类名 * @param context 可选，查找元素的上下文：即在指定的 context 元素...原创 2019-04-14 12:24:43 · 37648 阅读 · 0 评论 -
写移动端自适应屏幕的方法
前端移动端开发的时候肯定是会面对不同型号的手机的页面展示问题的，今天给大家推出另外一种自适应不同移动端的方法，使用vw，vh单位。vw和vh单位的大小是多少？vw和vh是根据设备的宽度和高度来决定的，设备的宽就是100vw，设备的高就是100vh，你设置的50vw就是相当于设备宽度的50%，你设置的100vh就是相当于设备高度的100%。切记：不要把vw和vh弄混淆了，如果你给元素宽度设置...原创 2019-04-14 19:37:50 · 47380 阅读 · 15 评论 -
在控制台显示html标签的默认样式
第一步：F12打开控制台第二步：点击Settings第三步：勾选Show user agent shadow DOM.4.现在你就能看到你的html标签是由什么组成的了原创 2019-08-30 09:40:31 · 32614 阅读 · 0 评论