首页 > 代码库 > 手机版网站顶部导航条的布局

手机版网站顶部导航条的布局

2024-08-25 03:50:06   215人阅读

效果图：

技术分享

手机版网站顶部导航条布局分为3块：
1、左侧返回上一页按钮（固定宽高）
2、右侧菜单按钮（固定宽高）
3、中间文字介绍（宽度自适应且文字居中）

要实现这个效果最简单的办法是2边绝对定位，中间text-align-center

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{padding:0;margin:0;}
        div, p, ul, ol, dl, dt, dd, form{margin:0;padding:0;}
        *{box-sizing:border-box;}
        .container-fluid{width:100%;min-height:50px;background:#080808;padding:0 10px;position:relative;}
        .navbar-brand{font-size:18px;height:50px;line-height:20px;padding:15px;position:absolute;left:0;top:0;z-index:1;}
        .navbar-text{line-height:50px;color:#ffffff;}
        .text-center{text-align:center;}
        .navbar-toggle{background-color:transparent;background-image:none;border:1px solid transparent;border-radius:4px;margin-bottom:8px;margin-right:15px;margin-top:8px;padding:9px 10px;position:absolute;right:0;top:0;z-index:1;}
    
    </style>
</head>
<body>
    <div class="container-fluid">
        <a class="navbar-brand" href="javascript:history.go(-1);">
            <span class="glyphicon glyphicon-menu-left"></span>
        </a>
        <p class="navbar-text text-center">商品详情</p>
        <button class="navbar-toggle" data-target=".top-menu" data-toggle="collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
</body>
</html>

 

手机版网站顶部导航条的布局


联系
我们