<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>百度一下,你就知道</title>

    <link href="css/index.css" rel="stylesheet">

</head>

<body>

<!--头部-->

<div id="header">

    <!--javascript:void(0)-->

    <a href="#">新闻</a>

    <a href="#">hao123</a>

    <a href="#">地图</a>

    <a href="#">视频</a>

    <a href="#">贴吧</a>

    <a href="#">登录</a>

    <a href="#">设置</a>

    <a href="#" class="more-product">更多产品</a>

</div>

<!--主要内容-->

<div id="content">

    <!--中间的logo图片-->

    <div class="logo">

        <img src="data:images/logo_white_ee663702.png">

    </div>

    <!--中间的搜索(搜索框和按钮)-->

    <div class="search">

        <input type="text" value="">

        <a href="#">百度一下</a>

    </div>

    <!--中间下面的图片-->

    <div class="dom">

        <img src="data:images/d_1.png">

        <img src="data:images/d_2.png">

        <img src="data:images/d_3.png">

        <img src="data:images/d_4.png">

    </div>

    <!--中间下面的图片-->

    <div class="dom">

        <img src="data:images/d_5.png">

        <img src="data:images/d_6.png">

        <img src="data:images/d_7.png">

        <img src="data:images/d_8.png">

    </div>

</div>

<!--尾部-->

<div id="footer">

    <p class="footer-top">

        <a href="#">把百度设为主页</a>

        <a href="#">关于百度 </a>

        <a href="#">About Baidu</a>

    </p>

    <p class="footer-bottom">

        ©2015 Baidu <a href="#">使用百度前必读</a> 意见反馈 京ICP证030173号

        <img src="data:images/copy_rignt_24.png">

    </p>

</div>

</body>

</html>
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{

    padding:;

    margin:;

}

/*全局设置a标签的颜色*/

a{

    color: black;

}

body{

    /*设置整个页面的字体大小都是13px*/

    font-size: 13px;

    /*背景图片*/

    background: url("../images/bg.jpg");

}

/*头部*/

#header{

  /*设置透明度*/

  background-color: rgba(0, 0, 0, 0.2);

  text-align: right;

  /*外边距:上-右-下-左*/

  margin: 0px 0px 30px 0;

  height: 38px;

  line-height: 38px;

}

#header a{

    color: white;

    margin-right: 7px;

    font-size: 15px;

    font-weight: bolder;

}

/*特殊的样式,可以单独设置一个类特殊设置*/

#header a.more-product{

    /*让行内标签---->行内-块级标签,就可以改变尺寸*/

    display: inline-block;

    background-color: #3385ff;

    color: white;

    width: 80px;

    text-align: center;

    height: 28px;

    line-height: 28px;

    text-decoration: none;

    font-weight: normal;

}

/*主要内容*/

#content{

  /*background-color: green;*/

}

/*设置搜索框外部的div的宽度,可以让其水平居中*/

#content .search{

    /*background-color: blue;*/

    width: 600px;

    height: 33px;

    /*居中*/

    margin: 0 auto;

}

#content .search input{

    width: 500px;

    height: 33px;

    padding: 5px;

    /*让内边距向内,伸缩,会占用内容的尺寸*/

    box-sizing: border-box;

    border: 1px solid #ddd;

}

/*伪类:获得焦点的时候调用*/

#content .search input:focus{

    /*去除外边框*/

    outline: none;

    border:1px solid #3385ff;

}

#content .search{

    margin-bottom: 40px;

}

/*让a标签右浮动,只要设置了输入框的border之后,两个宽度加起来正好*/

#content .search a{

    display: inline-block;

    background-color: #3385ff;

    color: white;

    width: 100px;

    text-align: center;

    height: 33px;

    /*设置垂直居中*/

    line-height: 33px;

    /*去除下划线*/

    text-decoration: none;

    font-weight: normal;

    float: right;

}

#content .logo{

    text-align: center;

}

#content .logo img{

    width: 270px;

    height: 129px;

}

#content .dom{

    text-align: center;

}

#content .dom img{

   width: 150px;

   margin: 5px;

}

#content .dom img:hover{

    /*不透明度*/

    opacity: 0.7;

}

/*尾部*/

#footer{

  margin-top: 120px;

  /*background-color: yellow;*/

  text-align: center;

}

#footer p{

    margin-top: 10px;

}

#footer p a{

    color: blue;

}

#footer p.footer-top a{

    margin: 0 5px;

}

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. RabbitMQ基础系列--客户端开发

    Ⅰ.高层接口 ConnectionFactory Connection Channel Consumor Ⅱ.操作流程及API [一]创建连接工厂ConnectionFactory Connectio ...

  2. JS引擎线程的执行过程的三个阶段（二）

    继续JS引擎线程的执行过程的三个阶段(一) 内容, 如下: 三. 执行阶段 1. 网页的线程 永远只有JS引擎线程在执行JS脚本程序,其他三个线程只负责将满足触发条件的处理函数推进事件队列,等待JS引 ...

  3. formData批量上传的多种实现

    前言 最近项目需要批量上传附件,查了下资料,网上很多但看着一脸懵,只贴部分代码,介绍也不详细,这里记录一下自己的采坑与多种实现,以免以后忘记. 这里先介绍下FormData对象,以下内容摘自:http ...

  4. C# winform在关闭窗体的时候及时释放内存问题

    winform中如果每次打开的窗体都是通过new出来的,发现几次过后就会出现提示”内存不足“问题,那么在关闭窗体的时候怎么处理可以及时释放内存?dispose方法可能也无法解决这个问题.我们可以每次在 ...

  5. python爬虫项目-爬取雪球网金融数据（关注、持续更新）

    (一)python金融数据爬虫项目 爬取目标:雪球网(起始url:https://xueqiu.com/hq#exchange=CN&firstName=1&secondName=1_ ...

  6. TypeScript，初次见面，请多指教 ?

    为什么用 TS ? 说实话,最开始并没有想把 TS 用到实际项目中来,一来是感觉"类型"会限制 JS 的优势(好吧,就是浪写浪惯了):二来听闻 TS + Redux 的酸爽滋味,有 ...

  7. react 阻止事件冒泡

    前言 在学习react阻止事件冒泡,需要先了解 合成事件 和 原生事件 合成事件:在jsx中直接绑定的事件,就是合成事件: 原生事件: 通过js原生代码绑定的事件,就是原生事件: react事件:re ...

  8. vue关闭代码检查eslint

    confing/index.js 文件里面的 useEslint 改成false就可以关闭代码检查了   不过为了代码的规范性,不建议关闭!

  9. Spark之Pipeline处理模式

    一.简介 Pipeline管道计算模式:只是一种计算思想,在数据处理的整个流程中,就想水从管道流过一下,是顺序执行的. 二.特点 1.数据一直在管道中,只有在对RDD进行持久化[cache,persi ...

  10. mmz-asio4delphi死链接的解决办法

    最近一段时间,因为忙于网络的项目,特意到网上找了些例子,特意花时间研究了一下马敏钊写的 mmz-asio4delphi 感觉很好用,不过深入研究之后,发现一个问题. 马大的这个代码,会产生死链接.   ...