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

最新推荐文章于 2023-12-18 10:17:17 发布

山月o

最新推荐文章于 2023-12-18 10:17:17 发布

阅读量1w

点赞数 13

文章标签：前端 CSS HTML jQuery

本文链接：https://blog.csdn.net/weixin_43507682/article/details/103008355

版权

<!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">      <!-- 它可以使showList靠右排列，它本身占用了一整行的，若无此元素，下面的ul不能居右 -->
      <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实现
此处是利用jQuery动态实现，并且要注意，不能直接给设置上面添加stop()和hide（），而是应该监听下拉框是否已存在，若存在，则鼠标移出下拉框时候下拉框消失，若下拉框不存在的时候，则用户鼠标落在“设置”上面时，显示下拉框。

山月o

关注

13
点赞
踩
43

收藏

觉得还不错? 一键收藏
1
评论
百度首页代码（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&...
复制链接

扫一扫