一个简单的百度页面

Posted 淇水清云

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一个简单的百度页面相关的知识,希望对你有一定的参考价值。

<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>

下面是效果图

水平有限,仅供参考

以上是关于一个简单的百度页面的主要内容,如果未能解决你的问题,请参考以下文章

浅谈js本地图片预览

H5页面下拉加载更多(实用版)

一个简单的百度页面

一个简单的百度页面

一个简单的百度页面

一个简单的百度页面