前端第二次作业--仿百度页面

最新推荐文章于 2024-06-19 21:45:00 发布

菘蓝78

最新推荐文章于 2024-06-19 21:45:00 发布

阅读量812

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/weixin_63283483/article/details/124898235

版权

这是一个HTML页面的源代码示例，包含了头部导航、搜索框、新闻热点和底部信息。页面链接了外部CSS文件`第二次作业css.css`用于样式定义。主要内容包括百度搜索、热榜新闻以及相关链接。此外，还展示了网页布局和一些基本的HTML标签用法。

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

html源代码

<!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>
    <link rel="stylesheet" href="第二次作业css.css">
</head>
<body>
    <!-- header开始 -->
    <div class="header">
        <ul class="left">
            <li class="same-line"><a href="http://news.baidu.com"                target="_blank">新闻&emsp;&emsp;</a></li>
            <li class="same-line"><a href="https://www.hao123.com?src=from_pc"   target="_blank">hao123&emsp;&emsp;</a></li>
            <li class="same-line"><a href="http://map.baidu.com"                 target="_blank">地图&emsp;&emsp;</a></li>
            <li class="same-line"><a href="http://tieba.baidu.com/"              target="_blank">贴吧&emsp;&emsp;</a></li>
            <li class="same-line"><a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank">视频&emsp;&emsp;</a></li>
            <li class="same-line"><a href="http://image.baidu.com/"              target="_blank">图片&emsp;&emsp;</a></li>
            <li class="same-line"><a href="https://pan.baidu.com?from=1026962h"  target="_blank">网盘&emsp;</a></li>
            <li class="same-line" class="more">
                <div class="more-1"> <a href="http://www.baidu.com/more/"   target="_blank">更多</a>
            </li>
        </ul>
        <div class="text-right">
            <div class="same-line3">
                <span class="set"><a href="#">设置</a></span>
            </div>
            <span><a class="login" href="">登录</a></span>
        </div>
    </div>
    <!--head结束-->
    <!-- body开始 -->
    <div class="body">
        <div>
            <img class="logo" src="图标\百度.png" alt="">
        </div>
        <div><input class="search-text"></div>
        <div class="search-button" href="" >百度一下</div>
        <table >
                <tr class="news">
                    <td style="padding-left:14px;padding-top:3px;"><a href="https://top.baidu.com/board?platform=pc&sa=pcindex_entry">百度热榜></a></td>
                    <td style="width: 300px;"><a href="#" class="change">换一换</a></td>
                </tr>
                <tr class="news">
                    <td ><a href="https://www.baidu.com/s?wd=%E4%BA%A7%E4%B8%9A%E5%8D%87%E7%BA%A7%E6%80%81%E5%8A%BF%E6%B2%A1%E6%9C%89%E6%94%B9%E5%8F%98&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"><span style="color:#fe2d46;">1</span>&nbsp&nbsp产业升级态势没有改变&nbsp&nbsp<span class="new">新</span></a></td>
                    <td><a href="https://www.baidu.com/s?wd=%E5%B0%8F%E6%BB%A1&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"><span style="color:#9b9fac;">4</span>&nbsp&nbsp小满</a></td>
                </tr>
                <tr class="news">
                    <td><a href="https://www.baidu.com/s?wd=%E4%BA%9A%E9%80%9F%E9%92%A2%E9%93%81%E5%8E%82%E4%B9%8C%E5%86%9B%E5%85%A8%E9%83%A8%E6%8A%95%E9%99%8D+%E8%A7%86%E9%A2%91%E6%9B%9D%E5%85%89&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"><span style="color:#ff6600">2</span>&nbsp&nbsp亚速钢铁厂乌军全部投降 视频曝光</a></td>
                    <td><a href="https://www.baidu.com/s?wd=%E6%9D%AD%E5%B7%9E%E6%A5%BC%E5%B8%82%E6%96%B0%E6%94%BF%E4%BB%855%E5%A4%A9+%E6%9C%89%E4%B8%9A%E4%B8%BB%E6%B6%A8%E4%BB%B780%E4%B8%87&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"><span style="color:#9b9fac;">5</span>&nbsp&nbsp杭州楼市新政仅5天 有业主涨价80万</a></td>
                </tr>
                <tr class="news">
                    <td><a href="https://www.baidu.com/s?wd=%E4%B8%8A%E6%B5%B7%E6%96%B0%E5%A2%9E%E6%9C%AC%E5%9C%9F84%2B784+%E6%AD%BB%E4%BA%A11%E4%BE%8B&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"><span style="color:#faa90e;">3</span>&nbsp&nbsp上海新增本土84+784 死亡1例&nbsp&nbsp<span class="hot">热</span></a></td>
                    <td><a href="https://www.baidu.com/s?wd=%E9%A3%9E%E7%9B%98%E8%A2%AB%E7%8E%A9%E5%8F%98%E5%91%B3%E4%BA%86%E8%BF%98%E6%98%AF%E8%A2%AB%E6%B1%A1%E5%90%8D%E5%8C%96%E4%BA%86%EF%BC%9F&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"><span style="color:#9b9fac;">6</span>&nbsp&nbsp飞盘被玩变味了还是被污名化了?</a></td>
                </tr>
    
        </table>
    </div>
    <!--body结束-->
    <!--footer开始-->
    <div class="footer">
        <ul class="same-line2">
            <li><a href="https://home.baidu.com/" target="_blank">关于百度&emsp;</a></li>
            <li><a href="http://ir.baidu.com" target="_blank">About Baidu&emsp;</a></li>
            <li><a href="https://www.baidu.com/duty" target="_blank">使用百度前必读&emsp;</a></li>
            <li><a href="https://help.baidu.com/" target="_blank">帮助中心&emsp;</a></li>
            <li><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号&emsp;</a></li>
            <li><a href="https://beian.miit.gov.cn" target="_blank">京ICP证030173号&emsp;</a></li>
            <li>©2022 Baidu</a></li>
            <li>互联网药品信息服务资格证书 (京)-经营性-2017-0020</a></li>
            <li><a href="http://www.baidu.com/licence/" target="_blank">信息网络传播视听节目许可证 0110516</a></li>
        </ul>
    <!--footer结束-->
</body>
 
</html>

css源代码