HTML--CSS
文章平均质量分 73
基础知识,学习他人的奇思妙想。
周士森
我的屏幕是13的!
展开
-
src-href ,资源跳转-资源嵌入
href href 指向网络资源位置,建立当前文档和资源的连接,一般用于超链接。src src将资源嵌入到当前文档中,在请求src资源时会将其指向的资源下载并应用到文档内,例如 js 脚本,img 图片和 frame 等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也是如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。其实这里更偏向于说是 资源跳转 和 资源嵌入 的区别。1.) 资源跳转: A链接、原创 2021-03-11 21:40:07 · 302 阅读 · 0 评论 -
CSS性能优化
目录1. 内联首屏关键CSS(Critical CSS)1.1首次有效绘制1.2内联CSS能够使浏览器开始页面渲染的时间提前1.3缺点2. 异步加载CSS3. 文件压缩(手动、自动)4. 去除无用CSS(代码、注释、空格)5. 有选择地使用选择器6. 减少使用昂贵的属性7. 优化重排与重绘7.1 减少重排7.2 避免不必要的重绘8. 不要使用@import1. 内联首屏关键CSS(Critical CSS)1.1首次有效绘制 即指页面的首要内容(primary content)出现在屏幕上的时间。这原创 2021-01-27 18:33:55 · 453 阅读 · 0 评论 -
position定位
position属性值关联值staticfixedrelativeabsolutesticky重叠的元素属性值static、relative、fixed、absolute、sticky。 关联值top、left、right、bottom元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。 staticHTML 元素的默认值,即没有定位,遵循正常的文档流对象。静态定位的元素不会受到 top, bo原创 2021-01-27 11:03:02 · 358 阅读 · 0 评论 -
前端页面布局方式总结
前端布局方案灵活,方式并不唯一,仅供参考。八种布局1. 弹性布局(flex)布局概念优点缺点2. 流式布局(Liquid Layout)布局概念优点缺点3. 响应式布局(Responsive layout)布局概念优点缺点4. 静态布局(Static Layout)布局概念优点缺点5. 网格布局布局概念优点缺点6. 圣杯布局(Holy Grail Layout)布局概念优点缺点关联7. 双飞翼布局布局概念优点缺点关联8. 悬挂式布局布局概念备注:1. 弹性布局(flex)布局概念Flexible B原创 2021-01-26 16:13:04 · 1505 阅读 · 0 评论 -
form表单默认提交事件、数据验证、判空
在form表单中,总会出现触发提交事件,这是因为在form表单中button的默认类型是submit,如果不明确button的type,那可能触发提交事件。如果提交前需要数据判空或者数据检验,则需要把button的type设置为button,给其他事件留下时间。<form action="/doLogin" method="post" id="submit"> <input type="submit" name="submit" id="submit" value="" />原创 2020-09-06 21:52:35 · 1553 阅读 · 0 评论 -
文本显示单行或多行,超过部分隐藏或省略
这里是将多个效果结合在一起。当文本超过元素宽度时,超过部分不换行,会被隐藏起来并以省略号替代。文本显示为单行,超过部分隐藏并使用省略号 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:120px;文本显示为多行,使用 display:-webkit-box; (只有-webkit内核才有作用) overflow:hidden; text-overflow:el原创 2020-09-03 16:52:11 · 733 阅读 · 0 评论 -
CSS-border制作轮播三角形
通常写轮播图的前后换页的时候,会用到左右箭头或者三角形,今天这里是用border写的,只有一层标签,左右两个写着可能更方便些,更美观一些。效果这里我们会用到一个知识点,提前点出 — transparent我们正常使用边框是这样:设置宽高为 0这样看不太出来,给四边都添加颜色这样一看,直接只写border-top,那三角形不就出来了吗,可你会发现不是这样的,效果是全空白。...原创 2019-12-15 09:36:57 · 398 阅读 · 0 评论 -
CSS-幽灵按钮
这里为了体现效果,添加了一张图片作为背景。具体效果可以根据个人需求调试。HTML<div class="backimg"> <img src="img/hero.jpg" /></div><div class="btnBox"> <div class="btn"> <div class="btn-bord...原创 2019-12-11 19:36:30 · 490 阅读 · 0 评论 -
CSS-@keyframes动画轮播 首次加载闪动问题
问题描述: 在用CSS3-@keyframes做图片效果的时候(eg:轮播),会出现首次加载出现闪动,之后循环正常的现象。先写解决方法,原理在底部。会简单涉及到加载顺序,感兴趣的可了解一下。(demo简单,见谅)如下:HTML<div id="pages"></div>CSS#pages { width: 100%; height: 600px; bor...原创 2019-12-08 09:05:04 · 3789 阅读 · 9 评论 -
CSS-完美清除浮动-外边距重叠
浮动的完美解决方案parentClass::after{ content:''; display:disblock; clear:both;}外边距重叠的完美解决方案-clearfix::before{ content:''; display:table;(既可以解决高度塌陷,又可以解决外边距重叠) clear:both;}同时解决浮动、外边距重叠-clearfix:...原创 2019-11-18 21:43:28 · 590 阅读 · 0 评论 -
CSS-元素水平、竖直居中
元素居中元素特性:A. 块级元素(block元素) 1) 总在新行上开始。 2) 高度,行高以及内外边距都可控。 3) 占满父级,宽度缺省是它的容器的100%,除非设定一个宽度。 4) 可以容纳其他块元素和内联元素。B. 内联元素.行内元素(inine-block元素) 1) 节省空间,和其他行内元素堆叠在一起。 2) 高度,行高和顶及底边距都不可改变...原创 2019-03-15 17:36:55 · 400 阅读 · 0 评论