百度首页代码(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">      <!-- 它可以使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(),而是应该监听下拉框是否已存在,若存在,则鼠标移出下拉框时候下拉框消失,若下拉框不存在的时候,则用户鼠标落在“设置”上面时,显示下拉框。

  • 13
    点赞
  • 43
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值