HTML仿百度页面

.ASEN.

于 2022-04-07 10:24:06 发布

阅读量706

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML作业文章标签： html5

本文链接：https://blog.youkuaiyun.com/weixin_47304332/article/details/124007510

HTML作业专栏收录该内容

8 篇文章

订阅专栏

本文详细解读了HTML、CSS和JavaScript代码，展示了如何构建简洁的网站导航，包括新闻、贴吧等模块，以及搜索框和底部链接的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码块

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度一下，帮你解答！</title>
    <style>
        a {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        
        .logo,
        .nav,
        .sousou,
        .more,
        .map,
        .bottom {
            text-align: center;
            margin: 30px;
        }
        
        .nav {
            font-size: 16px;
        }
        .nav a{
            display: inline-block;
            margin-right: 5px;
            letter-spacing: 3px;
        }
        
        .search {
            width: 420px;
            height: 23px;

        }
        
        .btn {
            height: 30px;
            width: 100px;
            font-size: 14px;
        }
        
        .more {
            font-size: 14px;
        }
        
        .map {
            text-align: center;
            font-size: 12px;
        }
        
        .bottom {
            font-size: 12px;
            line-height: 30px;
        }
        .button p{

        }
    </style>
</head>

<body>
    <!-- .logo类选择器 -->
    <div class="logo">
        <img src="../Resources/imgs/baidu/bdlogo.gif">
    </div>

    <!-- 类选择器 -->
    <!-- .nav  -->
        <div class="nav">
            <a href="#">新闻</a>
            <a href="#">新闻</a>
            <a href="#">贴吧</a>
            <a href="#">知道</a>
            <a href="#">音乐</a>
            <a href="#">图片</a>
            <a href="#">视频</a>
            <a href="#">地图</a>
        </div>

    <!-- .sousou  -->
        <div class="sousou">
            <input type="text" class="search"> <input type="button" class="btn" value="百度一下" >
        </div>

    <!-- .more  -->
        <div class="more">
            <a href="#">百科</a>
            <a href="#">hao123</a>|
            <a href="#">更多 >></a>
        </div>

    <!-- .map  -->
        <div class="map">
           <a href="#">
               <img src="../Resources/imgs/baidu/ic.jpg">
               百度地图带你吃喝玩乐，全心全意为人们服务
           </a>
        </div>

    <!-- .bottom  -->
    <div class="bottom">
        <span>
            <a href="#">把百度设为主页</a>
            <a href="#">安装百度卫士</a>
        </span><br>
        <span>
            <a href="#">加入百度推广|</a>
            <a href="#">收索风云榜|</a>
            <a href="#">关于百度|</a>
            <a href="#">About Baidu</a>
        </span><br>
        <span>
            ©2022 Baidu使用百度前必读
        </span>
    </div>
</body>
</html>