百度首页制作 （仿百度首页）
介绍：
用html+css制作的百度首页
带搜索功能，点击会进行跳转到搜索页面
效果图：
鼠标移入悬浮效果：
代码
<!DOCTYPE html>
<html lang="zn">
<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="shortcut icon" href="./static/img/baidu_icon.png" type="image/x-icon">
<link rel="stylesheet" href="./static/css/index.css">
</head>
<body>
<div class="header">
<div class="banner">
<div class="left-bar">
<a href="#" class="left-item">新闻</a>
<a href="#" class="left-item">hao123</a>
<a href="#" class="left-item">地图</a>
<a href="#" class="left-item">视频</a>
<a href="#" class="left-item">贴吧</a>
<a href="#" class="left-item">网盘</a>
<div class="more">
<a href="#" class="left-item">更多</a>
<div class="more-item">
<div class="more-icon">
<a href="#">
<img src="./static/img/newfanyi.png" alt="">
<p>翻译</p>
</a>
<a href="#">
<img src="./static/img/newxueshuicon.png" alt="">
<p>学术</p>
</a>
<a href="#">
<img src="./static/img/newwenku.png" alt="">
<p>文库</p>
</a>
<a href="#">
<img src="./static/img/newbaike.png" alt="">
<p>百科</p>
</a>
<a href="#">
<img src="./static/img/newzhidao.png" alt="">
<p>知道</p>
</a>
<a href="#">
<img src="./static/img/newjiankang.png" alt="">
<p>健康</p>
</a>
<a href="#">
<img src="./static/img/yingxiaoicon.png" alt="">
<p>营销推广</p>
</a>
<a href="#">
<img src="./static/img/newzhibo.png" alt="">
<p>直播</p>
</a>
<a href="#">
<img src="./static/img/newyinyue.png" alt="">
<p>音乐</p>
</a>
</div>
<a class="more-link" href="">查看全部百度产品></a>
</div>
</div>
</div>
<div class="right-bar">
<li>
<a href="#" class="right-item">设置</a>
<ul>
<li><a href="">搜索设置</a></li>
<li><a href="">高级搜索</a></li>
<li><a href="">关闭预测</a></li>
<li><a href="">隐私设置</a></li>
<li><a href="">关闭热搜</a></li>
</ul>
</li>
<li>
<a href="#" id="login" class="right-item"> 登陆 </a>
</li>
</div>
</div>
</div>
<div class="content">
<div class="baidu-logo">
<a href="#" title="百度一下,你就知道">
<img src="./static/img/baidu_logo.png" alt="百度">
</a>
</div>
<div class="search">
<span class="search-bar">
<form action="https://www.baidu.com/s?wd=" method="get" target="_blank">
<input type="text" id="search-text" name="wd" class="input-bar">
<input type="submit" value="百度一下" class="search-btn">
<span class="photo-search"></span>
</form>
</span>
</div>
<div class="news-title">
<div class="news-header">
<p class="left">百度热榜
<img src="static/img/arrow.png" />
</p>
<p class="right">
<img src="static/img/refresh.png" />
换一换
</p>
</div>
<div class="news-list">
<a href="#">
<li>
<p>1</p>
<p class="news-text">中美元首通话释放三大关键信息</p>
</li>
</a>
<a href="#">
<li>
<p>2</p>
<p class="news-text">今日春分</p>
<span class="hot">热</span>
</li>
</a>
<a href="#">
<li>
<p>3</p>
<p class="news-text">2021年结婚登记人数创36年新低</p>
<span class="hot">热</span>
</li>
</a>
<a href="#">
<li>
<p id="seccol">4</p>
<p class="news-text">我们一起跨过这场“倒春寒”</p>
<span class="hot">热</span>
</li>
</a>
<a href="#">
<li>
<p class="seccol">5</p>
<p class="news-text">当事人回应拼多多六万人砍价失败热</p>
<span class="hot">热</span>
</li>
</a>
<a href="#">
<li>
<p class="seccol">6</p>
<p class="news-text">女子晚走一分钟被隔离在火锅店</p>
</li>
</a>
</div>
</div>
</div>
<div class="footer">
<div>
<span><a href="#">关于百度</a></span>
<span><a href="#">About Baidu</a></span>
<span><a href="#">使用百度前必读</a></span>
<span><a href="#">帮助中心</a></span>
<span><a href="#">京公网安备11000002000001号</a></span>
<span><a href="#">京ICP证030173号</a></span>
<span>©2022 Baidu </span>
<span>互联网药品信息服务资格证书 (京)-经营性-2017-0020</span>
<span><a href="#">信息网络传播视听节目许可证 0110516</a></span>
</div>
</div>
</body>
</html>
1030
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
