一个简单的百度页面

最新推荐文章于 2024-03-16 09:51:29 发布

淇水清云

最新推荐文章于 2024-03-16 09:51:29 发布

阅读量286

点赞数

分类专栏：练习文章标签： css

本文链接：https://blog.csdn.net/qq_51779101/article/details/117414068

版权

练习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这是一个简单的HTML页面示例，包含头部链接导航、中心内容区域和底部信息。页面设计使用了CSS进行样式控制，如设置字体大小、按钮样式、边框等。主要内容是一个搜索框，用户可以输入文字并点击‘百度一下’进行搜索。页面底部提供了版权信息和相关链接。

摘要由CSDN通过智能技术生成

<style>
        .foot {
            font-size: 13px;
        }

        .zuoshang {
            position: absolute;
            top: 20px;
            left: 17px;
            text-decoration: none;
        }

        .youshang {
            position: absolute;
            top: 20px;
            right: 30px;
        }

        .head a {
            text-decoration: none;
            color: black;
            cursor: pointer;
            < !--xiao shou-->
        }

        .head a:hover {
            color: rgb(110, 110, 231);
        }


        .body {
            text-align: center;
            position: relative;
        }

        img {
            height: 130px;
            margin-top: 113px;
            margin-right: 13px;
            cursor: pointer;
        }

        .text {
            width: 545px;
            height: 40px;
            position: absolute;
            margin: 15px -335px;
            border-radius: 10px 0 0 10px;
            border-color: rgb(0, 102, 255);
        }

        .submit {
            width: 108px;
            height: 44px;
            color: white;
            background-color: rgb(55, 97, 224);
            cursor: pointer;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 262px 923px;
            border-radius: 0 10px 10px 0;
            font-size: 17px;
        }

        < !--调节百度按钮-->.submit:hover {
            background-color: rgb(0, 89, 205);
        }


        .foot_left {
            position: absolute;
            bottom: 15px;
            left: 25px;
        }

        .foot_right {
            position: absolute;
            bottom: 20px;
            right: 20px;
            color: gray;
        }

        .foot a {
            color: gray;
            text-decoration: 30px;
        }

        .foot a:hover {
            color: black;
        }
    </style>

上面是css部分

下面是完整源代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度一下，你就知道</title>
    <style>
        .foot {
            font-size: 13px;
        }

        .zuoshang {
            position: absolute;
            top: 20px;
            left: 17px;
            text-decoration: none;
        }

        .youshang {
            position: absolute;
            top: 20px;
            right: 30px;
        }

        .head a {
            text-decoration: none;
            color: black;
            cursor: pointer;
            < !--xiao shou-->
        }

        .head a:hover {
            color: rgb(110, 110, 231);
        }


        .body {
            text-align: center;
            position: relative;
        }

        img {
            height: 130px;
            margin-top: 113px;
            margin-right: 13px;
            cursor: pointer;
        }

        .text {
            width: 545px;
            height: 40px;
            position: absolute;
            margin: 15px -335px;
            border-radius: 10px 0 0 10px;
            border-color: rgb(0, 102, 255);
        }

        .submit {
            width: 108px;
            height: 44px;
            color: white;
            background-color: rgb(55, 97, 224);
            cursor: pointer;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 262px 923px;
            border-radius: 0 10px 10px 0;
            font-size: 17px;
        }

        < !--调节百度按钮-->.submit:hover {
            background-color: rgb(0, 89, 205);
        }


        .foot_left {
            position: absolute;
            bottom: 15px;
            left: 25px;
        }

        .foot_right {
            position: absolute;
            bottom: 20px;
            right: 20px;
            color: gray;
        }

        .foot a {
            color: gray;
            text-decoration: 30px;
        }

        .foot a:hover {
            color: black;
        }
    </style>
</head>

<body>
    <div class="zuoshang">
        <a href="www.baidu.com" target="_blank">新闻</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="www.baidu.com" target="_blank">hao123</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="www.baidu.com" target="_blank">地图</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="www.baidu.com" target="_blank">视频</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="www.baidu.com" target="_blank">贴吧</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="www.baidu.com" target="_blank">学术</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="www.baidu.com" target="_blank">更多</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <div class="youshang">

    </div>


    <div class="body">
        <img src="baidu2.png" alt="baidu" title="点击一下，了解更多">
        <form action="http://www.baidu.com">
            <input type="text" class="text">
            <input type="submit" value="百度一下" class="submit">
        </form>
    </div>


    <div class="foot">
        <div class="foot_left">
            <a href="" target="_blank">设为首页</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="" target="_blank">关于百度</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="" target="_blank">About Baidu</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="" target="_blank">百度营销</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="" target="_blank">使用百度前必读</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="" target="_blank">意见反馈</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="" target="_blank">帮助中心</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <div class="foot_right">
            <span>&copy;2020 Baidu</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>(京)-经营性-2017-0020</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="" target="_blank">京公网安备11000002000001号</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>京ICP证030173号</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
    </div>
</body>

</html>

下面是效果图

水平有限，仅供参考

淇水清云

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个简单的百度页面

<style> .foot { font-size: 13px; } .zuoshang { position: absolute; top: 20px; left: 17px; text-decoration: none; } .youshang { position.
复制链接

扫一扫