百度界面代码及效果展示
本文包括百度界面html代码、css代码及其效果展示注意！！！只能实现页面展示，具体功能不能实现！效果展示HTML详细代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"&
·
本文包括百度界面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> 热 </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;
}
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
15
0- 0
已为社区贡献1条内容
所有评论(0)