3层下拉列表

最新推荐文章于 2022-03-10 14:31:09 发布
最新推荐文章于 2022-03-10 14:31:09 发布
阅读量117 收藏
点赞数
原文链接：http://www.cnblogs.com/wanlibingfeng/p/5325892.html
版权

,1，建3层列表

<title>无标题文档</title>
<style>
*{
margin:0px;
padding:0px;}
.a{
border:0;
height:50px;
width:200px;
top:100px;
left:100px;
background-color:#0C0;
text-align:center;
vertical-align:middle;
overflow:hidden;
line-height:50px;
position:absolute

}
.aa{
border:0;
height:50px;
width:200px;
top:100px;
left:100px;
background-color:#FF6;
text-align:center;
vertical-align:middle;
overflow:visible;
line-height:50px;
position:absolute

}
.b{
border:0 ;
height:50px;
width:200px;
top:50px;

background-color:#636;
text-align:center;
vertical-align:middle;
overflow:hidden;
line-height:50px;
position:absolute
}
.bb{
border:0;
height:50px;
width:200px;
top:50px;

background-color:#93F;
text-align:center;
vertical-align:middle;
overflow:visible;
line-height:50px;
position:absolute
}
.c{
border:0;
height:50px;
width:200px;
top:100px;

background-color:#9FC;
text-align:center;
vertical-align:middle;

line-height:50px;
position:absolute
}
.d{
border:0;
height:50px;
width:200px;
top:150px;
background-color:#F0C;
text-align:center;
vertical-align:middle;
line-height:50px;
position:absolute
}
#b{
border:1px;
height:150px;
width:200px;
top:0px;
left:200px;
text-align:center;
vertical-align:middle;
position:absolute;
}

</style>

</head>

<body>
<div class="a" οnmοuseοver="this.className='aa'" οnmοuseοut="this.className='a'">滚动新闻

<div class="b" οnmοuseοver="this.className='bb'" οnmοuseοut="this.className='b'" >娱乐
<div id="b">
<table cellpadding="0px" cellspacing="0px">
<tr><td bgcolor="#339933" width="200px">2</td></tr>
<tr><td bgcolor="#99FF66" width="200px">4</td></tr>
<tr><td bgcolor="#FF00CC" width="200px">6</td></tr>

</table></div>

</div>
<div class="c">民生</div>
<div class="d">军事</div>
</div>

</div>

 

转载于:https://www.cnblogs.com/wanlibingfeng/p/5325892.html

weixin_30677475
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript经典特效---又一三层下拉菜单.rar
01-04
又一三层下拉菜单.rar又一三层下拉菜单.rar又一三层下拉菜单.rar又一三层下拉菜单.rar又一三层下拉菜单.rar又一三层下拉菜单.rar
简单三层GridView嵌套DropDownLis实列
07-11
简单三层GridView嵌套DropDownLis实列<br>后台数据库ORA<br>在CONFIG配置里自己更改<br>项目是myUphold中的解决方案
三层联动选择框
weixin_30611509的博客
09-07 87
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312...
artTemplate实现三层菜单
生活就是不断学习
08-16 1948
artTemplate有原生语法和简洁语法两种语法，在一个页面中简洁语法与原生语法不能混用，否则会残生冲突，所以你首先得确定你要用简洁语法还是原生语法，最终选择一个js导入，同时导入两个js，会导致只识别简洁语法，两个js包可点击这里下载。这边通过一个例子介绍稍微复杂的一种数据类型List中存放Map，Map中再存放List。 var menu = [ { menu_name : "电脑配
Android仿微信实现下拉列表
09-03
本文将详细讲解如何在Android平台上仿照微信实现一个下拉列表的功能。 首先，微信下拉列表通常用于在顶部菜单栏点击“+”按钮时展现，提供多种功能选项，如发起聊天、添加好友等。为了实现这一功能，我们需要创建一...
css3购物车下拉列表特效代码
03-20
在本文中，我们将深入探讨如何使用CSS3来创建一个具有购物车下拉列表效果的交互式界面。CSS3是层叠样式表（Cascading Style Sheets）的第三版，为网页设计提供了更多丰富的功能和控制，包括动画、过渡、3D变换等。...
下拉列表联动
05-27
3. JavaScript: JavaScript是实现下拉列表联动的关键，它负责监听第一个下拉框的选择变化，并根据选择值更新第二个下拉框的内容。可以使用`addEventListener`来监听`change`事件，然后使用DOM操作（如`document....
JS+CSS实现下拉列表框美化效果（3款）
11-28
在网页设计中，下拉列表框（Dropdown List）是常见的用户输入组件，但其默认样式通常较为简单，可能无法满足现代网页美观的需求。本文通过结合JavaScript（JS）和层叠样式表（CSS）技术，提供了三款不同风格的下拉...
CSS3下拉列表收缩展开特效
04-25
本主题聚焦于“CSS3下拉列表收缩展开特效”，这是一个利用CSS3的transform属性来实现的交互式菜单设计。这种特效常见于导航栏，提供用户友好的体验，尤其是当网站有多个层次的分类时。 1. **CSS3 Transform属性**：...
纯css制作三级下拉菜单
web_xiaolei的博客
10-12 1万+
css本身的功能就挺强大的，尤其是css3出来之后，大部分特效只用css3就能完成了，无需再费心思去想js怎么怎么做jQuery怎么怎么做，代码简洁质量轻巧。下面是本人用纯css制作的三级下拉菜单效果：思路很简单，三级菜单直接用三层嵌套的ul布局： 电器
三层架构之下拉框使用 DropDownList
十一的博客
08-18 998
设计如下图（车队名称下拉框） 注意：DAl层和Bll层的方法都没有用静态（static）的方法，所以使用前要先调用 1.DAl层 /// &lt;summary&gt; /// 查询车队名称 /// &lt;/summary&gt; /// &lt;returns&gt;&lt;/returns&gt; p...
select2 下拉三层分组选不中的错误
生活就是不断学习
08-20 2496
$.postJSON("monitor/errLog/getRegionSelect.htm",{},function(data){ var a = $("#regionSelectedVal").val(); $("#regionSelect").select2({ width : "150px", ...
2017最新版省市区三级联动下拉框+所有源代码以及数据库
热门推荐
lyy296293760的博客
12-01 2万+
2017年下半年国家统计局最新数据，JSP+Servlet+Dao实现省市区三级联动下拉框的效果 DropdownDAO.java —–Dao层package com.imooc.dao;import java.sql.Connection; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Sta
下拉菜单之多级菜单实现
Always on the road
05-27 5170
（此为本人在慕课网上学习的笔记，记录下方便日后学习）&lt;!DOCTYPE&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &lt;title&g
基于微信小程序wepy中 scroll-view滚动到指定位置（定位到id位置，使用 scroll-into-view）附带三层下拉框例子
weixin_43923808的博客
03-10 3929
<scroll-view style="height:500rpx" scroll-y="true" scroll-with-animation="true" scroll-into-view="bottomView{{selectedObj[currentTab.value][1].value}}"> .
javaweb 数据库表填充下拉列表框
最新发布
10-09
首先，需要从数据库中获取数据并存储到 List 中，然后将 List 中的数据填充到下拉列表框中。具体实现步骤如下： 1. 编写 DAO 层代码，查询数据库表中的数据并存储到 List 中； 2. 编写 Controller 层代码，将 List 中的数据传递给前端； 3. 在 JSP 页面中，使用 JSTL 标签库将数据填充到下拉列表框中。 以下是代码示例： DAO 层代码： ``` public List<String> queryData() throws SQLException { List<String> data = new ArrayList<>(); Connection conn = null; PreparedStatement ps = null; ResultSet rs = null; try { conn = DBUtil.getConnection(); String sql = "SELECT * FROM table_name"; ps = conn.prepareStatement(sql); rs = ps.executeQuery(); while (rs.next()) { data.add(rs.getString("column_name")); } } finally { DBUtil.close(conn, ps, rs); } return data; } ``` Controller 层代码： ``` @RequestMapping("/list") public ModelAndView list() throws SQLException { ModelAndView mav = new ModelAndView("list"); List<String> data = dao.queryData(); mav.addObject("data", data); return mav; } ``` JSP 页面代码： ``` <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <select> <c:forEach items="${data}" var="item"> <option value="${item}">${item}</option> </c:forEach> </select> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值