百度.rar

  • 易水寒1010
    了解作者
  • HTML
    开发工具
  • 1KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • 1 积分
    下载积分
  • 0
    下载次数
  • 2020-10-29 17:33
    上传日期
html实现的一个百度搜索页面,只有页面功能,无实际搜索功能
百度.rar
  • 百度.html
    5.2KB
内容介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度一下,你就知道</title> <style> .top{ margin-top: 10px; height: 30px; } .top .left{ float: left; height: 30px; } .top .left div{ float: left; margin-top: 8px; margin-left: 30px; font-size: 13px; font-family: Arial; color: #222222; } .top .left div:hover{ color: #4e6ef2; } .top .right{ float: right; } .top .right div{ float: left; margin-top: 8px; margin-left: 30px; font-size: 13px; font-family: Arial; color: #222222; } .top .right div:hover{ color: #4e6ef2; } .top .right .right_img{ height: 30px; width: 30px; margin-top: 0px; border-radius: 15px; } .middle{ margin-top: 30px; border: 0px dashed blue; height: 200px; } .middle .logo{ border: 0px solid red; text-align: center; } .middle .search{ margin:0 auto; border: 2px solid #4e6ef2; width: 600px; height: 40px; margin-top: 20px; position: absolute;/*相对位置*/ left: 50%; margin-left: -300px; border-radius: 10px; } .middle .search .input{ width: 450px; margin-left: 10px; border-width: 0px; outline: none; line-height: 38px; } .middle .search .camera{ background-image: url(camera.png); width: 38px; height: 38px; background-repeat: no-repeat;/*图片是否叠加*/ background-position: center;/*背景图片居中*/ } .middle .search .camera:hover{ background-image: url(camera2.png); } .middle .search .button{ background-color: #4e6ef2; color: white; height: 40px; line-height: 40px; width: 98px; text-align: center; border-top-right-radius: 7px; border-bottom-right-radius: 7px; } .middle .search .button:hover{ background-color: blue; } .middle .search div{ float: left; } .bottom{ border: 0px solid green; position: fixed; bottom: 0px; width: 100%; } .bottom .left{ height: 40px; float: left; line-height: 36px; } .bottom .left a{ color: #9195a3; font-size: 12px; margin-left: 15px; text-decoration: none; } .bottom .left a:hover{ color: black; } .bottom .right{ float: right; margin-right: 30px; line-height: 36px; } .bottom .right a{ color: #9195a3; font-size: 12px; margin-left: 15px; text-decoration: none; } .bottom .right a:hover{ color: black; } .bottom .right span{ color: #9195a3; font-size: 12px; margin-left: 15px; text-decoration: none; } </style> </head> <body> <div class="top"> <div class="left"> <div>新闻</div> <div>hao123</div> <div>地图</div> <div>视频</div> <div>贴吧</div> <div>学术</div> <div>更多</div> </div> <div class="right"> <div>石家庄</div> <div> 15℃ </div> <div style="background-color: blue;color: white;border-radius: 3px;padding: 3px;margin-top: 4px">良</div> <div>设置</div> <div style="margin-top: 0px"></div> <div>caoxiaopan1010</div> </div> </div> <div class="middle"> <div class="logo"> </div> <div class="search"> <div> <input class="input" type="text"> </div> <div class="camera"></div> <div class="button">百度一下</div> </div> </div> <div class="bottom"> <div class="left"> <a href="#" rel='nofollow' onclick='return false;'>设为首页</a> <a href="#" rel='nofollow' onclick='return false;'>关于百度</a> <a href="#" rel='nofollow' onclick='return false;'>About Baidu</a> <a href="#" rel='nofollow' onclick='return false;'>百度营销</a> <a href="#" rel='nofollow' onclick='return false;'>使用百度前必读</a> <a href="#" rel='nofollow' onclick='return false;'>意见反馈</a> <a href="#" rel='nofollow' onclick='return false;'>帮助中心</a> </div> <div class="right"> <span>©2020 Baidu</span> <span>(京)-经营性-2017-0020</span> <a href="#" rel='nofollow' onclick='return false;'>京公网安备11000002000001号</a> <span>京ICP证030173号</span> </div> </div> </body> </html>
评论
    相关推荐
    • html
      html 佩拉蒂罕(Pelatihan)传播HTML和CSS
    • html相关
      html相关html相关html相关
    • htmlbasic
      html基本
    • Html教程
      Html教程 Html教程 Html教程 Html教程
    • HTML Refrence
      HTML参考手册,非常不错的做html的工具啊
    • html教程
      HTML教程关于基本语法的使用
    • html指南
      html查询指南,html格式
    • html
      html html 2021.03.22 HTML在Codecademy(chapter1)中的课程身体,头部,h,p,img,视频,标题,跨度,强壮,em 2021.03.23 HTML在Codecademy中学习课程(第2章)!DOCTYPE htmlhtml,table,thead,tbody ...
    • html element
      html element. 网页设计,标准html element,
    • html学习
      html入门学习,适合初学者