拾光 - html

瀑布流的样式-例子

admin — Fri, 05 May 2023 07:52:03 +0800

以下是一个基本的瀑布流布局的 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 容器中，如下所示：


  
    
    这里是图片描述
  
  
    
    这里是图片描述

请注意，瀑布流布局对浏览器的支持不够全面，可能需要使用浏览器前缀或 JavaScript 插件来实现兼容。

雪花飘落特效

admin — Tue, 30 Aug 2022 17:06:00 +0800

雪花飘落特效

只需要简单加载一个JS 不需要复杂的去加载CSS。或者别的

直接上代码把这个放进头部就可以了

  /// 
  ///
  ///
  var minSize = 5;
  var maxSize = 20;
  var newOn = 280;
  var flake = $("").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 如果有加载就不需要再加载了！

效果如下

html分割线代码

admin — Tue, 01 Mar 2022 14:27:48 +0800

       1、两头渐变透明：

!!!

       2、纺锤形：

!!!

       3、右边渐变透明：

!!!

       4、左边渐变透明：

!!!

       5、虚线：

!!!

       6、双线：

!!!

       7、立体效果：

!!!

       8、钢针效果：

!!!

       ９．垂直分割线

!!!

       !!!
 

HTML中引入CSS 的方式
admin — Sat, 22 Jan 2022 21:41:00 +0800

有 4 种方式可以在 HTML 中引入 CSS。其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码，另外两种是引入 外部 CSS 文件。下面我们就来看看这些方式和它们的优缺点。
内联方式
内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。
示例：
这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 
 拥有相同的样式，你不得不重复地为每个  添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。
嵌入方式
嵌入方式指的是在 HTML 头部中的 
嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。
链接方式
链接方式指的是使用 HTML 头部的  标签引入外部的 CSS 文件。
示例：
 
这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。
导入方式
导入方式指的是使用 CSS 规则引入外部 CSS 文件。
示例：
比较链接方式和导入方式
链接方式（下面用 link 代替）和导入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我们来比较这两种方式，并且说明为什么不推荐使用 @import。
link 属于 HTML，通过  标签中的 href 属性来引入外部文件，而 @import 属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件；
@import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件；
当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载；
小结：我们应尽量使用  标签导入外部 CSS 文件，避免或者少用使用其他三种方式。