web前端入门到实战:制作一个百度首页

发布于 2020-01-09 09:48:23

<!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>
web前端开发学习Q-q-u-n: ⑦⑧④-⑦⑧③-零①②,分享学习的方法和需要注意的小细节

0 条评论

发布
问题

官网
微信

官方微信