html+css实战99-新浪导航内容div

教程管理员发布于2023-09-30 10:07 HTML教程 157

简介： html+css实战99-新浪导航内容div

<!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>Document</title>
    <style>
        .box {
            height: 40px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }

        /* 后代: box里面的a */
        .box a {
            width: 80px;
            height: 40px;
            /* 推荐先加上: 清楚的看到文字在什么位置 */
            /* background-color: #edeef0; */
            display: inline-block;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }

        .box a:hover {
            background-color: #edeef0;
            color: #ff8400;
        }
    </style>

    <!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 -->
</head>
<body>
    <div class="box">
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
        <a href="#">新浪导航</a>
    </div>
    <p>
        <a href="#"></a>
    </p>
</body>
</html>

标签：#阿里 #开发者 #新浪 #实战 #内容 #社区

上一篇：HTML 修改img标签的src属性
下一篇：有关PHP、HTML单引号、双引号转义以及转成HTML实体的那些事！

html+css实战99-新浪导航内容div

相关推荐

会员中心

下载中心

图片素材

关注微信

关于我们

QQ在线客服

关注微信领优惠