• 日期: 2026-01-09
  • 标签: 教育
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机端网站</title>
    <style>
        /*导航条样式*/
        .nav-bar {
            background-color: #333;
            color: #fff;
            display: flex;
            justify-content: space-between;
            padding: 10px;
        }
<pre><code>    /*导航条链接样式*/
    .nav-link {
        color: #fff;
        margin: 0 10px;
        text-decoration: none;
        font-weight: bold;
        font-size: 16px;
    }

    /*当前页导航链接样式*/
    .nav-link.active {
        color: #f00;
    }

    /*幻灯片样式*/
    .slider-container {
        position: relative;
    }

    .slider-container img {
        max-width: 100%;
        height: auto;
    }

    .slider-container .slider-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
    }

    .slider-container .slider-btn.prev {
        left: 0;
    }

    .slider-container .slider-btn.next {
        right: 0;
    }

    /*图片列表样式*/
    .image-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 20px 0;
    }

    .image-list .image-item {
        width: 49%;
        margin-bottom: 20px;
    }

    .image-list .image-item img {
        max-width: 100%;
        height: auto;
        margin-bottom: 10px;
    }

    .image-list .image-item .title {
        display: block;
        background-color: #000;
        color: #fff;
        padding: 5px;
        text-align: center;
        font-size: 14px;
    }

    /*服务项目样式*/
    .service-list {
        display: flex;
        justify-content: space-between;
        margin: 20px 0;
    }

    .service-list .service-item {
        width: 30%;
        text-align: center;
    }

    .service-list .service-item a {
        display: block;
        text-decoration: none; /*去掉下划线*/
        color: #333; /*修改颜色*/
        font-size: 14px;
    }

    .service-list .service-item a:hover {
        color: #f00; /*鼠标悬停时修改颜色*/
    }

    .service-list .service-item img {
        max-width: 100%;
        height: auto;
    }

    .service-list .service-item .title {
        font-size: 14px;
        margin-top: 10px;
    }

    /*新闻列表样式*/
    .news-list {
        margin: 20px 0;
    }

    .news-list .news-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .news-list .news-item .title {
        font-size: 14px;
        width: 70%;
        text-decoration: none; /*去掉下划线*/
        color: #333; /*修改颜色*/
    }

    .news-list .news-item .title:hover {
        color: #f00; /*鼠标悬停时修改颜色*/
    }

    .news-list .news-item .date {
        font-size: 14px;
        width: 30%;
        text-align: right;
    }

    /*公司简介样式*/
    .company-desc {
        margin: 20px 0;
        text-align: justify;
    }

    /*管理团队样式*/
    .team-list {
        display: flex;
        justify-content: space-between;
        margin: 20px 0;
    }

    .team-list .team-item {
        width: 30%;
        text-align: center;
    }

    .team-list .team-item img {
        max-width: 100%;
        height: auto;
    }

    .team-list .team-item a {
        display: block;
        text-decoration
</code></pre>
给导航条换个样式要完整代码!DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width initial-scale=10 title手机端网站title style 导航条样式 nav-bar b

原文地址: https://www.cveoy.top/t/topic/btqq 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录