- 博客(35)
- 资源 (2)
- 收藏
- 关注
RSS订阅转载 简单的了解下 css 在 2022 年有哪些新特性
2022年将成为 CSS 最伟大的一年。无论是在功能还是合作浏览器的功能发布方面，合作目标是实现 14 个功能。概述本文是在 Google IO 2022上发表的演讲的文字形式。这里不会对每个功能进行深入的讲解，而是对每个功能进行简要概述，提供广度而不是深度。下面是这些 CSS 功能的概览：浏览器兼容性将这么多 CSS 功能设置为合作发布的主要原因是来自 Interop 2022 的努力，下面就来看看 Interop 2022 和 Compat 2021 分别做出了哪些努力。1.
2022-05-29 23:21:03
514
原创 40个常用的CSS代码汇总
1、清除浮动主要为子元素浮动（float）之后，父元素无法撑起高度和宽度。 <!-- html --><div class="clear"> <img src="demo.gif"></div> <!-- css --><style> img { float: left; } /* 清除浮动 */ .clear::after { content: ""; display: block; clear: both; }&
2022-05-29 23:03:08
5361
转载 各种页面常见布局+知名网站实例分析
目录（PC端推荐用法后面加▲）[TOC]一、水平居中一,二,三章都是parent+son的简单结构,html代码和效果图就不贴出来了,第四章以后才有(1)文本/行内/行内块级▲原理：text-align只控制行内内容(文字、行内元素、行内块级元素)如何相对他的块父元素对齐#parent{text-align: center;}优缺点优点：简单快捷，容易理解，兼容性非常好 缺点：只对行内内容有效；属性会继承影响到后代行内内容；如果子元素宽度大于父元素宽度则无效，但是后代行
2022-05-29 22:26:39
3241
转载 CSS 参考资料/学习资料
[1] http://www.w3.org/TR/CSS1/[2] http://www.w3.org/TR/CSS21/[3] http://www.w3.org/TR/css3-color/[4] http://www.w3.org/TR/css3-flexbox/[5] (英)Andy Buddha, Simon Collison, Cameron Moll 著，陈剑瓯 译。精通CSS：高级Web标准解决方案（第2版）。北京：人民邮电出版社，2010.5[6] 大漠 著。图解CSS
2022-05-29 21:42:52
204
原创 HTML特效代码汇总
1.贴图：<img src="图片地址">2.加入连接：<a href="所要连接的相关地址">写上你想写的字</a>3.在新窗口打开连接：<a href="相关地址" target="_blank">写上要写的字</a>消除连接的下划线在新窗口打开连接：<a href="相关地址" style="text-decoration:none" target="_blank">写上你想写的字</a>4.移动字体
2022-05-28 19:42:11
634
原创 CSS设置居中的汇总
HTML 代码部分块级元素<div class="parent"> <div class="child">child</div></div>复制代码行内元素<div class="parent"> <span class="child">child</span></div>复制代码水平居中01 行内元素 text-align: center;.parent {
2022-05-27 15:00:36
109
转载 72个炫酷的CSS技巧
前言CSS是一门很特殊的语言，不像一般的编程语言那样需要抽象的思维和严密的逻辑，它真正需要的是想象力——将你脑中所想的意象用代码来表现出来。那么意象又是如何产生的呢？最常用的方法就是探索和观察。举个例子，笔者平时热爱看番，每看到有意思的场景画面总会下意识地记录下来，这对动画创作会非常有帮助；同样地，一旦笔者发现一个制作精良的网站，也会将网站上那些吸引人的元素仔细审查一遍，灵感也自然就有了。演示网址1：codepen演示网址2：shiroi源码地址：github本文的技巧将不会止步于72个
2022-05-27 14:29:08
881
原创 49个常用的CSS代码片段
1、文字超出部分显示省略号单行文本的溢出显示省略号（一定要有宽度） p{ width:200rpx; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; }多行文本溢出显示省略号p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden
2022-05-26 23:29:23
355
转载 40个适合前端初学者练手的基础案例（HTML&CSS）
英文 | https://niemvuilaptrinh.medium.com/40-html-css-projects-for-beginner-2021-5bd01ff62361翻译| 杨小爱使用多个库进行网页设计会在一定程度上增加页面加载时间，并且难以应用于许多不同的项目。所以，今天我将向您介绍使用纯 HTML 和 CSS 构建的组件效果。它将帮助您用于许多不同类型的 Web 项目，并进一步提高您在 HTML 和 CSS 方面的技能。现在让我们一起去看看吧。01、CSS 单选按钮.
2022-05-26 23:00:11
4061
1
原创 分享 16 个 你可能需要的 JS 代码片段
1、随机排列数组使用排序和随机方法对数组进行洗牌非常容易。 const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());console.log(shuffleArray([1, 2, 3, 4])); // Result: [ 1, 4, 3, 2 ] 2、检查日期是否有效使用以下代码段检查给定日期是否有效。 const isDateValid = (...val) =>
2022-05-26 22:57:52
68
转载 简单的了解下 css 在 2022 年有哪些新特性
前端达人于2022-05-19 08:00:46发布45收藏文章标签：javamooccssgwtdwr版权2022年将成为 CSS 最伟大的一年。无论是在功能还是合作浏览器的功能发布方面，合作目标是实现 14 个功能。概述本文是在 Google IO 2022上发表的演讲的文字形式。这里不会对每个功能进行深入的讲解，而是对每个功能进行简要概述，提供广度而不是深度。下面是这些 CSS 功能的概览：浏览器兼容性将这么多 CSS 功能设置为合作发布...
2022-05-26 22:39:42
395
转载 分享 19 个免费好用的 CSS 代码样式生成器工具
文章标签：pythoncsshtmljavajavascript版权整理编辑 |杨小爱CSS 生成器可以帮助每个开发人员的生活变得轻松，提升工作效率，因为它可以立即实现大部分 CSS 效果，如阴影、边框、按钮颜色/形状等等。在本文中，我将分享 19个实用的 CSS代码生成器，每个开发人员都会发现它们在他们的日常工作中很有用。01、Neumorphism.io地址：https://neumorphism.io/#e0e0e0有了它，我们可以立即为设计页面快速生...
2022-05-26 22:33:22
3418
原创 网页刷新方法汇总
代码如下：<input type=button value=刷新 οnclick="history.go(0)">代码如下：<input type=button value=刷新 οnclick="location.reload()">代码如下：<input type=button value=刷新 οnclick="location=location">代码如下：<input type=button value=刷新 οnclick="
2022-05-25 10:40:07
192
原创 HTML中Form表单的使用汇总
表单元素：不同类型的 input 元素， 复选框，单选框， 提交按钮 。 其中 input 元素有不同形态即type属性：text文本，radio单选，submit提交。value是值，submit表单处理程序[form-handler]提交表单的按钮：action指定表单处理程序。<form action="1.jsp" name="messages" method="GET" target="self"> <input type="text" name="usern...
2022-05-19 13:07:41
1183
原创 HTML中input标签使用法汇总
HTML input标签的属性：1.type：该属性是input标签里唯一的必须输入的属性，当然，也可以不填，默认为type = “text”。具体它有那些值，我们后面再讨论。2.required：标记一个字段是否为必须。如果一个字段被标记为required = “required”（严格模式下），或者required（宽松模式下）(ps：下面属性的写法同理，就不一一写出了)，并且这个字段的值为空，或者填入的值是无效值，那么这个表单不能提交。什么是无效值？看pattern属性。3.pattern
2022-05-19 11:15:33
11018
原创 CSS盒子模型汇总
在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。盒子模型(Box Model)：Margin(外边距)- 清除边框外的区域，外边距是透明的 Border(边.
2022-05-18 16:45:55
481
原创 HTML中横线的运用方法
一、作系列横单线 在这个例子中，用到了表格主标题标记<caption>，它的语法如下：<captionalign=left|center|rightvalign=top|bottom> align和valign分别用于设定标题的水平位置和垂直位置。align的默认值是center；valign的默认值是top。利用<caption>标记可以方便地在紧靠边表格的顶部或底部写上文字，且居中，若用其它办法要麻烦得多。另外在本例中能使表格产生单线效果是设置了<
2022-05-18 14:37:37
7603
转载 HTML超链接合集
超链接的语法超链接，即超级链接，就是指按内容链接。超级链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。在超文本文档中，超链接用标记语言的标签指出。超链接是Web页面区别于其他媒体的重要特征之一，网页浏览者只要单击网页中的超链接就可以自动跳转到超链接的目标对象，且超链接的数量是不受限制的。文本超链接是分配目标URL的字或短语，图片超链接是为整个图片分配默认超链接，也可以为图片分配一个或多个热点。在 HTML 标签中，
2022-05-18 14:18:41
3956
原创 HTML中横线的使用
<p>height:2px;是hr的高度;<br> border:none;是没有边框;<br> border-top:2px dotted #185598;是设置横线的样式<br> none：无样式；dotted：点线；dashed：虚线；solid：实线；double：双线；groove：槽线；ridge：脊线；inset：内凹；outset：外凸;groove 上颜色 skyblue 下颜色。&l...
2022-05-18 12:59:25
13203
原创 HTML元素集合1
1、section元素，表示页面中的一个块元素，比如章节、页眉、页脚或者页面中的其它部份。它可以与h1h2h3h4h5h6等元素结合起来使用，标识文档结构。<section>....</section>2、article元素，表示页面中一块与上下文不相关的独立内容，如博客中的一篇文章。<article>...</article>3、aside元素，表示article元素的内容之外的，与article元素的内容相关辅助信息。<aside
2022-05-18 10:30:02
193
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人