下拉菜单样式头部导航栏的下拉菜单怎样设置样式？

下拉菜单样式时间:2021-04-07 阅读:()

html 下拉菜单的子列表

看这样行吗？纯CSS+DIV <!DOCTYPE?html>???? <html>???? <head>???? <title>test</title>???? <style?type?=?"text/css">???? /*设置通配符样式*/???? *{???? ???margin:0;???? ???padding:0;???? }???? body{???? ???font-size:12px;???? }???? ul{???? ???list-style:none;???? }???? a{???? ???text-decoration:none;???? }???? /*设置二级导航样式*/?????? .nav?{???? ???width:500px;???? ???height:30px;???? ???background-color:#b4b4b4;???? ???/*导航栏居中*/???? ???margin:auto;???? }???? .nav?ul?li?{???? ???width:100px;???? ???height:30px;???? ???float:left;???? ???position:relative;???? }???? .nav?ul?li?a?{???? ???display:block;???? ???width:96px;???? ???border:2px?solid?gray;???? ???height:26px;???? ???line-height:26px;???? ???text-align:center;???? }???? .nav?ul?li?a:hover?{???? ???background-color:yellow;???? }???? /*设置一级导航样式*/???? .nav?ul?li?ul{???? ???display:none;???? }???? .nav?ul?li:hover?ul{???? ???display:block;???? ???width:100px;???? ???position:absolute;???? ??:30px;???? ???left:0;???? ???background-color:white;???? }???? .nav?ul?li:hover?ul?li?a{???? ???display:block;???? ???width:96px;???? ???height:26px;???? ???line-height:26px;???? ???border:2px?solid?gray;???? ???text-align:center;???? }???? .nav?ul?li:hover?ul?li?a:hover{???? ???background-color:orange;???? }???? /*设置三级导航样式*/???? .nav?ul?li:hover?ul?li?ul?{???? ???display:none;???? }???? .nav?ul?li:hover?ul?li:hover?ul{???? ???display:block;???? ???width:100px;???? ???position:absolute;???? ??:0px;???? ???left:100px;???? ???background-color:#b4b4b4;???? }???? .nav?ul?li:hover?ul?li:hover?ul?li?{???? ???width:100px;???? ???height:30px;???? }???? .nav?ul?li:hover?ul?li:hover?ul?li?a?{???? ???display:block;???? ???width:96px;???? ???height:26px;???? ???line-height:26px;???? ???border:2px?solid?gray;???? ???text-align:center;???? }???? .nav?ul?li:hover?ul?li:hover?ul?li?a:hover?{???? ???background-color:#00CC00;???? }???? .nav?ul?li:hover?ul?.nav_jw?ul?{???? ???display:none;???? }???? .nav?ul?li:hover?ul?.nav_jw:hover?ul{???? ???display:block;???? ???width:100px;???? ???position:absolute;???? ??:0px;???? ???left:-100px;???? ???background-color:#b4b4b4;???? }???? .nav?ul?li:hover?ul?.nav_jw:hover?ul?li?{???? ???width:100px;???? ???height:30px;???? }???? .nav?ul?li:hover?ul?.nav_jw:hover?ul?li?a?{???? ???display:block;???? ???width:96px;???? ???height:26px;???? ???line-height:26px;???? ???border:2px?solid?gray;???? ???text-align:center;???? }???? .nav?ul?li:hover?ul?.nav_jw:hover?ul?li?a:hover?{???? ???background-color:#00CC00;???? }???? </style>???? <meta?charset="gb2312">???? </head>???? <body>???? <div?class?=?"nav">???? <ul>???? <li><a?href?=?"#">一级导航</a>???? ???<ul>???? ???<li><a?href?=?"#">二级导航</a>???? ???????<ul>???? ???????????<li><a?href?=?"#">三级导航</a></li>???? ???????????<li><a?href?=?"#">三级导航</a></li>???? ???????????<li><a?href?=?"#">三级导航</a></li>???? ???????</ul>???? ???</li>???????? ???<li><a?href?=?"#">二级导航</a>???? ???????<ul>???? ???????????<li><a?href?=?"#">三级导航</a></li>???? ???????????<li><a?href?=?"#">三级导航</a></li>???? ???????????<li><a?href?=?"#">三级导航</a></li>???? ???????</ul>???? ???</li>???????? ???<li><a?href?=?"#">二级导航</a>???? ???????<ul>???? ???????????<li><a?href?=?"#">三级导航</a></li>???? ???????????<li><a?href?=?"#">三级导航</a></li>???? ???????????<li><a?href?=?"#">三级导航</a></li>???? ???????</ul>???? ???</li>???????? ???</ul>???? </li>???? <li><a?href?=?"#">一级导航</a>???? ???<ul>???? ???<li><a?href?=?"#">二级导航</a></li>???????? ???<li><a?href?=?"#">二级导航</a></li>???????? ???<li><a?href?=?"#">二级导航</a></li>???????? ???</ul>???? </li>???? <li><a?href?=?"#">一级导航</a>???? ???<ul>???? ???<li><a?href?=?"#">二级导航</a></li>???????? ???<li><a?href?=?"#">二级导航</a></li>???????? ???<li><a?href?=?"#">二级导航</a></li>???????? ???</ul>???? </li>???? <li><a?href?=?"#">一级导航</a>???? ???<ul>???? ???<li><a?href?=?"#">二级导航</a></li>???????? ???<li><a?href?=?"#">二级导航</a></li>???????? ???<li><a?href?=?"#">二级导航</a></li>???????? ???</ul>???? </li>???? <li><a?href?=?"#">一级导航</a>???? ???<ul>???? ???<li?class="nav_jw"><a?href?=?"#">二级导航</a>???? ???????<ul>???? ???????????<li><a?href?=?"#">三级导航</a></li>???? ???????????<li><a?href?=?"#">三级导航</a></li>???? ???????????<li><a?href?=?"#">三级导航</a></li>???? ???????</ul>???? ???</li>???????? ???<li?class="nav_jw"><a?href?=?"#">二级导航</a>???? ???????<ul>???? ???????????<li><a?href?=?"#">三级导航</a></li>???? ???????????<li><a?href?=?"#">三级导航</a></li>???? ???????????<li><a?href?=?"#">三级导航</a></li>???? ???????</ul>???? ???</li>???????? ???<li?class="nav_jw"><a?href?=?"#">二级导航</a>???? ???????<ul>???? ???????????<li><a?href?=?"#">三级导航</a></li>???? ???????????<li><a?href?=?"#">三级导航</a></li>???? ???????????<li><a?href?=?"#">三级导航</a></li>???? ???????</ul>???? ???</li>???????? ???</ul>???? </li>???? </ul>???? </div>???? </body>???? </html>

div css下拉框样式参数设置

html框架实现图片滚动播放与下拉菜单，要求样式如下图

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> *{ margin: 0; padding: 0; } #div{ width: 183px; height: 32px; background: #ffffff; border: 1px solid #444444; overflow: hidden; } a{ color: #979797; font: bold 14px; text-decoration: none; } #div,#div ul{ width: 200px; border: none; height: 36px; float: left; } #div1 { width: 1200px; float: right; } #div ul li:hover a{ background: #ff7d93; color: #f6fffc; } #div ul li a{ display: block; width: 183px; : 8px; padding-bottom: 8px; background: #ffffff; border: 1px solid #444444; padding: 8px 0 8px 0; margin: 0; } #div:target{ width: 183px; height: 318px; } #div1 ul:nth-child(1){ width: 300px; height: 500px; float: right; } #div1 ul:nth-child(1) li{ width: 300px; height: 100px; clear: both; } #div1 ul:nth-child(2){ width: 900px; height: 500px; overflow: hidden; float: right; } #div1 ul:nth-child(2) li{ width: 900px; height: 500px; clear: both; text-align: center; } </style> </head> <body> <div id="div"> <ul> <li><a href="#div">友情链接</a></li> <li><a href="#a1">图一</a></li> <li><a href="#a2">图二</a></li> <li><a href="#a3">图三</a></li> <li><a href="#a4">图四</a></li> <li><a href="#a5">图五</a></li> </ul> </div> <div id="div1"> <ul> <li><a href="#a1"><img src="../IMAGE/images(1)/team/member1.jpg" alt="logo..." width="300px"height="100px"/></a></li> <li><a href="#a2"><img src="../IMAGE/images(1)/team/member2.jpg" alt="logo..." width="300px"height="100px"/></a></li> <li><a href="#a3"><img src="../IMAGE/images(1)/team/staff1.jpg" alt="logo..." width="300px"height="100px"/></a></li> <li><a href="#a4"><img src="../IMAGE/images(1)/team/staff2.jpg" alt="logo..." width="300px"height="100px"/></a></li> <li><a href="#a5"><img src="../IMAGE/images(1)/team/staff3.jpg" alt="logo..." width="300px"height="100px"/></a></li> </ul> <ul> <li id="a1"><img src="../IMAGE/images(1)/team/member1.jpg" alt="logo..."/></li> <li id="a2"><img src="../IMAGE/images(1)/team/member2.jpg" alt="logo..."/></li> <li id="a3"><img src="../IMAGE/images(1)/team/staff1.jpg" alt="logo..."/></li> <li id="a4"><img src="../IMAGE/images(1)/team/staff2.jpg" alt="logo..."/></li> <li id="a5"><img src="../IMAGE/images(1)/team/staff3.jpg" alt="logo..."/></li> </ul> </div> </body> </html> 基本就这样

swing下拉列表的样式有多少种

swing只有一种下拉框控件：JComboBox。

但是可以通过设置JComboBox的前景、背景、字体、选中颜色等来指定其样式。

还可以通过setUI来设置新的UI样式（比较高级的用法，难度大）。

还可以用这种方式来模拟下拉框控件：一个按钮+弹出菜单。

按钮的样式可以自己调，弹出菜单的位置显示为靠近按钮即可。