<!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. JAVA数据结构--快速排序

    快排概念 快速排序(英语:Quicksort),又称划分交换排序(partition-exchange sort),一种排序算法,最早由东尼·霍尔提出.在平均状况下,排序个项目要(大O符号)次比较.在 ...

  2. python 面向过程和面向对象比较

    面向过程 VS 面向对象 面向过程的程序设计:核心是过程二字,过程指的是解决问题的步骤,即先干什么再干什么......面向过程的设计就好比精心设计好一条流水线,是一种机械式的思维方式. 优点是:复杂度 ...

  3. python3 zip压缩

    参考: https://docs.python.org/3/library/zipfile.html https://zhidao.baidu.com/question/149840976436638 ...

  4. js中报错"Maximum call stack size exceeded"解决方法

    Uncaught RangeError: Maximum call stack size exceeded 错误直译过来就是“栈溢出”,出现这个错误的原因是因为我进行了递归运算,但是忘记添加判断条件, ...

  5. Eclipse的简单的用法大全

    Eclipse我认为最重要的功能:断点调试 Debug的作用: 调试程序并且查看程序的执行流程 如何查看程序执行的流程 断点(就是一个标记,表示从哪里开始) 设置断点(在你想要断点的代码的左边双击即可 ...

  6. OpenCV文本图像的旋转矫正

    用户在使用Android手机拍摄过程中难免会出现文本图像存在旋转角度.这里采用霍夫变换.边缘检测等数字图像处理算法检测图像的旋转角度,并根据计算结果对输入图像进行旋转矫正. 首先定义一个结构元素,再通 ...

  7. poj 2572 Hard to Believe, but True!

    Hard to Believe, but True! Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3537   Accep ...

  8. 九度oj题目1342：寻找最长合法括号序列II

    题目1342:寻找最长合法括号序列II(25分) 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:886 解决:361 题目描述: 假如给你一个由’(‘和’)’组成的一个随机的括号序列,当然 ...

  9. 公用表表达式 (CTE)、递归

    指定临时命名的结果集,这些结果集称为公用表表达式 (CTE).公用表表达式可以包括对自身的引用.这种表达式称为递归公用表表达式. 对于递归公用表达式来说,实现原理也是相同的,同样需要在语句中定义两部分 ...

  10. Intellij IDEA自定义类模板和方法模板

    以Intellij IDEA 2017.3.5为例 定义类模板 依次打开File->Settings->File and Code Templates->Files, 选择class ...