本文是在html5代码,内容系仿写百度,现在附上代码和效果图,仅供初学者学习参观



image.png


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
 .header{
            height: 100px;
 color: aqua;
 text-align: right;
 font-size: 13px;
 line-height: 34px;
 text-decoration-color: black;
 }
        .content{
            height: 500px;
 }
        .footer{
            height: 300px;
 font-size: 13px;
 }
        .content,.footer{
            text-align: center;
 }
        .ss{
            height: 30px;
 width: 500px;
 }
        .s1{
            height: 34px;
 width: 100px;
 font-size: 15px;
 }
        .s2{
            line-height: 30px;
 }
        .s3{
            height: 130px;
 }
        .logo{
            width: 260px;
 }
        .s4{
            width: 100px;
 }
        body{
            font-family: "微软雅黑","黑体";
 color: black;
 text-decoration: none;
 text-decoration-line: none;
 text-decoration: none;
 }
        div{
            text-decoration: none;
 }
        p{
            text-decoration: none;
 }
    </style>
</head>
<body>
<div class="header">
    <a href="#">新闻</a>
    <a href="#">hao123</a>
    <a href="#">地图</a>
    <a href="#">视频</a>
    <a href="#">贴吧</a>
    <a href="#">学术</a>
    <a href="#">登录</a>
    <a href="#">设置&nbsp;&nbsp;&nbsp;</a>
</div>
<div class="content">
    <div><img src="百度logo.png" class="logo"> </div>
    <div><span><input type="text" class="ss"><input type="submit" value="百度一下" class="s1"> </span> </div>
    <div>
        <div class="s3"></div>
        <div class="s2"><img src="erweima.PNG" class="s4"></div>
        <p>下载百度APP</p>
        <p>有事搜一搜&nbsp;&nbsp;没事看一看</p>
    </div>
</div>
<div class="footer">
    <p>
        <a href="javascript;">把百度设为主页</a>
        <a href="javascript;">关于百度</a>
        <a href="javascript;">About  Baidu</a>
        <a href="javascript;">百度推广</a>
    </p>
    <p>
        <a href="#">©2019 Baidu</a>
        <a href="#">使用百度前必读</a>
        <a href="#">意见反馈</a>
 &nbsp;京ICP证030173号&nbsp;
 <a href="#">京公网安备11000002000001号</a>
    </p>
</div>

</body>
</html>


宗波尘客-宗九尘博客,愿与您分享web前端开发!