html
关注
分享
扫一扫
文章平均质量分 60
喵_美
这个作者很懒，什么都没留下…
展开
-
HTML + CSS编程规范
HTML + CSS 命名规范。原创 2024-07-24 10:58:42 · 1066 阅读 · 0 评论 -
BFC详解
FC的全称是: Formatting Contexts,是 W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。原创 2024-07-08 11:13:31 · 1080 阅读 · 0 评论 -
CSS content 计数器
CSS 计数器通过一个变量来设置，根据规则递增变量。原创 2024-07-08 11:11:07 · 795 阅读 · 0 评论 -
原生CSS变量
声明的变量是有作用域的，比如是在html中声明的变量，那么该变量在html中的任何地方都可以使用这个变量，如果该变量在p标签中声明的，那么只能在p标签下使用这个变量。var() 函数有第二个参数，表示变量的默认值，如果该变量不存在(第一个参数)，那么就使用这个默认值。变量声明的时候，变量名之前加上两根连词线（–）即可。css变量遵从 css优先级的原则 变量值会被覆盖。css中我们可以统一设置。原创 2024-07-08 11:07:13 · 541 阅读 · 0 评论 -
CSS模拟表格斜线
CSS模拟表格斜线原理利用div+css模拟表格的对角线，容器相邻边的border宽度大于1时，且相邻边框颜色不一样，会形成一个斜线，具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style type="text/css"> .div { border-left: #023060 20px原创 2020-10-29 17:30:58 · 1892 阅读 · 1 评论 -
＜picture＞ 标签——自适应显示不同图片
功能picture元素通过包含一个或多个元素和一个元素再结合media（媒体查询）来使用，根据屏幕匹配的不同尺寸显示不同图片，如果没有匹配到或浏览器不支持 picture 属性则使用 img 元素：案例菜鸟案例<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body>原创 2020-09-23 16:20:30 · 1163 阅读 · 0 评论 -
CSS @规则
CSS @规则@charset用于提示 CSS 文件使用的字符编码方式，它如果被使用，必须出现在最前面。这个规则只在给出语法解析阶段前使用，并不影响页面上的展示效果。@import@import 用于引入一个 CSS 文件，除了 @charset 规则不会被引入，@import 可以引入另一个文件的全部内容。@media可以针对不同的屏幕尺寸设置不同的样式@media (min-width: 1200){ //>=1200的设备 } @media (max-wid原创 2020-09-16 11:04:42 · 773 阅读 · 1 评论 -
让图文不可复制、转载注明出处
让图文不可复制-webkit-user-select: none; -ms-user-select: none;-moz-user-select: none;-khtml-user-select: none;user-select: none;user-select简介这是在css3 UI规范中新增的一个功能，用来控制内容的可选择性user-select:值auto——默认值，用户可以选中元素中的内容none——用户不能选择元素中的任何内容text——用户可以选择元素中的文本转载 2020-07-24 08:58:06 · 318 阅读 · 0 评论 -
文字和盒子对齐
实现文字和粉色盒子对齐：该方法适合调整文字前面图标的位置，图标放在盒子内，可用背景图或图片的形式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { ...原创 2019-05-17 11:14:27 · 2094 阅读 · 0 评论 -
CSS中行高的继承和单位之间的关系
我们知道行高是可以继承的并且行高的单位有四种情况。1具体像素值 如：line-height: 16px;2 emem是指当前标签设置的字体大小，比如当前标签字体大小是16px，那么2em = 32px；3 %%与em一样都是以当前标签设置的字体大小为基准，比如当前标签字体大小是16px，那么line-height: 200%; 则字体大小为32px;4什么单位都不带。 ...转载 2019-05-16 11:13:09 · 941 阅读 · 0 评论 -
列表四周去边框案例
需求：该列表四周无边框html <div class="a clearfix"> <ul class="clearfix"> <li></li> <li></li> <li></li> <li></li&...原创 2019-05-15 23:54:17 · 149 阅读 · 0 评论 -
滑动门原理
滑动门出现的背景制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。核心技术核心技术就是利用CSS精...原创 2019-05-15 23:08:30 · 1735 阅读 · 0 评论 -
溢出文字用省略号表示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { padding: 30px;...原创 2019-05-15 22:09:35 · 292 阅读 · 0 评论 -
元素的显示和隐藏
在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！display 显示display 设置或检索对象是否及如何显示。display : none 隐藏对...原创 2019-05-15 18:22:57 · 442 阅读 · 0 评论 -
鼠标放上显示透明盒子案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> a { display: block; width: 448px; height: 252px; ma...原创 2019-05-15 21:45:21 · 500 阅读 · 0 评论 -
盒子效果案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 200px; transition: all 1...原创 2019-05-14 21:44:16 · 397 阅读 · 0 评论 -
加载更多
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> /* 正在加载公共样式 */ .loadmore {...原创 2019-06-26 21:00:43 · 333 阅读 · 0 评论 -
巧妙利用+号选择器作分割线
巧妙利用+号选择器作分割线+号选择器，即相邻兄弟选择器，可选择紧接在另一元素后的元素，且二者有相同父元素。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> ul >...原创 2019-07-27 15:27:51 · 194 阅读 · 0 评论 -
不同屏幕大小引用不同的背景图
jQuery的data()方法$element.data()是一个函数 ，专门用于取元素上的自定义属性（data-abc）， 函数的参数是我们要取得属性名称（abc）。需求：大屏幕的时候使用大图，图片高度不变图片内容居中；小屏幕的时候使用小图，图片宽度100%自适应；<!DOCTYPE html><html lang="en"><head> &...原创 2019-07-27 19:56:18 · 516 阅读 · 0 评论 -
导航图片固定高度居中显示小技巧
需求：导航图居中，宽度自适应高度不随屏宽减小而减小，图片不会变小。1.制作背景图，两边足够长，如下2.代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .te...原创 2019-07-27 16:45:11 · 263 阅读 · 0 评论 -
模板引擎在浏览器和服务器的渲染方法，及他们的区别（art-template）
服务端渲染和客户端渲染的区别客户端渲染不利于 SEO 搜索引擎优化服务端渲染是可以被爬虫抓取到的，客户端异步渲染是很难被爬虫抓取到的所以你会发现真正的网站既不是纯异步也不是纯服务端渲染出来的而是两者结合来做的例如京东的商品列表就采用的是服务端渲染，目的了为了 SEO 搜索引擎优化而它的商品评论列表为了用户体验，而且也不需要 SEO 优化，所以采用是客户端渲染...原创 2019-09-26 11:42:59 · 1164 阅读 · 0 评论