怎么定位input假下拉列表

思无及 2018-11-26 05:10:00

点击input搜索框后，出现下拉列表。但是当滚动页面滚动条时，下拉列表随着滚动条向下移动，怎么把下拉列表固定在input搜索框下面？

...全文

571 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

生活不易，活在当下 2018-12-04

打赏
举报

下拉列表不要以页面做定位，以input标签做定位

季抒 2018-11-26

打赏
举报

要是我没想错的话，逻辑大概就是 1、下拉框向外一层的父元素设置position:relative；下拉框设置position:absolute; 2、下拉列表里添加一条overflow:scroll来显示滚动条。这样？

天际的海浪 2018-11-26

打赏
举报


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
.box {
	display: inline-block;
	position: relative;
}
.box input {
	width: 172px;
	border: 1px solid #999;
	padding: 3px;
}
.box input:focus+.menu {
	display: block;
}
.menu {
	position: absolute;
	top: 100%;
	left: 0;
	width: 180px;
	height: 200px;
	background-color: #363;
	display: none;
}
</style>
</head>
<body>
<div class="box">
	<input type="text" name="test" value="" />
	<div class="menu"></div>
</div>
</body>
</html>

系统默认提供的CSS样式风格定义　　说　明：在《动易网站管理系统》中，CSS样式风格定义是可以自己自由定义的，也说是说您可以自由添加Ｎ多个自定义的风格，然后在各频道的版式模板中调用就行了。下面提供的是系统默认提供的CSS样式风格定义，里面有详细的定义注释，注释标记为：/* ...... */。　　友情提醒：修改风格设置必须具备一定网页css样式设计知识，建议您找些这方面的书看一下，在定义中也不能使用单引号或双引号，否则会容易造成程序错误。＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝/* 网站链接总的CSS定义:可定义内容为链接字体颜色、样式等 */a{text-decoration: none;} /* 链接无下划线,有为underline */ a:link {color: #000000;} /* 未访问的链接 */a:visited {color: #000000;} /* 已访问的链接 */a:hover{COLOR: #ff0000;} /* 鼠标在链接上 */ a:active {color: #0000ff;} /* 点击激活链接 *//* 顶部频道文字链接的CSS定义－－将顶部频道文字链接与网站链接总的CSS定义分开，以后可以制作深底浅字的格式，如果要保持原来的设计样式，将此定义内容删除或定义成与网站链接总的CSS相同即可。调用代码为 *** */a.Channel:link {color: #ffffff;}a.Channel:visited {color: #ffffff;}a.Channel:hover{COLOR: #ffff00;}a.Channel:active {color: #ffffff;}/* 顶部当前频道文字链接的CSS定义－－显示当前频道的文字样式，调用代码为*** */a.Channel2:link {color: #ffffff;}a.Channel2:visited {color: #ffffff;}a.Channel2:hover{COLOR: #ffff00;}a.Channel2:active {color: #ffffff;}/* 顶部频道用户注册链接的CSS定义－－调用代码为*** */a.user:link {color: #ffffff;}a.user:visited {color: #ffffff;}a.user:hover{COLOR: #ffff00;}a.user:active {color: #ffffff;}/* 底部版权信息文字链接的CSS定义－－与顶部频道文字链接定义的想法相同。可设置与顶部频道文字链接定义不同的文字颜色，网页内定义以预留。调用代码为*** */a.Bottom:link {color: #ffffff;}a.Bottom:visited {color: #ffffff;}a.Bottom:hover{COLOR: #ffff00;}a.Bottom:active {color: #ffffff;}/* 文章栏目标题文字链接的CSS定义－－可设置与顶部频道文字链接定义不同的文字颜色，网页内定义以预留。要相同可不设置。调用代码为*** */a.Class:link {color: #037FA8;}a.Class:visited {color: #037FA8;}a.Class:hover{COLOR: #ff0000;}a.Class:active {color: #037FA8;} /* 水平条效果的CSS定义BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted;height:1;width:100%;align:left;color:#86BCD4;Shade:no; 水平条虚线效果定义一border:1px dashed #86BCD4; height: 1; 水平条虚线效果定义二align: center;width: 100%;height: 1;color: #86BCD4;Shade:no;SIZE=1; 水平条实线无阴影效果定义*/hr{border:1px dashed #86BCD4; height:1;}/* 列表项目效果的CSS定义*list-style-type: circle;　列表项目样式disc : 　CSS1　实心圆circle : 　CSS1　空心圆square : 　CSS1　实心方块decimal : 　CSS1　阿拉伯数字lower-roman : 　CSS1　小写罗马数字upper-roman : 　CSS1　大写罗马数字lower-alpha : 　CSS1　小写英文字母upper-alpha : 　CSS1　大写英文字母none : 　CSS1　不使用项目符号armenian : 　CSS2　传统的亚美尼亚数字cjk-ideographic : 　CSS2　浅白的表意数字georgian : 　CSS2　传统的乔治数字lower-greek : 　CSS2　基本的希腊小写字母hebrew : 　CSS2　传统的希伯莱数字hiragana : 　CSS2　日文平假名字符hiragana-iroha : 　CSS2　日文平假名序katakana : 　CSS2　日文片假名字符katakana-iroha : 　CSS2　日文片假名序号lower-latin : 　CSS2　小写拉丁字母upper-latin : 　CSS2　大写拉丁字母*list-style-image: url(Skin/sg_blue/li1.gif); 用图像代替列表项目*list-style-position : outside | insideoutside : 　列表项目标记放置在文本以外，且环绕文本不根据标记对齐inside : 　列表项目标记放置在文本以内，且环绕文本根据标记对齐*/li{list-style-image: url(Skin/sg_blue/j32.gif); } /* 栏目导航发光阴影效果的CSS定义，调用代码为*** */.Glow{FILTER: Glow(Color=0733B2, Strength=1) dropshadow(Color=0733B2, OffX=1, OffY=1,); WIDTH: 100%; COLOR: #ffffff; LINE-HEIGHT: 20px}/* Body的CSS定义:对应CSS中“BODY”，可定义内容为网页字体颜色、背景、浏览器边框等 */BODY{FONT-SIZE: 9pt;background:url(Skin/blue/bg_all.gif);text-decoration: none;SCROLLBAR-FACE-COLOR: #f6f6f6;SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #cccccc; SCROLLBAR-3DLIGHT-COLOR: #cccccc; SCROLLBAR-ARROW-COLOR: #330000; SCROLLBAR-TRACK-COLOR: #f6f6f6; SCROLLBAR-DARKSHADOW-COLOR: #ffffff;}/* 单元格的CSS定义:对应CSS中的“TD”，这里为总的表格定义，为一般表格的的单元格风格设置，可定义内容为背景、字体颜色、样式等 */TD{FONT-FAMILY:宋体;FONT-SIZE: 9pt;line-height: 150%; }/* 文本框的CSS定义:对应CSS中的“INPUT”，这里为文本框的风格设置，可定义内容为背景、字体、颜色、边框等 */Input{BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #666666 1px solid;BORDER-LEFT: #666666 1px solid;BORDER-RIGHT: #666666 1px solid;BORDER-TOP: #666666 1px solid;COLOR: #666666;HEIGHT: 18px;border-color: #666666 #666666 #666666 #666666; font-size: 9pt}/* 按钮的CSS定义:对应CSS中的“BUTTON”，这里为按钮的风格设置，可定义内容为背景、字体、颜色、边框等 */Button{FONT-SIZE: 9pt;HEIGHT: 20px;}/* 下拉列表框的CSS定义:对应CSS中的“SELECT”，这里为下拉列表框的风格设置，可定义内容为背景、字体、颜色、边框等 */Select{FONT-SIZE: 9pt;HEIGHT: 20px;}/* 顶部用户登录文字链接的CSS定义 */.top_UserLogin{color: #037FA8;}/* ==简短标题文字的CSS定义开始== *//* [图文]简短标题文字的CSS定义 */.S_headline1{color: blue;}/* [组图]简短标题文字的CSS定义 */.S_headline2{color: #FF6600;}/* [推荐]简短标题文字的CSS定义 */.S_headline3{color: green;}/* [注意]简短标题文字的CSS定义 */.S_headline4{color: red;}/* ==简短标题文字的CSS定义开始== *//* ==top.asp中的CSS定义开始== */.top_tdbgall /* 顶部表格总背景颜色定义 */{width: 760;background:#ffffff;border-right: 1px solid #000000;border-left: 1px solid #000000;}.top_Channel /* 频道表格背景、文字颜色定义 */{background:#3399CC;color:#3AB1F5!important;text-align: right;}.top_Announce /* 公告表格背景、文字颜色定义 */{background:url(Skin/blue/top_nav_menu.gif);color: #0560A6;height: 30;}.top_nav_menu /* 导航栏表格背景、文字颜色定义 */{background:url(Skin/blue/top_nav_menu.gif);color: #0560A6;height: 30;}.top_Path /* 您现在的位置表格背景、文字颜色定义 */{width: 760;background:#ffffff;border-right: 1px solid #000000;border-left: 1px solid #000000;height: 30;}.top_UserLogin /* 顶部用户登录文字链接的CSS定义 */{color: #037FA8}/* ==top.asp中的CSS定义结束== *//* ==网页中部中的CSS定义开始== */.center_tdbgall /* 中部表格总背景颜色定义 */{background:#ffffff;border-right: 1px solid #000000;border-left: 1px solid #000000;}　　 /* --网页中部左栏的CSS定义开始-- */.left_tdbgall /* 左栏表格总背景颜色定义 */{background:#f2f2f2;}.left_title /* 左栏标题表格背景、文字颜色定义 */{background:url(Skin/blue/left_title.gif);font-weight:bold;color: 037FA8;height: 26;}.left_tdbg1 /* 左栏内容表格背景、文字颜色定义 */{background:url(Skin/blue/left_tdbg1.gif);line-height: 150%;padding-left:5;padding-right:8;}.left_tdbg2 /* 左栏底部表格背景、文字颜色定义 */{background:url(Skin/blue/left_tdbg2.gif);height: 10;}　　 /* --网页中部左栏的CSS定义结束-- */　　 /* --网页中部中栏的CSS定义开始-- */.main_tdbgall /* 中栏表格总背景颜色定义 */{width: 572;background:#ffffff;}.main_shadow /* 中栏内容间隔表格背景颜色定义(575) */{height: 10;}.main_announce /* 中栏公告表格背景、文字颜色定义 */{color: 037FA8;height: 25;background:url(Skin/blue/main_announce.gif);border: 1px solid #8CC3DE;}.main_Search /* 中栏搜索表格背景、文字颜色定义 */{color: 037FA8;height: 25;border: 1px solid #8CC3DE;background:#f7f7f7;}.main_top /* 中栏最新推荐表格背景颜色定义 */{background:url(Skin/blue/main_top.gif);height: 187;}.main_title_575 /* 中栏标题表格背景、文字颜色定义(575) */{color: 037FA8;background:url(Skin/blue/main_title_575.gif);border: 1px solid #8CC3DE;text-align: left;padding-left:40;height: 26;}.main_tdbg_575 /* 中栏内容表格背景、文字颜色定义(575) */{border: 1px solid #8CC3DE;line-height: 150%;text-align: left;padding-left:5;padding-right:5;}.main_title_282 /* 栏目文章列表标题表格背景、文字颜色定义(282) */{background:url(Skin/blue/main_title_282.gif);color: 037FA8;height: 20;border-top: 1px solid #8CC3DE;border-left: 1px solid #8CC3DE;border-right: 1px solid #8CC3DE;}.main_tdbg_282 /* 栏目文章列表内容表格背景、文字颜色定义(282) */{border: 1px solid #8CC3DE;line-height: 150%;text-align: left;padding-left:5;padding-right:5;}.listbg /* --栏目文章列表内容间隔颜色的定义1-- */{background:#ffffff;}.listbg2 /* --栏目文章列表内容间隔颜色的定义2-- */{background:#f7f7f7;}　　 /* --网页中部中栏的CSS定义结束-- */　　 /* --文章显示页的CSS定义开始-- */.main_ArticleTitle /* 主标题文字颜色定义 */{color: ff0000;font-weight:bold;font-size: 18;line-height: 150%;}.main_ArticleSubheading /* 副标题文字颜色定义 */{color: 037FA8;font-weight:bold;line-height: 150%;}.main_title_760 /* 标题导航表格背景、文字颜色定义(760) */{background:url(Skin/blue/main_title_760.gif);border: 1px solid #8CC3DE;padding-left:5;height: 25;color: 037FA8;}.main_tdbg_760 /* 内容表格背景、文字颜色定义(760) */{border: 1px solid #8CC3DE;padding: 8;}　　 /* --文章显示页的CSS定义结束-- *//* ==网页中部中的CSS定义结束== *//* ==Bottom.asp中的CSS定义开始== */.Bottom_tdbgall /* 底部表格总背景颜色定义 */{width: 760;background:#ffffff;border-right: 1px solid #000000;border-left: 1px solid #000000;}.Bottom_Adminlogo /* 管理信息表格背景、文字颜色定义 */{background:#3399CC;color:#ffffff;}.Bottom_Copyright /* 版权信息表格背景、文字颜色定义 */{background:#ffffff;color:#000000;}/* ==Bottom.asp中的CSS定义结束== *//* ==自选风格中的CSS定义结束== */.menu{background-color: #cccccc;width:97%;border: 1px;}.menuBody{background-color: #ffffff;}/* ==自选风格中的CSS定义结束== */

没法下载，到这里折腾一把试试。本文由abc2253130贡献 doc文档可能在WAP端浏览体验不佳。建议您优先选择TXT，或下载源文件到本机查看。 C#（WINFORM）学习一、 C#基础基础类型和变量类型和变量类型 C# 支持两种类型：“值类型”和“引用类型”。值类型包括简单类型（如 char、int 和 float 等）、枚举类型和结构类型。引用类型包括类 (Class)类型、接口类型、委托类型和数组类型。变量的类型声明变量的类型声明每个变量必须预先声明其类型。如 int a; int b = 100; float j = 4.5; string s1; 用 object 可以表示所有的类型。预定义类型下表列出了预定义类型，并说明如何使用。类型 object 说明所有其他类型的最终基类型字符串类型；字符串是 Unicode 字符序列 8 位有符号整型 16 位有符号整型 32 位有符号整型 64 位有符号整型示例 object o = null; 范围 string sbyte short int long string s = "hello"; sbyte val = 12; short val = 12; int val = 12; long val1 = 12; -128 到 127 -32,768 到 32,767 -2,147,483,648 2,147,483,647 -9,223,372,036,854,775,808 到第1页 C#（WINFORM）学习 long val2 = 34L; 到 9,223,372,036,854,775,807 byte ushort 8 位无符号整型 16 位无符号整型 byte val1 = 12; ushort val1 = 12; uint val1 = 12; uint 32 位无符号整型 uint val2 = 34U; ulong val1 = 12; ulong val2 = 34U; ulong 64 位无符号整型 ulong val3 = 56L; ulong val4 = 78UL; float 单精度浮点型 float val = 1.23F;7 位 double val1 = 1.23; double 双精度浮点型 double val2 = ±5.0 × 10?324 ±1.7 × 10 308 0 到 255 0 到 65,535 0 到 4,294,967,295 0 到 18,446,744,073,709,551,615 ±1.5 × 10?45 ±3.4 × 10 38 到到 4.56D;15-16 布尔型；bool 值或为真或为假字符类型；char 值是一个 Unicode 字符精确的小数类型，具有 28 个有效数字 bool val1 = true; bool val2 = false; char val = 'h'; decimal val = bool char decimal DateTime ±1.0 × 10?28 ±7.9 × 10 28 到 1.23M;28-29 变量转换简单转换： float f = 100.1234f; 可以用括号转换： short s = (short)f 也可以利用 Convert 方法来转换： string s1; s1=Convert.ToString(a); MessageBox.Show(s1); 常用 Convert 方法有：第2页 C#（WINFORM）学习 C# Convert.ToBoolean Convert.ToByte Convert.ToChar Convert.ToDateTime Convert.ToDecimal Convert.ToDouble Convert.ToInt16 Convert.ToInt32 Convert.ToInt64 Convert.ToSByte Convert.ToSingle Convert.ToString Convert.ToUInt16 Convert.ToUInt32 Convert.ToUInt64 备注 Math 类常用科学计算方法： C# Math.Abs Math.Sqrt Math.Ro

本课程是linux驱动开发的第8个课程，主要内容是linux的input子系统。学习本课程的目标是对input子系统的框架结构有深入理解，应用层和驱动层的调用关系和方法完全了解，能够自己移植按键等常见输入类设备的驱动。