前端day03-百度首页

最新推荐文章于 2024-03-05 23:09:11 发布

weixin_42026679

最新推荐文章于 2024-03-05 23:09:11 发布

阅读量63

点赞数

本文链接：https://blog.csdn.net/weixin_42026679/article/details/100566506

版权

百度页面制作

运行效果截图：

在这里插入图片描述

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小赵的百度</title>
</head>

<style>
    #cnt {
        width: 100%;
        margin: 0 auto;
    }

    #part1 {
        position: absolute;
        left: 78%;
        top: 15px;
        width:100%;
    }

    #part1 > a {
        color: black;
        font-size: 12px;
    }

    #part2 {
        padding: 12% 30%;
        margin: 0 auto;
        text-align: center;
    }

    #part2-1 {
        margin: 25px auto;
        width: 600px;
        height: 30px;
        border: 1px solid dimgray;
    }

    #part2-2 {
        line-height: 30px;
        margin: -1px 500px;
        width: 100px;
        height: 30px;
        color: #ffffff;
        background-color: dodgerblue;
        border: 1px solid dodgerblue;
    }

    #part3 {
        width: 500px;
        margin: 0 auto;
        text-align: center;
    }

    #part3>p {
        color: gray;
        font-size: 13px;
        line-height: 13px;
    }

    #part3-1 {
        padding-top: 10px;
        font-size: 10px;
        color: gray;
        line-height: 25px;
    }

    #part3-1>a {
        font-size: 10px;
        color: gray;
    }


</style>

<body>
<div id="cnt">
    <div id="part1">
        <a href="" style="font-weight: bold">新闻</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="" style="font-weight: bold">地图</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="" style="font-weight: bold">视频</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="" style="font-weight: bold">图片</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="">登录</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="">设置</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <div id="part2">
        <img src="./baidu.png" alt="加载失败">
        <div id="part2-1">
            <div id="part2-2">百度一下</div>
        </div>
    </div>
    <div id="part3">
        <img src="./erweima.JPG" alt="">
        <br>
        下载百度APP<p>有事搜一搜  没事看一看</p>
        <div id="part3-1">
            <a href="">把百度设为主页</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="">关于百度</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="">About Baidu</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="">推广百度</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <br>
            ©2019 Baidu <a href="">使用百度前必读</a> <a href="">意见反馈</a> 京IPC证xxxxxx号
        </div>
    </div>
</div>

</body>
</html>

weixin_42026679

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端day03-百度首页

百度页面制作运行效果截图：源代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小赵的百度</title></head><style> #cnt { wid...
复制链接

扫一扫