分类前端技术下的文章

2024-08-09

以下是一个使用HTML和CSS创建的简单而又好看的登录界面示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style>
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
  }
  .login-container {
    width: 100%;
    margin: 0 auto;
    margin-top: 100px;
    max-width: 500px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
  }
  .login-container h2 {
    text-align: center;
    margin-bottom: 20px;
  }
  .login-container input[type="text"],
  .login-container input[type="password"] {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 3px;
  }
  .login-container input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
  }
  .login-container input[type="submit"]:hover {
    background-color: #4cae4c;
  }
  .login-container a {
    text-decoration: none;
    color: #5cb85c;
    display: block;
    text-align: center;
    margin-top: 20px;
  }
</style>
</head>
<body>
 
<div class="login-container">
  <h2>Login to Your Account</h2>
  <form action="">
    <input type="text" placeholder="Username" required>
    <input type="password" placeholder="Password" required>
    <input type="submit" value="Login">
  </form>
  <a href="#">Forgot Password?</a>
</div>
 
</body>
</html>

这个示例使用了简单的HTML结构和CSS样式来创建一个现代化的登录界面。它有一个居中的登录容器，包含一个标题、输入框、提交按钮和一个忘记密码的链接。这个界面简洁而又美观，适合用在个人项目或者小型网站上。

- 阅读更多 -

“治疗“xss攻击的“特效药“:DOMPurify，让HTML更安全

System

2024-08-09

所有,html

DOMPurify是一个用于消除不安全的输入的JavaScript库，它可以帮助你防止XSS攻击。以下是如何使用DOMPurify的示例代码：

首先，你需要安装DOMPurify库：




npm install dompurify

然后，你可以在你的JavaScript代码中引入并使用DOMPurify：




const { DOMPurify } = require('dompurify');
 
// 假设你有一些不安全的HTML内容
let unsafeHtml = '<script>alert("XSS")</script>这是安全的文本';
 
// 使用DOMPurify来消除不安全的部分
let safeHtml = DOMPurify.sanitize(unsafeHtml);
 
// 输出结果，你会看到<script>标签被消除了
console.log(safeHtml); // 输出: "这是安全的文本"

DOMPurify不仅仅可以消除不安全的标签，还可以移除标签属性，例如onclick、onerror等事件处理属性，以及style、class等，从而有效地提升你的网站或应用的安全性。

- 阅读更多 -

前端 CSS 经典：grid 栅格布局

System

2024-08-09

所有,css

CSS Grid 是一种二维布局系统，它将网页划分成一个个网格，可以更好地对网页进行布局。以下是一个使用 CSS Grid 创建的简单的三列布局的示例：




.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列布局，每列占据1/3 */
  grid-gap: 10px; /* 网格间隙 */
  padding: 10px; /* 容器内边距 */
}
 
.item {
  background-color: #f2f2f2; /* 每个项目的背景颜色 */
  padding: 20px; /* 每个项目的内边距 */
  text-align: center; /* 文本居中 */
}




<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

这个例子创建了一个具有3列的网格布局，每个网格项都有相同的宽度，并且它们将填充整个容器。grid-template-columns: repeat(3, 1fr); 表示网格布局将被划分成三个相等宽度的列，每个列占据1/3的可用空间。1fr 表示每个网格轨道的固定尺寸是相等的。

- 阅读更多 -

flex 布局设置最后一个元素靠右 margin-left: auto

System

2024-08-09

所有,css3

在Flex布局中，如果你想要让最后一个子元素靠右，可以不使用margin-left: auto，而是使用margin-left: auto配合margin-top: auto来对齐到容器的右上角。如果你只是想要让最后一个子元素靠右并且在垂直方向上紧跟其前面的元素，你可以使用justify-content: flex-end来达到这个效果。

以下是一个简单的Flex布局示例，其中最后一个子元素将显示在容器的右侧：




<style>
  .flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end; /* 这会使子元素靠右 */
  }
 
  .flex-item {
    margin: 5px; /* 为了清楚地展示边距，这里添加了margin */
  }
</style>
 
<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
  <div class="flex-item">Item 4</div>
  <!-- 最后一个元素将靠右显示 -->
  <div class="flex-item">Item 5</div>
</div>

在这个例子中，.flex-container是一个Flex容器，它通过设置justify-content: flex-end来确保最后一个子元素即Item 5将显示在容器的右侧。其他元素将根据容器的布局排列，最后一个元素靠右。

- 阅读更多 -

使用CSS伪元素制作动感超酷的hover动画

System

2024-08-09

所有,css3

以下是一个使用CSS伪元素制作动感Hover动画的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Effect</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background: #3498db;
    margin: 50px;
    position: relative;
    overflow: hidden;
  }
 
  .box:hover:before {
    filter: blur(5px);
    transform: scale(1.2);
  }
 
  .box:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out;
  }
</style>
</head>
<body>
 
<div class="box"></div>
 
</body>
</html>

这段代码定义了一个.box类，它在悬停时会通过:before伪元素生成一个模糊效果，并且通过缩放来增加动感。悬停时的效果通过CSS过渡(transition)实现平滑的动画效果。

- 阅读更多 -

js 小技巧（根据不同的状态生成不同的颜色和状态）

System

2024-08-09

所有,css3

这个问题的解决方案取决于状态和颜色的具体规则。假设有一个简单的状态机制，我们可以使用一个对象来映射状态到颜色，然后通过一个函数来生成颜色。以下是一个示例代码：




// 状态颜色映射对象
const stateToColorMap = {
  'active': 'green',
  'inactive': 'red',
  'pending': 'yellow'
};
 
// 根据状态获取颜色的函数
function getColorByState(state) {
  return stateToColorMap[state] || 'black'; // 默认颜色
}
 
// 示例使用
const activeColor = getColorByState('active'); // 返回 'green'
const pendingColor = getColorByState('pending'); // 返回 'yellow'
const unknownStateColor = getColorByState('unknown'); // 返回 'black'

在这个例子中，stateToColorMap 定义了不同状态对应的颜色。getColorByState 函数接受一个状态作为参数，查询映射对象，并返回对应的颜色。如果状态未在映射中定义，则返回默认颜色black。

- 阅读更多 -

css踩坑记录——css控制强制打印背景

System

2024-08-09

所有,css3

在CSS中，可以使用@media print规则来控制打印时的样式，包括是否显示背景图片和颜色。




@media print {
  body, p, div, ul, li {
    color: #000 !important; /* 确保打印时文本是黑色 */
    background: none !important; /* 移除背景 */
    box-shadow: none !important; /* 移除阴影 */
  }
  
  a, a:visited {
    text-decoration: none !important; /* 移除下划线 */
    color: #000 !important; /* 确保链接是黑色 */
  }
  
  img {
    display: none !important; /* 移除图片 */
  }
}

这段代码将打印样式中的文本颜色设置为黑色，移除所有元素的背景，并且移除图片和超链接的装饰。在打印时，通常不需要背景图片和一些视觉装饰，以保证打印清晰和不影响阅读。

- 阅读更多 -

flex布局，换行的元素上下设置间距

System

2024-08-09

所有,css3

在Flex布局中，如果你想要在换行的元素之间设置间距，你可以使用gap属性（在支持的浏览器中，如Chrome、Edge等）。gap属性是row-gap和column-gap的简写形式，分别用于设置行间距和列间距。

以下是一个简单的例子，演示如何在Flex容器中设置行间距：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* 设置行间距和列间距为20像素 */
  }
  .flex-item {
    width: 100px;
    height: 100px;
    background-color: lightblue;
  }
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <!-- ...更多的flex-item元素... -->
</div>
 
</body>
</html>

在这个例子中，.flex-container 类定义了一个Flex容器，其中的子元素 .flex-item 会根据需要自动换行。gap 属性设置为 20px，这将在每个项目下方和右方添加20像素的间距，从而在换行时生效。

- 阅读更多 -

Element中table组件(el-table)右侧滚动条空白占位处理

System

2024-08-09

所有,css3

在Element UI的el-table组件中，如果你遇到了右侧滚动条空白占位的问题，可能是由于表格内容的宽度超出了容器的宽度，导致出现水平滚动条。在这种情况下，可以通过设置el-table的max-height属性和table-layout样式属性来处理右侧的空白占位问题。

以下是一个简单的处理方式：

设置el-table的max-height属性，限制表格的最大高度，确保垂直滚动条能正常显示。
设置el-table的样式table-layout: fixed;，这样可以防止列宽度的变化导致的布局变化。

示例代码：




<template>
  <el-table
    :data="tableData"
    style="width: 100%; table-layout: fixed;"
    max-height="400"
  >
    <!-- 列定义 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据列表
      ]
    };
  }
};
</script>
 
<style>
/* 可以在这里添加额外的样式 */
</style>

在这个例子中，el-table的最大高度被设置为400像素，并且table-layout属性被设置为fixed。这样，即使内容宽度超出容器宽度，水平滚动条也不会出现，而是显示垂直滚动条。

- 阅读更多 -

基于Vue3+Vite实现的移动端天气预报系统

System

2024-08-09

所有,css3




<template>
  <div class="weather-app">
    <weather-search @getWeather="getWeather" />
    <weather-detail v-if="weatherInfo" :weatherInfo="weatherInfo" />
  </div>
</template>
 
<script>
import { ref } from 'vue';
import WeatherSearch from './components/WeatherSearch.vue';
import WeatherDetail from './components/WeatherDetail.vue';
 
export default {
  name: 'App',
  components: {
    WeatherSearch,
    WeatherDetail
  },
  setup() {
    const weatherInfo = ref(null);
 
    const getWeather = (weatherData) => {
      weatherInfo.value = weatherData;
    };
 
    return {
      weatherInfo,
      getWeather
    };
  }
};
</script>
 
<style>
.weather-app {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
</style>

这个简单的Vue应用展示了如何在Vue 3和Vite环境中创建一个用户可以查询天气并显示详细信息的应用。它包括一个搜索组件和一个显示天气详情的组件。应用的样式也非常简洁，适合移动端显示。

- 阅读更多 -