一、 我们制作一个百度首页作为练习，可直接复制该代码保存后缀名为.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. 一篇文章弄懂flex布局

     壹 ❀ 引 谈到flex布局,我不知道有多少人跟我一样,在本能的想到justify-content:center与align-items:center两条属性之后,除此之外的其它属性居然显得格外陌生 ...

  2. python接口自动化10-excel设计模式实战

    前言 一.简介 1.环境准备:python+requests+excel+unittest+ddt,主要安装以下环境,其它一般都有了,没有自行安装: pip install xlrd pip inst ...

  3. 我说精通字符串，面试官竟然问我 Java 中的 String 有没有长度限制？

    String 是 Java 中很重要的一个数据类型,除了基本数据类型以外,String 是被使用的最广泛的了,但是,关于 String,其实还是有很多东西容易被忽略的. 就如本文我们要讨论的问题:Ja ...

  4. Linux下科学计数法(e)转化为数字的方法 [shell中几种数字计算说明]

    科学计数法使用e标识数值,将科学计算学转化为数字的思路:按e右边的数字移动小数点位数.e右边的数字如果是负数,则向左移动小数点.示例如下: 1.2345678e2 = 123.45678 1.2345 ...

  5. java 类内部定义接口

    java类内部可以定义接口,作用可以看作是对类功能的进一步补充,类里面包含两部分:一部分是自己的固定的,一部分是可以变化的,而这可变的部分就编程了一个接口. 另一个作用是避免命名冲突. 示例 类Fru ...

  6. centos7开启，关闭防火墙

    1.查看防火墙状态 firewall-cmd --state 2.停止防火墙 systemctl stop firewalld.service 3.禁止防火墙开机启动 systemctl disabl ...

  7. 数据库之MySQL查询

    查询 创建数据库.数据表 -- 创建数据库 create database python_test1 charset=utf8; -- 使用数据库 use python_test1; -- stude ...

  8. 从《华为的冬天》到AI的冬天 | 甲子光年

    知难不难,惶者生存. 作者 | DougLong 编辑 | 火柴Q.甲小姐 *本文为甲子光年专栏作家DougLong独家稿件.作者为AI从业者.Gary Marcus<Rebooting AI& ...

  9. wpf 的dispatcher

    wpf项目中后台代码调用界面控件时,会提示进程调用的错误. private Thread JxThread = null;  //定义线程 private DataLoading.Loading nL ...

  10. 模板引擎Jinja2的基本用法

    Flask提供的模板引擎为Jinja2,易于使用,功能强大.模板仅仅是文本文件,它可以生成任何基于文本的格式(HTML.XML.CSV.LaTex 等等). 它并没有特定的扩展名, .html 或 . ...