Home >Web Front-end >HTML Tutorial >html learning-_html/css_WEB-ITnose
html learning-_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:181076browse
<!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=gb2312" /> <title>二级下拉菜单</title> <style type="text/css"> *{margin:0px; padding:0px;} #Logo{width:100%; height:50px; background:#FF3300; position:relative;} #Logo ul{height:50px; width:1070px; margin:0px auto;} #Logo ul li{ padding:0px 30px;height:50px; list-style:none; float:left;text-align:center; line-height:50px; font-family:"微软雅黑";} #Logo ul li a{color:#FFFFFF; text-decoration:none;} #Logo ul li.hover{background:#990000;} #Logo ul li .menu{width:100%; height:250px; background:#009900; position:absolute; left:0px; top:50px; border-bottom:3px solid #000000; display:none;} </style> </head> <body> <div id="Logo"> <ul> <li><a href="http://www.baidu.com" target="_blank">首页</a></li> <li><a href="#">时装趋势</a> <div class="menu">时装趋势</div></li> <li><a href="#">嘉人美妆</a> <div class="menu">嘉人美妆</div></li> <li><a href="#">嘉人观点</a> <div class="menu">嘉人观点</div></li> <li><a href="#">珠宝腕表</a> <div class="menu">珠宝腕表</div></li> <li><a href="#">生活</a> <div class="menu">生活</div></li> <li><a href="#">杂志</a> <div class="menu">杂志</div></li> <li><a href="#">专题嘉人</a> <div class="menu">专题嘉人</div></li> <li><a href="#">TV</a> <div class="menu">TV</div></li> </ul> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $("#Logo ul li").hover(function(){ $(this).addClass("hover").siblings().removeClass("hover");//添加class="hover"; $(this).find(".menu").slideDown();//慢慢向下展示; },function(){ $(this).find(".menu").hide();//慢慢向上收回; $(this).removeClass("hover"); }); </script> </body> </html> <!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=gb2312" /> <title>注册表单</title> </head> <body> <form action="http://173.145.2.105:9090" method="get"> <table border="1" bordercolor="#FF0000" cellpadding="10" cellspacing="0" width="600"> <tr> <th colspan="2">注册表单：</th> </tr> <tr> <td>用户名称：</td> <td><input type="text" name="user"/></td> </tr> <tr> <td>用户密码：</td> <td><input type="password" name="psw"/></td> </tr> <tr> <td>确认密码：</td> <td><input type="password" name="repsw"/></td> </tr> <tr> <td>选择性别：</td> <td><input type="radio" name="sex" value="man" checked="checked" />男 <input type="radio" name="sex" value="woman" />女</td> </tr> <tr> <td>选择技术：</td> <td> <input type="checkbox" name="tech" value="java"/>JAVA <input type="checkbox" name="tech" value="html"/>HTML <input type="checkbox" name="tech" value="css"/>CSS </td> </tr> <tr> <td>选择国家：</td> <td> <select> <option value="none">--选择国家--</option> <option value="cn">中国</option> <option value="am">美国</option> <option value="en">英国</option> </select> </td> </tr> <tr> <td>日期：</td> <td> 2014-12-03 </td> </tr> <tr> <th colspan="2"><input type="reset" value="清除数据" /> <input type="submit" value="提交数据" /></th> </tr> </table> </form><br /> <marquee direction="down" behavior="alternate" height="100" bgcolor="#FF0000" >嘿嘿！看看我。</marquee> <marquee direction="up" behavior="alternate" height="100" bgcolor="#00FF00" >嘿嘿！看看我。</marquee> <marquee direction="right" behavior="alternate" height="100" width="300" bgcolor="#0000FF">嘿嘿！看看我。</marquee> <marquee direction="left" behavior="alternate" bgcolor="#FFFF00">嘿嘿！看看我</marquee> </body> </html>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn