Html5/Css3
文章平均质量分 52
html5新特性,css样式集与CSS3特性
江一铭
江一铭,字咏之,号逍遥居士。读书人,爱文学,软件工程理工男,IP浙江在职,从业五年。主攻前端方向技术研发,副攻Unity 3D、IOS客户端、Python人工智能等。2021年被评为华为云享专家,阿里云专家博主,前端领域优质创作者等。
展开
-
HTML元素中有中文、英文、符号、数字。第一行没排满就自动换行的解决办法:word-break:break-all的使用
是一个CSS属性,用于控制文本在容器中的换行方式。它的作用是强制在任意字符之间进行换行,即使这样可能会导致单词被分割。具体来说,word-breaknormal(默认值):默认的换行行为。单词不会被分割,会根据容器的宽度自动换行。break-all:强制在任意字符之间进行换行,即使这样可能会导致单词被分割。这个值适用于不考虑单词边界的语言,比如中文、日文等。keep-all:不允许在单词内换行,只能在字符之间换行。这个值适用于考虑单词边界的语言,比如英文。使用。原创 2023-07-12 12:05:48 · 2554 阅读 · 0 评论 -
px、em、rem区别 pt ppi dpi vw vh
px像素实际上是一个颜色点,所以又称像素点。大量不同颜色点组成一张图像,因此图像的基本单位是像素px(没有比像素更精细的单位了)。像素主要用来表示图像大小和显示器分辨率(如1920*1080px)。像素本身的物理尺寸不固定,所以它的物理尺寸没有意义,有意义的是它的数量。为什么像素的物理尺寸不固定?像素本身不是物理世界的单位,是一个相对单位,尺寸可大可小。在高密度的屏幕上像素会变小,显示效果更清晰。因为“像素量px = 像素密度ppix 屏幕尺寸in”,同样是1英寸的屏幕,密度越大,像素越多,原创 2020-07-07 23:23:17 · 769 阅读 · 0 评论 -
H5页面卡顿加载慢原因分析
H5页面卡顿原因分析:1.动画太多:渲染重绘占用GPU2.页面操作导致重绘频繁3.页面元素复杂:资源类标签太多(图像/视频/dom树太长)4.内置webview性能太差5.和3类似,iOS出现的,和native交互是,创建嵌套iFrame解决办法:按照对应原因解决即可H5加载太慢问题分析:1.请求location时的中转太多2.返回的资源太大,导致分次传输3.Dom里的资源太多解决办法:CDN,GZIP合并压缩等...原创 2021-09-18 17:14:19 · 4403 阅读 · 0 评论 -
前端学习资料整理
前端思维导图js变量js运算符js数组js流程语句js字符串函数js函数基础jsdom操作js正则表达式js数据类型 前端技术点总结:基础篇布局、自适应布局webpack、gulp了解的程度,平时怎么使用的,常用的属性css3动画padding 和 margin 的百分比是按照父元素的宽度来计算的(其实是看word-model,文字横向或竖向设置);git的使用情况 git checkout -b dev origin/dev.原创 2021-08-25 16:33:01 · 2587 阅读 · 0 评论 -
起个服务把静态html文件放在手机上访问
1.装个node;2.全局装个anywhere的npm包。(npm i -g anywhere)3.大功告成,现在到任意目录下用命令行执行anywhere就可以;(anywhere -p 参数可以设置启动端口)补充:启动后为一个ip+端口的地址,这个ip就是你的网络环境下的ip,你现在就可以用手机访问这个ip+端口,记得手机和电脑是同个网络环境才可以(同个内网)。...原创 2021-07-14 16:41:29 · 854 阅读 · 1 评论 -
设置页面禁止转载
在body标签中添加这行代码即可如何设置页面禁止转载,以及如何破解不让转载的解决办法<body oncontextmenu="return false" onselectstart="return false"> οncοntextmenu="return false"告诉浏览器,这个页面是禁止右键的onselectstart="return false"告诉浏览器,这个页面是不能选中文本的其实上面的方法也就能唬唬那些小白,下面看我怎么破解它如果想破解这种不让转载的原创 2020-08-05 17:09:09 · 1011 阅读 · 3 评论 -
谷歌强烈推荐!浏览器助手,让你的浏览器至少提升10个档次!
文章目录 前言1. 初体验2. 下载安装3. 强大的功能1. 浏览器门面,换肤功能2. 便捷的操作,个性化网站入口3. 超懂我的操作,快速搜索4. 超方便的操作,常用工具5. 极致的用户体验,去广告6. 超丰富的扩展,脚本扩展商店 4. 向更好更极致前进(建议)1. 自定义皮肤2. 删除桌面图标功能3. 万能搜索--翻译4. 搜索功能5. 输入框6. 其他建议...转载 2021-06-17 21:16:50 · 2792 阅读 · 2 评论 -
前端:需要掌握哪些技能才能找到满意的工作?
如果你在找前端工作,你一定求助过不少大佬传授找工作和面试经验,而你得到的答案肯定很多时候就是简单的一句话:把 html、css、 js 基础学扎实,再掌握vue或react前端框架之一就可以了。真的是这样吗?技术上看似乎没问题,但是找工作不只要从技术上下手,还要从个人目标和公司的招人标准综合进行考量,然后你还需要掌握一套有逻辑、有结构的面试回答技巧。接下来我们逐一分析一下,相信你看完之后就有了方向和方法,一定能找到满意的工作。个人目标现在我们的教育并没有太着重于个人目标和职业规划的设定,但找工作与转载 2020-08-21 08:01:06 · 894 阅读 · 0 评论 -
VSCode彩虹屁:你就是因为想太多如果,所以才交不到girlFriend吧
最近一款VSCode内置语音插件rainbow fart横空出世,rainbow fart翻译过来就是彩虹屁,该插件的定位就是:真*程序员鼓励师,在您枯燥的编程时刻,它可以根据代码关键字播放贴近代码意义的可爱的女孩子的真人语音, 夸你写代码牛逼!安装目前VSCode的插件商场已经上架这个插件了,因此只需要在插件商场搜索 rainbow fart即可。启用Ctrl + Shift + P(MacOS Command + Shift + P),点击Enable Rainbow Fart.原创 2020-07-03 09:32:31 · 2043 阅读 · 0 评论 -
圣诞将至:js加html5教你写出动态旋转圣诞树。
js与H5 canvas实现动态旋转圣诞树效果图:源代码 <canvas id="c" height="356" width="446"> <script> var collapsed = true; function toggle() { var fs = top.document.getElementsByTagName('frameset')[0]; var f = fs.getElementsByTagName('frame');原创 2021-12-20 11:14:42 · 1808 阅读 · 0 评论 -
H5:100款html5微信小游戏最新最新源码
目录一、100款html5微信小游戏最新最新源码二、提取源码方式三、支付宝生态技术学习交流群一、100款html5微信小游戏最新最新源码二、提取源码方式扫码二维码回复h5yx即可获取提取链接三、支付宝生态技术学习交流群...原创 2021-08-12 16:08:25 · 5845 阅读 · 0 评论 -
深入了解回流重绘,什么是回流,什么是重绘,有什么区别?
回流重绘html 加载时发生了什么什么是回流什么是重绘区别优化项目,提高性能 应用场景:扩展:浏览器的帮助自己的优化html 加载时发生了什么在页面加载时,浏览器把获取到的HTML代码解析成1个DOM树,DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等。浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体DOM Tree 和样式结构体组合后构建render tree, render tree类似于DOM tree,但区别很大,因为render..原创 2022-03-29 10:58:34 · 768 阅读 · 0 评论 -
CSS3 动画,鼠标移上去,div 旋转、放大、缩小、移动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div { width: 120px; height: 50px; line-height: 5.原创 2022-01-20 10:24:20 · 4894 阅读 · 6 评论 -
css3炫酷发光字体
<div id="container"> <p><a href="#"> RED </a></p> <p><a href="#"> BLUE </a></p> <p><a href="#"> Yellow </a></p> <p><a href="#"> GRE.原创 2022-01-20 10:16:09 · 1500 阅读 · 1 评论 -
2021前端最新DIV+CSS规范命名大全集合
我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法。一、命名规则说明: - TOP所有的命名最好都小写属性的值一定要用双引号("")括起来,且一定要有值如class=“divcss5”,id=“divcss5”每个标签都要有开始和结束,且要有正确的层次,排版有规律工整空元素要有结束的tag或于开始的tag后加上"/"表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgCol.原创 2021-08-25 15:21:38 · 1528 阅读 · 0 评论 -
CSS自动换行后缩进
设置padding-left:25px; text-indent:-25px;原理就是先在左边用padding空开,再用text-indext把第一行收回来原创 2021-07-16 16:11:35 · 1586 阅读 · 0 评论 -
Vue ElementUI table给表格一个斜线分隔线
效果:实现:通过改css样式实现1、去掉第一个单元格的下边框/2、第一列第一个单元格和第二个单元格的伪元素设置绝对定位,宽度设成1px,高度根据自己表格调整3、通过旋转两个单元格伪元素,并设置旋转起始点,使两个伪元素旋转到重合位置,达到斜线的效果代码:1、html<el-table :data="tableData3" style="width: 100%"> <el-table-column label="医疗机构" al原创 2021-04-22 16:31:05 · 5503 阅读 · 8 评论 -
Antd给表格一个斜线分隔(通过css改变)
代码:const [ columns, setColums ] = useState([ // 主要代码 title: <div style={{ "position": "relative" }}> <div style={{ "text-align": "right" }}>参数</div> <div style原创 2021-04-22 16:27:39 · 2438 阅读 · 5 评论 -
css中简介盒模型
1. 什么是盒子模型? 在我们HTML页面中,每一个元素都可以被看作一个盒子,而这个盒子由:内容区(content)、填充区(padding)、边框区(border)、外边界区(margin)四部分组成。 2.盒子模型有哪两种 标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右) 怪异模式下: 一个块的总宽度= width + margin(左右)...原创 2021-04-16 16:01:44 · 828 阅读 · 0 评论 -
用CSS绘制最常见的40种形状和图形
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形、圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家。Square(正方形)#square { width: 100px; height: 100px; background: red;}Rectangle(矩形)#rectangle { width: 200px; height: 100px; ba...原创 2020-11-23 11:05:34 · 2170 阅读 · 0 评论 -
CSS:linear-gradient()背景颜色线性渐变
css语法background: linear-gradient(direction,color-stop1,color-stop2,...);direction:用角度值指定渐变的方向(或角度);color-stop1,color-stop2,...:用于指定渐变的起止颜色ps:至少需要两种颜色1 background: -webkit-linear-gradient(red,yellow,blue); /* Safar...原创 2020-09-29 10:02:10 · 4570 阅读 · 0 评论 -
CSS如何修改滚动条的样式?
css修改滚动条默认样式html<div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="height:400px;">这里是内容222</p> <p>这里是内容333</p> </div></div>原创 2020-09-11 16:08:36 · 967 阅读 · 0 评论 -
如何使背景照片覆盖全屏不会随屏幕滚动
html 中 css 中 使背景照片覆盖全屏body,html{ background: url(../img/index.png); background-repeat: no-repeat; background-size: 100% 100%; background-attachment: fixed;}原创 2020-09-09 18:42:34 · 991 阅读 · 0 评论 -
前端:水平垂直居中的10种方法
第一种: 通过绝对定位的方式 absolute + 负margin 首先知道子元素的宽高,给子元素设置top:50%;left:50%,但绝对定位是基于子元素的左上角,我们所希望的效果是子元素的中心居中显示。。。。借助外边距的负值,负的外边距可以让元素向相反方向定位, 通过指定子元素的外边距为子元素宽度一半的负值,就可以让子元素居中了优点: 比较好理解,兼容性好缺点: 需要知道子元素的宽高第二种: 也是通过绝对定位的方式 absolute + margin auto 这个是原创 2020-09-09 14:55:39 · 1847 阅读 · 0 评论 -
纯css写的各种小按钮合集,记录下来成为学习笔记
亮起来按钮html<div id="neon-btn"> <button class="btn one">Hover me</button> <button class="btn two">Hover me</button> <button class="btn three">Hover me</button></div>css#neon-btn { displa原创 2020-09-03 10:06:56 · 800 阅读 · 0 评论 -
点击遮罩层的背景关闭遮罩层(HTML)
在模仿华为官方网页的练习当中我发现华为官网中有一个遮罩层是随便点击遮罩层的背景也能关闭掉遮罩层,但唯独点击内容区域不会关闭掉遮罩层。于是我开始模仿这个写案例,连内容也一模一样(因为这个练习就是要写出和华为关一样的效果或则比它更好的效果),一开始我是这样子写的(图1)图1class=Select_Region_bj 我给了一个灰色半透明的背景样式,后来在Javascript中写...原创 2020-09-03 09:57:48 · 897 阅读 · 0 评论 -
postcss-px2vw插件将px转vw、rem
postcss-px2vw一款 PostCSS 插件,将 px 转换成 vw 和 rem。该插件主要结合了 postcss-pxtorem 和 postcss-px-to-viewport 的功能,精简了不常用的配置。默认将 vw 作为优先单位使用,以 rem 作为回退模式。考虑到 vw 在移动设备的支持度不如 rem,这款插件很好的解决了该问题。安装$ npm install @moohng/postcss-px2vw --save-dev使用// .postcssrc.jsmodule.原创 2020-08-18 20:19:46 · 1477 阅读 · 0 评论 -
了解sass
一、变量所有变量以$开头$font_size: 12px;.container{ font-size: $font_size;}如果变量嵌套在字符串中,需要写在#{}中$side : left;.rounded { border-#{$side}: 1px solid #000;} 二、嵌套层级嵌套.container{ display: none; .header{ width: 100%; }}属性嵌套,注意,bo原创 2020-08-18 20:08:57 · 536 阅读 · 0 评论 -
前端——html5 和css3 的新增特性
我的理解的是 h5 呢并不只是新增一些标签和样式,更多的是里面新增的一些功能。例如重力感应,他可以让我们感知当前手机的状态,可以帮助我们完成手机摇一摇,监听当前我们步数,还有开启 3d 模式让我们的 2d 空间变成一个 3d 模式,而且 h5 中为了挺高页面性能,页面元素的变大,不在是元素本身的大小变化,而是一种视觉上的效果,从而减少了 dom 操作,防止了页面的重绘,当然 h5 中不单单是这些还有webgl 游戏引擎 canvas、svg 完成图表以及一些小游戏的开发例如大转盘,数钱游戏,jd 妈妈再打我原创 2020-07-05 19:13:56 · 529 阅读 · 0 评论 -
rem 布局原理
rem:相对于根元素(即 html 元素)font-size 计算值的倍数。通俗的说,1rem = html 的 font-size 值这段代码。a 标签的 font-size 值为 0.5rem,实际就是 100px*0.5=50px。html{font-size:100px;} a{font-size:.5rem;}如何使用 rem 进行布局?1.标签的 rem 单位的值怎么计算通过使用 rem + js 改变 html 标签的 font-size(整体缩放)实现兼容性更高的页面.原创 2020-07-05 19:08:26 · 881 阅读 · 0 评论 -
响应式布局的五种实现方法
响应式布局可以让网站同时适配不同分辨率和不同的手机端,让客户有更好的体验。方案一:百分比布局利用对属性设置百分比来适配不同屏幕,注意这里的百分比是相对于父元素; 能够设置的属性有 width、height、padding、margin,其他属性比如 border、font-size 不能用百分比设置的,先看一个简单例子:顶部是利用设置图片 width: 50%来适应不同的分辨率,由于原始图片高度不同,所以第一张图片顶部会有空白,这种情况最好两张图片宽高保持一致,如果使用强制高度统一,会导致图片.原创 2020-07-05 19:04:46 · 6582 阅读 · 0 评论 -
3D旋转照片
html+css写的3D旋转图1、html代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>ZXH3D旋转图</title><link type="text/css" href="css/ZXH.css" rel="stylesheet" /><!-- 注意引入css样式 --></head>原创 2020-06-29 20:59:57 · 559 阅读 · 0 评论