前端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>
table {
widh: 50%;
border-collapse: collapse;
}
th, td {
text-align: left;
padding: 8px;
}
.tab tr:nth-child(odd) {
background-color: #f2f2f2;
}
.tab tr:nth-child(even) {
background-color: slategray;
}
</style>
</head>
<body>
<table class="tab">
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
<tr>
<td>数据4</td>
<td>数据5</td>
<td>数据6</td>
</tr>
<tr>
<td>数据7</td>
<td>数据8</td>
<td>数据9</td>
</tr>
</table>
</body>
</html>
在 CSS 中，tr:nth-child(odd) 是一个伪类选择器，用于选择所有在其父元素（比如 <table>）中的奇数位置的 <tr> 元素。
解释：
nth-child()是 CSS 中的一个伪类，用来根据元素在父元素中的位置来选择子元素odd是nth-child()中的一个关键字，表示选择奇数位置的元素（例如：1、3、5、7…），even表示偶数位置的元素（例如：2、4、6、8…）- 由于在 CSS 中，元素的计数是从 1 开始的，所以
tr:nth-child(odd)会选择所有在父元素中处于奇数位置的<tr>元素
核心思路：
使用表格中的行的伪类选择器，改变奇数行或偶数行表格的背景颜色即可
tr:nth-child(odd)表示奇数行tr:nth-child(even)表示偶数行
二、带下拉菜单的水平导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>带下拉菜单的水平导航栏</title>
<style>
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: yellowgreen;
display: flex;
justify-content: center;
height: 75px;
}
li {
display: inline;
}
a {
display: block;
height: 100%;
text-decoration: none;
padding: 0 20px;
line-height: 75px;
font-weight: 600;
font-size: large;
}
a:hover {
background-color: aliceblue;
color: black;
}
.bar {
position: relative;
}
.mean {
position: absolute;
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: skyblue;
display: none;
width: 120px;
z-index: 1;
}
.mean a {
text-align: center;
background-color: skyblue;
}
.bar:hover .mean{
display: block;
}
.mean a:hover {
background-color: lightyellow;
}
</style>
</head>
<body>
<ul>
<li><a href="#">关于</a></li>
<li><a href="#">新闻</a></li>
<li class="bar"><a href="#">练习</a>
<ul class="mean">
<li><a href="#">css</a></li>
<li><a href="#">html</a></li>
<li><a href="#">js</a></li>
<li><a href="#">vue</a></li>
</ul>
</li>
<li><a href="#">我们</a></li>
<li><a href="#">合作</a></li>
</ul>
</body>
</html>
核心思路：
先使用无序列表实现水平导航栏：
- 水平导航栏中的元素要想居中，可以先将
ul标签设置为弹性盒子模型，在通过justify-content: center;居中即可- 将块级标签
li改变为行内标签display: inline;- 设置a标签为块级标签
display: block;，在通过height: 100%从而来撑满标签- 最后在设置a标签的
:hover中（鼠标聚焦即实现）改变背景颜色和字体颜色再在要添加下拉菜单的
li标签中添加另一个无序列表：
- 先给指定的
li标签设置为相对位置，以便先拉菜单出现在正确位置position: relative;- 设置下拉菜单的列表标签
ul设置为绝对位置，接收最近已定位的父元素li的相对位置；再将显示关闭display: none;并设置下拉菜单框的宽度；最后确保下拉菜单显示在其他元素之上定义z-index: 1;mean下的a标签设置为文本居中text-align: center;- 设置指定
li标签的:hover并改变.mean中的显示状态display: block;- 设置在
mean的a标签的:hover，改变鼠标聚焦时的背景颜色
三、带悬浮动漫的按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>带悬浮动漫的按钮</title>
<style>
.btn {
background-color: skyblue;
padding: 15px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
position: absolute;
top: 50px;
left: 50px;
font-size: large;
}
.btn:hover {
background-color: aqua;
transform: scale(1.2);
}
</style>
</head>
<body>
<button class="btn">悬浮按钮</button>
</body>
</html>
核心思路：
直接设置按钮的样式：
- 设置鼠标光标聚焦按钮变为手指
cursor: pointer;- 设置变化效果，使用
transition属性（用于指定元素在状态变化时的过渡效果）transition: background-color 0.3s, transform 0.3s;，改变背景颜色和大小，时间均为0.3s（transform可以scale(比例)——缩放、translate(x,y)——平移、rotate(度数deg)——旋转，……）- 给按钮设置
:hover，使得光标聚焦时，设置改变后的背景颜色background-color和transform缩放属性
四、带阴影的卡片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>带阴影的卡片</title>
<style>
.card {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
padding: 14px 16px;
}
.card1 {
box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.3);
padding: 14px 16px;
}
</style>
</head>
<body>
<div class="card">
<h2>带阴影的卡片</h2>
<p>这是卡片的内容</p>
</div>
<br><br>
<div class="card1">
<h2>内阴影</h2>
<p>这是卡片的内容</p>
</div>
</body>
</html>
核心思路：
直接设置卡片的样式即可：
- 使用
box-shadow属性，box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3)，第一个属性是水平偏移量，第二个属性是垂直偏移量，第三个属性是模糊半径，第四个是阴影颜色rgba(0,0,0,0.3)其中的0.3是透明度- *如果要使用内阴影，即在
box-shadow属性前面加inset*即可
五、图片的提示文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片的提示文本</title>
<style>
.img-container {
position: relative;
display: inline-block;
}
.img-container img {
width: 250px;
height: auto;
border-radius: 8px;
}
.tip {
position: absolute;
background-color: rgba(0, 0, 0, 2);
color: white;
padding: 10px;
border-radius: 5px;
opacity: 0;
transition: opacity 0.3s ease;
font-size: large;
/* 禁用鼠标事件 */
pointer-events: none;
}
.img-container:hover .tip{
opacity: 1;
}
</style>
</head>
<body>
<div class="img-container">
<img src="image\pexels-nascimento-vieira-455892312-19295658.jpg" alt="图片加载失败">
<div class="tip">这是这个图片的提示文本</div>
</div>
</body>
</html>
核心思路：
先设置整个容器：
- 将父容器的位置改为相对定位
postion: relative;，以便后面的提示文本内容位置的接收- 再将整个容器设置为行内块级元素，以便后面仅将光标移动到图片位置，而不是整行
再设置提示文本：
- 先设置提示文本的定位为，绝对定位
postion: absolute;- 将元素的透明度设置为0，即不可见
opacity: 0;- 设置平滑的过渡效果，
transition: opacity 0.3s ease;其中ease是一个过渡时间函数，表示过渡会以一种平滑的速度变化，开始和结束时较慢，中间较快- 最后禁用鼠标事件
pointer-events: none;最后设置光标聚焦时，提示文本的展示：
- 设置整个容器的
:hover（但在文本位置时不会展示，因为文本位置已经禁用了鼠标事件），此时设置tip标签的opacity: 1透明度设置为1，元素展示
六、折叠面板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>折叠面板</title>
<style>
.accordion {
background-color: white;
margin: 0 10px;
}
.accordion-header {
background-color: aquamarine;
border: none;
border-radius: 5px;
padding: 10px;
cursor: pointer;
font-size: large;
font-weight: 500;
}
.accordion-content {
padding: 10px 16px;
display: none;
background-color: aliceblue;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.active .accordion-content {
display: block;
}
</style>
</head>
<body>
<h2>折叠面板</h2>
<div class="accordion">
<button class="accordion-header">折叠面板</button>
<div class="accordion-content">
<p>这是折叠面板的内容</p>
</div>
</div>
</body>
<script>
const accord = document.querySelector('.accordion-header');
accord.addEventListener('click', function() {
const parent = this.parentElement;
parent.classList.toggle('active');
});
</script>
</html>
核心思路：
先设置整个容器：
- 定义
div容器，并将背景定义为白色再设置容器中的按钮：
- 设置按钮的基本属性，并设置光标聚焦时，改变鼠标样式
cursor:pointer;设置折叠面板的内容：
- 设置不展示
display: none;，也可以设置成带阴影的卡片box-shadow使用
JS的DOM给添加按钮添加事件：
- 定义一个常量使用类名接收按钮属性
const accord = document.querySelector('.accordion-header');- 给这个常量添加点击事件监听
.addEventListener('click', 函数)，并定义点击后的函数- 在这个函数中再定义一个常量来获取该点击元素的父元素
const parent = this.parentElement;- 给父容器添加
.active类（有这个类则删除，没有这个类则添加），parent.classList.toggle('active');设置事件控制的
css样式：
- 给要展示折叠面板的
css加上父容器的前缀.active,如果有则执行这段css，.active .accordion-content {}- 在这个
css样式里面添加展示display: block;
七、网格布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网格布局</title>
<style>
.grid-container {
display: grid;
/* grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr); */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
padding: 20px;
}
.grid {
display: flex;
justify-content: center;
background-color: greenyellow;
/* width: 200px; */
aspect-ratio: 1;
color: blueviolet;
align-items: center;
font-size: large;
font-weight: 700;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid">内容1</div>
<div class="grid">内容2</div>
<div class="grid">内容3</div>
<div class="grid">内容4</div>
<div class="grid">内容5</div>
<div class="grid">内容6</div>
<div class="grid">内容7</div>
<div class="grid">内容8</div>
</div>
</body>
</html>
核心思路：
先定义整个容器的样式：
- 先将整个容器设置为二维布局系统
display: grid;- 再定义网格容器的列布局
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));使用repeat()函数创建列数，设置为auto-fill表示网格的列数会根据容器的宽度自动填充，使用minmax()函数定义每一列的最小宽度和最大宽度，1fr表示该列将分配容器可用空间的一部分- 设置各个网格项行列之间的间距
gap: 10px再定义每个网格项的样式：
- 先将网格项的布局模式为
Flexbox布局display: flex;（可以帮助更好的控制内容再元素内的对齐方式）- 在
Flexbox布局下，控制子元素的对齐方式，水平居中justify-content: center;- 再设置元素的垂直居中
align-items: center;（同样也适用于Flexbox布局）- 将网格项设置为正方形，使用
aspect-ratio: 1;，控制元素的宽高比。
-fill, minmax(200px, 1fr));使用repeat()函数创建列数，设置为auto-fill表示网格的列数会根据容器的宽度自动填充，使用minmax()函数定义每一列的最小宽度和最大宽度，1fr`表示该列将分配容器可用空间的一部分*- 设置各个网格项行列之间的间距
gap: 10px再定义每个网格项的样式：
- 先将网格项的布局模式为
Flexbox布局display: flex;（可以帮助更好的控制内容再元素内的对齐方式）- 在
Flexbox布局下，控制子元素的对齐方式，水平居中justify-content: center;- 再设置元素的垂直居中
align-items: center;（同样也适用于Flexbox布局）- 将网格项设置为正方形，使用
aspect-ratio: 1;，控制元素的宽高比。
