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>

posted @   前端导师歌谣  阅读(44)  评论(0)  编辑  收藏  举报
相关博文：
· html+css实战102-新浪导航padding优化
· html+css实战85-综合案例1
· 14-2·100 css 新浪导航案例
· css 定位
· 12-2`100 css五彩导航
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示