【一、项目可行性】

让大量的人去学习html,以广东省科技学校的导航条为例子, 教大伙儿如何去做一个横着的导航条。

【二、新项目提前准备】

提前准备一个程序编写的手机软件Dreamweaver,打开软件点一下文档在建一个叫导航条的新项目,如下图所显示。

点一下明确以后,会弹出来下面的图。

【三、项目实施】

1. 在

标识里边写出一个架构:

注:

  • 标识能用在有序列表 (
      ) 和无序列表 (
      ) 中。

      2. 写完运作(运作:右下方点一下f12运作)见到实际效果,如下图所显示:

      3. 添加css样式表(这儿选用內部css样式表)。

      3.1 CSScss样式表有二种添加的方法 如图所示:

      3.2 除去li产生的黑点儿:

    li{   list-style: none;   }
    

    4. 根据所述流程,运作一下 如下图所显示:

    5. 设置一下导航条的款式。

    1. 设置一下目录ul 的总宽 ,高度,背景色,文字位置垂直居中(margin:0 auto)。

    Li 一样的设置高度 。

    1. 除掉黑点儿 ,再设置文本的色调 ,高度 ,内边距 ,(本人爱好 看见舒适就可以了)

    2. 设置文本的尺寸,除掉下横线(text-decoration:none;)。

    下边是详尽备注名称

    ul li{float: left; # 把內容左波动,那样能够 横着排序  
    width: 100px;  # 设置每一个li的宽  
    height: 30px;  # 设置每一个li的高  
    background-color:pink  # 设置li的背景色为粉红色  
    border: 1px solid 6495ED; # 设置li的外框色调及其外框尺寸  
    text-align: center;  # 设置li中的文本款式为垂直居中  
    line-height: 30px;  # 设置li文字举例说明上外框的高度
    }
    ulli:hover{background-color: aqua;}  # 设置将电脑鼠标放进li时的背景色
    ul li:hover a{color: black;}  # 设置将电脑鼠标放进li中的a标签的內容时的文本色调
    

    6. 详细编码,如下图所显示。

    7. 运作以后,设计效果图如下图所显示。

    【四、小结】

    1. Html能做的实际效果十分多,希望你细心的去学习,另外期待碰到困难积极检索,试着一下都会有解决方案。

    2. 假如必须文中源代码,请在公众号后台回应“导航条”三个字获得。

    看了文中有获得?请分享共享给大量的人

    IT共享资源世家
    想学习培训大量Python爬虫技术与大数据挖掘专业知识,可前去行业网站:http://pdcfighting.com/

  • 文章来源于网络,如有侵权请联系站长QQ61910465删除
    本文版权归趣快排营销www.SEOguruBLOG.com 所有,如有转发请注明来出,竞价开户托管,seo优化请联系QQ㊣61910465