h5标题和列表的学习

一、今天需要学习的内容，标题与目录

效果图：

（1）方法一：

标题列表代码：

<div>

            <ulclass="index_right">

                <li><b>首页</b></li>

                <li><b>小鸟掌学</b> </li>

                <li><imgsrc="../img/nav_xiajiantou.png"style="margin-left:-10px;margin-top:-5px;"/></li>

                <li><b>小鸟动态</b></li>

                <li><b>企业文化</b></li>

                <li><imgsrc="../img/nav_xiajiantou.png"style="margin-left:-10px;margin-top:-5px;"/></li>

                <li><b>人力资源</b></li>

                <li><imgsrc="../img/nav_xiajiantou.png"style="margin-left:-10px;margin-top:-5px;"/></li>

                <li><b>联系我们</b></li>

            </ul>

         </div>

css部分：

.index_right{

   position:absolute;

   right:10%;

   top:35px;

   bottom:0;

}

 

li{

   float:left;

   list-style:none;

   margin-left:20px;

   font-size:18px;

   color:rgb(255,255,255);

   font-family:"楷体";

}

方法二：

代码部分：

div class="index_nav">

            <h3onclick="javascript:window.location.href='index.html';">首页</h3>

             <div>

                <h3>小鸟掌学

                 <spanclass="xiajaintou"></span>

                 </h3>

             </div>

            

            <h3>小鸟动态</h3>

            <div>

                <h3>企业文化

                   <spanclass="xiajaintou"></span>

                </h3>

            </div>

            <div>

                <h3>人力资源

                <spanclass="xiajaintou"></span>

                </h3>

            </div>

            <h3>联系我们</h3>

         </div>

css部分：

.index_nav{

   position:absolute;

   width:650px;

   height:25px;

   right:8%;

   top:30px;

   bottom:0;

}

h3{

   font-family:"楷体";

   font-size:18px;

   float:left;

   margin-left:20px;

   color:#fff;

   cursor:pointer;

}

.xiajaintou{

   width:25px;

   height:25px;

   background: url(../img/nav_xiajiantou.png);

   margin-left:5px;

   float:right;

}

总结：第一种方法后面不知道要怎么写了，囧！

（2）、目录部分代码

<div>

                <h3>小鸟掌学

                 <spanclass="xiajaintou"></span>

                 <ul>

                   <lionclick="javascript:window.location.href='index.html'">小鸟掌学主页</li>

                   <li>小鸟掌学概述</li>

                   <li>对企业的价值</li>

                   <li>小鸟掌云</li>

                   <li>微客联盟</li>

                   <li>APP下载</li>

                 </ul>

                 </h3>

             </div>

css 部分：接上标题部分的css
.index_navh3ul{

   display:none;

  

}

.index_navh3:hoverul{

   position:fixed;

   float:none;

   display:block;

   list-style:none;

   background:#36264a;

   padding:10px;

   margin-left:-10px;

   cursor:pointer;

 

}

.index_navh3ulli{

  

   font-size:14px;

   width:100px;

   height:35px;

}

//下面这个完全无效果 ，囧

.index_navh3ul:hoverli{

  

   display:block;

   background:#3498db;

}

 

总结：没有系统的学习，只会几个标签生搬硬套。没有实现真正的效果

二、额外收获的小知识

（1）、hbuilder整理代码的快捷键Ctrl+shift+F

（2）、无序序列如何将前面圆点去除，在li标签加上list-style：none

（3）、排列方式由列式改为横式，只需加上float：left

（4）、li标签设置每个标签之间的间隔margin-left：

（5）、如何将光标移到文字上时，显示手指指向的图标cursor:pointer

（6）、点击链接

onclick="javascript:window.location.href='index.html';"