VsCode模仿简单百度网页（html）

最新推荐文章于 2025-02-27 15:54:38 发布

七友相聚

最新推荐文章于 2025-02-27 15:54:38 发布

阅读量8k

点赞数 32

分类专栏：前端开发技术文章标签： vscode 百度 html

本文链接：https://blog.csdn.net/weixin_46026814/article/details/120371429

版权

前端开发技术专栏收录该内容

2 篇文章

订阅专栏

本文介绍了作者作为新手使用VsCode创建的简单百度首页，实现了基本的页面布局和链接跳转，但未涉及CSS。文章提供了界面效果图和HTML页面设计代码。

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

欢迎浏览本篇文章

大家好！这是小编是个刚入门的小白，若有不足请广大网友提出批评指教。最近刚好做了一个VsCode的简单百度首页，这边简单实现了页面布局效果和链接跳转，本文尚未用到css。

界面效果图

页面图片

页面设计代码

<!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>
        .leftDiv{
            height: 50px;
            width: auto;
            float: left;
            margin-left: 10px;
        }
        .rightDiv{
            height: 50px;
            width: 100px;
            float: right;
            margin-right: 30px;
        }
        .headDiv{
            height: 50px;
            width: auto;
            text-align: center;
            margin-top: 15px;   
        }
        .a1{
            text-decoration: initial;
            font-size: 14px;
            margin-left: 20px;
            color: black;
        }
        .a2{
            text-decoration: initial;
            font-size: 14px;
            color: black;
            float: left;
        }
        .a3{
            width: 41px;
            height: 22px;
            text-decoration: initial;
            font-size: 13px;
            color: white;
            background-color: #1f7aff;
            text-align: center;
            line-height: 20px;
            float: right;
            border-radius: 5px;
        }
        /* 输入框和按钮 */
        .threeDiv{
            text-align: center;
            width: 600px;
            height: 40px;
            margin: auto;
            margin-top: 10px;
        }
        /* 输入框 */
        .inputDiv{
            width: 482px;
            float: left;
            height: 40px;
            border-color: #668B8B;
            border-bottom-left-radius: 15px;
            border-top-left-radius: 15px;    
        }
        /* 百度一下按钮 */
        .baiduDiv{
            background-color: #1f7aff;
            color: white;
            font-size: 18px;
            width: 110px;
            height: 46px;
            float: right;
            text-align: center;
            line-height: 42px;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }
        /* 百度图标位置 */
        .image{
            width: 100%;
            height: auto;
            text-align: center;
        }
        /* 百度热榜 */
        .hotDiv{
            text-align: center;
            width: 550px;
            height: auto;
            margin-left: 30%;
            margin-top: 40px;
        }
        .hot{
            float: left;
            width: 100%;
            height: 36px;
            text-align: left;
            font-weight: bolder;
            font-size: 15px;
        }
        .hotBig{
            width: 100%;
            height: 30px;
            float: left;
        }
        .hotLeft{
            float: left;
            height: auto;
            width: 42%;
            font-size: 13px;
            text-align: left;
        }
        .hotRight{
            float: right;
            height: auto;
            width: 47%;
            font-size: 13px;
            text-align: left;
        }
        a{
            color: crimson;
        }
        b{
            color: darkorange;
        }
        c{
            color: khaki;
        }
        /* 底部标签 */
        .bottomDiv{
            width: 100%;
            height: 25px;
            position: absolute;
            bottom: 0px;
            margin-left: 50px;
        }
        .a4{
            font-size: 12px;
            color: #869098;
            text-decoration: initial;
            margin-left: 20px;
        }
    </style>
</head>
<body style="font-family: sans-serif;">
    <!-- 头部栏目 -->
    <div class="headDiv">
        <!-- 头部左侧栏目 -->
        <div class="leftDiv">
            <a href="http://news.baidu.com/" class="a1">新闻</a>
            <a href="https://www.hao123.com/" class="a1">hao123</a>
            <a href="https://map.baidu.com/@13211798.77,2842902.63,12z" class="a1">地图</a>
            <a href="https://live.baidu.com/" class="a1">直播</a>
            <a href="https://haokan.baidu.com/?sfrom=baidu-top" class="a1">视频</a>
            <a href="https://tieba.baidu.com/index.html" class="a1">贴吧</a>
            <a href="https://xueshu.baidu.com/" class="a1">学术</a>
            <a href="https://www.baidu.com/more/" class="a1">更多</a>
        </div>
        <!-- 头部右侧栏目 -->
        <div class="rightDiv">
            <div href="" class="a2">设置</div>
            <div href="" class="a3">登录</div>
        </div>
    </div>
    <!-- 百度图标 -->
    <div class="image" >
        <a href="https://www.baidu.com/">
            <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度图标"  width="300px" height="auto">
        </a>
    </div>
    <!-- 输入框总体 -->
    <div class="threeDiv">
        <!-- 输入框 -->
        <p style="font-size: 20px;">
            <input type="text" class="inputDiv" placeholder="请输入想要搜索的内容" ></input>
        </p>
        <!-- 百度一下按钮 -->
        <a href="https://www.baidu.com/">
            <div class="baiduDiv" >百度一下</div>
        </a>
    </div>
    <!-- 百度热榜 -->
    <div class="hotDiv">
        <!-- 标题 -->
        <div class="hot">百度热榜</div>
        <!-- 第一行 -->
        <div class="hotBig">
            <!-- 热点1 -->
            <div class="hotLeft"><a>1</a>&nbsp;&nbsp;  31省份新增本土确诊50例 均在福建</div>
            <!-- 热点4 -->
            <div class="hotRight">4&nbsp;&nbsp;  莆田累计报告99例确诊5例无症状</div>
        </div>
        <!-- 第二行 -->
        <div class="hotBig">
            <!-- 热点2 -->
            <div class="hotLeft"><b>2</b>&nbsp;&nbsp;  中国队有望递补男子4x100米铜牌</div>
            <!-- 热点5 -->
            <div class="hotRight">5&nbsp;&nbsp;  教育部:中秋国庆鼓励师生就地过节</div>
        </div>
        <!-- 第三行 -->
        <div class="hotBig">
            <!-- 热点3 -->
            <div class="hotLeft"><c>3</c>&nbsp;&nbsp;  中方回应英议会禁止我大使参加活动</div>
            <!-- 热点6 -->
            <div class="hotRight">6&nbsp;&nbsp;  中方回应英议会禁止我大使参加活动</div>
        </div>
    </div>
    <!-- 底部栏目 -->
    <div class="bottomDiv">
        <a href="" class="a4">关于百度</a>
        <a href="" class="a4">About Baidu</a>
        <a href="" class="a4">使用百度前必读</a>
        <a href="" class="a4">帮忙中心</a>
        <a href="" class="a4">京公网安备11000002000001号</a>
    </div>
</body>
</html>