https://www.ishiguang.cn/tag/html/ https://www.ishiguang.cn/18614.html 2023-05-05T07:52:03+08:00 以下是一个基本的瀑布流布局的 CSS 样式：.masonry { column-count: 3; /* 列数 */ column-gap: 20px; /* 列之间的间距 */ } .masonry .item { margin-bottom: 20px; /* 元素之间的垂直间距 */ display: inline-block; width: 100%; } /* 根据实际图片大小调整瀑布流元素的高度 */ .masonry .item img { width: 100%; height: auto; display: block; margin-bottom: 10px; } @media (max-width: 768px) { .masonry { column-count: 2; } }以上 CSS 样式将元素放置在多列中，可以自动布局，使得整个布局更加美观。其中 column-count 属性设置列数，column-gap 属性设置列之间的间距。另外，通过 @media 样式实现在小屏幕下响应式布局，将列数适当调整。在 HTML 中，可以将元素以 .item 的类名包裹，然后将所有的 .item 放在 .masonry 容器中，如下所示：<div class="masonry"> <div class="item"> <img src="image1.jpg" alt=""> <p>这里是图片描述</p> </div> <div class="item"> <img src="image2.jpg" alt=""> <p>这里是图片描述</p> </div> <!-- 其他元素... --> </div>请注意，瀑布流布局对浏览器的支持不够全面，可能需要使用浏览器前缀或 JavaScript 插件来实现兼容。 https://www.ishiguang.cn/16531.html 2022-08-30T17:06:00+08:00 雪花飘落特效只需要简单加载一个JS 不需要复杂的去加载CSS。或者别的直接上代码 把这个放进头部就可以了 /// <reference path="jquery-1.10.2.min.js" /> /// /// var minSize = 5; var maxSize = 20; var newOn = 280; var flake = $("<div></div>").css({ "position": "absolute", "top": "-50px" }).html("❅"); $(function () { var documentHeight = $(document).height(); var documentWidth = $(document).width(); setInterval(function () { var startPositionLeft = Math.random() * documentWidth; var sizeFlake = minSize + Math.random() * maxSize; var endPositionLeft = Math.random() * documentWidth; var durationFall = documentHeight * 15 + Math.random() * 3000; var startOpacity = 0.7 + 0.3 * Math.random(); var endOpacity = 1.5 * Math.random(); flake.clone().appendTo($("body")).css({ "left": startPositionLeft, "opacity": startOpacity, "font-size": sizeFlake, "color": "#aadff1" }).animate({ "top": documentHeight - 40, "left": endPositionLeft, "opacity": endOpacity }, durationFall, function () { $(this).remove(); }); }, newOn); }); 记得加载jquery 如果有加载就不需要再加载了！效果如下 https://www.ishiguang.cn/15842.html 2022-03-01T14:27:48+08:00 1、两头渐变透明：!!! <HR style= " FILTER: alpha (opacity = 100, finishopacity =0 , style= 3 )" width ="80%" color =#987 cb 9 SIZE = 3>!!!<HR style= " FILTER: alpha (opacity = 100, finishopacity =0 , style= 3 )" width ="80%" color =#987 cb 9 SIZE = 3> 2、纺锤形：!!! <HR style= " FILTER: alpha (opacity = 100, finishopacity =0 , style= 2 )" width ="80%" color =#987 cb 9 SIZE = 10>!!!<HR style= " FILTER: alpha (opacity = 100, finishopacity =0 , style= 2 )" width ="80%" color =#987 cb 9 SIZE = 10> 3、右边渐变透明：!!! <HR style= " FILTER: alpha (opacity = 100, finishopacity =0 , style= 1 )" width ="80%" color =#987 cb 9 SIZE = 3>!!!<HR style= " FILTER: alpha (opacity = 100, finishopacity =0 , style= 1 )" width ="80%" color =#987 cb 9 SIZE = 3> 4、左边渐变透明：!!! <HR style= " FILTER: alpha (opacity = 0, finishopacity =100 , style= 1 )" width ="80%" color =#987 cb 9 SIZE = 3>!!!<HR style= " FILTER: alpha (opacity = 0, finishopacity =100 , style= 1 )" width ="80%" color =#987 cb 9 SIZE = 3> 5、虚线：!!! <HR style= " border: 1 dashed #987cb9" width ="80%" color =#987 cb 9 SIZE = 1>!!!<HR style= " border: 1 dashed #987cb9" width ="80%" color =#987 cb 9 SIZE = 1> 6、双线：!!! <HR style= " border: 3 double #987cb9" width ="80%" color =#987 cb 9 SIZE = 3>!!!<HR style= " border: 3 double #987cb9" width ="80%" color =#987 cb 9 SIZE = 3> 7、立体效果：!!! <HR style= " FILTER: progid:DXImageTransform.Microsoft.Shadow ( color: #987cb9 ,direction : 145, strength :15 ) " width = "80%" color = #987cb 9 SIZE= 1>!!!<HR style= " FILTER: progid:DXImageTransform.Microsoft.Shadow ( color: #987cb9 ,direction : 145, strength :15 ) " width = "80%" color = #987cb 9 SIZE= 1> 8、钢针效果：!!! <HR style= " FILTER: progid:DXImageTransform.Microsoft.Glow ( color= #987cb9 ,strength = 10) " width= "80%" color= #987 cb9 SIZE =1>!!!<HR style= " FILTER: progid:DXImageTransform.Microsoft.Glow ( color= #987cb9 ,strength = 10) " width= "80%" color= #987 cb9 SIZE =1> ９．垂直分割线!!! <table border= "1px" cellpadding= "0" cellspacing= "0" style =" margin-left :200 px ;height : 265px ; border-left-style: solid ; border-bottom-style : none; border-right-style :none ; border-top-style: none ">!!! <table border= "1px" cellpadding= "0" cellspacing= "0" style =" margin-left :200 px ;height : 265px ; border-left-style: solid ; border-bottom-style : none; border-right-style :none ; border-top-style: none "> https://www.ishiguang.cn/12211.html 2022-01-22T21:41:00+08:00 有 4 种方式可以在 HTML 中引入 CSS。其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码，另外两种是引入 外部 CSS 文件。下面我们就来看看这些方式和它们的优缺点。内联方式内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。示例：<div style="background: red"></div>这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 拥有相同的样式，你不得不重复地为每个 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。嵌入方式嵌入方式指的是在 HTML 头部中的 标签下书写 CSS 代码。示例：<head> <style> .content { background: red; } </style></head>嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。链接方式链接方式指的是使用 HTML 头部的 标签引入外部的 CSS 文件。示例：<head> <link rel="stylesheet" type="text/css" href="style.css"></head>这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。导入方式导入方式指的是使用 CSS 规则引入外部 CSS 文件。示例：<style> @import url(style.css);</style>比较链接方式和导入方式链接方式（下面用 link 代替）和导入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我们来比较这两种方式，并且说明为什么不推荐使用 @import。link 属于 HTML，通过 标签中的 href 属性来引入外部文件，而 @import 属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件；@import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件；当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载；小结：我们应尽量使用 标签导入外部 CSS 文件，避免或者少用使用其他三种方式。