一直觉得百度首页很复杂的，有那么多的东西，跟这个博主学习了之后，仿写了一下，样式好像很简单

只设置的一些组件的高度而已，不得不说，CSS真是个好东西呀

话不多说，直接上代码

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <title>百度首页</title>

        <style>

            body {

                font-size: 14px;

                color:#666

            }

            div {

                text-align: center;

            }

            .content {

                height: 250px;

            }

            .header,

            .footer {

                height: 200px;

            }

            .logo {

                height: 150px;

            }

            input[type=text] {

                width: 400px;

                height: 30px;

            }

            input[type=submit] {

                width: 100px;

                height: 30px;

            }

            .search {

                height: 60px;

            }

            .bk {

                height: 120px;

            }

            .aq {

                height: 40px;

            }

            .tk {

                height: 40px;

            }

        </style>

    </head>

    <body>

        <div class="header">

            <div class="logo">

                <img src="C:\Users\libo\Desktop\bdlogo.gif" alt="百度">

            </div>

            <div class="nav">

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

                <strong>网页</strong>

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

                <a href="#">知道</a>

                <a href="#">音乐</a>

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

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

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

            </div>

        </div>

        <div class="content">

            <div class="search">

                <form action="http://www.baidu.com">

                    <input type="text" name="1" id="1">

                    <input type="submit" value="百度一下">

                </form>

            </div>

            <div class="bk">

                <a href="#">百科</a>

                <a href="#">文库</a>

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

                <a href="#">更多</a>

            </div>

            <div>

                <img src="" alt="定位图片">

                <a href="#">百度地图带你吃喝玩乐，全新全意为人民服务</a>

            </div>

        </div>

        <div class="footer">

            <div class="aq">

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

                <a href="#">安装百度卫士</a>

            </div>

            <div class="tk">

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

                |

                <a href="#">搜索风云榜</a>

                |

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

                |

                <a href="#">ABOUT BAIDU</a>

            </div>

            <div>

                2016 Baidu 使用百度前必读 京ICP证666号

            </div>

        </div>

    </body>

</html>

这就是全部的代码了，除了使用了一张百度的logo图标图片之外，其他就没有什么了

运行之后的页面如下所示：

完毕

百度首页静态展示页面HTML+CSS的更多相关文章

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

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

  2. html+css 百度首页练习

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

  3. 用手机自带uc浏览器查看静态页面，css样式不显示

    问题描述: 这个问题是一个同事在写手机页面用UC浏览器测试以后遇到的,其他浏览器静态页面显示正常,唯独UC浏览器不显示页面样式. 我测试过代码是没有问题的,因为临时没有找到安卓手机,就猜想PC端的应该 ...

  4. 使用 JavaScript 的 HTML 页面混合、JavaScript 文件引用和 HTML 代码嵌入 3 种方式在 HTML 页面上打印出“点击我进入到百度首页”的超链接

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 的 HTML 页面混合.JavaScript 文件引用和 HTML 代码嵌入 3 种方式在 HTML 页面上打印出"点击我进 ...

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

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

  6. JSP生成静态Html页面

    [转载]JSP生成静态Html页面 在网站项目中,为了访问速度加快,为了方便百度爬虫抓取网页的内容,需要把jsp的动态页面转为html静态页面.通常有2种常用的方式: 1.伪静态,使用URL Rewr ...

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

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

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

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

  9. 【教程】手把手教你如何利用工具(IE9的F12)去分析模拟登陆网站(百度首页)的内部逻辑过程

    [前提] 想要实现使用某种语言,比如Python,C#等,去实现模拟登陆网站的话,首先要做的事情就是使用某种工具,去分析本身使用浏览器去登陆网页的时候,其内部的执行过程,内部逻辑. 此登陆的逻辑过程, ...

  10. Selenium2学习-009-WebUI自动化实战实例-007-Selenium 8种元素定位实战实例源代码（百度首页搜索录入框及登录链接）

    此 文主要讲述用 Java 编写 Selenium 自动化测试脚本编写过程中,通过 ID.name.xpath.cssSelector.linkText.className.partialLinkTe ...

随机推荐

  1. Audition导入视频文件出现错误

    错误: We were unable to open this file using any of the currently available importers. If you would li ...

  2. (六).JavaScript的数组(2)

    1.10 作用域链 定义: 作用域链:查找变量的过程 作用: 查找变量 查找规则:首先会在自身作用域找变量,找到就用 如果没有,就去上级作用域查找,找到就用 如果没有,一直往上找,直到全局作用域,有就 ...

  3. ffmpeg均匀分割视频命令

    ffmpeg -y -i input.wav -f segment -segment_time 5 output-%d.wav -segment_time 分割视频片段大小 -segmenet_lis ...

  4. [picoCTF]Scavenger Hunt write up

    http://mercury.picoctf.net:5080/,这个网站周围隐藏着一些有趣的信息.你能找到它吗? 根据提示: 您应该有足够的提示来查找文件,不要运行暴力破解程序. 点击链接,进入页面 ...

  5. egret 根接受分发

    egret.MainContext.instance.addEventListener("firstEnter",this.torunGame,this); egret.MainC ...

  6. Glist 按钮属性

    grayed 变灰与否不影响点击等事件 touchable 为false,不会变灰,但会无法点击, enabled为false自动变灰,且无法点击

  7. DRF的视图与路由集Routers

    一 视图 Django REST framwork 提供的视图的主要作用: 控制序列化器的执行(检验.保存.转换数据) 控制数据库模型的操作 一 普通视图APIView 一 两个视图基类 1 APIV ...

  8. Python3程序捕获Ctrl+C终止信号

    技术背景 对于一些连续运行或者长时间运行的Python程序而言,如服务器的后端,或者是长时间运行的科学计算程序.当我们涉及到一些中途退出的操作时,比如使用Ctrl+C来退出正在运行的程序.这种场景的出 ...

  9. Available parameters are [arg0, collection, list]错误的解决

    关于这个错误 每次只要是俩list集合一嵌套起来,就会报出这个错误,检查过,并不是关键字的误用: 这个才是根本原因: 当mybatis传入参数为list集合的时候:mybatis会自动把其封装为一个m ...

  10. LoadRunner——创建场景及运行场景（三）

    1. 创建场景 场景:用户并发访问的策略,包含用户数.加载用户的时间等 启动第二个组件 : 控制台 (controller) 方式1: 开始->所有程序->HPLoadRunner-> ...