当前位置：首页 > article >正文

前端css实例

article 2024/12/2 4:15:48

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