分类 css 下的文章

2024-08-08




/* 假设有一个需要缩放的元素 */
.element {
  /* 设置元素的基点进行变换 */
  transform-origin: center center;
  /* 应用缩放变换 */
  transform: scale(0.8);
}
 
/* 在父元素中，可能需要调整定位或者大小来适应缩放后的变化 */
.parent-element {
  /* 根据需要调整宽度和高度 */
  width: 125px; /* 原始宽度的80% */
  height: 125px; /* 原始高度的80% */
 
  /* 如果子元素位置偏移，可能需要调整定位 */
  position: relative;
  top: -10px; /* 根据实际偏移进行调整 */
  left: -10px; /* 根据实际偏移进行调整 */
}

这个例子展示了如何使用transform-origin属性来设置变换的基点，以及如何在使用transform: scale()后调整父元素以适应布局变化。注意，实际的解决方案可能需要根据具体情况进行调整。

js------函数，CSS全局样式的设置

2024-08-08

在JavaScript中，您可以使用document.body.style来设置全局CSS样式。以下是一个简单的例子，展示了如何使用JavaScript动态更改页面的背景颜色。




// 设置页面背景颜色为灰色
document.body.style.backgroundColor = '#f0f0f0';
 
// 设置段落文本颜色为蓝色
document.body.style.color = 'blue';
 
// 设置字体大小为16px
document.body.style.fontSize = '16px';

如果您想要设置更多的全局样式，可以继续添加style属性。

请注意，这种方法会覆盖页面上现有的任何内联样式或外部样式表。如果您需要添加一个新的样式规则，可以使用CSSStyleSheet对象。




// 创建一个新的样式表
var style = document.createElement('style');
 
// 设置样式表的内容
style.innerHTML = `
  body {
    background-color: #f0f0f0;
    color: blue;
    font-size: 16px;
  }
  /* 更多全局样式 */
`;
 
// 将样式表添加到文档中
document.head.appendChild(style);

这段代码会创建一个新的<style>标签，并将其添加到文档的<head>中。在这个<style>标签内，您可以设置您想要的任何CSS规则，它们将应用于整个页面。

CSS】滚动条样式

2024-08-08

在CSS中，可以使用::-webkit-scrollbar伪元素及其关联的伪元素来自定义滚动条的样式，但请注意这些样式仅在基于WebKit的浏览器中有效（如Chrome和Safari）。以下是一个自定义滚动条样式的例子：




/* 自定义整个滚动条 */
::-webkit-scrollbar {
  width: 12px; /* 设置滚动条的宽度 */
  background-color: #f9f9f9; /* 滚动条的背景色 */
}
 
/* 自定义滚动条轨道 */
::-webkit-scrollbar-track {
  background: #e1e1e1; /* 轨道的背景色 */
  border-radius: 10px; /* 轨道的圆角 */
}
 
/* 自定义滚动条的滑块（thumb） */
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1; /* 滑块的背景色 */
  border-radius: 10px; /* 滑块的圆角 */
  border: 2px solid #ffffff; /* 滑块边框 */
}
 
/* 当滑块悬停或活动时的样式 */
::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8; /* 悬停或活动状态下滑块的背景色 */
}

将上述代码添加到你的CSS样式表中，可以实现自定义滚动条样式的效果。请注意，这些样式不会影响所有浏览器，如果需要兼容更多浏览器，可能需要使用JavaScript库或者其他CSS属性，如scrollbar-color和scrollbar-width。

CSS功能汇总

2024-08-08

CSS（层叠样式表）是一种用来描述网页和其他HTML文件样式的语言。以下是一些关键CSS功能的概述和示例代码：

字体和文本样式:




p {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333333;
  text-align: center;
}

背景和边框:




div {
  background-color: #cccccc;
  border: 1px solid black;
  padding: 20px;
  margin: 10px;
}

布局和浮动:




.column {
  float: left;
  width: 50%;
}
 
/* 清除浮动 */
.row::after {
  content: "";
  display: table;
  clear: both;
}

盒模型和定位:




#box {
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}
 
/* 绝对定位 */
#box-relative {
  position: relative;
  top: 10px;
  left: 20px;
}

伪类和动画:




/* 链接伪类 */
a:link { color: blue; }
a:hover { color: red; }
 
/* 动画 */
@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
@-moz-keyframes example /* Firefox */ {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
#animatedBox {
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

CSS3特效:




/* 圆角边框 */
div {
  border: 2px solid #a1a1a1;
  border-radius: 25px;
}
 
/* 阴影效果 */
div {
  box-shadow: 10px 10px 5px #888888;
}
 
/* 渐变背景 */
div {
  background: linear-gradient(to right, red , yellow);
}

CSS是一种非常强大的语言，可以用来创建各种复杂的设计和布局。上述示例展示了CSS的一些基本功能和如何使用它们来装饰网页元素。

2024-08-08

以下是一个简单的静态HTML个人网页示例，包含了基础的结构和样式：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人网页模板</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f7f7f7;
        }
        .header {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
        }
        .content {
            margin: 15px;
            padding: 20px;
            background-color: #fff;
        }
        .footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: absolute;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
 
<div class="header">
    <h1>个人网页标题</h1>
</div>
 
<div class="content">
    <h2>内容标题</h2>
    <p>这里是内容部分，可以根据需要添加更多的内容和信息。</p>
    <!-- 其他内容可以根据需要添加 -->
</div>
 
<div class="footer">
    <p>版权所有 &copy; 2023 个人网页作者</p>
</div>
 
</body>
</html>

这个示例展示了一个简单的HTML页面结构，包括头部（Header）、内容区（Content）和底部（Footer）。CSS样式被内联定义，以保持示例的完整性。在实际应用中，您可能需要使用外部CSS文件来管理样式，并添加更多的交互和动态功能。

css绘制下拉框头部三角(分实心/空心)

2024-08-08

在CSS中，您可以使用伪元素和边框来绘制下拉框头部的三角形。以下是实现实心和空心三角形的示例代码：

实心三角形:




/* 实心三角形的样式 */
.dropdown-header .triangle.solid {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px; /* 上三角形 */
  border-color: #333 transparent transparent transparent;
}

空心三角形:




/* 空心三角形的样式 */
.dropdown-header .triangle.hollow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px; /* 上三角形 */
  border-color: #fff transparent transparent transparent;
  border-left-color: #333;
  border-right-color: #333;
}

HTML结构:




<div class="dropdown-header">
  <div class="triangle solid"></div>
  <!-- 其他下拉头部内容 -->
</div>

或者空心三角形:




<div class="dropdown-header">
  <div class="triangle hollow"></div>
  <!-- 其他下拉头部内容 -->
</div>

在这个例子中，.dropdown-header 是包含下拉头部及三角形的容器，.triangle 是三角形的通用类，.solid 和 .hollow 是区分实心和空心三角形的类。您可以根据需要调整 border-width 和 border-color 的值来改变三角形的大小和颜色。

如何让flex布局中的一个子元素单独右侧对齐

2024-08-08

要在Flex布局中让一个子元素独立右侧对齐，可以使用justify-content: flex-end属性来推动子元素到容器的右侧，然后使用margin-left或者align-self属性将特定子元素拉到右侧。

以下是一个简单的例子：

HTML:




<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item right-align">Item 3</div>
</div>

CSS:




.flex-container {
  display: flex;
  justify-content: flex-end;
}
 
.flex-item {
  margin: 5px;
}
 
.right-align {
  align-self: flex-end;
}

在这个例子中，.flex-container是Flex容器，其中的.flex-item类表示所有的子元素，而.right-align类仅被应用于需要右侧对齐的子元素。通过align-self: flex-end属性，我们可以使这个特定的子元素独立于其他子元素而右侧对齐。

前端工程化之：webpack3-7(PostCss)

2024-08-08




const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
 
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]'
              }
            },
            'postcss-loader'
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css'),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    })
  ]
};

这个配置文件使用了PostCSS来处理CSS文件，并通过modules选项启用CSS模块，这允许我们使用CSS模块化，通过将类名转换为唯一的标识符来避免样式冲突。同时，它定义了process.env.NODE_ENV为'production'，这对于生产环境优化是非常重要的。

CSS基础5-垂直居中与图片处理，前端知识总结

2024-08-08




/* 使用Flexbox实现垂直居中 */
.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
 
/* 使用Grid实现垂直居中 */
.container {
  display: grid;
  place-items: center; /* 水平垂直同时居中 */
}
 
/* 使用定位方法实现垂直居中 */
.container {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
 
/* 使用伪元素和负margin实现垂直居中 */
.container {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 50px; /* 需要指定高度 */
}
 
/* 使用line-height实现单行文本垂直居中 */
.container {
  height: 100px;
  line-height: 100px; /* 等于容器高度 */
}
 
/* 使用图片处理技术实现图片的响应式居中和自适应宽度 */
.img-container {
  position: relative;
  width: 100%; /* 宽度占满容器 */
  height: 300px; /* 设置固定高度 */
  overflow: hidden; /* 超出部分隐藏 */
}
.img-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 使图片居中 */
  max-width: 100%; /* 图片宽度不超过容器宽度 */
  height: auto; /* 高度自动缩放 */
}

以上代码示例展示了如何使用不同的CSS技术实现容器内的内容（包括文本、图片等）的垂直居中，并对图片进行了响应式处理，确保在容器大小变化时图片仍然可以正确居中显示。