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

只设置的一些组件的高度而已，不得不说，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. java文本转语音

    下载jar包https://github.com/freemansoft/jacob-project/releases 解压,将jacob-1.18-xxx.dll相应放到项目使用的JAVA_HOME ...

  2. centos下vi 命令用法

    vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的任何版本,vi编辑器是完全相 ...

  3. 6.3dmax小场景案例

    # 知识点: 1.cut剪切 --- 快捷键 alt+c 2.仅影响轴.坐标轴回到物体中心 3.Mirror镜像 4.attach附加.detach分离 5.Collapse.Weld合点 6.bev ...

  4. GO语言http请求方法，可以携带请求头Header与cookie

    1.目录 2.main.go package main import "fmt" import "demo/common/http" func main() { ...

  5. 转发：基于Lerna打造多包管理最佳实践之道

    最近在看vue-cli的源码部分,注意到这一个仓库下维护了多个package,很好奇他是如何在一个repo中管理这些package的. 我们组现在也在使用组件库的方式维护项目间共用的业务代码.有两个组 ...

  6. 实验五：开源控制器实践——POX

    基本要求 1.tcpdump 验证Hub模块 h1 ping h2的tcpdump抓包结果截图 h1 ping h3的tcpdump抓包结果截图 2.tcpdump 验证Switch模块 h1 pin ...

  7. 第一章C语言概述

    1.1程序实例 //first.程序 #include <stdio.h> int main() { int num; num = 1; printf("I am a simpl ...

  8. Typora怎么插入行内公式？内联公式设置

    文件 偏好设置 把内联公式那个勾上就可以了.然后就能写latex了,像这样,$\alpha\$ \(\alpha\) 输入一个\$后再按esc,会自动补全为$$

  9. 一文带你搞懂java中的变量的定义是什么意思

    前言 在之前的文章中,壹哥给大家讲解了Java的第一个案例HelloWorld,并详细给大家介绍了Java的标识符,而且现在我们也已经知道该使用什么样的工具进行Java开发.那么接下来,壹哥会集中精力 ...

  10. 从零开始学Java系列之如何使用记事本编写java程序

    前言 在上一篇文章中,壹哥给大家介绍了Java中的标识符及其命名规则.规范,Java里的关键字和保留字,以及Java中的编码规范. 我们在之前编写案例时,使用的开发工具都是windows自带的txt记 ...