一、 我们制作一个百度首页作为练习，可直接复制该代码保存后缀名为.html来查看

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>d93_baidu_home_exercise</title>

    <style>

        .header{

            height: 250px;

            /*background-color: red;*/

        }

        .content{

            height: 220px;

            /*background-color: pink;*/

​

        }

        .footer{

            height: 200px;

            /*background-color:green;*/

        }

        div{

            text-align: center;

        }

        .logo{

            background-color:skyblue;

            height: 130px;

        }

        input[type=text]{

            width: 400px;

            height:30px;

        }

        input[type=submit]{

            width:80px;

            height:30px;

        }

        .content_form{

            height:80px;

        }

        body{

            font-size: 16px;

        }

</style>

</head>

<body>

<div class="header">

    <div>

        <img src="data:image/baidu_logo.png" alt="" class="logo">

    </div>

    <div class="header_navgitor">

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

        <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="content_form">

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

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

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

        </form>

    </div>

    <div>

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

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

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

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

    </div>

</div>

<div class="footer">

    <div>

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

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

    </div>

    <div>

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

        ｜

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

        ｜

        <a href="#">About 百度</a>

    </div>

    <div>

        @2019Baidu，使用百度前必读 京ICP证666号

    </div>

</div>

</body>

</html>

二、源码：

d93_baidu_home_exercise.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/d93_baidu_home_exercise.html

2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）

3.博客园：https://www.cnblogs.com/ruigege0000/

​4.欢迎关注微信公众号：傅里叶变换，后台回复“礼包”获取Java大数据学习视频礼

HTML连载31-制作一个百度首页的更多相关文章

  1. 实现了一个百度首页的彩蛋——CSS3 Animation简介

    在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩 ...

  2. ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork 制作一个添加新闻功能

    本文将交大伙怎么集成ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork来制作一个新闻系统 先上截图: 添加页面如下: 下面来看代码部分 列表页如下: @ ...

  3. 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider

    前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...

  4. Swift 制作一个新闻通知中心插件1

    使用 Swift 制作一个新闻通知中心插件(1) 随着 iOS 8 的发布,苹果为开发者们开放了很多新的 API,而在这些开放的接口中 通知中心插件 无疑是最显眼的一个.通知中心就不用过多介绍了,相信 ...

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

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

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

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

  7. 如何制作一个类似Tiny Wings的游戏(2) Cocos2d-x 2.1.4

    在第二篇<如何制作一个类似Tiny Wings的游戏>基础上,增加添加主角,并且使用Box2D来模拟主角移动,原文<How To Create A Game Like Tiny Wi ...

  8. 怎样制作一个相似Tiny Wings的游戏 Cocos2d-x 2.1.4

    在第一篇<怎样使用CCRenderTexture创建动态纹理>基础上,添加�创建动态山丘,原文<How To Create A Game Like Tiny Wings with C ...

  9. Swift - 制作一个录音机（声音的录制与播放）

    1,技术介绍 (1)AVFoundation.framework框架提供了AVAudioRecorder类.它可以实现录音功能. (2)而使用该框架的AVAudioPlayer类,可以实现声音的播放. ...

随机推荐

  1. IT兄弟连 HTML5教程 HTML5和HTML的关系

    HTML5开发现在很火爆,是一门技术,更是一个概念.可以让我们的工作模式.交互模式以及对应用和游戏的体验有了翻天覆地的变化,很多人都知道HTML5这门技术,也常把HTML5读作H5(简称).其实一些外 ...

  2. 10-scrapy框架介绍

    Scrapy 入门教程 Scrapy 是用 Python 实现的一个为了爬取网站数据.提取结构性数据而编写的应用框架. Scrapy 常应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. 通 ...

  3. Fragment生命周期函数调用（ViewPager切换方式）

    在使用ViewPager时,Google亲爹为我们提供了多种PagerAdapter.其中,与Fragment相关的是FragmentPagerAdapter和FragmentStatePagerAd ...

  4. MySQL 联表查询

    关系型数据库,免不了表之间存在各种引用与关联.这些关联是通过主键与外键搭配来形成的.所以,取数据时,很大情况下单张表无法满足需求,额外的数据则需要将其他表加入到查询中来,这便是 JOIN 关键字完成的 ...

  5. WCF通信简单学习实例

    最近在学习WCF通信,自己简单做个实例分享一下,环境是VS2015,使用的项目都是WPF的项目,其实大家用Winform或者Web项目也可以,都可以用的. 一.服务器端 1.创建WCF服务 服务名为W ...

  6. Razor 进度的变速

    视频录制了 .但发现 进度太慢了,对于当下市场 和我们的学习进度基本不会成正比关系了.所以,改一下 我们教程的实现方式. 我和大家 一起 看一下关联的技术的点, 提出我们要做的 内容 动手实践, 可能 ...

  7. 帝国cms提高网站网页打开速度的手段

    1.减少页面HTTP请求数量 2.使用CDN(Content Delivery Network)网络加速 3.添加文件过期或缓存头 4.服务器开启gzip压缩 5.css格式定义放置在文件头部 6.J ...

  8. 01初识 JavaScript

    1.初识 JavaScript  1.1 JavaScript 是什么  l JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言 (Script 是脚本的意思) l 脚本语言 ...

  9. Dynamics CRM中的操作(action)是否是一个事务(transaction)？

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复168或者20151104可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 以前的博文 微软Dynamics ...

  10. mysql 实现全连接

    mysql不支持全连接,但可以通过左外连接+ union+右外连接实现 SELECT * FROM t1 LEFT JOIN t2 ON t1.id = t2.id UNION SELECT * FR ...