前端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;，控制元素的宽高比。