百度首页代码（HTML+CSS+jQuery）

百科大全

更新时间：2025-10-05 13:53:5549

admin管理员组
文章数量:1794759

百度首页代码（HTML+CSS+jQuery）

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>百度首页</title> <script src="../jQuery/jquery-1.12.4.js" type="text/javascript"> </script> <style type="text/CSS"> *{ margin: 0; padding: 0; } .header{ height: 100px; /* background-color: pink; */ margin-top: 20px; } .header .show{ text-align: right; /* 在页面的右边显示 */ } .header .show .in,.set{ font-size: 12px; line-height: 12px; font-weight: normal; } .header .showList{ text-align: right; border: 1px solid #000000; box-shadow: border-box; float: right; display: none; } .header .show li{ list-style: none; display: inline-block; margin-right: 15px; font-size: 14px; font-weight: 500; } .header .show li a{ color: #000000; } .haeder .show li a:hover{ color: blue; } .header .showList li { font-size: 12px; font-weight: 400; margin-right: 5px; display: block; text-align: right; } .header .showList li a:hover{ background-color: royalblue; color: white; } .logo{ height: 150px; /* background-color: blue; */ text-align: center; /* 居中显示 */ margin-bottom: 10px; } .logo img{ width: 280px; height: 130px; margin: 10px auto; } .search{ height: 35px; /* background-color: red; */ text-align: center; /* position: absolute; */ } .search>input{ width: 550px; height: 35px; box-sizing: border-box; position: relative; } .search>button{ width: 100px; height: 35px; box-sizing: border-box; color: white; background-color: royalblue; border: none; position: absolute; } .QR{ margin-top: 60px; height: 110px; /* background-color: purple; */ text-align: center; /* 居中显示 */ } .QR img{ width: 110px; height: 110px; margin: 0 auto; } .QR,.QR1,.QR2,.QR3,.QR4{ text-align: center; /* 居中显示 */ } .QR2{ color: grey; margin-bottom: 30px; } .QR3{ text-decoration: underline; } .QR3 span,.QR4 span{ margin-right: 15px; } .QR4 span:nth-child(2){ text-decoration: underline; } .QR4 span:nth-child(4){ text-decoration: underline; } .QR3,.QR4{ font-size: 12px; color: gray; line-height: 25px; } </style> <script type="text/javascript"> $(function(){ // $(".set").hover(function(){ // $(".showList").show(); // },function(){ // $(".showList").hide(); // }); var flag1 = $(".showList").is(":hidden"); //表单不可见的时候,flag为true $(".set").mouseenter(function(){ if(flag1){ //表单不可见 $(".showList").show(); // alert(",,"); } }); $(".showList").mouseleave(function(){ //表单可见的时候,当鼠标移出表单时,表单消失 $(".showList").hide(); // alert("..."); }); }); </script> </head> <body> <div class="header"> <ul class="show"> <li><a href="javascript;:">新闻</a></li> <li><a href="javascript;:">hao123</a></li> <li><a href="javascript;:">地图</a></li> <li><a href="javascript;:">视频</a></li> <li><a href="javascript;:">贴吧</a></li> <li><a href="javascript;:">学术</a></li> <li><a class="in" href="javascript;:">登录</a></li> <li><a class="set" href="javascript:;">设置</a><br></li> <div class="help">  <ul class="showList"> <li><a>搜索设置</a></li> <li><a>高级搜索</a></li> <li><a>关闭预测</a></li> <li><a>隐私设置</a></li> </ul> </div> </ul> </div> <div class="logo"><img src="../image/baidu.png" ></div> <div class="search"> <input type="text" name="" id="" value="" /> <button type="button">百度一下</button> </div> <div class="QR"><img src="../image/QRcode.png" ></div> <div class="QR1"><span>下载百度APP</span></div> <div class="QR2"><span>有事搜一搜没事看一看</span></div> <div class="QR3"> <span>把百度设为主页</span> <span>关于百度</span> <span>About Baidu</span> <span>百度推广</span> </div> <div class="QR4"> <span>©2019 Baidu </span> <span>使用百度前必读意见反馈</span> <span>京ICP证030173号</span> <span>京公网安备11000002000001号</span> </div> </body> </html>

1.总体效果图 2.右上角的设置处下拉框效果此处是利用jQuery动态实现，并且要注意，不能直接给设置上面添加stop()和hide（），而是应该监听下拉框是否已存在，若存在，则鼠标移出下拉框时候下拉框消失，若下拉框不存在的时候，则用户鼠标落在“设置”上面时，显示下拉框。

本文标签：首页代码 html css JQuery

版权声明：本文标题：百度首页代码（HTML+CSS+jQuery）内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686815743a106399.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。