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

     

  • 相关阅读:
    李超线段树板子
    蒟蒻的平衡树学习笔记(=.=
    P2254 [NOI2005] 瑰丽华尔兹
    表达式求值学习笔记
    二分和一些其它算法的奇妙组合
    《wwx》的学习总结(题解)
    set的学习笔记
    题解 P4913 【深基16.例3】二叉树深度
    AGC002F Leftmost Ball
    CSP&&NOIP2020 游记
  • 原文地址:https://www.cnblogs.com/ruigege0000/p/11386417.html
Copyright © 2011-2022 走看看