分类 css 下的文章

2024-08-25

CSS盒子模型和浮动是网页布局的基础。CSS盒子模型由四个部分组成：margin（外边距）、border（边框）、padding（内边距）和content（内容）。浮动可以使元素脱离正常的文档流，从而允许文本和内联元素环绕它。

以下是简单的代码示例：




/* 设置盒子模型 */
.box {
  width: 300px; /* 内容宽度 */
  height: 200px; /* 内容高度 */
  padding: 20px; /* 内边距 */
  border: 5px solid blue; /* 边框 */
  margin: 10px; /* 外边距 */
  background-color: lightblue; /* 背景颜色 */
}
 
/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
 
/* 使用浮动进行布局 */
.float-left {
  float: left; /* 元素向左浮动 */
  margin-right: 10px; /* 右外边距 */
}
 
.float-right {
  float: right; /* 元素向右浮动 */
  margin-left: 10px; /* 左外边距 */
}




<!-- 盒子模型示例 -->
<div class="box">Box Model Example</div>
 
<!-- 使用浮动进行布局 -->
<div class="float-left box">Float Left</div>
<div class="float-right box">Float Right</div>
 
<!-- 清除浮动 -->
<div class="clearfix"></div>

在这个例子中，.box 类定义了一个具有背景颜色和边框的盒子模型。.float-left 和 .float-right 类使元素浮动到左侧或右侧，并设置了外边距以保持元素之间的距离。.clearfix 类用于清除浮动，确保父元素包含所有浮动的子元素。

- 阅读更多 -

前端学习第四天-css提升

System

2024-08-25

所有,css

CSS 提升主要是指提高 CSS 代码的质量和性能。以下是一些关键的提升点：

使用 CSS 框架：比如 Bootstrap、Materialize、Tailwind CSS 等，它们预设了一套响应式布局的样式和组件。
优化选择器：避免使用标签名作为选择器的一部分，因为它会选择页面上所有的元素。使用类或者ID选择器。
合并 CSS 类：当可能时，将多个类合并成一个，以减少选择器的数量。
使用 CSS 工具库：比如 Tachyons、CSS Utility 等，它们提供一系列可以组合使用的类。
优化 CSS 文件大小：移除不必要的空格、注释、合理的命名等。
使用 CSS 压缩工具：比如 CleanCSS、CSSMinifier 等，它们可以移除代码中的注释、多余的空格和换行，缩短类名和属性名。
优化布局：使用 Flexbox 或 Grid 布局来创建灵活的布局。
使用 CSS Variables：也就是 CSS 自定义属性，可以让你在一个地方定义样式值，然后在多个地方使用。
使用 CSS-in-JS：一些库比如 styled-components、Emotion 使用 JS 来写 CSS，它们提供了额外的优势，比如动态样值和组件化的样式。
优化动画性能：使用 CSS 动画时，尽量减少重绘和重排，可以使用 will-change 属性提示浏览器。

示例代码：




/* 不推荐 */
p {
  color: red;
  font-size: 16px;
}
 
/* 推荐 */
.text-red {
  color: red;
}
 
.font-16 {
  font-size: 16px;
}
 
/* 使用组合类 */
<p class="text-red font-16">这是一个红色且大小为16px的段落。</p>




/* 使用 CSS 变量 */
:root {
  --main-bg-color: #f0f0f0;
}
 
.main {
  background-color: var(--main-bg-color);
}
 
/* 使用 Flexbox 布局 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
/* CSS-in-JS 示例 */
const StyledDiv = styled.div`
  color: ${props => props.color};
  font-size: 16px;
`;
 
<StyledDiv color="red">这是一个红色且大小为16px的div。</StyledDiv>

- 阅读更多 -

CSS清除默认样式，我先收藏为敬

System

2024-08-25

所有,css

要清除浏览器的默认CSS样式，可以使用CSS重置（CSS Reset）或CSS归一化（CSS Normalize）。以下是一个简单的CSS重置样式例子：




/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box; /* Ensure padding and borders are included in element sizes */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

这段代码会移除所有元素的默认边距、内边距、边框，并设置box-sizing属性为border-box，以确保元素的宽度和高度包含了边距和边框。此外，它还会移除列表样式和引号，并确保表格的边框合并。这样做可以为你的网页开始一个清洁、统一的样式基础。

- 阅读更多 -

css实现鼠标经过（hover）段落或文章下划线动画

System

2024-08-25

所有,css

在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 Underline Animation</title>
<style>
  p {
    position: relative;
    display: inline-block;
    color: #00f;
    text-decoration: none;
  }
  p::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: #00f;
    transition: width 0.3s;
    left: 0;
    bottom: 0;
  }
  p:hover::after {
    width: 100%;
  }
</style>
</head>
<body>
 
<p>Hover over me!</p>
 
</body>
</html>

在这个例子中，段落 <p> 元素有一个伪元素 ::after，它用于创建下划线。在默认状态下，::after 的宽度是0，当鼠标悬停在段落上时，::after 的宽度通过 hover 伪类变成100%，从而触发动画过渡效果。

- 阅读更多 -

html table+css实现可编辑表格

System

2024-08-25

所有,css

要在HTML表格中使用CSS实现可编辑功能，可以使用contenteditable属性。这个属性可以让任何元素变得可编辑。

以下是一个简单的HTML表格，其中的单元格通过设置contenteditable="true"实现可编辑。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可编辑表格</title>
<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    th, td {
        padding: 5px;
        text-align: left;
    }
</style>
</head>
<body>
<table>
    <tr>
        <th contenteditable="true">头部1</th>
        <th contenteditable="true">头部2</th>
        <th contenteditable="true">头部3</th>
    </tr>
    <tr>
        <td contenteditable="true">行1, 列1</td>
        <td contenteditable="true">行1, 列2</td>
        <td contenteditable="true">行1, 列3</td>
    </tr>
    <tr>
        <td contenteditable="true">行2, 列1</td>
        <td contenteditable="true">行2, 列2</td>
        <td contenteditable="true">行2, 列3</td>
    </tr>
</table>
</body>
</html>

在上述代码中，表格的头部（th元素）和单元格（td元素）都设置了contenteditable="true"，这让它们变得可编辑。用户可以点击并开始编辑内容。

要注意的是，contenteditable属性可能会引入XSS攻击风险，因此在处理用户输入时应该进行适当的清洁和验证。

- 阅读更多 -

CSS零基础入门详细内容

System

2024-08-25

所有,css

在CSS中，我们可以使用各种选择器来选择页面中的元素，并对它们应用样式。下面是一些常用的选择器：

标签选择器：直接使用HTML标签作为选择器，例如p { color: blue; }会将所有<p>标签的文本颜色设置为蓝色。
类选择器：使用.前缀，后跟类名，可以选择所有指定类的元素，例如.center { text-align: center; }会将所有class包含center的元素文本居中。
ID选择器：使用#前缀，后跟ID名，可以选择特定ID的元素，例如#header { background-color: yellow; }会将ID为header的元素的背景颜色设置为黄色。
通配选择器：使用*，可以选择所有元素，例如* { margin: 0; padding: 0; }会将所有元素的margin和padding设置为0。
子选择器：使用>，可以选择直接子元素，例如ul > li { list-style-type: square; }会将所有<ul>的直接<li>子元素的列表样式设置为方块。
后代选择器：使用空格，可以选择所有指定父元素的后代（不仅限于直接子元素），例如ul li { color: red; }会将所有<ul>的后代<li>元素的文本颜色设置为红色。
相邻选择器：使用+，可以选择紧随另一个元素的元素，例如p + p { margin-top: 20px; }会将紧跟在另一个<p>元素后的<p>元素的上边距设置为20像素。
兄弟选择器：使用~，可以选择同一父元素下的所有某个元素之后的兄弟元素，例如h2 ~ p { color: green; }会将<h2>元素之后所有的<p>元素的文本颜色设置为绿色。
属性选择器：使用[]，可以选择包含特定属性（及其可能的值）的元素，例如input[type="text"] { background-color: lightblue; }会将所有<input>类型为text的元素的背景颜色设置为浅蓝色。
伪类选择器：使用:，可以选择特定状态的元素，例如a:hover { color: hotpink; }会将鼠标悬停在链接上时，链接的文本颜色设置为热粉色。
伪元素选择器：使用::，可以选择特定位置的内容，例如p::first-letter { font-size: 200%; }会将每个<p>元素的第一个字母的字体大小设置为200%。

CSS样式的优先级决定了当一个元素被多个选择器选中并且应用了相同的样式时，哪个样式会被应用。常见的优先级从高到低依次是：内联样式（在HTML元素的style属性中）、ID选择器、类选择器、标签选择器和通配选择器。

CSS还提供了很多其他功能，如盒模型、浮动、定位、动画等，这些都是CSS的核心功能，能够创建出丰富多样的网页布局。

- 阅读更多 -

有趣的css - 点赞爱心动效按钮

System

2024-08-25

所有,css

以下是一个使用CSS创建点赞爱心动效按钮的示例代码：

HTML:




<div class="like-button">
  <span class="like-icon"></span>
  <span class="like-text">点赞</span>
</div>

CSS:




.like-button {
  display: inline-block;
  background-color: #e0e0e0;
  border-radius: 30px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s;
  user-select: none;
}
 
.like-button:hover {
  background-color: #d9534f;
}
 
.like-button .like-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #fff;
  position: relative;
  margin-right: 5px;
  animation: like-heart-bounce 0.5s infinite alternate;
}
 
.like-button .like-icon::before,
.like-button .like-icon::after {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
}
 
.like-button .like-icon::before {
  transform: translateX(-20px);
}
 
.like-button .like-icon::after {
  transform: translateX(20px);
}
 
@keyframes like-heart-bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
 
.like-button .like-text {
  vertical-align: top;
}

这段代码创建了一个带有点赞动画的爱心形状按钮，当用户将鼠标悬停在按钮上时，按钮背景色会变化，并且爱心图标会跳动。这是一个简单的示例，可以根据需要进行样式和动画的自定义。

System

2024-08-25

所有,css




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面信息验证</title>
    <style>
        .error {
            color: red;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <form id="registrationForm">
        用户名: <input type="text" id="username" name="username"><br><br>
        密码: <input type="password" id="password" name="password"><br><br>
        确认密码: <input type="password" id="confirm_password" name="confirm_password"><br><br>
        邮箱: <input type="email" id="email" name="email"><br><br>
        <input type="submit" value="注册">
    </form>
 
    <script>
        document.getElementById('registrationForm').onsubmit = function(e) {
            e.preventDefault();
 
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            var confirm_password = document.getElementById('confirm_password').value;
            var email = document.getElementById('email').value;
 
            // 验证用户名
            if (username.length < 6) {
                showError('用户名长度必须大于6个字符。');
                return;
            }
 
            // 验证密码
            if (password !== confirm_password) {
                showError('密码和确认密码不匹配。');
                return;
            }
 
            // 验证邮箱
            if (!email.includes('@')) {
                showError('请输入有效的邮箱地址。');
                return;
            }
 
            // 验证通过，提交表单
            this.submit();
        };
 
        function showError(errorMessage) {
            alert(errorMessage);
        }
    </script>
</body>
</html>

这段代码实现了一个简单的注册页面，并在用户尝试提交表单时进行验证。如果任何验证规则失败，它将显示一个错误消息，并取消表单的提交。如果所有验证都通过，它将提交表单。这个例子教会了如何使用JavaScript进行简单的表单验证，并展示了如何通过alert函数显示错误消息。

- 阅读更多 -

Vue3 使用 v-bind 动态绑定 CSS 样式

System

2024-08-25

所有,css




<template>
  <div>
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">动态绑定样式</div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      activeColor: 'red',
      fontSize: 30
    }
  }
}
</script>

这个例子中，我们使用了v-bind:style来动态绑定元素的style属性。activeColor和fontSize是在组件的data函数中定义的响应式属性，它们的值可以动态改变，从而实时更新元素的样式。

System

2024-08-25

所有,css

在CSS中，我们可以使用通配选择器（*）来清除所有元素的默认样式，但这种做法并不推荐，因为它会影响性能。在实际开发中，我们通常只会重置必要的样式，以确保跨浏览器的一致性。

以下是一个示例，展示了如何重置边距和填充：




/* 重置边距和填充 */
* {
  margin: 0;
  padding: 0;
}
 
/* 其他样式规则 */
body {
  font-family: Arial, sans-serif;
  background-color: #f8f8f8;
}
 
/* 更多样式 */

在这个例子中，我们使用通配选择器将所有元素的margin设置为0，将所有元素的padding设置为0。然后，我们为body设置了一个基本的字体和背景颜色，并且可以添加更多的样式规则来完善整个网页的样式。

- 阅读更多 -