zoukankan      html  css  js  c++  java
  • HTML连载31-制作一个百度首页

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

    二、源码:

    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大数据学习视频礼

     

  • 相关阅读:
    时期日期相关JS
    linq版本不同,升级后的问题
    Andriod小型管理系统(Activity,SQLite库操作,ListView操作)(源代码下载)
    FLASH所支持的HTML标记[转]
    从尘埃里开出花
    鴻海董事長郭台銘先生的話
    一日 :)
    今天休息,一个人在城市里看云 : (
    微软面试题——海盗分金币:)
    我QQ史上见过的最自恋,最芙蓉,最皮厚的人:口水弟: )
  • 原文地址:https://www.cnblogs.com/ruigege0000/p/11386417.html
Copyright © 2011-2022 走看看