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

最新推荐文章于 2023-06-14 20:24:28 发布

睿里睿气

最新推荐文章于 2023-06-14 20:24:28 发布

阅读量235

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/weixin_44630050/article/details/99899120

版权

HTML 专栏收录该内容

86 篇文章 2 订阅

订阅专栏

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

31.1
二、源码：
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大数据学习视频礼
31.2