百度界面代码及效果展示

本文包括百度界面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 距底边5pxmargin：上 右 下 左 ;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;
}

百度界面代码及效果展示相关推荐

【Html+JS+CSS】简易轮播图核心代码分享 + 效果展示
目录直接上代码吧! 简单效果展示直接上代码吧! Html启动页代码: <!DOCTYPE HTML> <html><head><title>plea ...
人工水母优化BP神经网络（JSBP）实现数据预测的Matlab代码和效果展示
人工水母搜索算法优化BP神经网络(JSBP)实现数据预测原理讲解和代码效果展示的完整讲解视频(时长33分钟)地址:https://www.bilibili.com/video/BV1z84y1c7JA ...
国学*周易*梅花易数代码实现效果展示 - 梅花心易
近日偶遇舒涵老师 <国学*周易>4天免费试听课,带着一颗好奇心,看了2晚直播: 第1课入门周易基础知识: 第2课讲梅花易数: 听完梅花易数,突来灵感,随机报2个数字,根据公式测算凶吉:感 ...
自定义仿全民直播界面的悬停效果
在上一篇博客中,我们用自定义View的方式来实现了仿御泥坊(淘宝,360手机卫士等)界面悬停的效果展示,地址如下:点击打开链接不过自定义的相对来说还是有点复杂的,那么有朋友要问了,有没有更简单一些的 ...
python爬取微博用户信息（一）—— 效果展示
有时,我们想要了解一个人,一般会通过ta的微博.朋友圈以及朋友的看法去了解. 特别是面对自己喜欢的明星,我们常常会浏览ta的微博,了解ta的动态. 那么,在大数据时代,数据已经成为了不可缺少的一部分, ...
【Python】监控视频中运动目标检测的代码实现及效果展示
0.介绍基于python,使用opencv库函数,实现监控视频中的运动目标检测,Mark一下! 干扰性和灵敏度的权衡,可通过调节代码中的参数(高斯模糊核.面积阈值.帧差间隔等)进行设置. 1.代码 ...
编写一个python程序、输出如下图形效果_Tkinter模块编写Python图形界面代码实例...
本篇文章小编给大家分享一下Tkinter模块编写Python图形界面代码实例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 一.为何使用Tkinter ...
HTML文字样式显示闪烁,怎么纯用css代码使文字展示闪动效果？（代码示例）
在网页中,通常设计师们为了凸显自己的产品主题,总会让文字或者加点特效,比如使文字不停的闪动,或有规律的变色.以便达到吸引人关注的目的.那么除了用ps制作的gif动画外,还有哪些方法可以实现这样的功能特 ...
php字体闪烁,怎么纯用css代码使文字展示闪动效果？（代码示例）
在网页中,通常设计师们为了凸显自己的产品主题,总会让文字或者加点特效,比如使文字不停的闪动,或有规律的变色.以便达到吸引人关注的目的.那么除了用ps制作的gif动画外,还有哪些方法可以实现这样的功能特 ...
Selenium之运行效果展示
Selenium之运行效果展示接下来主要学习selenium自动化测试框架在爬虫中的应用,selenium能够大幅降低爬虫的编写难度,但是也同样会大幅降低爬虫的爬取速度.(selenium可用于爬虫 ...

百度界面代码及效果展示

百度界面代码及效果展示相关推荐

最新文章

热门文章