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

只设置的一些组件的高度而已，不得不说，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. git命令2

    git status git status -s git diff git diff --cached --添加到暂存区成为快照 git add -A git add . --删除被git追踪的文件 ...

  2. HTML笔记（二） HTML标签元素

    一 常用的头部元素标签 <head>元素包含了所有的头部标签元素. 1.<title> <title>标签定义了HTML文档的标题,在HTML/XHTML文档中是必 ...

  3. 生产环境实现Docker部署宝塔面板

    生产环境中,为了避免极小概率的数据丢失,我们将容器内的宝塔文件映射到宿主机的目录中(您之后安装的 Nginx.MySQL 等服务均会挂载到宿主机目录).该方法是 Docker 部署宝塔面板的最优方案, ...

  4. python中的反射机制

    转自https://www.cnblogs.com/renjie1105/p/15909285.html python反射简介 在做程序开发中,我们常常会遇到这样的需求:需要执行对象里的某个方法,或需 ...

  5. spring mvc加载顺序

    contextLoaderLister extends ContextLoader 实现 ServletContextListener接口 contextLoaderLister 是一个观察查模式 由 ...

  6. VUE配置proxy代理、开发环境、测试环境、生产环境

    VUE配置proxy代理.开发环境.测试环境.生产环境 前端开发过程中,我们经常会碰到跨域的问题,下面我们来配置下,不同的环境下,统一的跨域问题解决. 1.根目录下新建三个环境的配置文件,.env.d ...

  7. mysql索引类型详解

    转载网址: http://c.biancheng.net/view/7897.html

  8. 【Linux 中断】红外接收器设备驱动

    一.概述 现在很多家电都使用了红外,而智能家居的诞生,连音响都带了红外遥控功能.为了解决家里遥控器比较多的情况,多数手机都支持了红外功能,这和以前的万能遥控器一样.这里主要记录红外接收的驱动,当然明白 ...

  9. Apache Kafka教程--Kafka新手入门

    Apache Kafka教程--Kafka新手入门 Kafka Assistant 是一款 Kafka GUI 管理工具--管理Broker,Topic,Group.查看消费详情.监控服务器状态.支持 ...

  10. Java8 lambda常用操作

    参考博客:https://www.cnblogs.com/hmy-1365/p/12923435.html