<!DOCTYPE html>

<html>

    <head>

    <meta charset="UTF-8">

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

    </head>

    <body>

        <div id="wrapper">

            <header>

            <nav>

                <ul>

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

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

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

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

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

                    <li><a href="#">学术</a></li>

                    <li><a href="#">登陆</a></li>

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

                        <ul>

                            <li><a href="">搜索设置</a></li>

                            <li><a href="">高级搜索</a></li>

                            <li><a href="">关闭预测</a></li>

                            <li><a href="">搜索历史</a></li>

                        </ul>

                    </li>

                    <li><a href="#">更多产品</a></li>

                </ul>

            </nav>

            </header>

            <div id="main">

                <img src="../../img/bd_logo1.png" alt=""/>

                <form>

                    <input type="text"  maxlength="255"/>

                    <input type="button" value="百度一下"/>

                </form>

            </div>

            <footer>

                <nav >

                    <ul>

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

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

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

                        <li><a href="#">百度推广</a></li>

                    </ul>

                </nav>

             <p>©2017&nbsp;Baidu&nbsp;<a href="#" class="copyright">使用百度必读</a>

            <a href="#" class="copyright">意见反馈</a>

            <span class="copyright">京ICP证666666号</span></p>

            </footer>

            </div>

        </div>

        <style>

            *{margin: 0;padding: 0;}

            body{font:1em arial;background:#FFFFFF}

　　　　　　　#wrapper{height: 100%;width:100% ;}

            li{list-style: none;}

            header nav{float:right;margin: 20px;}

            header nav ul li{float: left;line-height: 20px;position: relative;}

            header nav ul li ul {display: none;width:6em;position: absolute;}

            header nav ul li ul li a{background: burlywood;padding: 5px;}

            header nav li  a{display: block;padding: 10px;}

            header nav li:hover>ul{display: block;} 

            div#main{clear: both;text-align: center;

            position: absolute;top:50%;left: 50%;transform: translate(-50%,-150%);}

            #main img{width: 300px;height: 150px;}

            #main form{margin: 20px auto 10px;}

            #main input:nth-child(1){border: 1px solid #555;width: 600px;height: 32px;margin: 6px -5.1px 0 8px;}

            #main input:nth-child(2){width: 100px;;height: 37px;margin: 0;background:blue ;color: white;line-height: 32px;border:0;}

            footer{text-align: center;position: absolute;bottom: 50px;right: 0;left: 0;font-size:0.7em ;}

            footer nav ul li{display: inline-block;}

            footer nav ul li a{margin: 0 9px 5px;display: block;color: #999;line-height: 25px;}

            footer p a {padding: 5px;}

        </style>

    </body>

</html>

此效果运用的是流动布局，效果图如下：

css模仿百度首页的更多相关文章

  1. 模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）

    模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...

  2. 模仿百度首页“元宵节汤圆”动图（js的定时任务：setInterval）

    模仿百度首页“元宵节汤圆”动图:(js的定时任务:setInterval) 原理:需要一张切图,通过不断定位使得图片就像一帧一帧的图片在播放从而形成了动画 效果图: 切图地址: https://ss1 ...

  3. 纯css模仿天猫首页

    <style> *{margin:0;padding:0} li{list-style:none} a{text-decoration:none} #wrapper{font: 12px/ ...

  4. html+css 百度首页练习

    这几天看完了<css权威指南>,写了个百度页面,不带js的纯静态,主要目的就是掌握页面布局,字体颜色之类的没有深究. 写完了觉得很简单,毕竟一开始觉得只要模仿的像就行,但是缩小了浏览器窗口 ...

  5. 2019.4.9 HTML+CSS写静态百度首页

    静态百度首页 4.10更新 更改所有样式为内部引入 换行全部换成使用边距实现 链接:https://pan.baidu.com/s/1iFNnQNw4PUtdj3MjlV-LZA 提取码:5b2i

  6. html布局小练习（百度首页）

    绝对定位百度首页练习 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  7. 一款基于jQuery的仿百度首页滑动选项卡

    今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   ...

  8. 住javaWeb分页实现（模拟百度首页）

    本文来源于 http://blog.csdn.net/tjpu_lin/article/details/41050475 近期在开发一个项目,项目中有非常多数据展示的模块.所以要用到分页,网上搜了非常 ...

  9. 用Html模仿百度一下你就知道

    用Html模仿百度一下你就知道.... ------------------------------- <!doctype html> <html lang="en&quo ...

随机推荐

  1. 四大算法解决最短路径问题（Dijkstra+Bellman-ford+SPFA+Floyd）

    什么是最短路径问题? 简单来讲,就是用于计算一个节点到其他所有节点的最短路径. 单源最短路算法:已知起点,求到达其他点的最短路径. 常用算法:Dijkstra算法.Bellman-ford算法.SPF ...

  2. JavaWeb学习笔记（二十二）—— 过滤器filter

    一.什么是过滤器 过滤器filter是JavaWeb三大组件之一,它与Servlet很相似!不过过滤器是用来拦截请求的,而不是处理请求的.WEB开发人员通过Filter技术,对web服务器管理的所有w ...

  3. 获取浏览器用户代理（user-agent）

    获取浏览器用户代理(user-agent) 用户代理(user-agent)是浏览器客户端与服务器交互时的重要信息之一,用于帮助网站识别请求用户的浏览器类别,以便于网站发送相应的网页数据. 用户代理数 ...

  4. UNIX SHELL基础知识总结(二)

    1. vim,vi及ex的关系 vim不需要安装,vi为ex的“Visual Mode”,Vim是vi的高级版本: 2. Unix Shell 快捷键 Ctrl+a/e将光标定位到 命令的头/尾 Ct ...

  5. MongoDB基本增删改查操作-mongo shell

    基础 1.查看所有数据库: show dbs 2.选择数据库: use test 3.查看数据库中有哪些集合: show collections 如下图: 查询 1.查看集合中有哪些数据,其中abc为 ...

  6. Javascript面向对象编程（转）

    http://blog.csdn.net/lmj623565791/article/details/29210679 其实,从这个面向对象编程的例子来看,思路还是很清晰的. 第一步: 构造函数,用于初 ...

  7. 关于echart没有数据显示暂无数据

    对于echart当没有数据的时候怎么显示, 首先,如果你的series的值为空值的话,曲线将是一片空白,什么都不会有,所以在这里就要进行一个判断,如果没有值的话,人为的添加一个键 if(Object. ...

  8. Vim改装成一个IDE编程环境

      1 写在前面   Linux下编程一直被诟病的一点是: 没有一个好用的IDE, 但是听说Linux牛人, 黑客之类的也都不用IDE. 但是对我等从Windows平台转移过来的Coder来说, 一个 ...

  9. ant如何编译项目

    Ant的概念 可能有些读者并不理解什么是Ant以及如何使用它,但只要使用通过Linux系统的读者,应该知道make这个命令.当编译Linux内核及一些软件的源程序时,经常要用这个命令.Make命令其实 ...

  10. Clojure编写一个阶乘程序 使用递归

    这是递归 (def f     (fn fb     [x]    (if (< x 2)      1      (* x (fb (- x 1)) )     )        )  ) ( ...