欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML连载31-制作一个百度首页

程序员文章站 2022-10-04 14:15:22
一、 我们制作一个百度首页作为练习,可直接复制该代码保存后缀名为.html来查看 二、源码: d93_baidu_home_exercise.html 地址: https://github.com/ruigege66/HTML_learning/blob/master/d93_baidu_home_ ......

一、 我们制作一个百度首页作为练习,可直接复制该代码保存后缀名为.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="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>

 

HTML连载31-制作一个百度首页

二、源码:

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-制作一个百度首页