html+css实战179-快捷导航布局-内容

 commom.css

/* 各个页面相同的样式表 : 头, 尾部 */
/* 版心 */
.wrapper {
    width: 1240px;
    margin: 0 auto;
}
 
/* 快捷导航 */
.shortcut {
    height: 52px;
    background-color: #333;
}
 
.shortcut .wrapper {
    height: 52px;
    background-color: pink;
}
 
/* 目的: 所有的文字内容居右侧对齐 */
.shortcut .wrapper ul {
    float: right;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目代码准备</title>
    <!-- 外链式样式表的生成 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
        <!-- 快捷导航 -->
        <div class="shortcut">
            <div class="wrapper">
                <ul>
                    <li><a href="#">请先登录</a></li>
                    <!-- <li><a href="#">免费注册</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">会员中心</a></li>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">在线客服</a></li>
                    <li><a href="#"><span></span>手机版</a></li> -->
                </ul>
            </div>
        </div>
</body>
</html>

运行结果

posted @   前端导师歌谣  阅读(27)  评论(0)  编辑  收藏  举报
相关博文：
·  html+css实战178-快捷导航布局
·  html+css实战180-header-布局
·  响应式导航--可下拉
·  列表导航栏HTML/CSS
·  布局实战,导航栏的制作
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示