1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>百度一下,你就知道</title>
  6.     <link href="css/index.css" rel="stylesheet">
  7. </head>
  8. <body>
  9. <!--头部-->
  10. <div id="header">
  11.     <!--javascript:void(0)-->
  12.     <a href="#">新闻</a>
  13.     <a href="#">hao123</a>
  14.     <a href="#">地图</a>
  15.     <a href="#">视频</a>
  16.     <a href="#">贴吧</a>
  17.     <a href="#">登录</a>
  18.     <a href="#">设置</a>
  19.     <a href="#" class="more-product">更多产品</a>
  20. </div>
  21. <!--主要内容-->
  22. <div id="content">
  23.     <!--中间的logo图片-->
  24.     <div class="logo">
  25.         <img src="data:images/logo_white_ee663702.png">
  26.     </div>
  27.     <!--中间的搜索(搜索框和按钮)-->
  28.     <div class="search">
  29.         <input type="text" value="">
  30.         <a href="#">百度一下</a>
  31.     </div>
  32.     <!--中间下面的图片-->
  33.     <div class="dom">
  34.         <img src="data:images/d_1.png">
  35.         <img src="data:images/d_2.png">
  36.         <img src="data:images/d_3.png">
  37.         <img src="data:images/d_4.png">
  38.     </div>
  39.     <!--中间下面的图片-->
  40.     <div class="dom">
  41.         <img src="data:images/d_5.png">
  42.         <img src="data:images/d_6.png">
  43.         <img src="data:images/d_7.png">
  44.         <img src="data:images/d_8.png">
  45.     </div>
  46. </div>
  47. <!--尾部-->
  48. <div id="footer">
  49.     <p class="footer-top">
  50.         <a href="#">把百度设为主页</a>
  51.         <a href="#">关于百度 </a>
  52.         <a href="#">About Baidu</a>
  53.     </p>
  54.     <p class="footer-bottom">
  55.         ©2015 Baidu <a href="#">使用百度前必读</a> 意见反馈 京ICP证030173号
  56.         <img src="data:images/copy_rignt_24.png">
  57.     </p>
  58. </div>
  59. </body>
  60. </html>
  1. a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
  2.     padding:;
  3.     margin:;
  4. }
  5.  
  6. /*全局设置a标签的颜色*/
  7. a{
  8.     color: black;
  9. }
  10.  
  11. body{
  12.     /*设置整个页面的字体大小都是13px*/
  13.     font-size: 13px;
  14.     /*背景图片*/
  15.     background: url("../images/bg.jpg");
  16. }
  17.  
  18. /*头部*/
  19. #header{
  20.   /*设置透明度*/
  21.   background-color: rgba(0, 0, 0, 0.2);
  22.   text-align: right;
  23.   /*外边距:上-右-下-左*/
  24.   margin: 0px 0px 30px 0;
  25.   height: 38px;
  26.   line-height: 38px;
  27. }
  28.  
  29. #header a{
  30.     color: white;
  31.     margin-right: 7px;
  32.     font-size: 15px;
  33.     font-weight: bolder;
  34. }
  35.  
  36. /*特殊的样式,可以单独设置一个类特殊设置*/
  37. #header a.more-product{
  38.     /*让行内标签---->行内-块级标签,就可以改变尺寸*/
  39.     display: inline-block;
  40.     background-color: #3385ff;
  41.     color: white;
  42.     width: 80px;
  43.     text-align: center;
  44.     height: 28px;
  45.     line-height: 28px;
  46.     text-decoration: none;
  47.     font-weight: normal;
  48. }
  49.  
  50. /*主要内容*/
  51. #content{
  52.   /*background-color: green;*/
  53. }
  54.  
  55. /*设置搜索框外部的div的宽度,可以让其水平居中*/
  56. #content .search{
  57.     /*background-color: blue;*/
  58.     width: 600px;
  59.     height: 33px;
  60.     /*居中*/
  61.     margin: 0 auto;
  62. }
  63.  
  64. #content .search input{
  65.     width: 500px;
  66.     height: 33px;
  67.     padding: 5px;
  68.     /*让内边距向内,伸缩,会占用内容的尺寸*/
  69.     box-sizing: border-box;
  70.     border: 1px solid #ddd;
  71. }
  72.  
  73. /*伪类:获得焦点的时候调用*/
  74. #content .search input:focus{
  75.     /*去除外边框*/
  76.     outline: none;
  77.     border:1px solid #3385ff;
  78. }
  79.  
  80. #content .search{
  81.     margin-bottom: 40px;
  82. }
  83.  
  84. /*让a标签右浮动,只要设置了输入框的border之后,两个宽度加起来正好*/
  85. #content .search a{
  86.     display: inline-block;
  87.     background-color: #3385ff;
  88.     color: white;
  89.     width: 100px;
  90.     text-align: center;
  91.     height: 33px;
  92.     /*设置垂直居中*/
  93.     line-height: 33px;
  94.     /*去除下划线*/
  95.     text-decoration: none;
  96.     font-weight: normal;
  97.  
  98.     float: right;
  99. }
  100.  
  101. #content .logo{
  102.     text-align: center;
  103. }
  104.  
  105. #content .logo img{
  106.     width: 270px;
  107.     height: 129px;
  108. }
  109.  
  110. #content .dom{
  111.     text-align: center;
  112. }
  113.  
  114. #content .dom img{
  115.    width: 150px;
  116.    margin: 5px;
  117. }
  118.  
  119. #content .dom img:hover{
  120.     /*不透明度*/
  121.     opacity: 0.7;
  122. }
  123.  
  124. /*尾部*/
  125. #footer{
  126.   margin-top: 120px;
  127.   /*background-color: yellow;*/
  128.   text-align: center;
  129. }
  130.  
  131. #footer p{
  132.     margin-top: 10px;
  133. }
  134.  
  135. #footer p a{
  136.     color: blue;
  137. }
  138.  
  139. #footer p.footer-top a{
  140.     margin: 0 5px;
  141. }

H5 百度一下,你就知道的更多相关文章

  1. H5+百度地图定位

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. HTML5 页面制作工具

    https://www.zhihu.com/question/30087283 HTML5 页面制作工具 免费的基于 HTML 5 的 Web Apps 生成器工具网站     81 235 初页 制 ...

  3. java 使用 WebUploader

    参考: http://blog.csdn.net/finalAmativeness/article/details/54668090 最近项目需要多文件上传. 所以使用了 baidu的 webuplo ...

  4. Android程序员学WEB前端(1)-HTML(1)-标准结构常用标签-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522043觉得博文有用,请点赞,请评论,请关注,谢谢!~ 8月份了,换工作有2个月了 ...

  5. 在iOS APP中使用H5显示百度地图时如何支持HTTPS？

    现象: 公司正在开发一个iOSAPP,使用h5显示百度地图,但是发现同样的H5页面,在安卓可以显示出来,在iOS中就显示不出来. 原因分析: 但是现在iOS开发中,苹果已经要求在APP中的所有对外连接 ...

  6. H5获取的经纬度，该怎么在百度地图中查看？

    之前理所当然的的到百度的坐标拾取系统, 输入H5获取的经纬度坐标,然后查询,然后发现老是有误差,而且误差都是一样的规律:偏实际位置西南方约1000~1500米左右. 以为是H5获取经纬度必然会产生这么 ...

  7. H5结合百度map实现GPS定位

    前言 目前我们做m端时都会用到定位,当用户第一次打开h5页面时会启动gps定位,并结合百度map来查找城市.按照我们的逻辑思路就是gps定位获取经纬度,传到后台调用百度的一个接口查找城市名称. 1.查 ...

  8. H5端调起百度地图、腾讯地图app

    来自一个需求的总结: 在微信公众号中根据地图上的marker和label,或者搜索结果点击调起地图APP进行导航. 一开始是使用百度地图进行开发,后面转腾讯是因为微信不允许不是自家或者合作方的APP在 ...

  9. 【H5最强攻略】百度人脸情绪实时识别

    最近看的各位大佬都在体验百度大脑2019年全新上线的24项AI能力! (我也按耐不住了,赶紧走一波- 哈哈) 接下来要介绍的就是H5端的人脸检测攻略. 附带详细的介绍,代码,以及演示体验等 欢迎提出各 ...

随机推荐

  1. [转]Gitlab-CI持续集成之Runner配置和CI脚本

    本文转自:https://www.cnblogs.com/jiukun/p/7481287.html 一.简介 1. 为实现持续集成,需为该项目准备以下两样东西: 1)软件集成脚本.(gitlab-c ...

  2. 【转载】C#中自定义Sort的排序规则IComparable接口

    C#中的List集合在排序的时候,如果不使用Lambda表达式进行排序的话,一般调用Sort()方法进行排序,如果希望Sort()方法排序后的结果跟我们预想的效果一致或者按照我们自定义的规则排序,则需 ...

  3. Log4Net使用学习笔记

    项目源文件下载https://files.cnblogs.com/files/ckym/Log4NetTestSourceCode.zip Log4net是一款非常好用的日志记录的框架,使用它可以实现 ...

  4. 杭电ACM2015--偶数求和

    偶数求和 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  5. EditPlus提示错误：找不到或无法加载主类

    问题:EditPlus提示错误:找不到或无法加载主类. 原因:换了另外一台电脑,忘了什么时候,环境变量被误删了. 解决问题: 1.检查文件名和public修饰的类名是否一致. 2.文件查看时,有没有隐 ...

  6. 【代码笔记】Web-CSS-CSS Float(浮动)

    一, 效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  7. html的标签分类————可以上传的数据篇

    html的标签可以分为: 块级标签:div(白板),H系列(加大加粗,H1—H7,字体一般逐渐变小,一般用作标题),p标签(段落之间有间距) 行内标签:span(白板) 此外,标签之间是可以嵌套的.为 ...

  8. Jquery 使用和Jquery选择器

    jQuery中的顶级对象($) jQuery 中最常用的对象即 $ 对象,要想使用 jQuery 的方法必须通过 $ 对象.只有将普通的 Dom 对象封装成 jQuery 对象,然后才能调用 jQue ...

  9. grid++报表使用时注意事项

    #开始使用:Grid++Report 可以在 Visual C#.Net 与 Visual Basic.Net 下的 WinForm 项目中使用.在项目中使用 Grid++Report 之前,首先必须 ...

  10. [伟哥开源项目基金会](https://github.com/AspNetCoreFoundation)

    伟哥开源项目基金会 GitHub_base=> 伟哥开源项目基金会 该项目作者为伟哥,GitHub地址:https://github.com/amh1979: 该项目维护者为鸟窝,GitHub地 ...