Rumah >hujung hadapan web >html tutorial >html学习-_html/css_WEB-ITnose
html学习-_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:41:181075semak imbas
<!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>
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：CSS中的:after和:before的作用是什么_html/css_WEB-ITnoseArtikel seterusnya：CSS如何实现文字竖排效果