mbsecondmenuAbout.html 5.4 KB
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/swiper-3.4.2.min.css">
    <title>Tianjin Medical University Cancer Institute & Hospital</title>
    <style>
        .mb0 {
            margin-bottom: 0px;
        }



        .container-fluid {
            margin: 0%;
            padding: 0%;

        }

        .swiper-pagination-bullet-active {
            background: #00a16c;
        }

        @media only screen and (min-width: 768px) {
            .mobile {
                display: none;
            }
        }

        /* 小屏幕(平板,大于等于 768px) */

        @media only screen and (max-width: 768px) {

            html,
            body {
                font-size: 16px;
                margin: 0;
                padding: 0;
                overflow-x: hidden;
            }

            .mobile {
                max-width: 100%;
            }
            .pc {
                display: none;
            }
            .logo {
                width: 50%;
            }
            /* .brand-logo {
                display: inline-block;
                height: auto;
                max-width: 100%;
            } */
            .title-left-right img {
                max-width: 100%;
                max-height: 100%;
            }
            .title-left-right {
                display: flex;
                padding: 0.6rem 0.5rem;
            }
            .title-left {
                display: block;
                flex: 2;
                text-align: left;
                margin-top: 0.3rem;
            }
            .title-right img {
                width: 25%;
            }
            .title-right {
                flex: 1;
                text-align: right;
                margin-top: 0.5rem;
            }
            .header {
                width: 100%;
                display: inline-block;
                border-top: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
                padding: 1.2rem 2rem;
                text-decoration: none;
                font-size: 1.4rem;
                color: #000;
                font-weight: bolder;
                display: flex;

            }
            .spanactive {
                color: #00a16c;
            }

            .container {
                padding: 0;
                height: 100%;

            }
            .header-left {
                flex: 12;
                text-align: left;
                white-space:nowrap;
                font-size: 1.2rem;
            }
            /* .header:active {
                color: #00a16c!important;
                text-decoration: none;
            } */
            .header-right {
                flex: 1;
                text-align: right;
                color: #ccc;
            }
        }
    </style>
</head>

<body>
    <div class="mobile container-fluid">
        <nav class="title-left-right">
            <a class="logo title-left" href="#">
                <img class="brand-logo" src="../images/01mobile-main/pic (5).png" alt="">
            </a>
            
            <!-- href="javascript:history.back(-1)" -->
            <a class="title-right" href="../index.html">
                <img class="" src="../images/02mobile-menu/pic (1).png" alt="">
            </a>
        </nav>
        <div class="container">
            <a href="../pcSecond.html" class="header">
                <span class="header-left spanactive">About Us</span>
                <span class="header-right">></span>
                <!-- <img class="header-right" src="../images/02mobile-menu/pic (2).png" /> -->
            </a>
            <a href="../details01-01.html" class="header">
                <span class="header-left">CLinical Resources</span>
                <span class="header-right">></span>
                <!-- <img class="header-right" src="../images/02mobile-menu/pic (2).png" /> -->
            </a>
            <a href="../details02-02.html" class="header">
                <span class="header-left">Research & Education</span>
                <span class="header-right">></span>
                <!-- <img class="header-right" src="../images/02mobile-menu/pic (2).png" /> -->
            </a>
            <a href="../details03-03.html" class="header">
                <span class="header-left">Internation Collaboration</span>
                <span class="header-right">></span>
                <!-- <img class="header-right" src="../images/02mobile-menu/pic (2).png" /> -->
            </a>
            <a href="../index.html" class="header">
                <span class="header-left">News Release</span>
                <span class="header-right">></span>
                <!-- <img class="header-right" src="../images/02mobile-menu/pic (2).png" /> -->
            </a>
            <a href="../index.html" class="header">
                <span class="header-left">Contact Us</span>
                <span class="header-right">></span>
                <!-- <img class="header-right" src="../images/02mobile-menu/pic (2).png" /> -->
            </a>
        </div>

    </div>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/swiper-3.4.2.jquery.min.js"></script>
    <script>



    </script>
</body>

</html>