百度界面代码及效果展示

最新推荐文章于 2024-02-01 15:08:06 发布

周末la

最新推荐文章于 2024-02-01 15:08:06 发布

阅读量1.1w

点赞数 15

分类专栏：前端开发文章标签： html css

本文链接： https://blog.csdn.net/qq_44967509/article/details/118344805

版权

前端开发专栏收录该内容

1 篇文章 1 订阅

订阅专栏

本文包括百度界面html代码、css代码及其效果展示

注意！！！只能实现页面展示，具体功能不能实现！

效果展示
在这里插入图片描述

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>
    <!-- 链接css文件 -->
    <link rel="stylesheet" href="./baidu.css">
</head>
<body>
    <header class="top">
        <!-- 导航栏开始 -->
        <nav>
            <a href="http://news.baidu.com/">新闻</a>
            <a href="https://www.hao123.com/">hao123</a>
            <a href="https://map.baidu.com/">地图</a>
            <a href="https://live.baidu.com/">直播</a>
            <a href="https://haokan.baidu.com/?sfrom=baidu-top">视频</a>
            <a href="https://tieba.baidu.com/index.html">贴吧</a>
            <a href="https://xueshu.baidu.com/">学术</a>
            <a href="https://www.baidu.com/more/">更多</a>
        </nav>
        <!-- 导航栏结束 -->
    </header>

    <!-- 搜索框上的图片 图片路径可更改 -->
    <div class="picture">
        <a target="blank" href="https://www.baidu.com/s?wd=%E5%BB%BA%E5%85%9A%E7%99%BE%E5%B9%B4&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pc"><img src="../image/100.png" width=270px alt="庆祝中国共产党成立100周年" title="庆祝中国共产党成立100周年" target="blank" /></a>
    </div>

    <!-- 搜索框开始 -->
    <div class="search">
        <div class="div1">
            <input type="text" width=546px height=45px />
        </div>
        <!-- 百度一下按钮 -->
        <div class="div2">
            <input type="button" width=110px height=45px value="百度一下"/>
        </div>
    </div>
    <!-- 搜索框结束 -->

    <!-- 百度热搜开始 -->
    <div class="hot_search">
        <div>
            <a href="https://top.baidu.com/board?platform=pc&sa=pcindex_entry">百度热搜</a>
        </div>
        <!-- 热搜词条 -->
        <div>
            <div class="hot_search_list1">
                <ul>
                    <li><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E4%B8%AD%E5%9B%BD%E6%AD%A3%E8%83%BD%E9%87%8F&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" target="blank"><font color="red"> 1 </font>  中国正能量  <span>&nbsp;热&nbsp;</span></a></li>
                    <li><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E4%B8%83%E4%B8%80%E5%8B%8B%E7%AB%A0%E9%A2%81%E6%8E%88%E4%BB%AA%E5%BC%8F&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" target="blank"><font color=#FF8C00> 2 </font>  "七一勋章"颁授仪式  </a></li>
                    <li><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=29%E5%90%8D%E5%90%8C%E5%BF%97%E8%8E%B7%E4%B8%83%E4%B8%80%E5%8B%8B%E7%AB%A0&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" target="blank"><font color=#FFA500> 3 </font>  陈红军等29人获“七一勋章”  </a></li>
                </ul>
            </div>
            <div class="hot_search_list2">
                <ul>
                <li><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%BC%A0%E6%A1%82%E6%A2%85%E8%AF%B4%E8%87%AA%E5%B7%B1%E6%98%AF%E4%B8%80%E5%90%8D%E6%99%AE%E9%80%9A%E6%95%99%E5%B8%88&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" target="blank"><font color="gray"> 4 </font>  张桂梅说自己是一名普通教师  </a></li>
                <li><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E9%B8%9F%E5%B7%A2%E4%B8%8A%E7%A9%BA%E7%84%B0%E7%81%AB%E7%9B%9B%E6%94%BE&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" target="blank"><font color="gray"> 5 </font>  视频：鸟巢上空烟火盛放  </a></li>
                <li><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%85%A8%E5%9B%BD%E6%96%B0%E5%86%A0%E7%96%AB%E8%8B%97%E6%8E%A5%E7%A7%8D%E5%89%82%E6%AC%A1%E8%B6%8512%E4%BA%BF&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" target="blank"><font color="gray"> 6 </font>  全国新冠疫苗接种剂次超12亿  </a></li>
                </ul>
            </div>
        </div>
        <!-- 百度热搜结束 -->
    </div>

    <!-- 尾部开始 -->
    <footer class="bottom">
        <div>
            <a class="bottom_" target="blank" href="https://www.baidu.com/cache/setindex/index.html">设为首页</a>
            <a class="bottom_" target="blank" href="https://home.baidu.com/">关于百度</a>
            <a class="bottom_" target="blank" href="https://ir.baidu.com/">About baidu</a>
            <a class="bottom_" target="blank" href="https://www.baidu.com/duty/">使用百度前必读</a>
            <a class="bottom_" target="blank" href="http://help.baidu.com/newadd?prod_id=1&category=4">意见反馈</a>
            <a class="bottom_" target="blank" href="https://help.baidu.com/">帮助中心</a>
            <a class="bottom_" target="blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001</a>
            <a class="bottom_" target="blank" href="https://beian.miit.gov.cn/#/Integrated/index">京ICP证030173号</a>
            <a href="#">2021baidu</a>
            <a href="#">（京）-经营性-2017-0020</a>
            <a class="bottom_" target="blank" href="https://www.baidu.com/licence/">信息网络传播视听节目许可证0110516</a>
        </div>
    </footer>
    <!-- 尾部结束 -->
</body>
</html>

CSS详细代码

/* 网页初始化 */
*{
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: '微软雅黑';
    box-sizing: border-box;
}


.top{
    /* 定义导航栏的位置 
    设置外边距使其距顶部20px 距离左右侧边均为25px 距底边5px
    margin：上 右 下 左 ;
    margin: 上  左右  下  ;
    margin: 上下 左右 ;
    margin: 四周 ;
*/
    margin: 20px 25px 5px ;
}

/* 删掉超链接自带的下划线 */
a{
    text-decoration: none;
}


nav a{
    /* 设置内边距 */
    padding-right: 23px;
    /* 定义字体颜色 */
    color: dimgray;
}

/* 当鼠标悬停在此处时的状态 */
nav a:hover{
    padding-right: 23px;
    text-decoration: none;
    color:blue;
}


.picture{
    /* 居中 */
    text-align: center;
}

.search{
    padding-top: 20px;
    /* 定义两个容器的排列方式 flex默认为水平布局 */
    display: flex;
    /* 居中 */
    justify-content: center;
    margin-top: -10px;
    margin-bottom: 30px;
}

.div1 input{
    /* 设置文本输入框的大小 */
    height: 44px;
    width: 538px;
    padding: 0 15px;
    /* 并排放置两个带边框的框*/
    box-sizing: border-box;
    /* 设置边框宽度 */
    border-bottom: 2px solid #acb1c0;
    border-left: 2px solid #acb1c0;
    border-top: 2px solid #acb1c0;
    border-right: 0px solid #acb1c0;
    /* 设置边框的拐角弧度 */
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.div2 input{
    /* 设置按钮的大小 */
    width: 110px;
    height: 44px;
    /* 设置框内字体颜色及大小 */
    color: #fff;
    font-size: 17px;
    /* 框的填充颜色 */
    background-color: #4E6EF2;
    /* 定义两个容器的排列方式 flex默认为水平布局 */
    display: flex;
    justify-content: center;
    /* 按钮内的字居中 */
    align-items: center;
    /* 设置边框宽度 */
    border: 0;
    /* 设置边框的拐角弧度 */
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}




.hot_search{
    width: 638px;
    margin: auto;
    /* 设置行间距 */
    line-height: 30px;
}

.hot_search div a{
    text-decoration: none;
    color: dimgray;
}

.hot_search_list1{
    width:50%;
    /* 设置该盒子处于左侧 */
    float: left;
    /* 设置行间距 */
    line-height: 30px;
    color: dimgray;
}
.hot_search_list2{
    width:50%;
    /* 设置该盒子处于右侧 */
    float: right;
    /* 设置行间距 */
    line-height: 30px;
    color: dimgray;
}
ul li a:hover{
    color: blue;
}

/* 热搜词条后边的小标志 */
li a span{
    color: white;
    background-color: orange;
    border-radius: 5px;
}

/* 删掉无序列表自带的小黑点 */
ul li{
    list-style-type: none;
}


.bottom div{
    margin: auto;
    text-decoration: none;
}


/* 鼠标悬停时的状态 */
.bottom_:hover{
    font-size: small;
    text-decoration: none;
    color:black;
    padding-right: 15px;
}


.bottom div a{
    font-size: small;
    color: rgb(168, 166, 166);
    padding-right: 15px;
}



.bottom{
    text-align: center;
    /* 将尾部置于页面底部 */
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
}

周末la

关注关注

15
点赞
踩
77

收藏

觉得还不错? 一键收藏
1
评论
百度界面代码及效果展示

本文包括百度界面html代码、css代码及其效果展示注意！！！只能实现页面展示，具体功能不能实现！效果展示HTML详细代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten
复制链接

扫一扫