分类 css 下的文章

2024-08-15

Normalize.css 是一种 CSS 文件，旨在增强跨浏览器的样式一致性。它使得各种浏览器在默认情况下以更加统一的方式渲染 HTML 元素。

以下是一个简化的 Normalize.css 示例，它重置了边距、填充、字体和背景，并确保了元素在所有浏览器中的基本显示一致性：




/* 重置边距和填充 */
html, body, h1, h2, h3, h4, h5, h6,
p, ol, ul, li, figure, figcaption,
blockquote, dl, dt, dd, a,
strong, em, i, b, u,
code, pre,
button, input, textarea,
svg, canvas, audio, video {
    margin: 0;
    padding: 0;
}
 
/* 字体设置 */
html, body,
h1, h2, h3, h4, h5, h6,
ol, ul, li,
button, input, textarea,
figure, figcaption,
blockquote, dl, dt, dd {
    font-size: 100%;
    font-weight: normal;
    font-family: sans-serif;
}
 
/* 链接默认颜色和下划线 */
a {
    color: inherit;
    text-decoration: none;
}
 
/* 列表样式 */
ol, ul {
    list-style: none;
}
 
/* 按钮样式 */
button, input {
    border: none;
    background: transparent;
}
 
/* 图片和视频在一些浏览器中的边框问题 */
img, video {
    border: none;
}
 
/* 表格样式 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
/* 文字方向 */
bdo {
    direction: ltr;
}
 
/* 设置默认的最小字体大小 */
html {
    font-size: 16px;
}
 
/* 取消文本缩放 */
body {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -o-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
 
/* 移除默认的选择框样式 */
textarea {
    resize: none;
}
 
/* 设置默认的交互行为 */
a, button, input, textarea {
    outline: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

这个示例提供了一个基本的 Normalize.css 实现，它包括了重置边距、填充、字体和背景等基本元素的样式，并确保了在不同浏览器中的一致性。这有助于开发者在开始新项目时节省时间，并确保他们的设计在所有浏览器上的表现一致。

- 阅读更多 -

javaweb个人主页设计（html+css+js）

System

2024-08-15

所有,css

以下是一个简单的示例，展示了如何使用HTML、CSS和JavaScript来创建一个个人主页的基本结构和样式。




<!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;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .header {
            width: 100%;
            text-align: center;
            background-color: #333;
            color: white;
            padding: 10px 0;
        }
        .content {
            margin: 20px;
            padding: 20px;
            background-color: #f2f2f2;
        }
        .footer {
            width: 100%;
            text-align: center;
            background-color: #333;
            color: white;
            padding: 10px 0;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>欢迎来到我的主页</h1>
    </div>
    <div class="content">
        <h2>个人简历</h2>
        <!-- 这里可以添加更多的个人信息和内容 -->
    </div>
    <div class="footer">
        <p>版权所有 &copy; 2023 我的主页</p>
    </div>
    <script>
        // 这里可以添加更多的JavaScript代码，例如实现动态效果等
    </script>
</body>
</html>

这个示例提供了一个简单的结构，其中包含了头部（Header）、内容区（Content）和底部（Footer）。CSS用于设置页面的布局和样式，JavaScript可以用来添加交互和动态效果。这个基本框架可以根据实际需求进一步完善和个性化定制。

System

2024-08-15

所有,css




/* 使用clip-path属性实现切角效果 */
.box {
  width: 200px;
  height: 200px;
  background-color: #4CAF50;
  /* 使用polygon函数创建一个三角形形状 */
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
 
/* 兼容性注意事项 */
/* 注意clip-path属性在不同浏览器的兼容性，特别是旧版本的Chrome和Firefox */

这段代码展示了如何使用clip-path属性来实现一个切角效果。它创建了一个看起来像是右上角被裁剪掉的方形盒子。clip-path属性是CSS Shapes Level 2规范的一部分，可以用来修剪或裁剪元素的任何部分。在使用时，请注意浏览器的兼容性问题，尤其是旧版本的浏览器可能不支持此属性。

- 阅读更多 -

vue3中使用animate.css

System

2024-08-15

所有,css

在Vue 3中使用animate.css，首先确保安装了animate.css：




npm install animate.css

然后，在你的Vue组件中引入animate.css并使用它。这里是一个简单的例子：




<template>
  <div>
    <button @click="animateBox">Animate Box</button>
    <div class="box" :class="{ animate__animated: animate, animate__bounce: animate }"></div>
  </div>
</template>
 
<script>
import 'animate.css';
 
export default {
  data() {
    return {
      animate: false,
    };
  },
  methods: {
    animateBox() {
      this.animate = true;
      setTimeout(() => {
        this.animate = false;
      }, 1000);
    },
  },
};
</script>
 
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>

在这个例子中，我们有一个按钮和一个div元素。当按钮被点击时，会触发animateBox方法，这个方法会给box元素添加一个动画类（在这个例子中是bounce）。动画完成后，会移除这个类。

确保你在Vue组件中正确地引入了animate.css，并且在需要应用动画的元素上使用了相应的动画类。你可以根据animate.css库提供的不同动画效果替换animate__bounce类。

- 阅读更多 -

css实现三角形的几种方法

System

2024-08-15

所有,css

CSS可以通过边框（border）属性来实现三角形，具体方法如下：

利用透明边框（transparent）和不透明边框（颜色）创建三角形：




.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid black;
}

利用伪元素和overflow: hidden属性：




.triangle-container {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
}
 
.triangle-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid black;
}

使用CSS3的transform属性（创建一个正方形，然后将其旋转为三角形）：




.triangle {
  width: 100px;
  height: 100px;
  background-color: black;
  transform: rotate(45deg);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

以上方法可以创建不同形状的三角形，具体使用哪种方法取决于具体需求和场景。

- 阅读更多 -

Css 设置vw和vh=100% 出现滚动条，内容超出视口原因及解决

System

2024-08-15

所有,css

原因：

当你将一个元素的宽度或高度设置为100vw或100vh时，这意味着它将占据视口的宽度或高度的100%。如果内容超出了这个设置的尺寸，就会出现滚动条。

解决方法：

检查内容：确保没有额外的边距或内边距，因为这可能会使元素的实际大小超过100vw或100vh。
使用overflow属性：如果你不希望出现滚动条，可以使用overflow: hidden;属性来隐藏超出的内容。但是请注意，这可能会导致无法查看或滚动到不可见的内容。
调整设计：如果你需要滚动条来查看所有内容，可能需要重新考虑你的设计，确保内容适合视口大小。
使用min-和max-属性：你可以使用max-width: 100vw;和max-height: 100vh;来确保元素不会超过视口的大小，但同时也允许它们在内容适当的情况下缩小。
响应式设计：使用媒体查询来为不同的屏幕尺寸提供不同的样式规则，以保持布局的合理性。

示例代码：




.element {
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* 如果不希望出现滚动条 */
}
 
/* 或者使用max-width和max-height */
.element {
  width: 100%;
  max-width: 100vw;
  height: 100%;
  max-height: 100vh;
  overflow: auto; /* 如果希望保持滚动功能 */
}

- 阅读更多 -

CSS进阶

System

2024-08-15

所有,css

CSS进阶问题通常涉及更复杂的CSS技巧和特性，比如布局、动画、响应式设计、3D转换等。以下是一些典型的CSS进阶问题及其解决方案：

响应式布局：使用媒体查询来创建可以根据屏幕大小调整的布局。




@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

3D转换和动画：使用transform和animation属性创建生动的视觉效果。




.box {
  animation: rotate 4s infinite linear;
}
 
@keyframes rotate {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

深度选择器：使用子选择器>和相邻同胞选择器+等来指定特定的子元素或兄弟元素。




div > p {
  color: blue;
}
 
h2 + p {
  font-style: italic;
}

自定义属性（变量）：在CSS中定义和使用变量来管理颜色和尺寸。




:root {
  --main-bg-color: #f0f0f0;
  --base-font-size: 16px;
}
 
body {
  background-color: var(--main-bg-color);
  font-size: var(--base-font-size);
}

Flexbox布局：使用Flexbox布局管理容器内部项的布局。




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

网格布局：使用CSS Grid创建复杂的布局。




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

混合模式：使用mix-blend-mode来制作文本或图像的特殊效果。




.text {
  mix-blend-mode: multiply;
}

伪元素：使用:before和:after伪元素来添加装饰或内容。




.box::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background-color: red;
}

字体图标：使用字体图标库（如FontAwesome）替代传统的图片文件。




<i class="fa fa-star"></i>

Dark Mode支持：适应系统的深色模式。




body {
  background: white;
  color: black;
}
 
@media (prefers-color-scheme: dark) {
  body {
    background: black;
    color: white;
  }
}

这些例子展示了CSS进阶的一些关键概念，实际应用中可能还会涉及更多高级技术，如: pointer-events, object-fit, will-change, user-select 等。

- 阅读更多 -

如何用HTML＋CSS编写灵活的Tab页

System

2024-08-15

所有,css

要使用HTML和CSS创建一个灵活的Tab页，你可以使用以下的基本结构和样式。这里提供了一个简单的例子，你可以根据需要添加更多的Tab和内容。

HTML:




<div class="tabs">
  <div class="tab" onclick="openTab(event, 'tab1')">Tab 1</div>
  <div class="tab" onclick="openTab(event, 'tab2')">Tab 2</div>
  <div class="tab" onclick="openTab(event, 'tab3')">Tab 3</div>
</div>
 
<div id="tab1" class="tabcontent">
  <h3>Tab 1</h3>
  <p>Content for tab 1...</p>
</div>
 
<div id="tab2" class="tabcontent">
  <h3>Tab 2</h3>
  <p>Content for tab 2...</p>
</div>
 
<div id="tab3" class="tabcontent">
  <h3>Tab 3</h3>
  <p>Content for tab 3...</p>
</div>

CSS:




.tabs {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
  padding: 0;
}
 
.tab {
  cursor: pointer;
  padding: 10px 20px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
}
 
.tabcontent {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
  border-top: none;
}
 
/* Optionally add a background color to the active tab */
.tab.active {
  background-color: #ccc;
}
 
/* Fade in the active tab content */
.tabcontent.active {
  display: block;
  animation: fadeIn 0.5s;
}
 
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

JavaScript:




function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tab");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

这个例子中，每个Tab都有一个onclick事件，调用openTab函数，并传递当前Tab的ID。JavaScript函数会关闭所有的内容区域，并清除所有Tab的激活状态，然后只打开对应ID的内容区域，并激活当前Tab。

- 阅读更多 -

12有趣的CSS文字阴影代码示例

System

2024-08-15

所有,css

以下是一些创造性和技术性强的CSS文本阴影示例：

简单的文本阴影:




.shadow {
  text-shadow: 2px 2px 2px #888888;
}

模糊效果的文本阴影:




.blur-shadow {
  text-shadow: 2px 2px 5px #888888;
}

多重阴影创建一种层次感:




.multiple-shadows {
  text-shadow: 1px 1px 0 #ffffff, 2px 2px 0 #000000;
}

使用颜色渐变创建阴影:




.gradient-shadow {
  text-shadow: 2px 2px 2px #888888, 3px 3px 2px #555555;
}

使用CSS伪元素添加阴影:




.shadow::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: -1;
  opacity: 0.5;
  text-shadow: 2px 2px 2px #888888;
}

使用CSS变换创建倾斜阴影:




.diagonal-shadow {
  text-shadow: 2px 2px 2px #888888;
  transform: rotate(-5deg);
}

使用CSS线性渐变创建渐变阴影:




.gradient-shadow {
  text-shadow: 0 0 10px #ffffff, 0 0 20px #00ff00, 0 0 30px #00ffff, 0 0 40px #0000ff, 0 0 50px #ff00ff, 0 0 60px #ff0000, 0 0 70px #ffff00, 0 0 80px #ff00ff, 0 0 100px #00ffff;
}

使用CSS3的text-stroke属性模拟阴影:




.text-stroke {
  -webkit-text-stroke: 1px #000000;
  text-stroke: 1px #000000;
}

使用CSS3的text-fill-color属性自定义文本颜色:




.text-fill-color {
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff);
}

使用CSS3的filter属性添加阴影效果:




.shadow-blur {
  filter: drop-shadow(2px 2px 2px #888888);
}

这些CSS样式可以应用于任何文本元素，以创建各种视觉效果。

CSS相关记录

2024-08-15

😩抱歉，出了点小问题，请稍后重试