HTML imite la page d'accueil de Baidu-tutoriel HTML-php.cn

HTML imite la page d'accueil de Baidu

不言

Libérer： 2018-07-17 17:43:08

original

3138 Les gens l'ont consulté

Cet article présente principalement l'imitation HTML de la page d'accueil de Baidu, qui a une certaine valeur de référence. Maintenant, je la partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            a {
                color: black;
            }
            
            #header {
                text-align: right;
                height: 38px;
                line-height: 38px;
            }
            
            #content {
                text-align: center;
            }
            
            .content-top img {
                width: 270px;
            }
            
            .btn {
                width: 700px;
                height: 38px;
                margin: 10px auto 30px;
            }
            
            .btn input {
                width: 550px;
                height: 38px;
                border: 1px solid #dddddd;
                font-size: 15px;
            }
            
            .btn a {
                background-color: #3385ff;
                width: 100px;
                height: 38px;
                float: right;
                text-align: center;
                line-height: 38px;
                color: white;
                text-decoration: none;
            }
            
            #footer {
                margin-top: 100px;
            }
            
            .erwei,
            .footer-t,
            .footer-btn {
                text-align: center;
            }
            
            .erwei p {
                font-weight: bold;
            }
        </style>
    </head>

    <body>
        <div id="header">

            <a href="###" target="_blank">新闻</a>
            <a href="###" target="_blank">hao123</a>
            <a href="###" target="_blank">地图</a>
            <a href="###" target="_blank">视频</a>
            <a href="###" target="_blank">贴吧</a>
            <a href="#" class="no-weight">登录</a>
            <a href="#" class="no-weight">设置</a>

        </div>
        <div id="content">
            <div class="top">
                <!--src:资源的缩写;alt:如果网速图片显示不出来,就显示文字-->
                <img src="https://www.baidu.com/img/bd_logo1.png">
            </div>
            <div class="btn">
                <!--type:定义单行输入的文字;href:链接URL-->
                <input type="text">
                <a href="###">百度一下</a>
            </div>
        </div>

        <div id="footer">
            <div class="erwei">
                <img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png" />
                <p>百度</p>
            </div>
            <div class="footer-t">
                <a href="###" target="_blank">把百度设为主页</a>
                <a href="###" target="_blank">关于百度</a>
                <a href="###" target="_blank">About Baidu</a>
                <a href="###" target="_blank">百度推广</a>
            </div>
            <div class="footer-btn">
                ©2018 Baidu
                <a href="###">使用百度前必读</a> 
                <a href="###">意见反馈</a> 京ICP证030173号
                <img src="img/1.PNG">  
                <a href="###">京公网安备11000002000001号<img src="img/2.PNG" /></a>
            </div>
        </div>
    </body>

</html>

Copier après la connexion

Recommandations associées :

À propos de l'affichage des contrôles de base de la version WEB AMAP

HTML utilise la disposition des tableaux pour implémenter des exemples de formulaires d'inscription des utilisateurs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!