Heim > Artikel > Web-Frontend > html学习-_html/css_WEB-ITnose
html学习-_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:41:181030Durchsuche
<!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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS中的:after和:before的作用是什么_html/css_WEB-ITnoseNächster Artikel：CSS如何实现文字竖排效果