标签 css 下的文章

2024-08-09

CSS3可以用来创建各种三角形样式。以下是一些示例代码：

基本的等边三角形：




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

等腰三角形：




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

直角三角形：




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

等腰直角三角形：




.triangle-isosceles-right {
  width: 0;
  height: 0;
  border-top: 100px solid transparent;
  border-left: 100px solid red;
  border-bottom: 100px solid transparent;
}

斜角三角形：




.triangle-slope {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}

等腰斜角三角形：




.triangle-isosceles-slope {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}

每个示例都创建了一个三角形，你可以根据需要调整border-size、border-color和其他属性来自定义三角形的样式。

- 阅读更多 -

利用CSS在图片中添加文字

System

2024-08-09

所有,css3

要在图片上添加文字，可以使用CSS的::after伪元素或者::before伪元素，并将它们的content属性设置为需要显示的文本内容。同时，需要设置position属性为absolute或relative以确定文本的位置。

以下是一个简单的例子：

HTML:




<div class="image-container">
  <img src="image.jpg" alt="示例图片">
</div>

CSS:




.image-container {
  position: relative;
  display: inline-block; /* 或者其他的块级或行内块级元素 */
}
 
.image-container img {
  display: block; /* 避免底部空白 */
  width: 100%; /* 或者其他宽度设置 */
}
 
.image-container::after {
  content: '这里是文字';
  position: absolute;
  top: 0; /* 可以调整位置 */
  left: 0; /* 可以调整位置 */
  color: white; /* 文字颜色 */
  font-size: 20px; /* 文字大小 */
}

在这个例子中，.image-container是一个包含图片的容器，图片本身是容器的子元素。::after伪元素被用来在图片上添加文本。position属性设置为absolute使得文本可以自由地在图片上任意定位。content属性包含你想要显示的文本。可以通过调整top、left、right和bottom属性来控制文本的精确位置。

- 阅读更多 -

HTMLCSSES6新特性总结

System

2024-08-09

所有,css3

HTML5 提供了新的语义标签、表单增强、多媒体标签等特性。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Example</title>
</head>
<body>
    <header>页面头部</header>
    <nav>导航链接</nav>
    <section>
        <article>
            <header>文章标题</header>
            <p>这是一个段落。</p>
        </article>
    </section>
    <aside>侧边内容</aside>
    <footer>页面底部</footer>
</body>
</html>

CSS3 引入了更丰富的选择器、背景和边框的装饰效果、过渡和动画等特性。




/* CSS3 Example */
header {
    background: linear-gradient(to right, red, yellow);
    border-radius: 10px;
}
nav a {
    text-decoration: none;
    color: blue;
}
article section:nth-child(odd) {
    background-color: lightgrey;
}
aside {
    float: right;
    background: rgba(255, 0, 0, 0.5);
}
footer {
    transition: color 2s;
}
footer:hover {
    color: lightcoral;
}

ES6（ECMAScript 2015）引入了模块、类、箭头函数、let和const声明等新特性。




// ES6 Example
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}
 
const greet = () => console.log('Hello, World!');
 
import { sum } from './math';
console.log(sum(5, 7));

在实际开发中，可以结合这些新特性创建现代化的Web应用。

- 阅读更多 -

【css实现table斜线表头】

System

2024-08-09

所有,css3

要使用CSS实现斜线表头，可以通过使用伪元素::before或::after来创建斜线效果。以下是一个简单的示例：

HTML:




<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
  </tr>
  <!-- 其他行... -->
</table>

CSS:




table {
  width: 100%;
  border-collapse: collapse;
}
 
th {
  position: relative;
  background-color: #f2f2f2;
  text-align: center;
  padding: 10px;
}
 
th::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background-color: #000;
  transform: translateY(-50%);
}
 
th::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 100%;
  background-color: #000;
  transform: translateY(-50%);
}
 
td {
  text-align: center;
  padding: 10px;
  border: 1px solid #ddd;
}

这段CSS代码会在每个<th>元素中创建一个斜线效果，分别在顶部和右侧。通过调整伪元素的width、height和background-color属性，可以自定义斜线的样式。

- 阅读更多 -

CSS 实现input自定义样式--文本框

System

2024-08-09

所有,css3

要使用CSS为文本框实现自定义样式，你可以通过为input元素设置CSS规则来实现。以下是一个简单的例子，演示如何为文本框设置自定义的背景颜色、边框和圆角。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Input Style</title>
<style>
  input[type="text"] {
    background-color: #f0f0f0; /* 背景色 */
    border: 1px solid #ccc; /* 边框颜色 */
    border-radius: 4px; /* 圆角 */
    padding: 8px 15px; /* 内边距 */
    font-size: 16px; /* 字号 */
    transition: border-color 0.3s; /* 边框颜色变化过渡 */
  }
 
  input[type="text"]:focus {
    border-color: #4A90E2; /* 聚焦时的边框颜色 */
    box-shadow: 0 0 5px rgba(74, 144, 226, 0.5); /* 聚焦时的阴影效果 */
  }
</style>
</head>
<body>
 
<input type="text" placeholder="请输入内容">
 
</body>
</html>

这段代码定义了一个普通状态下的文本框样式和一个聚焦状态下的样式。当文本框获得焦点时，边框颜色会变化，并且会有一个轻微的阴影效果。这些样式都可以根据你的设计需求进行自定义调整。

- 阅读更多 -

CSS3Buttons: 使用纯CSS创建美观的按钮样式

System

2024-08-09

所有,css3




/* 定义基础按钮样式 */
.button {
  display: inline-block;
  text-decoration: none;
  color: #FFF;
  background-color: #4285F4;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}
 
/* 鼠标悬停时改变背景颜色 */
.button:hover {
  background-color: #357AE8;
}
 
/* 定义一个小按钮，并覆盖基础按钮的样式 */
.button-small {
  padding: 5px 10px;
  background-color: #5cb85c;
  transition: background-color 0.2s;
}
 
/* 鼠标悬停时改变小按钮的背景颜色 */
.button-small:hover {
  background-color: #449D43;
}
 
/* 定义一个具有错误提示色彩的按钮 */
.button-danger {
  background-color: #F44336;
}
 
/* 鼠标悬停时改变错误按钮的背景颜色 */
.button-danger:hover {
  background-color: #D32F2F;
}
 
/* 应用到HTML元素 */
<a href="#" class="button">默认按钮</a>
<a href="#" class="button button-small">小按钮</a>
<a href="#" class="button button-danger">危险按钮</a>

这个代码实例展示了如何使用CSS创建不同样式的按钮。.button 类定义了基本的按钮样式，.button-small 类定义了一个较小的按钮，并覆盖了基本样式，.button-danger 类用于创建一个具有警告色彩的按钮。通过CSS的类继承和组合特性，可以轻松创建不同的按钮风格。

- 阅读更多 -

css 父元素高度自适应，子元素高度跟随父元素自适应，怎么写

System

2024-08-09

所有,css3

要使得父元素的高度自适应，同时子元素的高度跟随父元素自适应，可以使用CSS的height: 100%;属性。确保父元素有足够的高度，子元素才能继承这个高度。

以下是一个简单的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto Height Example</title>
<style>
  .parent {
    background-color: lightblue;
    width: 200px;
    /* 确保父元素有足够的高度 */
  }
  .child {
    background-color: lightcoral;
    width: 100%;
    height: 100%; /* 子元素高度跟随父元素自适应 */
  }
</style>
</head>
<body>
 
<div class="parent">
  <div class="child">
    <!-- Content -->
  </div>
</div>
 
</body>
</html>

在这个例子中，.parent 类定义了一个蓝色背景的父元素，.child 类定义了一个与父元素同样高度的红色背景的子元素。父元素没有设置具体的高度，而子元素通过height: 100%;自适应父元素的高度。如果父元素有内容推动它的高度，子元素也会相应地被推动至同样的高度。

- 阅读更多 -

深入理解CSS3的REM单位：为何它是现代前端布局的首选？

System

2024-08-09

所有,css3

REM是CSS3中引入的一种长度单位，它是相对于根元素（即html元素）的字体大小。使用REM单位可以实现响应式布局，使得页面元素的大小随着根元素字体大小的变化而变化，从而提供一种灵活的方式来进行布局设计。

以下是一个简单的CSS示例，演示如何使用REM单位来设置元素的大小：




html {
    font-size: 16px; /* 假设浏览器默认字体大小是16px */
}
 
/* 使用REM单位设置元素宽度和高度 */
.element {
    width: 4rem;   /* 计算为 4 * 16px = 64px */
    height: 3rem;  /* 计算为 3 * 16px = 48px */
}
 
/* 使用媒体查询来调整根元素字体大小，实现响应式设计 */
@media (min-width: 768px) {
    html {
        font-size: 20px; /* 当屏幕宽度大于768px时，字体大小增加到20px */
    }
}

通过以上代码，.element类的宽度和高度会随着屏幕宽度的变化而变化，因为根元素的字体大小也会随之变化。当屏幕宽度超过768像素时，根元素的字体大小会增加到20px，.element的REM单位尺寸也会相应增大，从而保持相对宽度不变。这种方式使得页面布局能够适应不同屏幕大小和设备。

- 阅读更多 -

【CSS】CSS选择器全解指南【CSS基础知识详解】

System

2024-08-09

所有,css3

CSS 选择器是用来指定样式规则应用于哪些元素的模式。CSS选择器有多种类型，包括基础的元素选择器、类选择器、ID选择器、属性选择器、伪类选择器和伪元素选择器等。

元素选择器：选择特定的HTML标签元素。




p { color: blue; }

类选择器：选择具有特定类的HTML元素。




.my-class { color: red; }

ID选择器：选择具有特定ID的HTML元素。




#my-id { color: green; }

属性选择器：选择包含特定属性的HTML元素。




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

伪类选择器：选择特定状态的HTML元素。




a:hover { color: purple; }

伪元素选择器：选择HTML元素的特定部分。




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

组合选择器：结合多个选择器以选择更具体的元素。




div.container > p { border: 1px solid black; }

通配选择器：选择所有元素。




* { margin: 0; padding: 0; }

子选择器：选择直接子元素。




div > p { color: orange; }

相邻选择器：选择紧跟在另一个元素后的元素。




h1 + p { margin-top: 0; }

后代选择器：选择特定元素内的后代元素。




div p { text-indent: 2em; }

分组选择器：同时选择多个元素。




h1, h2, h3 { font-family: 'Arial Black'; }

伪元素选择器：选择元素的特定部分。




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

否定选择器：选择不满足条件的元素。




:not(p) { color: grey; }

伪类选择器（伪类选择器与之前的伪类选择器略有不同，主要用于链接）：




a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }

CSS选择器是CSS的核心部分，它决定了样式规则应用于哪些元素。了解和使用这些选择器是每个前端开发者必备的技能。

- 阅读更多 -

用css画一个三角形

System

2024-08-09

所有,css3

使用border属性：




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

该方法通过设置元素的宽度和高度，并通过border属性画出三角形，其中border-left和border-right用于确定横向的底边长，border-bottom用于确定纵向的高。

使用transform属性：




.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  transform: rotate(45deg);
}

该方法与第一种方法类似，通过设置元素的宽度和高度，并通过border属性画出三角形，但是通过transform的rotate属性对元素进行旋转，使得实际显示为一个三角形。

使用伪元素：




.triangle {
  position: relative;
  width: 100px;
  height: 100px;
}
 
.triangle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-width: 0 100px 100px 0;
  border-style: solid;
  border-color: transparent red;
}

该方法通过添加一个伪元素(::before)来画出三角形，通过设置伪元素的边框宽度和样式，以及边框颜色来构造三角形。

以上是三种常见的使用CSS画三角形的方法，它们都可以很好地实现画出三角形的效果。

- 阅读更多 -