分类 css3 下的文章

[HTML]Web前端开发技术10（HTMLCSSJavaScript ）CSS+DIV页面布局，固定定位，相对定位relative，绝对定位absolute，层定位的应用——喵喵画网页

2024-08-14




<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS+DIV页面布局</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .header {
            position: fixed;
            top: 0;
            width: 100%;
            height: 50px;
            background-color: #333;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
        .content {
            margin-top: 50px;
            padding: 10px;
        }
        .sidebar {
            float: left;
            width: 200px;
            height: calc(100vh - 50px);
            background-color: #f2f2f2;
            padding: 10px;
            overflow: auto;
        }
        .main-content {
            margin-left: 210px; /* 宽度为200px + 10px边距 */
            height: calc(100vh - 50px);
            background-color: #fff;
            padding: 10px;
            overflow: auto;
        }
        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 50px;
            background-color: #333;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>页头</h1>
    </div>
    <div class="content">
        <div class="sidebar">
            <h2>侧边栏</h2>
            <p>侧边栏内容...</p>
        </div>
        <div class="main-content">
            <h2>主要内容</h2>
            <p>主要内容区域...</p>
        </div>
    </div>
    <div class="footer">
        <h1>页脚</h1>
    </div>
</body>
</html>

这个代码实例展示了如何使用CSS创建一个固定头部和底部的布局，并且使用DIV元素来构建一个两栏的主要内容区域。侧边栏使用了固定宽度并且能够在高度上自适应屏幕，主要内容区域则根据侧边栏宽度进行了适当的偏移。在这个简单的例子中，我们也看到了如何使用CSS的calc()函数来进行计算，以便于实现更复杂的布局。

- 阅读更多 -

2.CSS3自定义滚动条样式

System

2024-08-14

所有,css3




/* 设置滚动区域的宽度和高度 */
.scroll-area {
  width: 200px;
  height: 100px;
  overflow: auto;
}
 
/* 自定义滚动条样式 */
.scroll-area::-webkit-scrollbar {
  width: 12px; /* 设置滚动条的宽度 */
}
 
.scroll-area::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道的背景颜色 */
}
 
.scroll-area::-webkit-scrollbar-thumb {
  background: #888; /* 滚动条实际可拖动部分的颜色 */
}
 
.scroll-area::-webkit-scrollbar-thumb:hover {
  background: #555; /* 鼠标悬浮时滚动条的颜色 */
}

这段代码定义了一个.scroll-area类，它设置了滚动区域的宽度和高度，并且当内容超出区域时会显示滚动条。接着，使用::-webkit-scrollbar、::-webkit-scrollbar-track和::-webkit-scrollbar-thumb伪元素选择器来自定义滚动条的样式，使其具有宽度、轨道和滚动条颜色。在不同状态下（悬浮时），滚动条的颜色会有所不同，以改善用户体验。这段代码主要针对Webkit内核浏览器（如Chrome、Safari）。

- 阅读更多 -

使用 clip-path 绘制多种图形

System

2024-08-14

所有,css3




/* 使用clip-path属性绘制一个三角形 */
.triangle {
  width: 100px;
  height: 100px;
  background-color: red;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
 
/* 使用clip-path属性绘制一个圆形 */
.circle {
  width: 100px;
  height: 100px;
  background-color: blue;
  clip-path: circle(50%);
}
 
/* 使用clip-path属性绘制一个正方形 */
.square {
  width: 100px;
  height: 100px;
  background-color: green;
  clip-path: square(100%);
}
 
/* 使用clip-path属性绘制一个椭圆形 */
.ellipse {
  width: 100px;
  height: 150px;
  background-color: purple;
  clip-path: ellipse(50% 100%);
}
 
/* 使用clip-path属性绘制一个圆角矩形 */
.rounded-rectangle {
  width: 100px;
  height: 100px;
  background-color: yellow;
  clip-path: inset(10% 20% 30% 40% round 50%);
}

这段代码展示了如何使用clip-path属性来绘制不同的图形。每个CSS类定义了一个具有特定背景颜色的容器，并使用clip-path属性来剪裁出特定形状。这些形状包括三角形、圆形、正方形、椭圆形、圆角矩形等。每个值都是根据百分比指定的，使得图形大小和形状可以灵活调整。

- 阅读更多 -

CSS3 新增属性：背景，笔记分享

System

2024-08-14

所有,css3

CSS3 中的背景相关属性包括：

background-size: 指定背景图片的大小，可以是具体的宽高值或者是百分比，还可以是cover和contain这两个特殊的值。
background-origin: 指定背景图片的定位区域，可以是边框盒、内边距盒或者是内容盒。
background-clip: 指定背景的裁剪区域，同样可以是边框盒、内边距盒或者是内容盒。
background-image: 可以设置多个背景图片，用逗号隔开。
linear-gradient 和 radial-gradient: 创建线性和径向渐变的背景。

示例代码：




/* 设置背景图片并重复 */
.element {
  background-image: url('image.jpg');
  background-repeat: repeat-x;
}
 
/* 使用渐变作为背景 */
.gradient-background {
  background-image: linear-gradient(to right, red, yellow);
}
 
/* 设置背景大小，保持宽高比 */
.background-size {
  background-size: 150% auto; /* 宽度为原来的150%，高度自动保持宽高比 */
}
 
/* 设置背景的定位区域为内容盒 */
.background-origin {
  background-origin: content-box;
}
 
/* 设置背景的裁剪区域为内容盒 */
.background-clip {
  background-clip: content-box;
}
 
/* 多背景图片 */
.multiple-backgrounds {
  background-image: url('first.jpg'), url('second.jpg');
  background-position: left bottom, right top;
}

这些属性可以让你创建更加丰富和灵活的背景样式。

- 阅读更多 -

纯css实现坤坤经典动作-“铁山靠”

System

2024-08-14

所有,css3

"铁山靠"这个动作在纯CSS中可以通过关键帧动画（keyframe animations）和CSS的animation属性来实现。以下是一个简单的示例，演示如何用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>
  .titan {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    animation: titan-lean 2s infinite alternate;
  }
 
  @keyframes titan-lean {
    0% {
      transform: rotate(0deg) translateX(0);
    }
    50% {
      transform: rotate(10deg) translateX(20px);
    }
    100% {
      transform: rotate(0deg) translateX(0);
    }
  }
</style>
</head>
<body>
<div class="titan"></div>
</body>
</html>

这段代码中定义了一个.titan类，它有一个无限循环且每次循环交替方向的titan-lean动画。动画通过transform属性的rotate和translateX函数来实现转体和向右位移的效果。通过调整@keyframes中的百分比和具体的transform值，可以控制动画的进程和结果。

- 阅读更多 -

CSS3 新增的新特性

System

2024-08-14

所有,css3

CSS3 是 CSS 的最新版本，它引入了许多新特性，以下是一些常见的 CSS3 新增特性：

边框（Borders）
- 圆角边框（border-radius）
- 阴影效果（box-shadow）
背景和图像
- 渐进背景颜色（linear-gradient）
- 背景图片尺寸（background-size）
- 背景图片定位（background-origin）
- 多背景图（background-image 的多背景图链接）
文字效果
- 文字阴影（text-shadow）
- 字体（@font-face 规则）
2D/3D转换
- 转换（transform）
- 旋转（rotate）
- 缩放（scale）
- 移动（translate）
- 倾斜（skew）
动画
- @keyframes 规则创建动画
- animation 属性应用动画
多列布局
- column-count 设置列数
- column-gap 设置列间隙
用户界面
- 滚动条样式（scrollbar-face-color, scrollbar-track-color 等）
- 圆角（border-radius）
- 渐进边框效果（border-image）
多媒体
- 视频和音频（<video> 和 <audio> 标签）
框模型
- box-sizing 指定如何计算元素的总宽度和总高度
过滤器
- 亮度（brightness）
- 对比度（contrast）
- 灰度（grayscale）
- sepia（sepia）
- 模糊（blur）

下面是一个简单的 CSS3 示例，使用了几个新特性：




/* 圆角边框和阴影效果 */
div {
  border: 1px solid #000;
  border-radius: 10px;
  box-shadow: 5px 5px 5px #888888;
}
 
/* 渐进背景颜色 */
div {
  background-image: linear-gradient(to right, red, yellow);
}
 
/* 文字阴影 */
p {
  text-shadow: 2px 2px 2px #888888;
}
 
/* 媒体查询，根据屏幕大小应用不同样式 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
 
/* 自定义字体 */
@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff') format('woff');
}
 
body {
  font-family: 'MyCustomFont', sans-serif;
}
 
/* CSS动画 */
@keyframes myAnimation {
  from {background-color: red;}
  to {background-color: yellow;}
}
 
div {
  animation-name: myAnimation;
  animation-duration: 4s;
}

这些新特性使得网页设计师和开发者能创建更加生动和复杂的网页界面，提升用户体验。

System

2024-08-14

所有,css3

在HTML中，表格的边框颜色可以通过CSS来设置。如果你想设置表格的亮边框颜色和暗边框颜色，可以使用CSS的border-color和border属性。

以下是一个简单的例子，展示如何设置表格的亮边框颜色和暗边框颜色：




<!DOCTYPE html>
<html>
<head>
<style>
  table {
    width: 100%;
    border-collapse: collapse; /* 移除表格之间的间隔 */
  }
  table, th, td {
    border: 1px solid black; /* 设置边框宽度和样式 */
  }
  th {
    height: 50px;
    background-color: #f2f2f2; /* 设置表头背景色 */
  }
  td {
    padding: 10px;
  }
  /* 设置亮边框颜色 */
  th, td {
    border-color: #555;
  }
  /* 设置暗边框颜色 */
  table tr:nth-child(odd) {
    background-color: #f9f9f9;
  }
  table tr:nth-child(even) {
    background-color: #fdfdfd;
  }
</style>
</head>
<body>
 
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
  <!-- 更多行... -->
</table>
 
</body>
</html>

在这个例子中，我们使用CSS选择器为表格的表头(th)和数据单元格(td)设置了亮边框颜色，并且通过:nth-child伪类选择器为奇数行和偶数行设置了不同的背景色作为暗边框颜色。border-collapse: collapse; 属性用于移除表格单元之间的间隔，使得整个表格看上去有单一的边框。

- 阅读更多 -

CSS3-flex布局

System

2024-08-14

所有,css3

CSS3的Flexbox布局（弹性盒子布局）提供了一种更灵活的方式来对容器内的项进行排列、对齐和分配空间。

以下是一个简单的Flex布局示例，它将创建一个水平的弹性容器，其中的子元素会自动伸缩以填满可用空间：




<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex; /* 使用弹性布局 */
}
 
.flex-item {
  width: 100px; /* 设置子元素的宽度 */
  height: 100px; /* 设置子元素的高度 */
  margin: 5px; /* 设置子元素的外边距 */
}
</style>
</head>
<body>
 
<div class="flex-container">
  <div class="flex-item" style="background-color: cyan;">1</div>
  <div class="flex-item" style="background-color: magenta;">2</div>
  <div class="flex-item" style="background-color: yellow;">3</div>
</div>
 
</body>
</html>

在这个例子中，.flex-container 类使用 display: flex; 属性使得容器使用Flex布局。.flex-item 类设置了子元素的宽度和高度，并且每个子元素都有5像素的外边距。

Flex布局的强大之处在于它可以轻松地在容器内水平和垂直排列子元素，调整它们的大小，以及控制它们在容器内的对齐方式。

- 阅读更多 -

CSS3多列（详解网页多列布局应用）

System

2024-08-14

所有,css3

CSS3的多列布局功能可以用来创建多列布局，以便在一个容器内并排显示多列内容。以下是一个简单的示例，展示如何使用CSS3的多列属性来创建一个多列布局：




<!DOCTYPE html>
<html>
<head>
<style>
.multi-column {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3;    /* Firefox */
  column-count: 3;
  -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
  -moz-column-gap: 20px;    /* Firefox */
  column-gap: 20px;
  width: 80%;
  margin: auto;
}
 
/* 为了美观，添加一些内边距和背景色 */
.multi-column p {
  padding: 10px;
  background-color: #f9f9f9;
}
</style>
</head>
<body>
 
<div class="multi-column">
  <p>...</p>
  <!-- 添加更多的段落来填充更多列 -->
</div>
 
</body>
</html>

在这个示例中，.multi-column 类定义了一个容器，该容器会根据内容自动分割成三列。-webkit-column-count 和 column-count 属性用于指定列的数量。-webkit-column-gap 和 column-gap 属性用于指定列之间的间隔。每个 <p> 元素都会在适当的列下自动放置。这种布局方式可以用来创建杂志或报纸的版面布局，也可以用于创建博客或新闻网站的文章分栏。

- 阅读更多 -

css3背景渐变以及阴影与导航栏的几种实现方式

System

2024-08-14

所有,css3

CSS3中实现背景渐变和阴影可以使用linear-gradient函数来创建渐变效果，以及box-shadow属性来添加阴影。以下是实现导航栏的几种方式：

基本导航栏：




/* 渐变背景 */
.navbar {
  background-image: linear-gradient(to right, #FFC107, #FF5722);
}
 
/* 阴影效果 */
.navbar {
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
}

使用伪元素添加分割线：




.navbar li::after {
  content: '';
  display: inline-block;
  height: 1px;
  width: 100px;
  background-image: linear-gradient(to right, #FFC107, #FF5722);
  margin: 0 10px;
}

使用伪元素添加图标：




.navbar li::before {
  content: '\276F';
  color: white;
  margin-right: 10px;
}

导航栏响应式设计：




@media (max-width: 600px) {
  .navbar li {
    display: block;
    text-align: center;
  }
}

这些示例展示了如何使用CSS3的基本功能来增强导航栏的视觉效果。实际应用时，可以根据具体设计要求和布局调整相关属性。

- 阅读更多 -