<!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. 进阶篇：4.3）DFA设计指南：防错设计（ 防呆设计）

    本章目的:每一个装配步骤都有设计防错. 1.前言 关于防错设计,作者有想说的话: 1)防错设计是DFA重要的一条.因为太过重要,作者单独开一分章写! 2)只有理解了设计防错的重要,才会去设计防错特征. ...

  2. 感想篇：7）知其然与知其所以然，KnowHow与KnowWhy

    本章目的:探究--知其然与知其所以然,KnowHow与KnowWhy. 1.Know-How体系与代价: 100多年的汽车研发历史表明,企业只有开发过两代车以上才能逐步建立和完善Know-How体系. ...

  3. Python下使用 redis数据库

    初识Rdeis数据库 简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zs ...

  4. npm 包管理工具

    能注册后看简单的功能 订单加信息 下单之前的判断要配合海潮的迁移数据 运行自定义的脚本 在 package.json 的 scripts 里添加自定义的结点 ( 比如 CSOR-serve ) &qu ...

  5. docker && k8s

    1.docker中网络模式中,有四个: host none bridge container 其中host模式相当于没用,省略了DNAT转换,直接运行在主机. docker network conne ...

  6. Java中的值传递和地址传递（传值、传引用）

    首先,不要纠结于 Pass By Value 和 Pass By Reference 的字面上的意义,否则很容易陷入所谓的“一切传引用其实本质上是传值”这种并不能解决问题无意义论战中.更何况,要想知道 ...

  7. 关于new Option()

    先来了解下,如何运用js实现select动态添加option. //1.动态创建select function createSelect(){ var mySelect = document.crea ...

  8. 游戏中的网络同步机制——Lockstep（帧同步）

    本文来自: https://bindog.github.io/blog/2015/03/10/synchronization-in-multiplayer-networked-game-lockste ...

  9. CountDownLatch同步工具--控制多个线程执行顺序

    好像倒计时计数器,调用CountDownLatch对象的countDown方法就将计数器减1,当到达0时,所有等待者就开始执行. java.util.concurrent.CountDownLatch ...

  10. PHP读取文件的多种方法

    1.传统的方法 fopen, fclose feof:file.end of file 例子: $file_handle = fopen("c:\\myfile.txt", &qu ...