标签 css 下的文章

2024-08-21




/* 图片懒加载样式 */
img[lazy-src] {
    opacity: 0;
    transition: opacity 300ms;
}
img[lazy-src][loaded] {
    opacity: 1;
}
 
/* 图片懒加载脚本 */
<script>
document.addEventListener('DOMContentLoaded', function() {
    var lazyImages = [].slice.call(document.querySelectorAll('img[lazy-src]'));
 
    if ('IntersectionObserver' in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.getAttribute('lazy-src');
                    lazyImage.removeAttribute('lazy-src');
                    lazyImage.classList.add('loaded');
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });
 
        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        // 降级方案：只加载可见的图片
        let nearBottom = 500; // 当距离底部500px时开始加载图片
        lazyImages.forEach(function(lazyImage) {
            setTimeout(function() {
                lazyImage.src = lazyImage.getAttribute('lazy-src');
                lazyImage.removeAttribute('lazy-src');
                lazyImage.classList.add('loaded');
            }, 200);
        });
    }
});
</script>

这段代码展示了如何使用IntersectionObserver实现图片懒加载，以及如何为不支持IntersectionObserver的浏览器提供一个简单的降级方案。代码中的img[lazy-src]选择器用于选择那些需要懒加载的图片，通过设置opacity: 0进行隐藏，然后在图片加载时逐渐提升不透明度，以实现平滑的用户体验。

System

2024-08-21

所有,html

在CSS中，有四种不同的定位方式：

静态定位（Static Positioning）
相对定位（Relative Positioning）
绝对定位（Absolute Positioning）
固定定位（Fixed Positioning）
静态定位：这是所有元素的默认定位方式，即按照正常文档流进行布局。
相对定位：元素相对于其正常位置进行定位。可以通过top, bottom, left, right属性进行微调。
绝对定位：元素相对于最近的非静态定位的父元素进行定位。如果没有，则相对于body元素。
固定定位：元素相对于浏览器窗口进行定位，无论滚动条如何滚动，元素都会固定在屏幕的指定位置。

以下是对应的CSS代码示例：




/* 静态定位 */
/* 相对定位 */
.relative {
  position: relative;
  left: 20px;
  top: 20px;
}
 
/* 绝对定位 */
.absolute {
  position: absolute;
  left: 20px;
  top: 20px;
}
 
/* 固定定位 */
.fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

在HTML中使用这些定位方式：




<!-- 静态定位 -->
<div>Static Positioning</div>
 
<!-- 相对定位 -->
<div class="relative">Relative Positioning</div>
 
<!-- 绝对定位 -->
<div class="absolute">Absolute Positioning</div>
 
<!-- 固定定位 -->
<div class="fixed">Fixed Positioning</div>

注意："粘贴定位"不是CSS的标准定位方式，如果你是指的是设置元素为固定位置，请确保使用position: fixed;。

- 阅读更多 -

html css背景图片透明文字不透明

System

2024-08-21

所有,html

要实现背景图片透明而文字不透明，可以使用CSS中的rgba颜色格式来设置背景色，并确保文字的颜色是不透明的。例如：




<!DOCTYPE html>
<html>
<head>
<style>
  .transparent-bg {
    background-image: url('background.png'); /* 替换为你的图片路径 */
    background-color: rgba(255, 255, 255, 0.5); /* 设置背景透明度 */
  }
  
  .non-transparent-text {
    color: #000; /* 文字颜色为不透明黑色 */
  }
</style>
</head>
<body>
 
<div class="transparent-bg non-transparent-text">
  这段文字不会透明。
</div>
 
</body>
</html>

在这个例子中，.transparent-bg 类设置了一个背景图片，并且通过rgba背景颜色给背景设置了50%的透明度。.non-transparent-text 类确保文字保持不透明。

- 阅读更多 -

【重识 HTML + CSS】列表、表格、表单

System

2024-08-21

所有,html

在HTML和CSS中创建列表、表格和表单的基本代码如下：

列表：

无序列表（unordered list）:




<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

有序列表（ordered list）:




<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

自定义列表（definition list）:




<dl>
  <dt>列表项1</dt>
  <dd>对列表项1的描述</dd>
  <dt>列表项2</dt>
  <dd>对列表项2的描述</dd>
</dl>

表格：




<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

表单：




<form action="/submit-url" method="post">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="提交">
</form>

在CSS中，您可以添加样式来进一步美化列表、表格和表单。例如：




table {
  width: 100%;
  border-collapse: collapse;
}
 
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}
 
th {
  background-color: #f2f2f2;
}

这段CSS会给表格添加边框，并设置表头的背景色。

- 阅读更多 -

分析 JS 与 CSS 是否阻塞 DOM 的渲染和解析

System

2024-08-21

所有,javascript

在浏览器中，JavaScript 和 CSS 的加载可能会阻塞 DOM 的渲染和解析。这是因为浏览器为了避免出现无样式内容的闪烁（FOUC - Flash of Unstyled Content）或无结构内容的空白屏，会在解析完 HTML 之后，立即渲染出 DOM，然后才执行 CSS 和 JavaScript 的下载及执行。

解决这个问题的关键是减少 JavaScript 和 CSS 文件的体积，使用异步加载（例如通过动态创建 <script> 或 <link> 标签），并且将它们放在文档的底部，接近 </body> 标签处。

以下是一个简单的示例，展示了如何将 CSS 和 JavaScript 文件置于底部加载：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 样式表置于头部但设置为异步加载 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 页面内容 -->
    <div>
        <h1>Hello World</h1>
    </div>
 
    <!-- JavaScript 文件置于底部 -->
    <script src="script.js" async></script>
</body>
</html>

在这个例子中，CSS 文件会阻塞 DOM 的渲染，但不会阻塞 JavaScript 的加载，因为我们使用了 async 属性。JavaScript 文件置于页面底部，不会阻塞 DOM 的解析，而且它会在文档加载完成后执行。这样可以提升页面的渲染性能。

- 阅读更多 -

HTML CSS JS学习笔记之实现网页计算器1，阿里巴巴二面被血虐

System

2024-08-21

所有,html

以下是一个简单的网页计算器实现的代码示例，仅包含HTML和JavaScript，没有使用CSS。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <script>
        function calculate() {
            var firstNumber = parseFloat(document.getElementById('firstNumber').value);
            var secondNumber = parseFloat(document.getElementById('secondNumber').value);
            var operator = document.getElementById('operators').value;
            var result;
 
            switch (operator) {
                case '+':
                    result = firstNumber + secondNumber;
                    break;
                case '-':
                    result = firstNumber - secondNumber;
                    break;
                case '*':
                    result = firstNumber * secondNumber;
                    break;
                case '/':
                    if (secondNumber === 0) {
                        result = 'Cannot divide by zero';
                    } else {
                        result = firstNumber / secondNumber;
                    }
                    break;
                default:
                    result = 'Invalid operator';
                    break;
            }
 
            document.getElementById('result').value = result;
        }
    </script>
</head>
<body>
    <input type="text" id="firstNumber" placeholder="First Number">
    <select id="operators">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" id="secondNumber" placeholder="Second Number">
    <button onclick="calculate()">Calculate</button>
    <input type="text" id="result" placeholder="Result" readonly>
</body>
</html>

这段代码实现了一个简单的计算器功能，用户可以输入两个数字和一个运算符，点击“Calculate”按钮后，会显示计算结果。需要注意的是，这个实现没有包括错误处理，比如输入非数字或除数为零的情况。

- 阅读更多 -

css-知识点（学习笔记），html实体字符

System

2024-08-21

所有,html

在HTML中，某些字符是预留的，如尖括号（< 和 >）通常用于标签的开始和结束。为了在HTML文档中显示这些字符，我们需要使用HTML实体字符。

HTML实体字符（也称为字符实体或命名实体）是用来在HTML文档中显示特殊字符的。在HTML中，有两种方法可以表示这些特殊字符：

使用字符实体名称（也称为命名实体）
使用字符实体编号（也称为数字实体）

以下是一些常用的HTML实体字符：

<：小于号 <
>：大于号 >
&：ampersand或者说and符号 &
：非断行空格
"：引号 "
©：版权符号 ©
®：注册符号 ®
€：欧元符号 €

在CSS中，我们可以使用这些实体字符来避免在某些情况下出现解析错误。例如，当你想在CSS属性中使用某些特殊字符时，你可以使用它们的实体名称或编号。

示例代码：




p::before {
  content: "CSS中使用实体字符: &lt;html&gt;实体字符是很好用的&amp;很有用";
}

在上面的例子中，我们在content属性中使用了几个HTML实体字符。这样可以在页面上显示实际的尖括号和ampersand符号，而不会让浏览器将其视为标签的一部分。

System

2024-08-21

所有,html

在Vue 2中实现一个简单的房间状态图可以通过组件的方式来完成。以下是一个简单的例子，展示了如何使用Vue 2和HTML模拟实现一个房间状态指示器：




<template>
  <div id="app">
    <room-status :status="roomStatus"></room-status>
    <button @click="toggleStatus">Toggle Status</button>
  </div>
</template>
 
<script>
// 自定义组件 'room-status'
Vue.component('room-status', {
  props: ['status'],
  template: `
    <div class="room-status" :class="status">
      <div class="circle" />
      <div class="status-text">{{ statusText }}</div>
    </div>
  `,
  computed: {
    statusText() {
      switch (this.status) {
        case 'occupied': return 'Occupied';
        case 'vacant': return 'Vacant';
        default: return 'Unknown';
      }
    }
  }
});
 
export default {
  data() {
    return {
      roomStatus: 'vacant'
    };
  },
  methods: {
    toggleStatus() {
      this.roomStatus = this.roomStatus === 'occupied' ? 'vacant' : 'occupied';
    }
  }
};
</script>
 
<style>
.room-status {
  display: flex;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  font-size: 12px;
  text-align: center;
  color: white;
}
.occupied {
  background-color: #ff4d4f;
}
.vacant {
  background-color: #50e3c1;
}
.circle {
  margin: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
</style>

在这个例子中，我们定义了一个名为room-status的Vue组件，它接受一个status属性，并根据这个属性的值显示不同的颜色和状态文本。我们还定义了一个简单的按钮，当点击时，它会改变roomStatus数据属性的值，从而更新组件的显示状态。CSS用于样式化组件的显示。这个例子提供了一个基本的实现，可以根据具体需求进行扩展和定制。

System

2024-08-21

所有,css

在Uniapp中使用Tailwind CSS需要遵循以下步骤：

安装Tailwind CSS NPM包：




npm install tailwindcss --save-dev

使用PostCSS设置Tailwind CSS配置文件：




npx tailwindcss init -p

在tailwind.config.js中配置Tailwind CSS，例如：




// tailwind.config.js
module.exports = {
  purge: ['./pages/**/*.vue', './components/**/*.vue'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

在postcss.config.js中引入Tailwind CSS插件：




// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

在index.html或main.js中引入Tailwind CSS文件：




<head>
  <!-- ... -->
  <link href="path/to/tailwind.css" rel="stylesheet">
</head>

在.vue文件中使用Tailwind CSS类：




<template>
  <view class="text-center p-10 bg-gray-200">Hello Tailwind</view>
</template>

注意：Uniapp 使用 Vue 框架，因此你可以像在任何 Vue 项目中一样使用 Tailwind CSS。不过，由于Uniapp的特殊性（编译到各平台的能力），你可能需要额外的工具或插件来确保Tailwind CSS正确工作，例如使用uni-app-plus或uni-mui。

以上步骤提供了一个基本的指南，实际使用时可能需要根据项目具体情况进行调整。

System

2024-08-21

所有,html

以下是一个简单的HTML和CSS结合的代码示例，用于创建一个介绍广东家乡特色的静态网页。




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的家乡 — 广东</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .header {
            text-align: center;
            padding: 20px;
            color: #fff;
            background-color: #333;
        }
        .content {
            margin: 20px 0;
            text-align: center;
        }
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>欢迎来到我的家乡 — 广东</h1>
    </div>
    <div class="content">
        <img src="guangdong.jpg" alt="广东">
        <p>广东，位于中国南部，东邻东海，西接广州海，是中国的经济大门面和重要的贸易中心。广东拥有美丽的自然景色、丰富的文化遗产和活跃的经济生态。</p>
        <!-- 更多内容可以根据实际添加 -->
    </div>
</body>
</html>

在这个示例中，我们使用了HTML定义了网页的结构，并通过内联CSS为页面添加了简单的样式。你可以根据实际情况替换图片和文本内容，以展示你家乡的特色。记得将guangdong.jpg替换为实际的图片文件路径。

- 阅读更多 -