标签 css 下的文章

2024-08-12

以下是一个使用HTML和CSS绘制常见图表的简单示例，这里我们将绘制一个简单的条形图。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bar Chart Example</title>
<style>
  .bar-chart-container {
    width: 500px;
    height: 300px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
  }
  .bar {
    width: 50px;
    margin: 0 5px;
    background-color: #4caf50;
    text-align: center;
    color: white;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
</style>
</head>
<body>
<div class="bar-chart-container">
  <div class="bar" style="height: 30%;">30%</div>
  <div class="bar" style="height: 60%;">60%</div>
  <div class="bar" style="height: 80%;">80%</div>
  <div class="bar" style="height: 40%;">40%</div>
  <div class="bar" style="height: 70%;">70%</div>
</div>
</body>
</html>

这段代码使用了一个容器 .bar-chart-container 来包裹每个条形图的 .bar 元素。每个 .bar 的高度代表了其代表的百分比，通过CSS的 height 属性来设置。通过这种方式，我们可以简单地用CSS和HTML创建出一个可以自定义数据的条形图。

- 阅读更多 -

前端学习第一阶段：第六章 HTML和CSS3

System

2024-08-12

所有,css3

第六章的主题是HTML和CSS。以下是一些关键概念和示例代码：

HTML基础：
- 学习创建基本的HTML页面结构。
- 使用div、span和p标签来构建页面布局。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <div>
        这是一个div元素。
    </div>
    <span>
        这是一个span元素。
    </span>
    <p>
        这是一个段落。
    </p>
</body>
</html>

CSS基础：
- 学习如何使用CSS为HTML元素添加样式。
- 使用class和id选择器来定义样式。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS示例</title>
    <style>
        .my-style {
            color: blue;
            font-size: 20px;
        }
        #my-id {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="my-style">这是一个蓝色字体的段落。</p>
    <p id="my-id">这是一个加粗且红色的文本。</p>
</body>
</html>

CSS3特效：
- 学习CSS3提供的特效，比如渐变、边框、阴影等。




/* CSS3 渐变效果 */
.gradient-background {
    background: linear-gradient(to right, red, yellow);
}
 
/* CSS3 边框效果 */
.border-radius {
    border: 2px solid black;
    border-radius: 5px;
}
 
/* CSS3 阴影效果 */
.box-shadow {
    box-shadow: 5px 5px 10px grey;
}

实践：创建一个简单的带有CSS样式的网页。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实践示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        header {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            text-align: center;
        }
        nav {
            float: left;
            width: 20%;
            background: #f2f2f2;
            padding: 15px;
        }
        section {
            float: right;
            width: 80%;
            padding: 15px;
        }
        footer {
            clear: both;
            text-align: center;
            padding: 10px;
            background-color: #ddd;
        }
    </style>
</head>
<body>
 
<header>
    <h1>我的网站</h1>
</header>
 
<nav>
    <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">联系</a></li>
        <li><a href="#">关于</a></li>
    </ul>
</nav>
 
<section>
    <h2>主要内容</h2>
    <p>这里是主要内容...</p>
</section>
 
<footer>
    <p>版权所有 &copy; 2023</p>
</footer>
 
</

- 阅读更多 -

css选择器分类及优先级判断

System

2024-08-12

所有,css3

在CSS中，选择器按其功能和特性可以分为不同的类别，包括基础选择器、属性选择器、伪类和伪元素等。

CSS选择器的优先级是根据选择器的特异性来决定的，特异性由四个级别组成：标签、类、ID 和通配符，数量级越高，特异性越高。

解决方案：

定义一个HTML结构，包含不同类型的选择器：




<div id="myDiv" class="myClass">我是一个DIV</div>

定义CSS规则，包括不同类型的选择器：




/* 标签选择器 */
div { color: red; }
 
/* 类选择器 */
.myClass { color: blue; }
 
/* ID选择器 */
#myDiv { color: green; }
 
/* 行内样式 */
<div style="color: purple;">我是一个DIV</div>
 
/* 伪类选择器 */
div:hover { color: orange; }
 
/* 通配符选择器 */
* { color: yellow; }

使用JavaScript检查元素的样式优先级：




function getComputedStyle(element) {
    return window.getComputedStyle(element, null).getPropertyValue('color');
}
 
var element = document.getElementById('myDiv');
console.log(getComputedStyle(element)); // 输出计算后的样式

在上述例子中，元素myDiv的最终颜色将取决于其与选择器匹配的优先级，即特异性。如果myDiv具有内联样式，则其优先级最高；接下来是ID选择器，然后是类选择器，最后是标签选择器。通配符选择器具有最低的优先级，只有当其他所有选择器都未应用样式时，它才会被应用。

- 阅读更多 -

CSS复合选择器之链接伪类选择器及总结

System

2024-08-12

所有,css3




/* 链接伪类选择器示例 */
a:link { color: blue; }     /* 未访问的链接 */
a:visited { color: purple; } /* 已访问的链接 */
a:hover { color: red; }     /* 鼠标悬停时的链接 */
a:active { color: yellow; }  /* 链接被点击的状态 */
 
/* 复合选择器总结 */
/* 子元素选择器 */
.parent > .child { color: green; }
 
/* 同胞选择器 */
.sibling + .sibling { color: orange; }
 
/* 通用兄弟选择器 */
.sibling ~ .sibling { font-weight: bold; }
 
/* 分组选择器 */
h1, h2, h3 { text-align: center; }
 
/* 类选择器 */
.class-name { font-style: italic; }
 
/* ID选择器 */
#id-name { text-decoration: underline; }
 
/* 属性选择器 */
input[type="text"] { border: 1px solid black; }
 
/* 伪元素选择器 */
p::first-letter { font-size: 200%; }
 
/* 伪类选择器 */
input:focus { border-color: red; }

这段代码展示了链接的不同状态下的颜色变化，以及如何使用不同的CSS复合选择器来选择不同的元素。它提供了链接伪类选择器的基本用法，并且展示了如何用分组选择器同时选取多个标签，以及如何根据元素的类、ID、属性或伪元素和伪类来选择元素。

- 阅读更多 -

CSS基础-CSS3过渡与动画

System

2024-08-12

所有,css3




/* 定义一个简单的过渡效果 */
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s; /* 当宽度改变时，过渡效果在1秒内完成 */
}
 
.box:hover {
  width: 200px; /* 鼠标悬停时宽度变为200px */
}
 
/* 使用关键帧定义复杂动画 */
@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}
 
/* 应用动画到元素 */
.animated-box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example; /* 指定动画名称 */
  animation-duration: 4s; /* 动画周期为4秒 */
  animation-iteration-count: infinite; /* 动画无限次数播放 */
}

这段代码展示了如何使用CSS3的过渡和动画效果。.box类定义了一个当宽度改变时触发的过渡效果，而.animated-box类则使用了@keyframes规则来定义了一个从红色到黄色的背景色变化动画，并将其应用到该类的元素上。

- 阅读更多 -

CSS实现文本显示两行

System

2024-08-12

所有,css3

要使用CSS使文本显示为两行，可以使用max-height和line-height属性。以下是一个示例：




.text-two-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5em; /* 设置行高 */
  max-height: 3em; /* 行高的两倍，因为最多显示两行 */
  width: 200px; /* 根据需要设置宽度 */
}

HTML部分：




<div class="text-two-lines">
  这里是一些很长的文本，如果超过两行，它将被截断，并且在末尾显示省略号。
</div>

这段代码将确保文本显示为两行，如果文本更长，则会以省略号结束。注意，这种方法在某些旧浏览器中可能不兼容。

- 阅读更多 -

css3过渡

System

2024-08-12

所有,css3

CSS3过渡是一个强大的工具，可以让网页设计师创建动态效果，而无需使用Flash或JavaScript。要使用CSS3过渡，你需要指定要过渡的CSS属性，过渡的持续时间，以及时间函数。

以下是一些使用CSS3过渡的方法：

使用hover效果：

HTML:




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

CSS:




.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s;
}
 
.box:hover {
  width: 200px;
}

在这个例子中，当鼠标悬停在div上时，宽度会在一秒钟内从100px变为200px。

使用JavaScript触发过渡：

HTML:




<div id="box" class="box"></div>
<button onclick="change()">Change</button>

CSS:




.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s;
}

JavaScript:




function change() {
  document.getElementById('box').style.width = '200px';
}

在这个例子中，当按钮被点击时，宽度会在一秒钟内从100px变为200px。

使用多个属性的过渡效果：

HTML:




<div id="box" class="box"></div>
<button onclick="change()">Change</button>

CSS:




.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 1s, height 1s, background-color 1s;
}

JavaScript:




function change() {
  document.getElementById('box').style.width = '200px';
  document.getElementById('box').style.height = '200px';
  document.getElementById('box').style.backgroundColor = 'blue';
}

在这个例子中，当按钮被点击时，宽度、高度和背景颜色会在一秒钟内改变。

注意：过渡效果可以应用于任何可以动态更改的CSS属性。但并非所有的属性都会产生良好的视觉效果，例如，display 或 opacity 属性的变化通常会产生最佳的视觉效果。

- 阅读更多 -

CSS+HTML动手实战鼠标悬停效果

System

2024-08-12

所有,css3

在这个实践中，我们将创建一个简单的网页，其中包含一个图像列表，当用户将鼠标悬停在任何图像上时，图像会变大并带有淡入效果。

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Hover Effect</title>
<style>
  .img-container {
    overflow: hidden;
    display: inline-block;
  }
  .img-container img {
    transition: transform 0.5s ease;
  }
  .img-container:hover img {
    transform: scale(1.2);
  }
</style>
</head>
<body>
 
<div class="img-container">
  <img src="image1.jpg" alt="Image 1">
</div>
 
<div class="img-container">
  <img src="image2.jpg" alt="Image 2">
</div>
 
<!-- 添加更多的 .img-container 和 img 元素以创建图像列表 -->
 
</body>
</html>

在这个例子中，我们定义了一个名为 .img-container 的类，它使用 overflow: hidden; 来隐藏超出容器的部分，并使用 display: inline-block; 使图像容器内的图像水平排列。在 .img-container img 选择器中，我们设置了过渡效果，让图像在悬停时放大。在 .img-container:hover img 选择器中，我们定义了悬停状态下图像的样式，使图像以平滑的方式放大。

请确保替换 image1.jpg 和 image2.jpg 等图片路径为您实际的图片路径。您可以根据需要添加更多的 .img-container 元素和图片以创建图像列表。

- 阅读更多 -

【无标题】CSS +Html 绘制流程图

System

2024-08-12

所有,css3

在HTML和CSS中绘制简单的流程图可以通过以下方法实现：

HTML部分：




<div class="flowchart">
  <div class="start-symbol">开始</div>
  <div class="process-symbol">处理</div>
  <div class="decision-symbol">决定</div>
  <div class="end-symbol">结束</div>
 
  <div class="arrow down">&nbsp;</div>
  <div class="arrow right">&nbsp;</div>
  <div class="arrow left">&nbsp;</div>
  <div class="arrow across">&nbsp;</div>
</div>

CSS部分：




.flowchart {
  font-family: "trebuchet ms", verdana, arial;
  font-size: 12px;
  text-align: center;
}
 
.start-symbol, .process-symbol, .decision-symbol, .end-symbol {
  width: 80px;
  height: 40px;
  line-height: 40px;
  border: 2px solid #000;
  background-color: #f0f0f0;
  margin: 10px;
  display: inline-block;
}
 
.arrow {
  color: #000;
  text-align: center;
  display: inline-block;
  margin: 2px;
  vertical-align: top;
}
 
.down {
  width: 20px;
  height: 40px;
  border: solid #000;
  border-width: 0 4px 4px 4px;
  transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
}
 
.right {
  width: 40px;
  height: 20px;
  border: solid #000;
  border-width: 4px 0 4px 4px;
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}
 
.left {
  width: 40px;
  height: 20px;
  border: solid #000;
  border-width: 4px 4px 4px 0;
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}
 
.across {
  width: 80px;
  height: 20px;
  border: solid #000;
  border-width: 4px 4px 4px 4px;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

这段代码将在HTML文档中创建一个简单的流程图，包括开始、处理、决定和结束符号，以及指向这些符号的箭头。CSS使用transform属性来旋转箭头，以便它们指向正确的方向。这是一个基本的示例，可以根据需要进行扩展和定制。

- 阅读更多 -

HTML CSS3美化网页元素

System

2024-08-12

所有,css3




<!DOCTYPE html>
<html>
<head>
    <style>
        /* 定义一个圆形的按钮，并为其添加阴影效果 */
        .round-button {
            background-color: #4CAF50; /* 设置按钮背景颜色 */
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 50%; /* 将按钮设为圆形 */
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); /* 添加阴影效果 */
            transition: box-shadow 0.3s, transform 0.3s; /* 添加过渡效果 */
        }
 
        .round-button:hover {
            box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2), 0 15px 40px 0 rgba(0, 0, 0, 0.19); /* 鼠标悬浮时更大的阴影 */
            transform: translateY(-5px); /* 鼠标悬浮时向上移动按钮 */
        }
    </style>
</head>
<body>
 
<button class="round-button">按钮</button>
 
</body>
</html>

这段代码定义了一个圆形按钮，并为其添加了阴影和过渡效果。按钮在鼠标悬浮时，阴影会变大并且按钮会上移。这种效果提升了用户体验，使得按钮更加引人注目。

- 阅读更多 -