五彩导航条

五彩导航条

5个a,给a添加背景图片即可

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            a{
                width: 120px;
                height: 58px;
                display: inline-block;
                text-align: center;
                text-decoration: none;
                font:  700 17px/50px "微软雅黑";
            }
            .one{
                background-image: url(images/bg1.png);
            }
       .two{
                background-image: url(images/bg2.png);
            }   .three{
                background-image: url(images/bg3.png);
            }   .for{
                background-image: url(images/bg4.png);
            }
        </style>
    </head>
    <body>
        <a href="#" class="one">五彩导航条</a>
<a href="#" class="two">五彩导航条</a>
<a href="#"class="three">五彩导航条</a>
<a href="#" class="three">五彩导航条</a>
<a href="#" class="for">五彩导航条</a>
    </body>
</html>

中间有空隙是因为a在不同的行中,让a在同一行即可

五彩导航条
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            a{
                width: 120px;
                height: 58px;
                display: inline-block;
                text-align: center;
                text-decoration: none;
                font:  700 17px/50px "微软雅黑";
            }
            .one{
                background-image: url(images/bg1.png);
            }
       .two{
                background-image: url(images/bg2.png);
            }   .three{
                background-image: url(images/bg3.png);
            }   .for{
                background-image: url(images/bg4.png);
            }
        </style>
    </head>
    <body>
        <a href="#" class="one">五彩导航条</a><a href="#" class="two">五彩导航条</a><a href="#"class="three">五彩导航条</a><a href="#" class="three">五彩导航条</a><a href="#" class="for">五彩导航条</a>
    </body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,511评论 25 708
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,991评论 19 139
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,549评论 0 17
  • 一、网络营销目的 1、宣传品牌 对项目进行线上宣传,吸引人气,促使更多的人关注该项目楼盘,提高项目楼盘知名度,建立...
    Cook阅读 4,388评论 0 3
  • 2017年12月20日星期三晴 今天早晨早早起床把孩也叫起来了,孩子还是迷迷糊...
    陈怡彤妈妈阅读 245评论 0 0