标签 css 下的文章

编程笔记 html5&css&js 038 CSS背景

2024-08-13

所有,html5

在HTML和CSS中，可以使用背景图像、颜色或渐变来装饰网页。以下是一些示例：

使用背景颜色：

HTML:




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="background-color"></div>
</body>
</html>

CSS (styles.css):




.background-color {
    width: 100%;
    height: 100vh;
    background-color: #ff0000; /* 红色背景 */
}

使用背景图像：

HTML:




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="background-image"></div>
</body>
</html>

CSS (styles.css):




.background-image {
    width: 100%;
    height: 100vh;
    background-image: url('background.jpg'); /* 替换为你的图片路径 */
    background-size: cover;
}

使用背景渐变：

HTML:




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="background-gradient"></div>
</body>
</html>

CSS (styles.css):




.background-gradient {
    width: 100%;
    height: 100vh;
    background: linear-gradient(to right, #ff0000, #00ff00); /* 从左到右的红到绿渐变 */
}

以上代码示例展示了如何在HTML元素上设置背景样式。在实际应用中，可以根据需要选择使用背景颜色、图像或渐变。

2024-08-13

所有,html5

在JavaScript中，Number类型用于表示数字值。JavaScript Number 类型的值可以是整数或者浮点数，并且可以用科学计数法表示。

以下是一些操作JavaScript Number数据类型的示例代码：

创建一个Number类型的变量并赋值：




let num = 10; // 整数
let floatNum = 10.5; // 浮点数
let bigNum = 99999999999999; // 大数字

使用Number对象创建数字：




let numObj = new Number(10);

使用Number函数将其他数据类型转换为数字：




let stringToNum = Number("123"); // 123
let boolToNum = Number(true); // 1
let objectToNum = Number({}); // NaN

使用特殊的Number值：




let infinity = Number.POSITIVE_INFINITY; // 正无穷大
let negInfinity = Number.NEGATIVE_INFINITY; // 负无穷大
let nan = Number.NaN; // 非数字

使用Number对象的方法：




let num = 10;
let stringNum = num.toString(); // "10"
let numToFixed = num.toFixed(2); // "10.00"
let numToPrecision = num.toPrecision(2); // "1e+01"

使用Number的静态方法：




let stringToNum = Number.parseInt("123abc"); // 123
let floatToNum = Number.parseFloat("123.45abc"); // 123.45

使用Number的比较方法：




let num1 = 10;
let num2 = 20;
let maxNum = Math.max(num1, num2); // 20
let minNum = Math.min(num1, num2); // 10

以上代码展示了如何在JavaScript中使用Number类型的基本操作。

使用css让图片无限循环旋转360度

2024-08-13

所有,css

要使用CSS使图片无限循环旋转360度，您可以使用@keyframes规则来定义动画，并使用animation属性应用这个动画。以下是实现这个效果的CSS代码示例：




@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
.rotating-image {
  animation: rotate 5s linear infinite;
}

接下来，您需要将这个类rotating-image应用到您想要旋转的图片上。例如：




<img src="path/to/your/image.jpg" class="rotating-image" alt="Rotating Image">

这段代码将确保图片无限期地以每秒5秒的速度连续旋转360度。您可以根据需要调整动画的持续时间（这里是5秒）。

2024-08-13

所有,jquery

以下是一个简单的HTML网页代码示例，包括了HTML结构、CSS样式和JavaScript/jQuery的使用。这个示例展示了一个标准的网页布局，包括头部、导航、主要内容区域和页脚。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>民俗网页设计示例</title>
    <style>
        /* 这里插入CSS样式 */
        body {
            font-family: Arial, sans-serif;
        }
        header, footer {
            background-color: #f2f2f2;
            padding: 20px 0;
            text-align: center;
        }
        nav {
            float: left;
            width: 20%;
        }
        nav ul {
            list-style-type: none;
            padding: 0;
        }
        nav ul a {
            text-decoration: none;
        }
        section {
            margin-left: 20%;
            padding-left: 15px;
        }
        h1 {
            color: #333;
        }
    </style>
</head>
<body>
 
<header>
    <h1>民俗网站</h1>
</header>
 
<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">产品展示</a></li>
        <li><a href="#">联系方式</a></li>
    </ul>
</nav>
 
<section>
    <h2>欢迎来到民俗网站</h2>
    <p>这里是民俗网站的主要内容区域，可以展示文章、图片等。</p>
</section>
 
<footer>
    <p>版权所有 &copy; 民俗网站</p>
</footer>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    // 这里插入JavaScript或jQuery代码
</script>
 
</body>
</html>

这个示例展示了如何组织一个标准的网页结构，并包含了基本的CSS样式和JavaScript/jQuery的引用。在实际应用中，您可以根据具体需求添加更多的功能和样式。

css动画与渐变案例，使用动画和渐变做一个背景动态网页

2024-08-13

以下是一个使用CSS动画和渐变制作的背景动态网页的简单示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 动画与渐变案例</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
 
  .gradient-background {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
  }
 
  @keyframes gradientBG {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
</style>
</head>
<body>
<div class="gradient-background">
  <!-- 网页内容 -->
</div>
</body>
</html>

这段代码创建了一个带有动画渐变背景的简单网页。.gradient-background 类定义了一个渐变背景，并使用@keyframes规则创建了一个无限循环的动画，该动画使背景从左到右平滑移动。这个示例简单明了，展示了如何将渐变和动画结合起来创造一个生动的背景效果。

CSS--浮动

2024-08-13

CSS 的浮动（Float）属性用于创建浮动框，可以让这些框向左或向右浮动，直到它们的外边缘碰到包含它们的容器的边缘或另一个浮动框为止。

解决浮动带来的问题，可以用以下几种方法：

使用 clear 属性

clear 属性用于清除浮动，它可以用来阻止元素向某一侧浮动。




.clear {
  clear: both;
}




<div style="float: left;">I am a floated element.</div>
<div class="clear">I am a clearing div.</div>

使用 overflow 属性

overflow 属性用于创建一个块级格式化上下文，当元素的 overflow 属性值不是 visible 时，该元素会生成一个块级上下文。




.overflow {
  overflow: auto; /* 或者 'hidden' */
}




<div class="overflow">
  <div style="float: left;">I am a floated element.</div>
</div>

使用 ::after 伪元素




.clearfix::after {
  content: "";
  display: table;
  clear: both;
}




<div class="clearfix">
  <div style="float: left;">I am a floated element.</div>
</div>

使用 flex 布局




.flex-container {
  display: flex;
}




<div class="flex-container">
  <div style="order: 2;">I am a floated element.</div>
</div>

使用 grid 布局




.grid-container {
  display: grid;
}




<div class="grid-container">
  <div>I am a floated element.</div>
</div>

以上都是解决CSS浮动问题的方法，具体使用哪种，取决于实际需求和场景。

使用HTML+CSS实现网页loading加载效果，支持定时或加载完成后隐藏

2024-08-13

以下是一个简单的HTML和CSS代码示例，用于创建一个自定义的页面加载效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Loading Spinner</title>
<style>
  .loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 1000;
  }
 
  .loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
  }
 
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>
</head>
<body>
 
<div class="loader-container">
  <div class="loader"></div>
</div>
 
<script>
  window.onload = function() {
    setTimeout(function() {
      document.querySelector('.loader-container').style.display = 'none';
    }, 3000); // 延迟3秒后隐藏加载动画
  };
</script>
 
</body>
</html>

这段代码创建了一个简单的圆形加载动画，并使用CSS动画使其旋转。当页面加载完成后，JavaScript 代码会在3秒后隐藏这个加载动画容器。这个示例可以根据需要进一步定制，比如通过CSS改变加载动画的样式或颜色，或者通过JavaScript来实现更复杂的加载状态管理。

CSS实现磨砂玻璃（毛玻璃）效果样式

2024-08-13

要使用CSS实现磨砂玻璃(毛玻璃)效果，可以使用backdrop-filter属性。该属性可以为元素添加模糊效果，常用于调整图片或颜色背景的透明度，实现淡化或增强其中的视觉效果。

以下是一个简单的例子，展示如何使用backdrop-filter来实现模糊效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>磨砂玻璃效果</title>
<style>
  .glass {
    width: 300px;
    height: 200px;
    background-image: url('your-image.jpg'); /* 替换为你的图片路径 */
    background-size: cover;
    background-position: center;
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px); /* 调整模糊半径 */
  }
</style>
</head>
<body>
<div class="glass">
  <!-- 内容 -->
</div>
</body>
</html>

在这个例子中，.glass 类定义了一个模糊半径为5像素的磨砂玻璃效果。你可以将url('your-image.jpg')替换为你想要应用这种效果的图片。调整backdrop-filter属性中的blur()函数参数可以改变模糊的强度。

推荐开源项目：WebGradients - 精致的CSS3渐变库

2024-08-13

WebGradients是一个提供多种CSS3渐变效果的开源库。使用这个库，开发者可以快速为其网站项目添加引人入胜的背景渐变效果。

以下是如何使用WebGradients的简单步骤：

下载WebGradients: 访问WebGradients的GitHub仓库，下载ZIP文件或者通过Git克隆到本地。
解压下载的文件，并将webgradients文件夹复制到你的项目中。
在你的HTML文件中，引入webgradients.css文件。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGradients Example</title>
    <link rel="stylesheet" href="path/to/webgradients/webgradients.css">
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .gradient-bg {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="gradient-bg" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/16149/webgradients-logo.png);"></div>
</body>
</html>

在上面的代码中，我们创建了一个div元素，并通过style属性应用了一个背景图像，该图像是WebGradients项目的logo。我们还定义了一个简单的CSS类.gradient-bg，它将渐变效果应用于页面的背景。

这只是一个简单的例子，你可以根据需要从WebGradients库中选择不同的渐变样式，并将它们应用到你的网页元素上。