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

只设置的一些组件的高度而已，不得不说，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. vue3.0的生命周期函数

    stetup(){}在 生命周期函数 系列中的优先级 〇setup(){ //优先级最高 处于created生命周期之前的函数,是无法访问data,methods中的数据是无法访问到的,setup中的 ...

  2. 在VS中使用Wind数据终端API的经验（一）

    因工作需要,使用vs2019来调用Wind金融终端API数据接口.具体步骤按照wind的帮助文档一步步做下来.这里提一下和帮助文档不同的地方. Windows Console APP下,编译项目后出现 ...

  3. sql自学记录

    复习 SQL join :用于根据两个或多个表中的列之间的关系,从这些表中查询数据 eg: SELECT Persons.LastName, Persons.FirstName, Orders.Ord ...

  4. Flask CURD(增删改查)

    1.创建flask项目 2.修改配置文件: ''' config.py 保存项目配置 ''' 导入Flask模块 from flask import Flask 额外安装: 数据库操作模块 from ...

  5. ANOMALY: use of REX.w is meaningless (default operand size is 64)

    1.打开注册机:win+ R   输入regedit2.找到目录:计算机\HKEY_LOCAL_MACHINE\SOFTWARE\TEC\Ocular.3\agent\config 并添加值3.新增项 ...

  6. win10_pyhive链接hive失败，提示：Could not start SASL

    win10_pyhive链接hive失败,提示:Could not start SASL https://blog.csdn.net/weixin_45684985/article/details/1 ...

  7. python pandas库总结-数据分析和操作工具

    参考:https://pandas.pydata.org/ Input/output相关函数 pandas.read_excel-将Excel文件读入pandas数据框 支持读取xls, xlsx, ...

  8. 计网学习笔记三 MAC与LAN

    在上一讲中,我们学习了链路层可以提供的服务:framing,link access,reliable delivery,error detection&correction.这一讲我们从lin ...

  9. Linux值得收藏的40个命令总结，常用的正则表达式

    1 删除0字节文件 find -type f -size 0 -exec rm -rf {} \; 2 查看进程 按内存从大到小排列 PS -e -o "%C : %p : %z : %a& ...

  10. 网络安全(中职组)-B模块:服务远程控制

    任务四:服务远程控制任务环境说明:服务器场景名:20200609(关闭链接)服务器场景操作系统:未知服务器场景用户名:root服务器场景密码:Admin123 1.    通过本地PC中渗透测试平台K ...