HTML如何创建二级目录,垂直树状图
分类:高并发

HTML如何创建二级目录,HTML创建二级目录

#classify ul li div{width:100px;  height:200px;  display:none;  position:absolute;  left:100px;  top:0px;}
    
#classify ul li:hover div {  display:block;}


主要用到的CSS代码就是上面用的这两个CSS了


然后就没有了,这个其实比较容易 , 没有涉及到js , 能够比较简单的实现了 , 当然效果也是不赖 , 还有就是很多网站都是必须要用到这个的

#classify ul li div{width:100px; height:200px;display:none; position:absolute;left:100px; top:0px;} #classify ul li:hover div...

转载: 

jquery 实现toolbar与网页浮动工具条jQuery实现方法 /* 基本StructureWe'll更新index.php教程的HTML代码和对新闻联播style.css教程中的CSS代码。 我们建立了一个固定的面板两个浮动方面,我们将在第二个步骤与他们的图标和提示气泡,一个快速菜单和“隐藏按钮列表”。 我们还可以期待一个“显示按钮”,它是有用的,当面板隐藏,我们要重新激活它。基于这个原因,我们添加id为toolbarbut div标签。 HTML和CSS代码 在这里,网页的基本结构。 html 代码 复制代码 代码如下:

CSS3 垂直树状图——运用 :before 和 :after,css3树状

直接上图(原网址),还有步骤想详解视频。自己CSS3练习demo。

 【demo】

图片 1

【HTML】

<div class="tree">
        <ul>
            <li>
                <a href="#">parent</a>
                <ul>
                    <li>
                        <a href="#">child</a>
                        <ul>
                            <li>
                                <a href="#">Grant child</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">child</a>
                        <ul>
                            <li><a href="#">Grant child</a></li>
                            <li>
                                <a href="#">Grant child</a>
                                <ul>
                                    <li><a href="#">Great Grant child</a></li>
                                    <li><a href="#">Great Grant child</a></li>
                                    <li><a href="#">Great Grant child</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Grant child</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>    
    </div>

 

 【CSS3】

*{
  margin:0;
  padding:0;
}
.tree ul{
  padding-top:20px;
  position: relative;
  webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition:all .3s;
}
.tree li{
  float:left;
  list-style: none;
  text-align: center;
  position: relative;
  padding:20px 5px 0 5px;
  webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition:all .3s;
}
/*利用::before,::after作分支线*/
.tree li::before,.tree li::after{
  content:"";
  position: absolute;
  top:0;
  right:50%;
  width:50%;
  height:20px;
  border-top:1px solid #ccc;
}
.tree li:after{
  right:auto;
  left:50%;
  border-left:1px solid #ccc;
}
.tree li:first-child::before,.tree li:last-child::after{
  border:0 none;
}
.tree li:last-child::before{
  border-right:1px solid #ccc;
  -webkit-border-radius: 0 10px 0 0;
  -moz-border-radius: 0 10px 0 0;
  border-radius: 0 10px 0 0;
}
.tree li:first-child::after{
  -webkit-border-radius: 10px 0 0 0;
  -moz-border-radius: 10px 0 0 0;
  border-radius: 10px 0 0 0;
}

/*删除仅只有一个分支的分支线*/
.tree li:only-child::before,.tree li:only-child::after{
  border:none;
}
.tree li:only-child{
  padding-top:0;
}

/*添加仅只有一个分支的下分支线*/
.tree ul ul::before{
  content:"";
  position: absolute;
  top:0;
  left:50%;
  border-left:1px solid #ccc;
  width:0;
  height:20px;
}
.tree a{
  display: inline-block;
  border:1px solid #ccc;
  padding: 5px 10px;
  color:#666;
  text-decoration: none;
  padding:10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition:all .3s;
}

/*添加选中状态*/
.tree li a:hover,.tree li a:hover+ul li a{
  background-color: #c8e4f8;
  color: #000;
  border: 1px solid #94a0b4;
}
.tree li a:hover+ul li:after,.tree li a:hover+ul li:before,.tree li a:hover+ul::before,.tree li a:hover+ul ul::before{
  border-color: #94a0b4;
}

 

垂直树状图——运用 :before 和 :after,css3树状 直接上图(原网址),还有步骤想详解视频。自己CSS3练习demo。 【demo】 【HTML】 div class...

导航菜单主要是由列表做出来的。不同的导航菜单还需要与<div>相结合来完成的。  

css代码 复制代码 代码如下: div#toolbar, div#toolbarbut { position: fixed; /* set fixed position for the bar */ bottom: 0px; right: 0px; z-index: 9999; /* keep the bar on top */ height: 36px; background: url; /* CSS3 */ -moz-border-radius-topleft: 8px; -khtml-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; -moz-border-radius-topright: 8px; -khtml-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px; -moz-box-shadow: 0px 1px 10px #666, inset 1px 1px 0px #a4a4a4; /* inset creates a inner-shadow */ -khtml-box-shadow: 0px 1px 10px #666; -webkit-box-shadow: 0px 1px 10px #666; /* CSS3 end */ border-top: 1px solid #eee; border-left: 1px solid #eee; border-right: 1px solid #eee; } div#toolbar { width: 85%; min-width: 700px; /* to limit the width when there is an excessive window resize */ margin: 0px auto; /* centered toolbar */ left: 0px; } div#toolbar a:hover { border: none; /* fix ‘hover' (a:hover {border-bottom: 1px dotted #666;}) border in the News Aggregator */ } div#toolbarbut { /* div for the ‘hide status' */ width: 60px; height: 15px; margin-right: 3%; display: none; } .leftside { float: left; } .rightside { float: right; } 显示/隐藏按钮现在,我们可以添加“显示按钮”的代码。 复制代码 代码如下:

一种菜单式横着的:

show bar

代码如下写:

下面的属性相对CSS类。 复制代码 代码如下: span.showbar a { /* show button */ padding: 5px; font-size: 10px; color: #989898; } 我们完成了后来的右侧,但现在我们可以添加“隐藏按钮”在ID为rightside分区,如图所示。 复制代码 代码如下:

HTML:

<ul>
 
 
 
 
 </ul>

css 复制代码 代码如下: span.downarr { /* hide button */ float: right; border-left: 1px solid #a4a4a4; } span.downarr a { display: block; width: 36px; height: 26px; padding: 25px 0 0 10px; background: url no-repeat 5px 7px; } 显示/隐藏效果与jQuery首先我们需要下载的jQuery,并激活头index.php的标记。 复制代码 代码如下:

css:

我们要隐藏面板上“隐藏按钮”,点击工具栏时,应当有不可见的“显示按钮”,使我们能够恢复的面板。我们可以使用下面的jQuery的解决方案。 复制代码 代码如下:

ul{
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

现在我们可以隐藏和显示的bar HTML和CSS代码的左侧 更新索引用下面的XHTML代码。我们添加一个普通无序列表来创建的图标顺序,一个DIV标签范围内的总表,以实现工具提示气泡里的标签嵌套。 复制代码 代码如下: html

一种是竖着的与横着的都有的:

    • 580 Readers
    • [Subscribe]
    • Share Page
    • | Profile
    • ReTweet
    • | Profile
    • Bookmark
    • | Profile
    • Digg
    • | Profile
    • Stumble
    • | Profile

HTML:

css代码 *– Left Side –*/ ul#social li { display: inline; } a.rss { display: inline-block; width: 104px; height: 35px; margin-left: 5px; background: url no-repeat; } a.facebook, a.twitter, a.digg, a.delicious, a.stumble { display: inline-block; width: 40px; height: 35px; margin-top: 1px; } a.rss:hover, a.facebook:hover, a.twitter:hover, a.digg:hover, a.delicious:hover, a.stumble:hover { background-position: 1px 1px; /* simple css hover effect */ } a.facebook { background: url no-repeat; } a.twitter { background: url no-repeat; } a.delicious { background: url no-repeat; } a.digg { background: url no-repeat; } a.stumble { background: url no-repeat; } .tip { position: absolute; /* important */ top: -75px; width: 250px; height: 78px; background: url no-repeat; float: left; display: none; } /* custom distances for the icons */ #tipfacebook { left: 75px; } #tiptwitter { left: 120px; } #tipdelicious { left: 165px; } #tipdigg { left: 210px; } #tipstumble { left: 255px; } .tip ul { padding: 22px 0 0 25px; } .tip ul li { display: inline; padding-left: 3px; } .tip ul li a { font-size: 18px; color: #989898; } .tip ul li a:hover { color: #666; } .tip ul li small { font-size: 10px; } jquery代码 //show tooltip when the mouse is moved over a list element $.hover.find.show” for IE $.mouseleave { //hide tooltip when the mouse moves off of the element $.hide; OK好了,我们的jquery 实现toolbar与网页浮动工具条jQuery实现方法就讲完了。 ?>

<div class="nav1">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

CSS:

 div{
     border: 1px red solid;
 }

 ul{
     list-style:none
 }
a{
    text-decoration: none;
}
.nav1{
        width:960px;
        height:40px;
        margin: 0 auto;
        border-radius:0px 8px 8px 0px;
       
}

 .ul1 li{
       width:100px;
       height: 100%;
       float:left;
       text-align: center;
       line-height: 40px;
       }
.ul1 li a{
    color: #fff;
    display: block;
    width:100%;
    height: 100%;
}
.ul1 li a:hover{
  
 }

.nav2{
    width:220px;
    height: 300px;
    display: none;
    position: relative;
}

.ul2 li{
    float:none;
   
    width:100%;
    text-align: left;
}

#lione:hover .nav2{
     display: block;
}

.nav3{
    width:740px;
    height:300px;
    position: absolute;
    left:220px;
    top:0px;
   
    border-radius:0px 8px 8px 0px ;
    display: none;
}

.ul2 li:hover .nav3{
    display: block;
}

本文由10bet手机官网发布于高并发,转载请注明出处:HTML如何创建二级目录,垂直树状图

上一篇:加载网页 下一篇:没有了
猜你喜欢
热门排行
精彩图文