flex布局导航条，移动端和pc端-前端ABC

移动端

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Our first responsive web page with HTML5 and CSS3</title>
    <meta name="description" content="A basic responsive web page– an example from Chapter 1">
    <meta name="viewport" content="width=device-width">
    <style>
        .MenuWrap {
            background-color: indigo;
            font-family: 'Oswald', sans-serif;
            font-size: 1rem;
            min-height: 2.75rem;
            display: flex;
            align-items: center;
            padding: 0 1rem;
            flex-direction: column;
        }

        .ListItem,
        .LastItem {
            color: #ebebeb;
            text-decoration: none;
        }

       
    </style>
</head>

<body>
    <div class="MenuWrap">
        <a href="#" class="ListItem">Home</a>
        <a href="#" class="ListItem">About Us</a>
        <a href="#" class="ListItem">Products</a>
        <a href="#" class="ListItem">Policy</a>
        <a href="#" class="LastItem">Contact Us</a>
    </div>
</body>

</html>

PC端

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Our first responsive web page with HTML5 and CSS3</title>
    <meta name="description" content="A basic responsive web page– an example from Chapter 1">
    <meta name="viewport" content="width=device-width">
    <style>
        .MenuWrap {
            background-color: indigo;
            font-family: 'Oswald', sans-serif;
            font-size: 1rem;
            min-height: 2.75rem;
            display: flex;
            align-items: center;
            padding: 0 1rem;
        }

        .ListItem,
        .LastItem {
            color: #ebebeb;
            text-decoration: none;
        }

        .ListItem {
            margin-right: 1rem;
        }

        .LastItem {
            margin-left: auto;
        }
    </style>
</head>

<body>
    <div class="MenuWrap">
        <a href="#" class="ListItem">Home</a>
        <a href="#" class="ListItem">About Us</a>
        <a href="#" class="ListItem">Products</a>
        <a href="#" class="ListItem">Policy</a>
        <a href="#" class="LastItem">Contact Us</a>
    </div>
</body>

</html>

欢迎分享本文，转载请保留出处：前端ABC » flex布局导航条，移动端和pc端

flex布局导航条，移动端和pc端

相关推荐

发表评论 0