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

只设置的一些组件的高度而已，不得不说，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. 几个Python线程坑，和连接池的坑

    urlretrieve 没有超时,需要通过socket来设置 socket.setdefaulttimeout(10) 而且还需要为他设置连接池,所以直接改用requests来下载文件 def dow ...

  2. 重复引入reactor-netty

    java.lang.NoClassDefFoundError: reactor/util/retry/Retry at reactor.netty.http.client.HttpClientConn ...

  3. CentOS7带图形界面不能扫描网卡。

    CentOS7在带有图形界面,在配置/sysconfig/network-script/ifcfg-ens*后不能识别到网卡,有可能是NetworkManager打开导致,可以使用systemctl ...

  4. python补全用法，windows环境和linux环境

    一.windows中python tab具体如下: 1.python3环境装好后,初始环境是没有装readline模块的,先装它. pip install pyreadline 2.在在python的 ...

  5. Blazor项目在VisualStudio调试时配置运行基础目录

    最近在使用 Blazor 开发管理后台时遇到了如下的问题,我这里后台整体采用了 AntDesignBlazor 组件库,在上线之后发现ReuseTabs组件在使用过程中,如果默认 / 没有指定为项目的 ...

  6. UI界面实现SSH登录服务器并执行命令监控

    一.通过paramiko实现SSH远程登录服务器.执行命令并返回信息: 二.通过wxpython实现UI化: 三.代码实现如下: 1)主程序MainUI #coding:utf8 #!/usr/bin ...

  7. linux中查看用户和组信息小结

    查看当前登录用户的组内成员groups 查看当前登录用户名whoami 查看tom用户所在的组,以及组内成员groups tom 查看所有的用户信息cat /etc/passwd 用户名.密码.用户i ...

  8. fullcalendar 日历插件的使用

    [需求]:使用 fullcalendar日历插件,完成如下功能:可以进行拖动,点击空白处添加,双击后修改和删除等功能.API 链接

  9. 安装原版Windows自动安装已经备份的驱动

    安装完Windows10后联网会自动更新驱动,除了自动更新.如果不让新安装的Windows系统自动安装驱动以外,还有自己手动安装驱动的方式.如何在安装系统过程中就让系统自己安装好驱动? 重装系统首先要 ...

  10. Midjourney AI绘画使用指南

    ​上图有Midjourney生成,提示语为:24-year-old Chinese woman with long hair and a Tedd Midjourney是一款基于Prompt设计和CL ...