搜索
您的当前位置:首页正文

DIV+CSS构成的树型菜单_html/css

2023-11-27 来源:学路情感网

这是用DIV+CSS+JS构成的树型菜单,采用列表,符合WEB标准,在大多数WIN浏览器下,兼容性不错,xhtml见效果页,我现在做的是二个菜单,如果需要添加,可把......之间的内容加上去,"submenuid"加1,查看效果。

CSS代码

body {margin: 0px;padding: 0;font: 12px " Arial, Helvetica, sans-serif;background: #FFFFFF;text-align: center;}ul{margin: 0;padding: 0;list-style: none;}#treenav {margin: 10px;text-align: left;}#treenav ul li {margin: 1px 0;padding: 0;font-size: 11px;}#treenav ul.expanded {display: block;}#treenav ul.expanded,#treenav ul.collapsed {margin: 5px 10px;}#treenav ul.collapsed {display: none;}.expanded li,.collapsed li{border-bottom: 1px dashed #CCCCCC;width: 100px;}.listhead {font-weight: bold;display: block;font-size: 12px;color: #333333;background: #F1F1F1;padding: 3px;width: 120px;margin: 1px 0;}#treenav a {text-decoration: none;color: #666666;}#treenav a:hover {color: #990000;}

JS代码

function toggleMenu(id){ element = document.getElementById(id); element.className = (element.className.toLowerCase() == 'expanded'?'collapsed':'expanded'); } onload = function() { toggleMenu('submenuid'); }

小编还为您整理了以下内容,可能对您也有帮助:

HTML和css怎样制作横排导航条,菜单

很多小伙伴学习了一段时间的HTML和css,就想自己动手试试制作导航条菜单,不过却没有思路,今天小编我就来分享一下HTML和css制作导航条的实例,大家可以参考参考。

如图,制作导航条菜单一般是用一个div嵌套ul和li标签,然后li里面有a标签。

布局做好之后,开始写导航条的样式,如图,先清除导航条的margin和padding。

然后定位导航条的div,这里我就用绝对定位来居中,如果你有其他导航条居中方法可以忽略这一条。

然后设置导航条的li左浮动,并且去掉li前面的圆点,让导航条更好看。

然后设置导航条的a标签转块级,以及导航条菜单的宽高,文字颜色,水平垂直居中和背景色以及去掉a标签的下划线。

接着设置鼠标经过导航条菜单变色即可。

最后,一个完美的导航条菜单就完成了,简直是太简单了。

DIV+CSS+JS二级树型菜单问题

方法1:

<div id="PARENT">

<ul id="nav">

<li><a href="#Menu=ChildMenu1" onClick="DoMenu('ChildMenu1')">菜单一</a>

<ul id="ChildMenu1" class="expanded"> 将这里的class改为expanded 这样就展开了

方法二:

在页面底部增加

<script>DoMenu('ChildMenu1');</script>

div+css问题 js树形菜单 展开变成减号 闭合是加号 怎么实现的

前几天用非常规方法实现了一个山寨版树形菜单。。。如下。。。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title></title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<script type="text/javascript">

function display(jia,zi) {

if(document.getElementById(jia).innerHTML== '+'){

document.getElementById(zi).style.display="";

document.getElementById(jia).innerHTML= '-';

return;

}

if(document.getElementById(jia).innerHTML== '-'){

document.getElementById(zi).style.display= 'none';

document.getElementById(jia).innerHTML= '+';

return;

}

}

function exit(){

//window.location.href='../ht.jsp';

//alert('您已安全退出');

}

</script>

<style type="text/css">

.juli{margin-top:20px;<br> border:none;<br> }

.neijuli{

padding-top:8px;

line-height:1.5em;

font-size:23px;

}

.fuhao { border:1px solid white;

color:#FFFFFF;

}

body {

background-color: #7A99E0;

font-size:25px;

}

.txtc{color:#FFFFFF}

.smalltxt{font-size:17px}

a{text-decoration:none;}

</style> </head>

<body>

<div class="smalltxt txtc" style="margin-bottom:30px">

系统后台管理面板

</div><!--开始部分===================================== -->

<span class="smalltxt txtc"><a href="admin/loginout.jsp" target="_top" style="color:white">[安全退出]</a> <a href="index.jsp" style="color:white" target="_top">[返回首页]</a></span><!-- 商品管理开始================================ -->

<div id="sp" name="sp" class="juli">

<span id="jia" class="fuhao" >+</span>

<a style="cursor:hand" onClick="display('jia','zi')" class="txtc">商品管理</a>

<!-- 子菜单 -->

<div id="zi" name="zi" class="neijuli" style="display:none">

<a href="admin/addpro.jsp" target="mainFrame">添加商品</a><br>

<a href="admin/controlpro.jsp" target="mainFrame">管理商品</a>

</div>

</div>

<hr class="txtc"><!--新闻管理开始================================= -->

<div id="xw" name="xw" class="juli" >

<span id="jia1" class="fuhao">+</span>

<a style="cursor:hand" onClick="display('jia1','zi1')" class="txtc">新闻管理</a>

<!-- 子菜单 -->

<div id="zi1" class="neijuli" style="display:none">

<a href="admin/addnews.jsp" target="mainFrame">添加新闻</a><br>

<a href="admin/controlnews.jsp" target="mainFrame">管理新闻</a>

</div>

</div>

<hr class="txtc"><!--留言管理开始================================== -->

<div id="ly" name="ly" class="juli">

<span id="jia2" class="fuhao">+</span>

<a style="cursor:hand" onClick="display('jia2','zi2')" class="txtc">系统管理</a>

<!-- 子菜单 -->

<div id="zi2" class="neijuli" style="display:none">

<a href="#">关闭系统</a><br>

<a href="#">XXX</a>

</div>

</div>

<hr class="txtc">

</body>

</html>

div+css竖二级菜单,展开减号,不展开加号的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul{margin:0;padding:0;list-style-type:none;}
a{ text-decoration:none;}
.mold_open_hover,.mold_open{background-image:url(../image/open.png);background-repeat:none;display:inline-block;width:10px;height:6px;margin-left:10px;position:relative;top:-2px;}
.mold_open{background-position:0 -6px;}
.mold_open_hover{background-position:0 0;}
.mod-menu{position:relative;z-index:1000;left:-1px;margin-left:100px;}
h1{margin-left:100px;}
.menu-cont-list a:hover{text-decoration:underline;}
.mod-menu .menu-item{width:220px;border-top:solid 1px #d59bb2;border-bottom:solid 2px #d59bb2;position:relative;z-index:22;}
.mod-menu .menu-item li{height:47px;line-height:47px;background:#feebf3;border-top:solid 1px #f0bfd3;}
.mod-menu .menu-item li.mouse-bg{background:url(../image/mouse-menu-bg.jpg) no-repeat #fff;position:relative;z-index:22;margin-right:-4px;}
.mod-menu .menu-item a{color:#c81d61;font-size:16px;padding-left:33px;display:block;height:45px;border-top:solid 1px #f1f2f7;}
.mod-menu .menu-item a:hover{ text-decoration:none;}
.mod-menu .menu-cont{position:absolute;left:220px;top:1px;background:#fff;width:573px;border:solid 1px #F0BFD3;box-shadow:2px 0 10px rgba(210,33,103,0.25);z-index:20;}
.mod-menu .menu-cont-list{padding:0 30px;}
.mod-menu .menu-cont-list li{border-bottom:dotted 1px #f0bfd3;padding:10px 0;}
.mod-menu .menu-cont-list li:last-child{border-bottom:none;}
.mod-menu .menu-cont-list h3{font-size:14px;font-weight:700;}
.mod-menu .menu-cont-list h3 a{color:#222;}
.mod-menu .menu-list-link a{color:#666;line-height:24px;}
.mod-menu .menu-list-link .long-string{color:#ccc;font-size:12px;padding:0 10px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var mod_menu=$(".mod-menu");//导航模块区
var menu=function(){
var menuItem=$(".menu-item li");//选择导航列表
menuItem.each(function(){
var _index=$(this).index();//获取当前选择菜单列表的索引
$(this).mouseenter(function(){
var y = $(this).position().top+1;//获取当前鼠标滑过的列表的顶部坐标
$(".menu-cont").show();
$(".menu-cont").css("top",y);//需要显示的对应索引内容
$(this).addClass("mouse-bg").siblings().removeClass("mouse-bg");
$(".menu-cont>div").eq(_index).show().siblings().hide();
});
});/*导航菜单菜单*/
$(".mod-menu").mouseleave(function(){
$(".menu-cont").hide();
menuItem.removeClass("mouse-bg");
})
}//展开二级菜单
menu();//执行展开二级菜单函
});
</script>
</head>
<body>
<h1>简单的2级菜单导航</h1>
<div class="mod-menu f-l">
<div id="column-left">
<ul class="menu-item">
<li class=""><a href="trade-wedding.html">Wedding</a></li>
<li class=""><a href="trade-occasion-dresses.html">Occasion Dresses</a></li>
<li class=""><a href="trade-women-s-clothing.html">Women's Clothing</a></li>
<li class=""><a href="trade-women-s-shoes.html">Women's Shoes</a></li>
<li class=""><a href="trade-accessories.html">Accessories</a></li>
<li class=""><a href="trade-beauty-health.html">Beauty & Health</a></li>
</ul><!--一级菜单列表-->
<div class="menu-cont hide" style="display: none; top: 241px;">
<div class="menu-cont-list" style="display: none;">
<ul>
<li>
<h3><a href="wedding-dresses-c1_2.html">Wedding Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="bridesmaid-dresses-c1_3.html">Bridesmaid Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="wedding-party-dresses-c1_4.html">Wedding Party Dresses</a></h3>
<div class="menu-list-link">
<a title="" href="mother-of-the-brides-dresses-c1_4_36.html">Mother of the Brides Dresses</a>
<span class="long-string">|</span>
<a title="" href="flower-girl-dresses-c1_4_37.html">Flower Girl Dresses</a>
<span class="long-string">|</span>
<a title="" href="wedding-guest-dresses-c1_4_38.html">Wedding Guest Dresses</a>
</div>
</li>
<li>
<h3><a href="wedding-accessories-c1_6.html">Wedding Accessories</a></h3>
<div class="menu-list-link">
<a title="" href="fabric-swatch-c1_6_100.html">Fabric Swatch</a>
<span class="long-string">|</span>
<a title="" href="bridal-lingerie-c1_6_101.html">Bridal Lingerie</a>
<span class="long-string">|</span>
<a title="" href="wedding-veils-c1_6_48.html">Wedding Veils</a>
<span class="long-string">|</span>
<a title="" href="wedding-gloves-c1_6_51.html">Wedding Gloves</a>
<span class="long-string">|</span>
<a title="" href="wedding-shawls-c1_6_47.html">Wedding Shawls</a>
<span class="long-string">|</span>
<a title="" href="wedding-flowers-c1_6_52.html">Wedding Flowers</a>
<span class="long-string">|</span>
<a title="" href="wedding-petticoats-c1_6_120.html">Wedding Petticoats</a>
</div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display: none;">
<ul>
<li>
<h3><a href="prom-dresses-c103_39.html">Prom Dresses</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="military-ball-dresses-c103_118.html">Military Ball Dresses</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="evening-dresses-c103_40.html">Evening Dresses</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="cocktail-dresses-c103_41.html">Cocktail Dresses</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="ball-gowns-c103_43.html">Ball Gowns</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="homecoming-dresses-c103_44.html">Homecoming Dresses</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="little-black-dresses-c103_45.html">Little Black Dresses </a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="quinceanera-dresses-c103_46.html">Quinceanera Dresses</a></h3>
<div class="menu-list-link">
</div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display: none;">
<ul>
<li>
<h3><a href="dresses-c7_8.html">Dresses</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="clubwear-c7_9.html">Clubwear</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="leggings-c7_12.html">Leggings</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="lingeries-c7_13.html">Lingeries</a></h3>
<div class="menu-list-link">
<a title="" href="bras-c7_13_54.html">Bras</a>
<span class="long-string">|</span>
<a title="" href="babydolls-c7_13_56.html">Babydolls</a>
<span class="long-string">|</span>
<a title="" href="teddies-c7_13_57.html">Teddies</a>
<span class="long-string">|</span>
<a title="" href="panties-c7_13_58.html">Panties</a>
<span class="long-string">|</span>
<a title="" href="hosiery-c7_13_59.html">Hosiery</a>
</div>
</li>
<li>
<h3><a href="bustiers-corsets-c7_102.html">Bustiers & Corsets</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="costumes-c7_53.html">Costumes</a></h3>
<div class="menu-list-link">
<a title="" href="sexy-costumes-c7_53_110.html">Sexy Costumes</a>
<span class="long-string">|</span>
<a title="" href="christmas-costumes-c7_53_119.html">Christmas Costumes</a>
<span class="long-string">|</span>
<a title="" href="halloween-costumes-c7_53_111.html">Halloween Costumes</a>
<span class="long-string">|</span>
<a title="" href="halloween-accessories-c7_53_112.html">Halloween Accessories</a>
<span class="long-string">|</span>
<a title="" href="zentai-c7_53_121.html">Zentai</a>
</div>
</li>
<li>
<h3><a href="swimwear-c7_11.html">Swimwear</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="activewear-c7_10.html">Activewear</a></h3>
<div class="menu-list-link">
</div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display: none;">
<ul>
<li>
<h3><a href="heels-c116_60.html">Heels</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="pumps-c116_117.html">Pumps</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="dance-shoes-c116_62.html">Dance Shoes</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="boots-c116_63.html">Boots</a></h3>
<div class="menu-list-link">
</div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display: none;">
<ul>
<li>
<h3><a href="evening-bags-c15_113.html">Evening Bags</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="hats-scarves-c15_16.html">Hats & Scarves</a></h3>
<div class="menu-list-link">
<a title="" href="womens-hats-c15_16_64.html">Womens Hats</a>
<span class="long-string">|</span>
<a title="" href="womens-scarves-c15_16_65.html">Womens Scarves</a>
</div>
</li>
<li>
<h3><a href="jewelry-c15_17.html">Jewelry</a></h3>
<div class="menu-list-link">
<a title="" href="earrings-c15_17_66.html">Earrings</a>
<span class="long-string">|</span>
<a title="" href="necklaces-c15_17_67.html">Necklaces</a>
<span class="long-string">|</span>
<a title="" href="rings-c15_17_68.html">Rings</a>
</div>
</li>
<li>
<h3><a href="watches-c15_18.html">Watches</a></h3>
<div class="menu-list-link">
</div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display: block;">
<ul>
<li>
<h3><a href="wigs-hair-extensions-c19_23.html">Wigs & Hair extensions</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="fascinators-c19_69.html">Fascinators</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="makeup-tools-c19_21.html">Makeup Tools</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="spas-massagers-c19_71.html">Spas & Massagers</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="health-fitness-c19_70.html">Health & Fitness</a></h3>
<div class="menu-list-link">
</div>
</li>
</ul>
</div>
</div>
</div><!--二级菜单内容-->
</div>
</body>
</html>

div+css竖二级菜单,展开减号,不展开加号的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul{margin:0;padding:0;list-style-type:none;}
a{ text-decoration:none;}
.mold_open_hover,.mold_open{background-image:url(../image/open.png);background-repeat:none;display:inline-block;width:10px;height:6px;margin-left:10px;position:relative;top:-2px;}
.mold_open{background-position:0 -6px;}
.mold_open_hover{background-position:0 0;}
.mod-menu{position:relative;z-index:1000;left:-1px;margin-left:100px;}
h1{margin-left:100px;}
.menu-cont-list a:hover{text-decoration:underline;}
.mod-menu .menu-item{width:220px;border-top:solid 1px #d59bb2;border-bottom:solid 2px #d59bb2;position:relative;z-index:22;}
.mod-menu .menu-item li{height:47px;line-height:47px;background:#feebf3;border-top:solid 1px #f0bfd3;}
.mod-menu .menu-item li.mouse-bg{background:url(../image/mouse-menu-bg.jpg) no-repeat #fff;position:relative;z-index:22;margin-right:-4px;}
.mod-menu .menu-item a{color:#c81d61;font-size:16px;padding-left:33px;display:block;height:45px;border-top:solid 1px #f1f2f7;}
.mod-menu .menu-item a:hover{ text-decoration:none;}
.mod-menu .menu-cont{position:absolute;left:220px;top:1px;background:#fff;width:573px;border:solid 1px #F0BFD3;box-shadow:2px 0 10px rgba(210,33,103,0.25);z-index:20;}
.mod-menu .menu-cont-list{padding:0 30px;}
.mod-menu .menu-cont-list li{border-bottom:dotted 1px #f0bfd3;padding:10px 0;}
.mod-menu .menu-cont-list li:last-child{border-bottom:none;}
.mod-menu .menu-cont-list h3{font-size:14px;font-weight:700;}
.mod-menu .menu-cont-list h3 a{color:#222;}
.mod-menu .menu-list-link a{color:#666;line-height:24px;}
.mod-menu .menu-list-link .long-string{color:#ccc;font-size:12px;padding:0 10px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var mod_menu=$(".mod-menu");//导航模块区
var menu=function(){
var menuItem=$(".menu-item li");//选择导航列表
menuItem.each(function(){
var _index=$(this).index();//获取当前选择菜单列表的索引
$(this).mouseenter(function(){
var y = $(this).position().top+1;//获取当前鼠标滑过的列表的顶部坐标
$(".menu-cont").show();
$(".menu-cont").css("top",y);//需要显示的对应索引内容
$(this).addClass("mouse-bg").siblings().removeClass("mouse-bg");
$(".menu-cont>div").eq(_index).show().siblings().hide();
});
});/*导航菜单菜单*/
$(".mod-menu").mouseleave(function(){
$(".menu-cont").hide();
menuItem.removeClass("mouse-bg");
})
}//展开二级菜单
menu();//执行展开二级菜单函
});
</script>
</head>
<body>
<h1>简单的2级菜单导航</h1>
<div class="mod-menu f-l">
<div id="column-left">
<ul class="menu-item">
<li class=""><a href="trade-wedding.html">Wedding</a></li>
<li class=""><a href="trade-occasion-dresses.html">Occasion Dresses</a></li>
<li class=""><a href="trade-women-s-clothing.html">Women's Clothing</a></li>
<li class=""><a href="trade-women-s-shoes.html">Women's Shoes</a></li>
<li class=""><a href="trade-accessories.html">Accessories</a></li>
<li class=""><a href="trade-beauty-health.html">Beauty & Health</a></li>
</ul><!--一级菜单列表-->
<div class="menu-cont hide" style="display: none; top: 241px;">
<div class="menu-cont-list" style="display: none;">
<ul>
<li>
<h3><a href="wedding-dresses-c1_2.html">Wedding Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="bridesmaid-dresses-c1_3.html">Bridesmaid Dresses</a></h3>
<div class="menu-list-link"></div>
</li>
<li>
<h3><a href="wedding-party-dresses-c1_4.html">Wedding Party Dresses</a></h3>
<div class="menu-list-link">
<a title="" href="mother-of-the-brides-dresses-c1_4_36.html">Mother of the Brides Dresses</a>
<span class="long-string">|</span>
<a title="" href="flower-girl-dresses-c1_4_37.html">Flower Girl Dresses</a>
<span class="long-string">|</span>
<a title="" href="wedding-guest-dresses-c1_4_38.html">Wedding Guest Dresses</a>
</div>
</li>
<li>
<h3><a href="wedding-accessories-c1_6.html">Wedding Accessories</a></h3>
<div class="menu-list-link">
<a title="" href="fabric-swatch-c1_6_100.html">Fabric Swatch</a>
<span class="long-string">|</span>
<a title="" href="bridal-lingerie-c1_6_101.html">Bridal Lingerie</a>
<span class="long-string">|</span>
<a title="" href="wedding-veils-c1_6_48.html">Wedding Veils</a>
<span class="long-string">|</span>
<a title="" href="wedding-gloves-c1_6_51.html">Wedding Gloves</a>
<span class="long-string">|</span>
<a title="" href="wedding-shawls-c1_6_47.html">Wedding Shawls</a>
<span class="long-string">|</span>
<a title="" href="wedding-flowers-c1_6_52.html">Wedding Flowers</a>
<span class="long-string">|</span>
<a title="" href="wedding-petticoats-c1_6_120.html">Wedding Petticoats</a>
</div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display: none;">
<ul>
<li>
<h3><a href="prom-dresses-c103_39.html">Prom Dresses</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="military-ball-dresses-c103_118.html">Military Ball Dresses</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="evening-dresses-c103_40.html">Evening Dresses</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="cocktail-dresses-c103_41.html">Cocktail Dresses</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="ball-gowns-c103_43.html">Ball Gowns</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="homecoming-dresses-c103_44.html">Homecoming Dresses</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="little-black-dresses-c103_45.html">Little Black Dresses </a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="quinceanera-dresses-c103_46.html">Quinceanera Dresses</a></h3>
<div class="menu-list-link">
</div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display: none;">
<ul>
<li>
<h3><a href="dresses-c7_8.html">Dresses</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="clubwear-c7_9.html">Clubwear</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="leggings-c7_12.html">Leggings</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="lingeries-c7_13.html">Lingeries</a></h3>
<div class="menu-list-link">
<a title="" href="bras-c7_13_54.html">Bras</a>
<span class="long-string">|</span>
<a title="" href="babydolls-c7_13_56.html">Babydolls</a>
<span class="long-string">|</span>
<a title="" href="teddies-c7_13_57.html">Teddies</a>
<span class="long-string">|</span>
<a title="" href="panties-c7_13_58.html">Panties</a>
<span class="long-string">|</span>
<a title="" href="hosiery-c7_13_59.html">Hosiery</a>
</div>
</li>
<li>
<h3><a href="bustiers-corsets-c7_102.html">Bustiers & Corsets</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="costumes-c7_53.html">Costumes</a></h3>
<div class="menu-list-link">
<a title="" href="sexy-costumes-c7_53_110.html">Sexy Costumes</a>
<span class="long-string">|</span>
<a title="" href="christmas-costumes-c7_53_119.html">Christmas Costumes</a>
<span class="long-string">|</span>
<a title="" href="halloween-costumes-c7_53_111.html">Halloween Costumes</a>
<span class="long-string">|</span>
<a title="" href="halloween-accessories-c7_53_112.html">Halloween Accessories</a>
<span class="long-string">|</span>
<a title="" href="zentai-c7_53_121.html">Zentai</a>
</div>
</li>
<li>
<h3><a href="swimwear-c7_11.html">Swimwear</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="activewear-c7_10.html">Activewear</a></h3>
<div class="menu-list-link">
</div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display: none;">
<ul>
<li>
<h3><a href="heels-c116_60.html">Heels</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="pumps-c116_117.html">Pumps</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="dance-shoes-c116_62.html">Dance Shoes</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="boots-c116_63.html">Boots</a></h3>
<div class="menu-list-link">
</div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display: none;">
<ul>
<li>
<h3><a href="evening-bags-c15_113.html">Evening Bags</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="hats-scarves-c15_16.html">Hats & Scarves</a></h3>
<div class="menu-list-link">
<a title="" href="womens-hats-c15_16_64.html">Womens Hats</a>
<span class="long-string">|</span>
<a title="" href="womens-scarves-c15_16_65.html">Womens Scarves</a>
</div>
</li>
<li>
<h3><a href="jewelry-c15_17.html">Jewelry</a></h3>
<div class="menu-list-link">
<a title="" href="earrings-c15_17_66.html">Earrings</a>
<span class="long-string">|</span>
<a title="" href="necklaces-c15_17_67.html">Necklaces</a>
<span class="long-string">|</span>
<a title="" href="rings-c15_17_68.html">Rings</a>
</div>
</li>
<li>
<h3><a href="watches-c15_18.html">Watches</a></h3>
<div class="menu-list-link">
</div>
</li>
</ul>
</div>
<div class="menu-cont-list" style="display: block;">
<ul>
<li>
<h3><a href="wigs-hair-extensions-c19_23.html">Wigs & Hair extensions</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="fascinators-c19_69.html">Fascinators</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="makeup-tools-c19_21.html">Makeup Tools</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="spas-massagers-c19_71.html">Spas & Massagers</a></h3>
<div class="menu-list-link">
</div>
</li>
<li>
<h3><a href="health-fitness-c19_70.html">Health & Fitness</a></h3>
<div class="menu-list-link">
</div>
</li>
</ul>
</div>
</div>
</div><!--二级菜单内容-->
</div>
</body>
</html>

前端代码div+css是什么意思?

在前端代码中,通常使用div+css来布局用户页面。通过这种组合方式,可以将网页的内容与样式分离,提高了前端开发的速度。下面就来使用div+css来实现两种导航栏的编写吧!

1.导航栏一:

<div id='menu'>

<a href="#">链接</a>|

<a href="#">链接</a>|

<a href="#">链接</a>|

<a href="#">链接</a>|

<a href="#">链接</a>

</div>

*{margin:0;padding:0}

#menu{

min-width:400px;

height:20px;

background:#pink;

text-align:center;

line-height:20px;

font-size:10px;

}

#menu a{

padding:10px;

color:blue;

text-decoration:none;

font-weight:bold

}

#menu a:hover{color:red}

2.导航栏二:

<ul id="menu">

<li><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

<li><a href="#">首页</a></li>

</ul>

*{margin:0;padding:0}

body{min-width:500px;}

li{list-style:none}

body{text-align:center}

a{text-decoration:none}

a:hover{color:#BA2636}

#menu{ width:100%; height:3.75rem; background:#00A2CA;}

#menu li{display:inline; height:3.75rem}

#menu li a{display:inline-block; padding:0 1.25rem; height:3.75rem; line-height:3.75rem;

color:#FFF;font-weight:bold;font-size:1rem}

#menu li a:hover{background:#0095BB}

如何用DIV+CSS进行网页样式布局

在html网页编辑中,对于新手来讲,接触最多的就是div+css;那么如何使用div+css就行网页简单布局呢

一个网页设计时,我们可以将一个页面设置为头部,中间,和底部三部分; 头部有分为店招(logo)和导航等 中间既内容部分,内容也可一个整体,也可左右分离, 底部来页面结尾,一般写版权信息,友情链接等

头部编辑

店招: !doctype html html head meta charset="utf-8" title淘宝助手网/title style #top{ width:1200px; height: auto; margin:0 auto; color:#FFF;} #logo{ width:100%; height:100px; background: #003; } /style /head body div id="top" div id="logo"店招/div div id="nav"导航/div /div !--------头部------------ div id="centre" div id="centreLeft"内容左/div div id="centreRight"内容右/div /div !--------中间------------- div id="bottom"底部/div !-----------底部---------------- /body /html

导航: !doctype html html head meta charset="utf-8" title淘宝助手网/title style a,ul,li,div,span,td{ padding:0; margin:0;} #top{ width:1200px; height: auto; margin:0 auto; color:#FFF;} #logo{ width:100%; height:100px; background: #003; } #nav{ width:100%; height:30px; background:#300} a{ text-decoration: none; display:block;den} ul li{list-style: none;} #navulli{ float:left; margin-left: 50px; line-height:30px; } #navullia{ color:#FFF; font-weight:900px} /style /head body div id="top" div id="logo"店招/div div id="nav" ul lia href="" title="" target="_blank"淘宝/a/li lia href="" title="" target="_blank"图片/a/li lia href="" title="" target="_blank"视频/a/li lia href="" title="" target="_blank"资料下载/a/li lia href="" title="" target="_blank"视频下载/a/li /ul /div /div !--------头部------------ div id="centre" div id="centreLeft"内容左/div div id="centreRight"内容右/div /div !--------中间------------- div id="bottom"底部/div !-----------底部---------------- /body /html

内容

!doctype html html head meta charset="utf-8" title淘宝助手网/title style a,ul,li,div,span,td{ padding:0; margin:0;} #top{ width:1200px; height: auto; margin:0 auto; color:#FFF;} #logo{ width:100%; height:100px; background: #003; } #nav{ width:100%; height:30px; background:#300} a{ text-decoration: none; display:block;} ul li{list-style: none;} #navulli{ float:left; margin-left: 50px; line-height:30px; } #navullia{ color:#FFF; font-weight:900px} /*******===================头====================************/ #centre{ margin:0 auto; width:1200px; height:auto; } #centreLeft{ float:left; width:70%; height:500px;border:1px #333333 solid;} #centreRight{ float: right; width:27%; height:400px;border:1px #333333 solid;} /style /head body div id="top" div id="logo"店招/div div id="nav" ul lia href="" title="" target="_blank"淘宝/a/li lia href="" title="" target="_blank"图片/a/li lia href="" title="" target="_blank"视频/a/li lia href="" title="" target="_blank"资料下载/a/li lia href="" title="" target="_blank"视频下载/a/li /ul /div /div !--------头部------------ div id="centre" div id="centreLeft"内容左/div div id="centreRight"内容右/div /div !--------中间------------- div id="bottom"底部/div !-----------底部---------------- /body /html

底部

!doctype html html head meta charset="utf-8" title淘宝助手网/title style a,ul,li,div,span,td{ padding:0; margin:0;} #top{ width:1200px; height: auto; margin:0 auto; color:#FFF;} #logo{ width:100%; height:100px; background: #003; } #nav{ width:100%; height:30px; background:#300} a{ text-decoration: none; display:block;} ul li{list-style: none;} #navulli{ float:left; margin-left: 50px; line-height:30px; } #navullia{ color:#FFF; font-weight:900px} /*******===================头====================************/ #centre{ margin:0 auto; width:1200px; height:auto; overflow: hidden } #centreLeft{ float:left; width:70%; height:500px;border:1px #333333 solid;} #centreRight{ float: right; width:27%; height:400px;border:1px #333333 solid;} /***********==============内容===================*******/ #bottom{ margin:0 auto; width:1200px; height:200px; border:1px #333333 solid; margin-top:20px; } /***********==============底部===================*******/ /style /head body div id="top" div id="logo"店招/div div id="nav" ul lia href="" title="" target="_blank"淘宝/a/li lia href="" title="" target="_blank"图片/a/li lia href="" title="" target="_blank"视频/a/li lia href="" title="" target="_blank"资料下载/a/li lia href="" title="" target="_blank"视频下载/a/li /ul /div /div !--------头部------------ div id="centre" div id="centreLeft"内容左/div div id="centreRight"内容右/div /div !--------中间------------- div id="bottom"底部/div !-----------底部---------------- /body /html

学路情感网还为您提供以下相关内容希望对您有帮助:

html树形菜单如何做出点击其他菜单栏,当前菜单栏就自动关闭的效果?急...

('#menu div a').click(function () { (this).parent().parent().find("a.smtitle_a").css("background", "url(../images/i_sm_collapsed.gif) no-repeat 10px center");var checkElement = $(this).nex...

div+css竖二级菜单,展开减号,不展开加号的代码

&lt;h3&gt;&lt;a href="wedding-dresses-c1_2.html"&gt;Wedding Dresses&lt;/a&gt;&lt;/h3&gt; &lt;div class="menu-list-link"&gt;&lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;h3&gt;&lt;a href="bridesmaid-dresses-c1_3.html"&gt;Bridesmaid Dresses&lt;/a&gt;&lt;/h3&gt; &lt;div class="menu...

div+css问题 js树形菜单 展开变成减号 闭合是加号 怎么实现的_百度知 ...

&lt;div id="zi1" class="neijuli" style="display:none"&gt; &lt;a href="admin/addnews.jsp" target="mainFrame"&gt;添加新闻&lt;/a&gt;&lt;br&gt; &lt;a href="admin/controlnews.jsp" target="mainFrame"&gt;管理新闻&lt;/a&gt; &lt;/div&gt; &lt;/d...

HTML和css怎样制作横排导航条,菜单

如图,制作导航条菜单一般是用一个div嵌套ul和li标签,然后li里面有a标签。布局做好之后,开始写导航条的样式,如图,先清除导航条的margin和padding。然后定位导航条的div,这里我就用绝对定位来居中,如果你有其他导航条居中...

网页树形折叠菜单制作

TagName0); this.InitCss = function (ClassName0,ClassName1,ClassName2,ImgUrl) { this.ClassName0=ClassName0; this.ClassName1=ClassName1; this.ClassName2=ClassName2; this.ImgUrl=ImgUrl || "css/s.gif";...

如何用javascript 实现树形结构菜单,可伸缩,有节点。请高手指教!_百度...

&lt;title&gt;无限级树形菜单&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="CNLTreeMenu" id="CNLTreeMenu"&gt; &lt;h4&gt;CNL Tree Menu1&lt;/h4&gt; &lt;p&gt;&lt;a id="AllOpen" href="#" onClick="MyCNLTreeMenu.SetNodes(0);Hd(this);Sw('AllClose');"...

如何使用HTML和CSS制作下拉菜单

使用HTML和CSS制作下拉菜单的方法如下:1、编写带有div导航的html代码:2、使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中,在图示的HTML代码中,一个简单的无序列表(ul)来表示主菜单项。3、在主菜单区域中...

div + css实现Tab菜单

&lt;div class='tabnav'&gt; &lt;ul&gt; &lt;li id='tab1' onclick='tab(1)'&gt;TAB1&lt;/li&gt; &lt;li id='tab2' onclick='tab(2)'&gt;TAB2&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id='tabid1' class='tabid'&gt;tab1&lt;/div&gt; &lt;div id='...

怎么使用CSS3创建动态菜单

第一步:编辑菜单的HTML代码。菜单包含三个列表项,分别取名为“Menu1”、“Menu2”、“Menu3”。XML/HTML Code&lt;div class="css3Menus"&gt; &lt;ul&gt; &lt;li&gt;Menu1&lt;/li&gt; &lt;li&gt;Menu2&lt;/li&gt; &lt;li&gt;Menu3&lt;/li&gt; ...

怎么实现啊 div+css

纯CSS+html就可以实现下拉菜单了。&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

热门图文

  • 空濛岩雨霁下一句

    空濛岩雨霁的下一句:烂熳晓云归。诗词名称:《万州晓发放舟乘涨,还寄蜀中亲朋》。本名:陈子昂。别称:陈伯玉,陈拾遗,“诗骨”。字号:字伯玉。所处时代:唐代。民族族群:汉族。出生地:梓州射洪(今四川省射洪市)。出生时间:公元661年。去世时间:公元702年。主要作品:《赠乔侍郎》《送魏大从军》《送东莱学士无竞》《春夜别友人》《登幽州台歌》等。主要成就:声讨齐梁文学绮靡文风,召唤新时代刚健文风的重要代表。我们为您从以下几个方面提供“空濛岩雨霁”的详细介绍。一、《万州晓发放舟乘涨,还寄蜀中亲朋》的全文 点此查看《万州晓发放舟乘涨,还寄蜀中亲朋》的详细内容。空濛岩雨霁,烂熳晓云归。啸旅乘明发,奔桡骛断矶。苍茫林岫转,络绎涨涛飞。远岸孤烟出,遥峰曙日微。前瞻未能眴,坐望已相依。曲直多今古,经过失是非。

  • 奉和虢州刘给事使君三堂新题二十一咏。荷池韩愈的其他诗词 奉和虢州刘给事使君三堂新题二十一咏。荷池韩愈的其他诗词有哪些

    《奉和虢州刘给事使君三堂新题二十一咏。荷池》韩愈其他诗词:《师说》、《杂说四·马说》、《初春小雨》、《春雪》、《山石》。《奉和虢州刘给事使君三堂新题二十一咏。荷池》韩愈其他诗词:《师说》、《杂说四·马说》、《初春小雨》、《春雪》、《山石》。作者:韩愈。年代:唐代。我们为您从以下几个方面提供奉和虢州刘给事使君三堂新题二十一咏。荷池的详细介绍。一、《奉和虢州刘给事使君三堂新题二十一咏。荷池》的全文 点此查看《奉和虢州刘给事使君三堂新题二十一咏。荷池》的详细内容。风雨秋池上,高荷盖水繁。未谙鸣摵摵,那似卷翻翻。二、《奉和虢州刘给事使君三堂新题二十一咏。荷池》韩愈其他诗词《师说》、《杂说四·马说》、《初春小雨》、《春雪》、《山石》。相同朝代的诗歌;

  • 奉和虢州刘给事使君三堂新题二十一咏。荷池韩愈的其他诗词有哪些

    《奉和虢州刘给事使君三堂新题二十一咏。荷池》韩愈其他诗词:《师说》、《杂说四·马说》、《初春小雨》、《春雪》、《山石》。《奉和虢州刘给事使君三堂新题二十一咏。荷池》韩愈其他诗词:《师说》、《杂说四·马说》、《初春小雨》、《春雪》、《山石》。作者:韩愈。年代:唐代。我们为您从以下几个方面提供奉和虢州刘给事使君三堂新题二十一咏。荷池的详细介绍。一、《奉和虢州刘给事使君三堂新题二十一咏。荷池》的全文 点此查看《奉和虢州刘给事使君三堂新题二十一咏。荷池》的详细内容。风雨秋池上,高荷盖水繁。未谙鸣摵摵,那似卷翻翻。二、《奉和虢州刘给事使君三堂新题二十一咏。荷池》韩愈其他诗词《师说》、《杂说四·马说》、《初春小雨》、《春雪》、《山石》。相同朝代的诗歌;

  • 奉和虢州刘给事使君三堂新题二十一咏。荷池韩愈的其他诗词

    《奉和虢州刘给事使君三堂新题二十一咏。荷池》韩愈其他诗词:《师说》、《杂说四·马说》、《初春小雨》、《春雪》、《山石》。《奉和虢州刘给事使君三堂新题二十一咏。荷池》韩愈其他诗词:《师说》、《杂说四·马说》、《初春小雨》、《春雪》、《山石》。作者:韩愈。年代:唐代。我们为您从以下几个方面提供奉和虢州刘给事使君三堂新题二十一咏。荷池的详细介绍。一、《奉和虢州刘给事使君三堂新题二十一咏。荷池》的全文 点此查看《奉和虢州刘给事使君三堂新题二十一咏。荷池》的详细内容。风雨秋池上,高荷盖水繁。未谙鸣摵摵,那似卷翻翻。二、《奉和虢州刘给事使君三堂新题二十一咏。荷池》韩愈其他诗词《师说》、《杂说四·马说》、《初春小雨》、《春雪》、《山石》。相同朝代的诗歌;

  • 奉和虢州刘给事使君三堂新题二十一咏。荷池韩愈其他诗词

    《奉和虢州刘给事使君三堂新题二十一咏。荷池》韩愈其他诗词:《师说》、《杂说四·马说》、《初春小雨》、《春雪》、《山石》。《奉和虢州刘给事使君三堂新题二十一咏。荷池》韩愈其他诗词:《师说》、《杂说四·马说》、《初春小雨》、《春雪》、《山石》。作者:韩愈。年代:唐代。我们为您从以下几个方面提供奉和虢州刘给事使君三堂新题二十一咏。荷池的详细介绍。一、《奉和虢州刘给事使君三堂新题二十一咏。荷池》的全文 点此查看《奉和虢州刘给事使君三堂新题二十一咏。荷池》的详细内容。风雨秋池上,高荷盖水繁。未谙鸣摵摵,那似卷翻翻。二、《奉和虢州刘给事使君三堂新题二十一咏。荷池》韩愈其他诗词《师说》、《杂说四·马说》、《初春小雨》、《春雪》、《山石》。相同朝代的诗歌;

Top