html下拉菜单(列表框)
鼠标事件：鼠标点击出现下拉菜单,很基础的一个特效。
鼠标事件：鼠标点击出现下拉菜单，很基础的一个特效。
先上代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><META http-equiv=Content-Type content="text/html; charset=gb2312"> <SCRIPT language=javascript>var intDelay = 30; //设置菜单显示速度，越大越慢var intInterval = 5;function MenuClick() {if (LayerMenu.style.display == "") {GradientClose();}else {LayerMenu.filters.alpha.opacity = 0; LayerMenu.style.display = ""; GradientShow();}}function GradientShow() {LayerMenu.filters.alpha.opacity += intInterval;if (LayerMenu.filters.alpha.opacity < 100) setTimeout("GradientShow()", intDelay);}function GradientClose() {LayerMenu.filters.alpha.opacity -= intInterval; if (LayerMenu.filters.alpha.opacity > 0) {setTimeout("GradientClose()", intDelay);}else {LayerMenu.style.display = "none"; }}</SCRIPT> <STYLE type=text/css>A{ FONT-SIZE: 10px; COLOR: #666666; LINE-HEIGHT: 16px; FONT-FAMILY: "tahoma"; TEXT-DECORATION: none }TD{ FONT-SIZE: 10px; COLOR: #999999; LINE-HEIGHT: 16px; FONT-FAMILY: "tahoma" }</STYLE> <META content="MSHTML 5.50.4134.600" name=GENERATOR> </head><body text=#000000 bgColor=#ffffff><DIV id=LayerMenu style="DISPLAY: none; Z-INDEX: 4; FILTER: alpha(opacity=0); LEFT: 8px; WIDTH: 68px; POSITION: absolute; TOP: 33px"><TABLE cellSpacing=1 cellPadding=0 width=100 bgColor=#999999 border=0><TBODY><TR> <TD bgColor=#ffffff> <DIV align=center><a href="" target="_blank"><embed src="\Me\img\new\images\music.swf" width="100px" height="100px"border="0"></embed></a></DIV></TD></TR><TR> <TD bgColor=#ffffff></TD></TR><TR> <TD bgColor=#ffffff> <DIV align=center><a href="" target="_blank"><embed src="\Me\img\new\images\map.swf" width="100px" height="100px"border="0"></embed></a></DIV></TD></TR><TR> <TD bgColor=#ffffff></TD></TR><TR> <TD bgColor=#ffffff> <DIV align=center><a href="" target="_blank"><embed src="\Me\img\new\images\movie.swf" width="100px" height="100px"border="0"></embed></a></DIV></TD></TR><TR> <TD bgColor=#ffffff></TD></TR><TR> <TD bgColor=#ffffff> <DIV align=center><a href="" target="_blank"><embed src="\Me\img\new\images\void.swf" width="100px" height="100px"border="0"></embed></a></DIV></TD></TR></TBODY></TABLE></DIV><A onfocus=this.blur() onclick=MenuClick() href="#"><imgsrc="img/images/music.png" width="30px" height="30px" border="0"></A></body></html>下面是我相对更改的地方。
HTML——select下拉选择标签
HTML——select下拉选择标签select的基本语法：<select><option></option></select>例⼦：<p>籍贯：<select name="province" id="" multiple size="2"><option value="">⼴东省</option><option value="" selected>⼭东省</option><option value="">河北省</option></select></p>1、<select> 的属性：（1）name属性<select name="selectList"><option>18岁以下</option><option>18-28岁</option><option>28-38岁</option><option>38岁以上</option></select>（2）size属性下拉列表默认状态下只显⽰⼀个选项。
如果需要让页⾯显⽰多个选项，就要使⽤ size 属性。
<select name="selectList" size="4"><option>18岁以下</option><option>18-28岁</option><option>28-38岁</option><option>38岁以上</option></select>（3）multiple属性select默认是单项选择，multiple属性可以设置成多项选择：<form action="/login.php" method="post">年龄区间：<select name="selectList" multiple="multiple" size="4"><option>18岁以下</option><option>18-28岁</option><option>28-38岁</option><option>38岁以上</option></select></form>注意：此时只需按住ctrl+⿏标左键就可以选择多个选项。
HTML精品教程资料：05-项目案例：制作1号店网站
任务描述 制作1号店网站
首页 搜索列表页 商品详情页 登录页 注册页
3/38
问题分析1：整体开发思路
网页制作步骤
制作网站公用部分（网站导航和版权部分） 制作1号店首页（index.html） 制作搜索列表页（searchList.html） 制作商品详情页（ detail.html ） 制作登录页（ loginpage.html） 制作注册页（ registerpage.html）
移入时设置放大动画[25分钟]
}
11/38
开发计划3-1
用例1：制作网站公用部分
网站导航
完成时间：30分钟
网站版权
完成时间：20分钟
用例2：制作网站首页
全部商品分类
完成时间：20分钟
轮播图
完成时间：20分钟
快讯
完成时间：15分钟
热门产品
完成时间：20分钟
进口生鲜
完成时间：25分钟
12/38
开发计划3-2
用例3：制作搜索列表页
使用过渡给“天天低价”列表项添加动画
讲解需求说明
15/38
用例1：网站公用部分3-2
分析 使用无序列表制作顶部导航和主导航菜单 使用过渡给“天天低价”列表项添加动画
提示
<div class="b_btm_bg b_btm_c">
<ul class="b_btm">
<li>
<a><img src="images/b1.png" width="62"
项目案例： 制作1号店网站
本课目标
学完本次课程后，你能够：
改变HTML下拉框SELECT选项的多种方法
改变HTML下拉框SELECT选项的多种方法一、使用JavaScript:1. 使用innerHTML属性改变SELECT选项:通过JavaScript的innerHTML属性，可以直接改变SELECT元素的innerHTML，从而改变其中的选项。
例如：```html<select id="mySelect"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select><button onclick="changeOptions(">改变选项</button><script>function changeOptionvar selectElement = document.getElementById("mySelect");selectElement.innerHTML = '<option value="4">选项4</option>' +'<option value="5">选项5</option>';}</script>```2. 使用createElement和appendChild方法动态添加选项:可以使用JavaScript的createElement和appendChild方法，动态创建选项元素，并将其添加到SELECT元素中。
例如：```html<select id="mySelect"><option value="1">选项1</option><option value="2">选项2</option><option value="3">选项3</option></select><button onclick="addOption(">添加选项</button><script>function addOptiovar selectElement = document.getElementById("mySelect");var newOption = document.createElement("option");newOption.value = "4";newOption.text = "选项4";selectElement.appendChild(newOption);}</script>```二、使用CSS:1. 使用display属性控制选项的显示和隐藏:可以使用CSS的display属性，通过控制选项的display值，来改变选项的显示和隐藏。
HTML表单实例.ppt
• 图象和文字的对齐 <img align=#> #=top, middle, bottom
<img src=URL align=right>My Face!<br> It is always<br> smiling.<br> Hahaha....<br>
My Face! It is always smiling. Hahaha....
#= us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp, euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1, x-cns11643-2, big5
华师大软 件学院
2. HTML标签&实例
毛宏燕
华东师范大学软件学院
1
Steps
• HTML简介 • HTML标记 • 表单（FORM）
2
下拉框用法实例
下拉框用法实例下拉框（也称为下拉列表框或选择框）是一种常见的界面组件，在网页或应用程序中常用于提供选择选项给用户。
下面是一个下拉框的使用示例：```html<!DOCTYPE html><html><head><title>下拉框用法示例</title></head><body><h2>请选择您的喜好食物：</h2><select id="foodSelect"><option value="pizza">披萨</option><option value="hamburger">汉堡</option><option value="sushi">寿司</option><option value="noodles">面条</option><option value="steak">牛排</option></select><br><br><button onclick="showSelectedFood()">确认</button><p id="selectedFood"></p><script>function showSelectedFood() {var selectBox = document.getElementById("foodSelect");var selectedValue =selectBox.options[selectBox.selectedIndex].value;var selectedText =selectBox.options[selectBox.selectedIndex].text;document.getElementById("selectedFood").innerHTML = "您选择的食物是：" + selectedText;}</script></body></html>```上面的示例中，我们创建了一个下拉框，其中包含了几个食物选项供用户选择。
HTML+CSS实现导航栏二级下拉菜单完整代码
HTML+CSS实现导航栏⼆级下拉菜单完整代码⼯具是vs code代码如下<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>li{list-style-type: none;}#menu {width: 370px;margin: 30px auto 0px;height: 45px;background-color: #030e11;}#menu li{float: left;width: 92px;line-height:39px;text-align: center;position:relative;border:none;}#menu li a {font-size:16px; color: #e6f8e9;display:block;outline:0;text-decoration:none;}#menu li:hover a {color: #ff0000; /*导航栏⽂字颜⾊ */}#menu li:hover .dropdown_1column {left:0px;top:38px;}.dropdown_1column{ /* 下拉菜单边框颜⾊*/margin: 0px auto;float: left;position: absolute;left: -999em;text-align: left;border: 1px solid #066591;border-top: none;background: #F4F4F4;width: 140px;}#menu li:hover div a { /* 下拉菜单⽂字颜⾊*/font-size:12px;color:#444;}#menu li:hover div a:hover{color:#21910e;} /*下拉带单⿏标停留颜⾊*/#menu li ul {list-style:none;padding:10px 5px;margin:0;}#menu li ul li {font-size:12px;line-height:26px;position:relative;padding:0;margin:0;float:none;text-align:left;width:130px;}#menu li ul li:hover {background:none;border:none;padding:0;margin:0;}</style></head><body><div id="menu"><ul><li> <a href="" class="nodrop">⾸页</a></li><li><a href="" class="drop">最⽕下载站</a><div class="dropdown_1column"><div class="col_1"><ul class="simple"><li><a href="">⽹站建设</a></li><li><a href="">导航条代码</a></li><li><a href="">电⼦商务</a></li></ul></div></div></li><li><a href="" class="nodrop">联系我们</a></li></ul></div></body></html>3.CSS + ul li 去掉列表项前⾯的标记类型例如：ul.circle {list-style-type:none;}ul.circle {list-style-type:circle;}ul.square {list-style-type:square;}ol.upper-roman {list-style-type:upper-roman;}ol.lower-alpha {list-style-type:lower-alpha;}4.CSS + ul li 竖着排列转成横向排列⽅法5. 块级元素，背景⾊设置6.⿏标放上去⼩⼿形状，字体颜⾊变化7.⼆级菜单出现位置，⼆级菜单边框，⿏标放到⼆级菜单上，字体颜⾊变化。
HTML+CSS技能测试(带答案)
填空题：1.在HTML显示单选框的代码是：<input type= radio />。
2.写出HTML代码中的所有单标签 <br><hr><img><input><param><meta><link> 。
3.文字居中的CSS代码是____text-align:center________。
4.<input id=’user’ class=’user’ type=’text’ >,根据代码书写其属性选择器[type=’text’]5.为div设置类a与b,应编写HTML代码_<div class=”a b”>_</div>_________。
6.在CSS中边框使用： border 内边距： padding 外边距： margin 。
7. Li 标签必须直接嵌套于ul、ol中。
8.CSS属性overflow用于设置元素超过宽度时是否隐藏或显示滚动条。
9.10.HTML锚点实现使用属性 name 与链接的 href 属性配合完成。
单选题：1.HTML指的是（ A ）A.超文本标记语言（Hyper Text Markup Language）B.家庭工具标记语言（Home Tool Markup Language）C.超链接和文本标记语言（Hyperlinks and Text Markup Language）D.超级标记语言（Super markup language）2.Web 标准的制定者是（ B ）A.微软（Microsoft）B.万维网联盟（W3C）C.网景公司（Netscape）D.腾讯公司（Tencent）3.下列说法描述正确的是AA.HTML 不是一种编程语言，而是一种标记语言(markup language)B.HTML 代码不能用文本编辑工具编写C.HTML中的标签全部都是成对出现的D.HTML的head部分与body部分书写位置可以嵌套4.在下列的 HTML 中，哪个是最大的标题（ D ）A.<h6>B.<head>C.<heading>D.<h1>5.下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度( C )6. A. display:inline B. display:none C. display:block D.display:inheric7.选出你认为最合理的定义标题的方法( C )8. A. <span class=”heading”>文章标题</span>9. B. <p><b>文章标题</b></p>10. C. <h1>文章标题</h1>11. D. <strong>文章标题</strong>12.br标签在HTML中语义为( A )A.换行B.强调C.段落D.标题13.下面对于Web应用描述正确的是（ C ）A.Web应用只能使用HTML5+CSS3 开发B.Web基于浏览器才能运行，所以开发成本很高C.Web应用可以及时上线，免去审核烦恼D.Web应用的用户体验感非常好14.HTML指的是（ A ）A.超文本标记语言(Hyper Text Markup Language)B.家庭工具标记语言(Home Tool Markup Language)C.超链接和文本标记语言(Hyperlinks and Text Markup Language)D.HTML 指的是普通的文本开发语言 (Hyper Text Markup Language)15.HTML5 之前的 HTML 版本是（ A ）A.HTMLB.HTML 4C.HTMLD.HTML16.在HTML代码中，下列哪个可以插入折行、换行（ A ）A.<br>B.<lb>C.<rb>D.<break>17.请选择产生粗体字的 HTML 标签：（ C ）A.<bold>B.<bb>C.<b>D.<bld>18.如何制作电子邮件链接（ C ）A.<a href="xxx@yyy">B.<mail href="xxx@yyy">C.<a href="mailto:xxx@yyy">D.<mail>xxx@yyy</mail>19.在下列HTML代码中，哪个可以添加背景颜色（ C ）A.<body color=’red’>B.<background>red</background>C.<body bgcolor=’red’>D.<body color:red>20.以下选项中能产生斜体字的HTML标签是（ A ）A.<i>B.<italics>C.<ita>D.<ii>21.如何在新窗口打开链接（ B ）A.<a href="url" new>B.<a href="url" target="_blank">C.<a href="url" target="new">D.<a href="url" target="_self">22.下列HTML代码中，哪个可以产生超链接（ B ）23.<a url=’ href=’ > name=’以下选项中，哪个全部都是表格标签（ B ）A.<table><head><tfoot>B.<table><tr><td>C.<table><tr><tt>D.<table><body><tr>24.请选择可以使单元格中的内容进行左对齐的正确 HTML 标签：（ A ）A.<td align="left">B.<td valign="left">C.<td leftalign>D.<tdleft>25.如何产生带有数字标识的列表（有序列表）（ B ）A.<ul>B.<ol>C.<dl>D.<list>26.如何产生带有圆点列表符号的列表（ D ）A.<dl>B.<list>C.<ol>D.<ul>27.下列HTML代码中，哪个可以产生下拉列表（ D ）A.<list>B.<input type=’list’/>C.<input type=’dropdown’ />D.<select>28.在下列的 HTML 中，哪个可以产生复选框（ C ）A.<input type="check">B.<checkbox>C.<input type="checkbox">D.<check>29.在下列的 HTML 中，哪个可以产生文本区（textarea）（ A ）A.<textarea>B.<input type="textarea">C.<input type="textbox">D.<textfield>30.在下列的 HTML 中，哪个可以产生文本框（ C ）A.<input type="textfield">B.<textinput type="text">C.<input type="text">D.<textfield>31.在下列的 HTML 中，哪个可以插入图像（ C ）A.<img href="">B.<image src="">C.<img src="">D.<img></img>32.下列HTML代码中，哪个可以插入背景图像（ B ）A.<body src=’’ />B.<body background = ‘’ />C.<background img=’’ />D.<img src=’’ background/>33.下面哪项不可以对一个DOM设置它的CSS样式（ C ）A.外部样式表，引入一个外部css文件B.内部样式表，将css代码放在 <head> 标签内部C.外联样式，将css样式直接定义在外部的HTML元素上D.内联样式，将css样式直接定义在 HTML 元素内部34.以下哪个CSS属性能让文本缩进显示（ A ）A.text-indentB.text-alignC.text-transformD.text-decoration35.在HTML文档中，引用外部样式表的正确位置是（ D ）A.文档的末尾B.文档的顶部C.<body>部分D.<head>部分36.下列选项中可用来定义内联样式的HTML代码是（ D ）A.FontB.ClassC.StylesD.Style37.下列选项中CSS语法正确的是（ C ）A.body:color=blackB.{body:color=black(body)}C.body{color:black}D.{body;color:black}38.下列选项中能为页面上所有的<h1>元素添加背景颜色的是（ B ）A.{background-color:#ffffff}B.h1{background-color:#ffffff}C.{background-color:#ffffff}D.all{background-color:#ffffff}39.下列选项中能控制文本尺寸的CSS属性是（ A ）A.font-sizeB.text-styleC.font-styleD.text-size40.如何使文字以大写字母开头（ A ）A.text-transform:capitalizeB.无法通过CSS来实现C.text-transform:uppercaseD.text-transform:lowercase41.如何改变元素的字体类型（ C ）A.font=B.f:C.font-family:D.font-size:42.如何使文本变为粗体（ B ）A.font:bB.font-weight:boldC.style:boldD.font:bold43.CSS指的是（ B ）puter Style SheetsB.Cascading Style SheetsC.Creative Style SheetsD.Colorful Style Sheets44.在以下的 HTML 中，哪个是正确引用外部样式表的方法（ B ）A.<style src="">B.<link rel="stylesheet" type="text/css" href="">C.<stylesheet></stylesheet>D.<stylesheet rel="stylesheet" type="text/css" href=""></stylesheet>45.哪个 HTML 标签用于定义内部样式表（ A ）A.<style>B.<script>C.<css>D.<stylesheet>46.哪个 HTML 属性可用来定义内联样式（ D ）A.fontB.classC.stylesD.style47.如何在 CSS 文件中插入注释（ C ）内嵌样式表 B. 行内样式表 C. 外部样式表文件 D. 类样式表48.在HTML中，可以使用（ D ）标记向网页中插入GIF动画文件。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在html中使用代码做出下拉菜单（列表框）的方法,例子如下：<body>
<form action="zcsave.jsp"method="post">
帐号：<input type="text"name="userId">
<br>密码：<input type="password"name="password">
<br>性别：男<input type="radio"name="xb"value="男">女<input type="radio"name="xb"value="女">
<br>姓名：<input type="text"name="xm">
<br>民族：<select name="mz"id="mz"disable=true>
<option value="壮族">壮族</option>
<option value="汉族">汉族</option>
<option value="回族">回族</option>
<option value="满族">满族</option>
<option value="苗族">苗族</option>
</select>
<br>电话：<input type="text"name="dh">
<br>地址：<input type="text"name="dz"><br>
<input type="submit"value="注册">
</form>
</body>
效果如下，大家自行领会：。