码迷,mamicode.com
首页 > Web开发 > 详细

Web网页简单的静态导航菜单的制作

时间:2016-05-07 08:58:30      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:

Web网页导航菜单的制作


最近初学Html/Css,今天学习了一个简单的静态导航条的制作。属于很简单,很基础的东西。
思路:导航菜单–>书籍的目录,条目性结构–>用无需列表构建导航菜单

1. 首先在html代码中建立ul:

    <ul>
        <li><a href="#">首&nbsp;页</a></li>
        <li><a href="#">新闻快讯</a></li>
        <li><a href="#">产品展示</a></li>
        <li><a href="#">售后服务</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>


效果如下(浏览器中显示会有下划线,我们在第二步中进行去除):


2. 这是我们有了基本目录,我们建立CSS文件,引入到html中,然后进行样式清除,既将本来的样式抹掉,并建新样式:

  • 基本的样式清除: *{margin:0;padding:0}

  • 无序列表圆点去除:li{list-style-type: none;}

  • 下划线去除: a{text-decoration:none}

同时,在此基础上进行一些CSS的自定义。

  • a:hvoer是一个CSS伪类,用于鼠标移到a的时候的样式
    最终CSS代码:
   *{margin: 0;padding: 0;font-size: 20px};

   ul{width:100px}

li{list-style-type: none;}

   a{text-decoration:none;display:block;height: 30px;line-height: 30px;width: 100px;background-color: #ccc;margin-bottom: 1px;text-indent: 10px}

   a:hover{background-color: #f60;color: #fff};

需要将a标签设置为块元素,才能设高宽、hover效果 代码:a{display:block}

文本缩进标签 text-indent 不会影响总体宽度

3.效果

技术分享

Web网页简单的静态导航菜单的制作

标签:

原文地址:http://blog.csdn.net/at_wangwei/article/details/51330797

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!