html+css实战178-快捷导航布局

最新推荐文章于 2024-03-22 23:43:25 发布

前端大歌谣

最新推荐文章于 2024-03-22 23:43:25 发布

阅读量70

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/geyaoisnice/article/details/125267193

版权

html+css专栏专栏收录该内容

199 篇文章 2 订阅

订阅专栏

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>

运行结果