<!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. tomcat 搭建以及发布配置

    身为开发人员, 一直干着开发的事情, 只干开发的事情, 却缺少了对于环境部署方面的必备技能的培养, 所以在公司安排的手头任务解决完的情况下, 自己抽空了解并且实践了一下tomcat的配置.写下通过网络 ...

  2. Pycharm快捷键配置

    1.主题 毫无疑问Pycharm是一个具有强大快捷键系统的IDE,这就意味着你在Pycharm中的任何操作,例如打开一个文件.切换编辑区域等,都可以通过快捷键来实现.使用快捷键不仅能提高操作速度,看起 ...

  3. AHB协议

    AHB2 支持多个Bus Master,例如有三个Master,有四个slave,但是同时只有一个Mater可以拿到Bus的访问权.所以,总线的使用权就需要Master去申请,也就需要一个仲裁器(Ar ...

  4. 二分--POJ-3258

    POJ-3258,二分 题目 Description Every year the cows hold an event featuring a peculiar version of hopscot ...

  5. PIE SDK组件式开发综合运用示例

    1. 功能概述 关于PIE SDK的功能开发,在我们的博客上已经分门别类的进行了展示,点击PIESat博客就可以访问,为了初学者入门,本章节将对从PIE SDK组件式二次开发如何搭建界面.如何综合开发 ...

  6. python web开发小结

    书籍 <python基础教程> <流畅的python> web框架 flask django tornado ORM sqlalchemy orator 消息队列 celery ...

  7. Monkey基本使用（转载）

    什么是 Monkey Monkey 是一个 Android 自动化测试小工具.主要用于Android 的压力测试, 主要目的就是为了测试app 是否会Crash. Monkey 特点 顾名思义,Mon ...

  8. vue项目里登录界面实现回车登录

    全局监听enter键,是把监听事件绑定到document上,无需获取焦点之类的 created() { let that = this; document.onkeydown =function(e) ...

  9. vue2.0修饰符sync用法

    如果子组件是一个弹窗,我们想通过点击关闭按钮来关闭子组件弹窗,子组件弹窗的v-show由变量isVisible控制,这个变量通过props由父组件来注入, 而子组件无法改变props里面的变量的值,但 ...

  10. 当页面有多个js文件时，应如何引入？

    1. 我们知道如果一个页面有多个js文件,并且这些js文件有的还有依赖关系的时候,我们就要特别注意他们之间的引入顺序,否则就会报错. 如:一个js文件依赖jquery,我们就要先引入jquery,然后 ...