分类 css 下的文章

2024-08-15

在CSS中，有许多的技巧和方法可以用来整理和优化代码，以提高效率和性能。以下是一些常见的CSS整理方法：

使用CSS预处理器：如Sass、LESS，它们可以让你写出结构更清晰、可维护性更高的CSS代码。




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

合理使用CSS继承：尽可能利用选择器的继承特性，减少重复的代码。




/* 继承示例 */
body {
  font-family: Helvetica, sans-serif;
  color: #333;
}
 
p {
  /* 将继承body的字体和颜色 */
}

精简CSS：移除不必要的空格、注释、换行等，减小文件大小。




/* 精简前 */
#search-form input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}
 
/* 精简后 */
#search-form input[type="text"]{width:100%;padding:10px;margin-bottom:10px;}

使用CSS工具：如PostCSS、Autoprefixer，它们可以自动添加浏览器特定的前缀，并且还能提供其他优化。
模块化CSS：将页面拆分成多个模块，每个模块都写在单独的CSS文件中，然后再通过构建工具如Webpack进行打包。
使用CSS框架：如Bootstrap、Foundation，它们为你提供了预定义的样式和布局，可以减少自己从头开始的工作。
优化CSS选择器：避免使用标签名作为选择器的一部分，因为它的优先级太高，应尽可能使用类或ID。




/* 优化前 */
div#my-id {
  color: red;
}
 
/* 优化后 */
#my-id {
  color: red;
}

使用CSS性能分析工具：如PageSpeed Insights、WebPageTest，它们可以帮助你找到CSS性能瓶颈，并提出优化建议。
使用CSS命名规范：有助于代码的可读性和可维护性。
注意CSS文件的加载顺序：将通用的CSS如重置样式、布局样式等放在前面，将特定的样式放在后面，以提高浏览器的加载效率。

以上是一些常见的CSS整理方法，具体使用哪种或者组合使用哪种，取决于具体项目的需求和条件。在实际操作中，可以根据项目的具体情况，逐步应用这些方法来提高CSS的整体质量。

- 阅读更多 -

【CSS】CSS实现元素四周阴影

System

2024-08-15

所有,css

在CSS中，您可以使用box-shadow属性为元素添加四周阴影。这个属性允许您设置水平偏移、垂直偏移、模糊距离和阴影颜色。

以下是一个简单的例子，展示了如何给一个元素添加四周阴影：




.shadow-box {
  width: 200px;
  height: 100px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 水平偏移 垂直偏移 模糊距离 颜色 */
}

HTML部分：




<div class="shadow-box"></div>

在这个例子中，.shadow-box类将会给div元素添加一个10像素模糊距离的阴影，阴影颜色为半透明黑色。您可以根据需要调整box-shadow属性的值。

- 阅读更多 -

CSS改变图片颜色的三种方法

System

2024-08-15

所有,css

在CSS中，可以通过以下三种方法来改变图片的颜色：

使用CSS滤镜（filter）属性：




img {
  filter: sepia() hue-rotate(90deg) saturate(3);
}

使用CSS混合模式（blend mode）：




img {
  mix-blend-mode: multiply;
}

使用CSS伪元素和线性渐变背景：




img {
  position: relative;
  display: inline-block;
}
 
img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, red, blue);
  mix-blend-mode: multiply;
}

每种方法都有各自的用途，第一种方法通过CSS的滤镜功能可以实现类似老照片的效果，第二种方法可以使图片与其他元素混合显示，第三种方法可以创建出炫丽的颜色渐变效果。

- 阅读更多 -

如何用HTML＋CSS编写灵活的Tab页，offer收割机

System

2024-08-15

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexible Tabs (1)</title>
<style>
  .tabs {
    display: flex;
    justify-content: space-between;
    background-color: #f2f2f2;
    padding: 10px;
  }
  .tab {
    padding: 10px;
    cursor: pointer;
    user-select: none;
  }
  .tab.active {
    border-bottom: 2px solid #333;
  }
  .content {
    padding: 20px;
    border: 1px solid #ddd;
    border-top: none;
  }
</style>
</head>
<body>
 
<div class="tabs">
  <div class="tab active">Tab 1</div>
  <div class="tab">Tab 2</div>
  <div class="tab">Tab 3</div>
</div>
 
<div class="content">Content for Tab 1</div>
 
<script>
  document.querySelectorAll('.tab').forEach(tab => {
    tab.addEventListener('click', () => {
      // Remove active class from all tabs
      document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
 
      // Add active class to the clicked tab
      tab.classList.add('active');
 
      // Get the index of the clicked tab
      const index = [...document.querySelectorAll('.tab')].indexOf(tab);
 
      // Hide all content divs
      document.querySelectorAll('.content').forEach(content => content.style.display = 'none');
 
      // Show the content div corresponding to the active tab
      document.querySelectorAll('.content')[index].style.display = 'block';
    });
  });
</script>
 
</body>
</html>

这段代码使用了Flexbox布局让标签水平分布，并通过JavaScript处理标签的点击事件，显示对应的内容区域。这是一个简单的标签页实现，适合作为学习如何构建更复杂标签页系统的起点。

- 阅读更多 -

CSS实现文字不换行

System

2024-08-15

所有,css

要在CSS中实现文字不换行，可以使用white-space属性。设置white-space属性为nowrap可以阻止文本换行。

下面是实现文字不换行的CSS代码示例：




.no-wrap {
  white-space: nowrap;
}

然后在HTML中，将这个类应用到需要实现不换行的元素上：




<div class="no-wrap">这段文字不会换行，即使它很长。</div>

- 阅读更多 -

CSS基础之定位

System

2024-08-15

所有,css

CSS定位机制允许你对元素进行定位，这里有几种方法：

静态定位（static）
相对定位（relative）
绝对定位（absolute）
固定定位（fixed）
粘性定位（sticky）

下面是每种定位方法的简单示例：

静态定位（static）：
这是所有元素的默认定位方式，即没有定位。




div {
  position: static;
  left: 0;
  top: 0;
}

相对定位（relative）：
相对于其正常位置进行定位。




div {
  position: relative;
  left: 50px;
  top: 20px;
}

绝对定位（absolute）：
相对于最近的非静态定位的父元素进行定位。




div {
  position: absolute;
  left: 100px;
  top: 50px;
}

固定定位（fixed）：
相对于浏览器窗口进行定位，无论滚动条如何滚动。




div {
  position: fixed;
  right: 0;
  bottom: 0;
}

粘性定位（sticky）：
基于用户的滚动位置相对定位。




div {
  position: sticky;
  top: 0;
}

注意：定位的使用需要谨慎，因为它可能会影响页面的其他部分，尤其是在使用绝对定位和固定定位时。

- 阅读更多 -

Web前端最全前端入门篇练习8：3d动画（照片旋转展示），CSS外边距塌陷问题

System

2024-08-15

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D 照片旋转展示</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #222;
            overflow: hidden;
        }
 
        .container {
            perspective: 1500px;
        }
 
        .box {
            width: 300px;
            height: 300px;
            position: relative;
            transform-style: preserve-3d;
            animation: rotate 10s infinite ease-in-out;
        }
 
        .box img {
            width: 300px;
            height: 300px;
            position: absolute;
            backface-visibility: hidden;
        }
 
        .box img:first-child {
            transform: rotateY(0deg) translateZ(300px);
        }
 
        .box img:nth-child(2) {
            transform: rotateY(60deg) translateZ(300px);
        }
 
        .box img:nth-child(3) {
            transform: rotateY(120deg) translateZ(300px);
        }
 
        .box img:nth-child(4) {
            transform: rotateY(180deg) translateZ(300px);
        }
 
        .box img:nth-child(5) {
            transform: rotateY(240deg) translateZ(300px);
        }
 
        .box img:nth-child(6) {
            transform: rotateY(300deg) translateZ(300px);
        }
 
        @keyframes rotate {
            from {
                transform: rotateY(0);
            }
            to {
                transform: rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <img src="photo-1.jpg" alt="Photo 1">
            <img src="photo-2.jpg" alt="Photo 2">
            <img src="photo-3.jpg" alt="Photo 3">

- 阅读更多 -

css:阴影效果box-shadow

System

2024-08-15

所有,css

CSS的box-shadow属性用于给元素添加阴影效果。该属性可以设置水平阴影的位置、垂直阴影的位置、模糊距离、阴影的扩散范围和阴影颜色。

基本语法如下：




box-shadow: offsetX offsetY blurRadius spreadRadius color inset;

offsetX 和 offsetY 分别设置阴影在水平和垂直方向上的偏移量。
blurRadius 设置阴影的模糊程度。
spreadRadius 设定阴影的大小。
color 定义阴影的颜色。
inset 关键字（如果提供）表示内阴影（即内凹阴影）。如果不设置，阴影默认为外阴影。

例子：




/* 添加一个向下及向右偏移10px，模糊半径为15px的阴影 */
.box {
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
}
 
/* 添加一个向上及向左偏移5px，模糊半径为10px，扩散半径为20px的阴影 */
.box {
  box-shadow: -5px -5px 10px 20px rgba(255, 0, 0, 0.5);
}
 
/* 添加一个内阴影，向内偏移5px，模糊半径为10px的阴影 */
.box {
  box-shadow: inset 5px 5px 10px rgba(0, 255, 0, 0.5);
}

在实际应用中，根据需要调整这些值以创建所需的阴影效果。

System

2024-08-15

所有,css

在移动端使用CSS3时，可以通过视口、倍图、backgroud-size等方法来实现更好的用户体验。

视口设置：




<meta name="viewport" content="width=device-width, initial-scale=1.0">

倍图：使用Retina屏幕的双倍图。
background-size：可以使背景图片完全覆盖元素。




div {
  background-image: url('image.jpg');
  background-size: cover;
}

使用媒体查询为不同的屏幕宽度设置不同的样式。




@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

使用flexbox布局来实现响应式设计。




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

使用CSS3的动画和变换提升用户体验。




.box {
  transition: transform 0.5s ease;
}
 
.box:hover {
  transform: scale(1.1);
}

优化CSS文件大小，使用CSS压缩工具。
使用CSS预处理器（如Sass、LESS）来提高CSS的可维护性和生产力。
使用CSS自定义属性（也称为CSS变量）。




:root {
  --main-bg-color: coral;
}
 
body {
  background-color: var(--main-bg-color);
}

图片懒加载，只有当图片滚动到视图中时才加载。
使用CSS Grid布局创建更复杂的响应式布局。
使用CSS Shapes对布局进行更复杂的控制。

以上是一些基本的移动端CSS3应用方法，具体应用时需要根据项目需求和浏览器兼容性进行选择和应用。

- 阅读更多 -

【CSS】新闻页面制作案例一

System

2024-08-15

所有,css

以下是一个简单的新闻页面示例，使用HTML和CSS创建：




<!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;
  }
  .news-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
  }
  .news-header {
    text-align: center;
    padding: 20px 0;
  }
  .news-title {
    font-size: 24px;
  }
  .news-date {
    color: #888;
  }
  .news-content {
    padding: 20px 0;
    line-height: 1.5;
  }
</style>
</head>
<body>
<div class="news-page">
  <div class="news-header">
    <h1 class="news-title">这是一个重要新闻的标题</h1>
    <div class="news-date">2023年6月15日</div>
  </div>
  <div class="news-content">
    <p>这里是新闻的内容部分，可以包含图片、视频和文字。</p>
    <!-- 新闻内容 -->
  </div>
</div>
</body>
</html>

这个示例展示了如何使用HTML和CSS创建一个简单的新闻页面。.news-page类用于设置页面的最大宽度、居中以及内边距。.news-header类用于设置新闻标题和日期的样式，.news-title和.news-date分别用于设置标题和日期的字体和颜色。.news-content类用于设置新闻内容的样式，比如内边距和行高。这个示例提供了一个基本框架，可以根据实际需求进行扩展和设计。

- 阅读更多 -