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

教程管理员发布于2023-09-25 11:31 HTML教程 192

简介： 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>

标签：#阿里 #开发者 #实战 #布局 #快捷 #内容

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

相关推荐

会员中心

下载中心

图片素材

关注微信

关于我们

QQ在线客服

关注微信领优惠