<!DOCTYPE html>
<html>
<head>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.stars {
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
position: relative;
}
.stars-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateZ(0);
}
.star {
position: absolute;
top: 0;
width: 2px;
height: 2px;
background: #fff;
border-radius: 100%;
opacity: 0.3;
transform: translateZ(0);
animation: twinkle 10s infinite alternate;
}
@keyframes twinkle {
from { opacity: 0.3; }
to { opacity: 0.8; }
}
.meteor {
position: absolute;
top: -100px;
width: 2px;
height: 100px;
background: #fff;
opacity: 0.5;
transform: translateX(50%);
animation: shoot 20s linear infinite;
}
@keyframes shoot {
0% { top: -100px; opacity: 0.5; }
20% { opacity: 0.8; }
100% { top: 100%; opacity: 0; }
}
</style>
</head>
<body>
<div class="stars">
<div class="stars-container">
<!-- 生成随机的星星 -->
<div class="star" style="left:100px;top:50px;"></div>
<!-- 更多星星... -->
</div>
<!-- 流星 -->
<div class="meteor"></div>
</div>
<script>
const numStars = 1000; // 星星数量
const starsContainer = document.querySelector('.stars-container');
for (let i = 0; i < numStars; i++) {
const star = document.createElement('div');
star.className = 'star';
// 随机位置和大小
star.style.left = Math.random() * 100 + '%';
s
/* 设置HTML5页面的文档类型 */
html {
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* 移除默认边距 */
body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, figure, figcaption, blockquote, dl, dt, dd {
margin: 0;
padding: 0;
}
/* 设置字体大小 */
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
/* 使用Flexbox布局创建一个简洁的导航栏 */
.navigation {
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
background-color: #333;
color: #fff;
padding: 0 20px;
}
/* 导航链接样式 */
.navigation a {
color: #fff;
text-decoration: none;
padding: 0 10px;
}
/* 创建一个带有阴影的圆角边框的登录框 */
.login-box {
width: 300px;
padding: 40px;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
margin: 100px auto;
}
/* 创建一个带有阴影的圆角按钮 */
.login-box button {
width: 100%;
padding: 10px;
background-color: #5cb85c;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 为图片添加圆角和阴影效果 */
.img-rounded {
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 为图片添加圆形效果 */
.img-circle {
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 为图片添加阴影效果 */
.img-thumbnail {
display: inline-block;
height: auto;
max-width: 100%;
border: 2px solid transparent;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 创建一个带有阴影的圆角进度条 */
.progress-bar {
background-color: #5cb85c;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) inset;
}
/* 创建一个带有阴影的圆角标签 */
.label-default {
background-color: #777;
color: #fff;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 创建一个带有阴影的圆角下拉菜单 */
.dropdown-menu {
border-radius: 5px;
box-shadow: 0 2px 背景渐变：
/* 线性渐变，从上到下 */
.background-gradient {
background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
}
/* 径向渐变，从中心到边缘 */
.background-gradient {
background: radial-gradient(circle, #ff99cc 0%, #33ccff 100%);
}边框渐变：
/* 不同浏览器的前缀可能不一样，这里以webkit为例 */
.border-gradient {
border: 2px solid #33ccff;
border-image: -webkit-linear-gradient(to right, red, yellow, green);
border-image: linear-gradient(to right, red, yellow, green);
}文字渐变：
.text-gradient {
background: -webkit-linear-gradient(45deg, #ff99cc, #33ccff);
background: linear-gradient(45deg, #ff99cc, #33ccff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}以上代码实现了背景、边框和文字的渐变效果。注意，为了兼容不同浏览器，可能需要添加不同浏览器的前缀（如-webkit-）。
在SCSS中，你可以使用@each指令来遍历列表并动态地引入背景图。以下是一个简单的例子：
// 假设你有一个包含图片路径的列表
$background-images: 'image1.jpg', 'image2.jpg', 'image3.jpg';
// 遍历列表并为每个图片创建一个类
@each $image in $background-images {
.bg-image-#{$image} {
background-image: url(#{$image});
}
}编译后的CSS将是：
.bg-image-image1.jpg {
background-image: url(image1.jpg);
}
.bg-image-image2.jpg {
background-image: url(image2.jpg);
}
.bg-image-image3.jpg {
background-image: url(image3.jpg);
}这样，你可以将生成的类添加到HTML元素中，以应用对应的背景图。
CSS Grid（网格）布局是一种二维布局系统。与flexbox布局系统不同，它被设计为管理网格中的项目，而不是像flexbox那样管理线性布局。
以下是一些CSS Grid的基本使用方法：
- 创建一个网格容器：
.container {
display: grid;
}- 定义网格的列和行：
.container {
display: grid;
grid-template-columns: 100px 100px 100px; /* 定义三列，每列宽度为100px */
grid-template-rows: 50px 50px 50px; /* 定义三行，每行高度为50px */
}- 使用网格间隔：
.container {
display: grid;
grid-column-gap: 10px; /* 列间隔为10px */
grid-row-gap: 10px; /* 行间隔为10px */
}- 使用命名网格线：
.container {
display: grid;
grid-template-columns: [first] 100px [second] 100px [third] 100px [fourth];
grid-template-rows: [header] 50px [content] 50px [footer];
}- 将项目放置在网格中：
.item1 {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}- 使用简写属性放置项目：
.item1 {
grid-area: 1 / 1 / 2 / 2; /* 行开始 / 列开始 / 行结束 / 列结束 */
}- 使用自动填充：
.container {
display: grid;
grid-template-columns: 100px auto 100px; /* 第二列自动填充剩余空间 */
}- 设置重复的网格线：
.container {
display: grid;
grid-template-columns: repeat(3, 100px); /* 三列，每列宽度为100px */
}- 设置最小和最大网格大小：
.container {
display: grid;
grid-template-columns: 100px minmax(150px, 1fr); /* 最小150px，最大1fr */
}- 创建网格区域：
.container {
display: grid;
grid-template-areas: 'header header header'
'nav main sidebar'
'footer footer footer';
}在实际应用中，你可以根据需要将这些属性和值组合起来，以创建灵活的网格布局。
要实现文本超出部分隐藏，并且只显示一半的文字，可以使用CSS的text-overflow属性结合overflow和white-space属性。以下是一个简单的示例：
<div class="text-ellipsis">这是一段很长的文字，我们只希望显示它的一半</div>
.text-ellipsis {
width: 100px; /* 定义容器宽度 */
white-space: nowrap; /* 确保文本在一行内显示 */
overflow: hidden; /* 隐藏超出容器的内容 */
text-overflow: ellipsis; /* 使用ellipsis显示超出部分的文本 */
direction: rtl; /* 文本方向从右到左 */
}
.text-ellipsis::before {
content: '...'; /* 添加省略号 */
direction: ltr; /* 确保省略号从左到右显示 */
}在这个示例中，text-ellipsis类定义了容器的宽度，并且通过设置direction: rtl实现从右到左的文本方向，使得文本从左边开始隐藏，直到隐藏一半的文本为止。::before伪元素用于添加省略号，并通过设置direction: ltr确保省略号显示正确。这样就实现了文本超出部分隐藏，并显示省略号的效果。
/* 设置元素的普通背景色 */
.element {
background-color: #f0f0f0; /* 十六进制颜色值 */
}
/* 设置元素的线性渐变背景 */
.gradient-background {
background-image: linear-gradient(to right, #ff7e5f, #feb47b); /* 从左到右的渐变，从#ff7e5f到#feb47b */
}
/* 设置元素的径向渐变背景 */
.radial-gradient-background {
background-image: radial-gradient(circle, #ff9a9e, #fad0c4); /* 圆形渐变，从#ff9a9e到#fad0c4 */
}
/* 设置背景图片，同时包含背景颜色和背景渐变 */
.background-image {
background-image: url('image.jpg'), linear-gradient(to right, #ff7e5f, #feb47b); /* 图片地址替换为实际路径 */
}这段代码展示了如何使用CSS为元素设置普通背景色、线性渐变背景和径向渐变背景，同时也展示了如何在同一元素上同时使用背景图片和背景渐变。这些是CSS背景样式设置中的基础知识，对于初学者来说非常有用。
在CSS中，可以使用线性渐变（linear-gradient）来创建一个条纹背景，并使用 background 属性的特性来画一条有宽度的斜线。以下是一个示例代码：
/* 创建一个具有条纹背景的div */
.striped-background {
background: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), #f0f0f0;
background-size: 100px 100px; /* 调整这个值来改变条纹的宽度 */
}
/* 在条纹背景上画一条有宽度的斜线 */
.striped-background::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to right, transparent 50%, #ff0000 50%); /* 红色斜线 */
mix-blend-mode: multiply; /* 使斜线与条纹相互影响 */
}在HTML中使用这个类：
<div class="striped-background"></div>这段代码会创建一个具有条纹的背景，并且在背景上绘制一条红色的斜线。你可以通过调整 background-size 属性的值来改变条纹的宽度，从而影响斜线的粗细。
要解决Flex盒子被内容撑开的问题，可以使用CSS的min-width和max-width属性来限制Flex容器的最小和最大宽度，或者使用width属性来固定宽度。如果你希望在文本超过两行后显示省略符号（...），可以使用CSS的text-overflow、white-space和overflow属性。
以下是实现这些功能的CSS样式和HTML结构的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Box Example</title>
<style>
.flex-container {
display: flex; /* 使用Flex布局 */
width: 200px; /* 设置固定宽度 */
min-height: 50px; /* 设置最小高度 */
background-color: lightblue; /* 设置背景颜色 */
margin: 10px; /* 外边距 */
padding: 10px; /* 内边距 */
box-sizing: border-box; /* 盒子模型包括内边距和边框 */
}
.text {
flex: 1; /* 允许伸展，占据剩余空间 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 文本溢出显示省略符号 */
white-space: nowrap; /* 不换行 */
max-height: 34px; /* 最大高度 */
line-height: 1.2; /* 行高 */
display: -webkit-box; /* 用于显示两行文本 */
-webkit-line-clamp: 2; /* 限制在两行 */
-webkit-box-orient: vertical; /* 垂直排列 */
}
</style>
</head>
<body>
<div class="flex-container">
<div class="text">这里是一些很长的文本，如果超过两行将会显示省略符号...</div>
</div>
</body>
</html>在这个例子中，.flex-container是一个Flex容器，.text是它的子元素，该子元素将会显示文本内容。通过CSS样式，.text被设置为当内容超过两行后显示省略符号，并且不会因为内容的增长而撑开Flex容器的高度。
CSS3 结构伪类选择器可以用来选择元素基于其父元素的位置关系。以下是三种常见的结构伪类选择器：
:first-child选择器：选择父元素中的第一个子元素E。:last-child选择器：选择父元素中的最后一个子元素E。:nth-child(n)选择器：选择父元素中的第n个子元素E。
以下是对应的示例代码：
/* 选择每个 <p> 元素，该元素是其父元素的第一个子元素 */
p:first-child {
color: red;
}
/* 选择每个 <p> 元素，该元素是其父元素的最后一个子元素 */
p:last-child {
color: blue;
}
/* 选择每个 <p> 元素，该元素是其父元素的第二个子元素 */
p:nth-child(2) {
color: green;
}在使用 :nth-child 选择器时，可以使用更复杂的公式，如 2n 选择所有偶数项，2n+1 选择所有奇数项，n+5 选择第5个及以后的所有项，-n+5 选择前5个项等。