分类 css 下的文章

2024-08-10




/* 设置字体族 */
p {
  font-family: "Helvetica", "Arial", sans-serif;
}
 
/* 设置字体大小 */
p {
  font-size: 16px;
}
 
/* 设置字体粗细 */
strong {
  font-weight: bold; /* 或者使用数值 400, 600 (正常或粗体) */
}
 
/* 设置字体样式（斜体） */
em {
  font-style: italic;
}
 
/* 设置行间距 */
p {
  line-height: 1.5; /* 这里可以是无单位的数值或者具体的长度值 */
}
 
/* 设置文本的水平对齐方式 */
p {
  text-align: center; /* 可选值：left, right, center, justify */
}
 
/* 设置文本修饰（下划线） */
a {
  text-decoration: underline; /* 可选值：none, underline, overline, line-through, inherit */
}
 
/* 设置文本缩写（使用省略号） */
p {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

这段代码展示了如何使用CSS来设置文本的字体属性，如字体族、大小、粗细、样式、行间距以及对齐方式，还包括了链接文本的修饰和文本的缩写。

- 阅读更多 -

css折叠的导航栏

System

2024-08-10

所有,css

要创建一个简单的CSS折叠的导航栏，你可以使用HTML和CSS。以下是一个基本的例子：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Collapsible Navigation Bar</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  .navbar {
    overflow: hidden;
    background-color: #333;
  }
  .navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }
  .navbar .icon {
    display: none;
  }
  @media screen and (max-width: 600px) {
    .navbar a:not(:first-child) {display: none;}
    .navbar a.icon {
      float: right;
      display: block;
    }
  }
  @media screen and (max-width: 600px) {
    .navbar.responsive {position: relative;}
    .navbar.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .navbar.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }
</style>
</head>
<body>
 
<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>
 
<script>
function myFunction() {
  var x = document.querySelector(".navbar");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}
</script>
 
</body>
</html>

CSS:




body {
  font-family: Arial, sans-serif;
}
 
.navbar {
  overflow: hidden;
  background-color: #333;
}
 
.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
.navbar a:hover {
  background-color: #ddd;
  color: black;
}
 
.navbar .icon {
  display: none;
}
 
@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
}
 
@media screen and (max-width: 600px) {
  .navbar.responsive {position: relative;}
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

这段代码包括了一个简单的水平导航栏，以及一个可以折叠/展开的菜单图标。当屏幕宽度小于600像素时，除第一个链接外的所有链接会被隐藏，同时显示菜单图标，点击该图标可以切换导

System

2024-08-10

所有,css




const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';
 
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.(scss|css)$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }
      // ...
    ]
  },
  plugins: [
    // ...
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
    // ...
  ]
  // ...
};

这段代码根据环境变量NODE_ENV的值来决定是使用style-loader还是MiniCssExtractPlugin.loader。如果NODE_ENV不是production，意即开发环境，通常会使用style-loader将样式以<style>标签的形式直接注入到页面，便于开发调试。如果是生产环境，则使用MiniCssExtractPlugin.loader将样式提取为独立的.css文件。同时，在plugins数组中加入了MiniCssExtractPlugin实例，用于生产环境下的CSS文件提取。

- 阅读更多 -

css图片属性，图片自适应

System

2024-08-10

所有,css

要使图片自适应其容器大小，可以使用CSS的object-fit属性和width、height属性。object-fit属性可以设置为cover、contain或scale-down等值，以达到不同的自适应效果。

以下是一个简单的例子：

HTML:




<div class="container">
    <img src="image.jpg" alt="Responsive Image">
</div>

CSS:




.container {
    width: 300px; /* 或者任何你想要的宽度 */
    height: 200px; /* 或者任何你想要的高度 */
    overflow: hidden; /* 确保图片不会溢出容器 */
}
 
.container img {
    width: 100%; /* 使图片宽度自适应容器 */
    height: 100%; /* 使图片高度自适应容器 */
    object-fit: cover; /* 裁剪并覆盖到容器 */
}

在这个例子中，.container 是图片的容器，img 是图片本身。object-fit: cover; 确保图片会覆盖整个容器，但可能会被裁剪以保持其宽高比。如果你想要图片完全填充容器而不被裁剪，可以使用 object-fit: contain;，但这可能会导致图片不能填满整个容器。

- 阅读更多 -

vue2在scss中使用js的变量

System

2024-08-10

所有,css

在 Vue 2 中，你可以通过以下步骤在 SCSS 中使用 JavaScript 变量：

在 data 函数中定义你的 JavaScript 变量。
使用 v-bind:style 或简写 :style 将这个变量绑定到元素的 style 属性。
在 SCSS 中通过 #{} 将 JavaScript 变量嵌入。

示例代码：




<template>
  <div :style="{ backgroundColor: dynamicColor }">
    <!-- 你的内容 -->
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      dynamicColor: '#3498db' // 这是一个JavaScript变量
    }
  }
}
</script>
 
<style lang="scss">
// SCSS中使用JavaScript变量
div {
  color: #{dynamicColor}; // 这里会输出 '#3498db'
}
</style>

在上面的例子中，我们在 data 中定义了一个 dynamicColor 变量，然后通过 :style 将其绑定到了 div 的 style 属性的 backgroundColor。在 style 标签内，我们使用了 SCSS 的 #{} 语法将 dynamicColor 变量嵌入到 CSS 属性中。这样，你就可以在 SCSS 中使用 JavaScript 变量了。

- 阅读更多 -

使用css的box-reflect属性制作倒影效果

System

2024-08-10

所有,css

CSS的box-reflect属性可以用来创建镜像效果，也就是元素的倒影。这个属性可以让你创建一个平面的倒影或者是一个3D的倒影效果。

下面是一个简单的例子，展示如何使用box-reflect属性：




<!DOCTYPE html>
<html>
<head>
<style>
.box {
  width: 200px;
  height: 100px;
  background-color: #4CAF50;
  /* 创建一个水平方向的倒影 */
  -webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%);
  -moz-box-reflect: below 5px -moz-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%);
  box-reflect: below 5px linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%);
}
</style>
</head>
<body>
 
<div class="box"></div>
 
</body>
</html>

在这个例子中，.box类定义了一个宽度为200px，高度为100px的盒子，并设置了背景颜色。box-reflect属性的值below 5px表示倒影将出现在盒子的下方，距离原盒子下边缘5px。接下来的-webkit-linear-gradient和-moz-linear-gradient是创建一个渐变效果的渐变图案，用于遮盖倒影区域，增加深度感。

注意：box-reflect属性可能不是所有浏览器都支持，所以在使用时可能需要添加浏览器前缀，如-webkit-、-moz-。

- 阅读更多 -

【Web前端】清除浮动&css中文字体

System

2024-08-10

所有,css

解决CSS中的浮动问题，可以使用clear属性。通常，在浮动元素之后添加一个空的元素，并设置clear: both;来清除浮动。

HTML:




<div class="float-element">我是浮动元素</div>
<div class="clear-fix"></div>

CSS:




.float-element {
  float: left; /* 或者使用 'right' */
}
 
.clear-fix {
  clear: both;
}

确保在所有浮动元素之后添加清除元素。这是一种常见的解决浮动问题的方法。

对于CSS中的中文字体问题，可以通过@font-face规则指定中文字体文件。

CSS:




@font-face {
  font-family: 'MyCustomFont';
  src: url('path/to/font.woff') format('woff'),
       url('path/to/font.ttf') format('truetype');
}
 
body {
  font-family: 'MyCustomFont', sans-serif;
}

确保替换path/to/font.woff和path/to/font.ttf为你的字体文件实际路径。你可能需要为不同的浏览器提供不同格式的字体文件。

- 阅读更多 -

8个有点优秀的CSS实践

System

2024-08-10

所有,css

以下是8个点击率提升的CSS实践，可以应用到你的网站上：

使用CSS变量（Custom Properties）来管理颜色和其他值。




:root {
  --primary-color: #333;
}
 
body {
  color: var(--primary-color);
}

使用CSS Flexbox布局来创建灵活的布局。




.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用CSS Grid布局来创建更复杂的布局。




.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

优化CSS选择器以提高效率。




/* 不好的实践 */
.container .item {
  color: red;
}
 
/* 好的实践 */
.item {
  color: red;
}

使用CSS Media Queries来创建响应式布局。




/* 对于小屏幕 */
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}
 
/* 对于大屏幕 */
@media (min-width: 601px) {
  .container {
    flex-direction: row;
  }
}

使用CSS Mixins和Functions来提高样式代码的复用性。




/* 使用Sass的例子 */
@mixin font-style($size, $color) {
  font-size: $size;
  color: $color;
}
 
.title {
  @include font-style(20px, blue);
}
 
.subtitle {
  @include font-style(16px, grey);
}

使用CSS预处理器（如Sass或Less）来提高CSS开发效率。




// Sass示例
$font-stack: Helvetica, sans-serif;
 
body {
  font-family: $font-stack;
}

使用CSS实现复杂动画。




/* 使用keyframes定义动画 */
@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
 
/* 应用动画到元素 */
.slide-in {
  animation: slide-in 0.5s ease-in forwards;
}

这些实践可以提高你的网站的可维护性、性能和用户体验。记得在实际应用时根据你的项目需求和目标浏览器兼容性来调整CSS代码。

- 阅读更多 -

【重识 HTML + CSS】CSS 选择器

System

2024-08-10

所有,css

在CSS中，选择器是一种模式，用于选择需要应用样式规则的元素。CSS选择器可以基于元素类型、属性、类或ID来选择元素。

元素选择器：选择特定类型的HTML元素，例如p、h1、div等。




p {
  color: blue;
}

类选择器：选择具有特定类的元素，类前面有一个点.。




.highlight {
  background-color: yellow;
}

ID选择器：选择具有特定ID的元素，ID前面有一个#。




#firstname {
  color: red;
}

属性选择器：选择包含特定属性的元素，或者特定属性值的元素。




input[type="text"] {
  background-color: lightgrey;
}

伪类选择器：选择特定状态的元素，如:hover、:active、:visited等。




a:hover {
  color: hotpink;
}

伪元素选择器：选择元素的某部分内容，如::before、::after等。




p::first-letter {
  font-size: 200%;
}

组选择器：使用逗号,分隔，选择多个不同元素。




h1, h2, h3 {
  color: green;
}

子选择器：使用>，选择直接子元素。




ul > li {
  list-style-type: square;
}

后代选择器：使用空格，选择指定的后代元素。




div a {
  text-decoration: none;
}

相邻兄弟选择器：使用+，选择紧跟在另一个元素后的元素。




p + h2 {
  font-weight: bold;
}

通用兄弟选择器：使用~，选择同一父元素下的所有某元素之后的兄弟元素。




h2 ~ p {
  color: purple;
}

以上是CSS选择器的一些基础和常用类型。在实际开发中，可以根据需要选择合适的选择器来为HTML元素添加样式。

System

2024-08-10

所有,css

在使用wangEditor5（一个富文本编辑器）时，如果你发现展示的HTML内容没有样式，可能是因为样式文件没有正确加载或者编辑器初始化时没有正确引入CSS文件。

解决方法：

确认CSS文件是否存在：检查你的项目中是否有CSS文件，并且路径正确。
确认CSS文件被正确引入：如果你是在JavaScript中引入CSS文件，确保没有404错误，文件路径正确。
检查编辑器初始化代码：确保在初始化wangEditor5时，正确引入了CSS文件。

例如，如果你是通过npm安装的wangEditor5，并且使用React来集成，你的代码可能看起来像这样：




import React from 'react';
import Editor from 'wangeditor';
import 'wangeditor/css/wangEditor.min.css'; // 引入CSS文件
 
class MyEditor extends React.Component {
  componentDidMount() {
    const editor = new Editor(this.divRef);
    editor.create();
  }
 
  render() {
    return <div ref={(ref) => (this.divRef = ref)} />;
  }
}
 
export default MyEditor;

确保CSS文件的引入路径是正确的，并且没有其他错误导致CSS文件没有被加载。

如果以上步骤都确认无误，但问题依旧存在，可以尝试以下方法：

检查浏览器开发者工具中的网络(Network)面板，查看是否有加载CSS文件的404错误。
使用浏览器的“查看页面源代码”或者按下Ctrl + U（根据你的浏览器可能不同）查看HTML源代码，确认CSS链接是否正确。
如果你是在线编辑器，检查CDN链接是否正确，或者CDN是否可用。
清除浏览器缓存，重新加载页面，看是否是缓存问题。

如果以上步骤都无法解决问题，可以查看wangEditor5的文档或者在Stack Overflow等社区搜索类似问题，或者提问以寻求帮助。

- 阅读更多 -