高仿百度首页

最新推荐文章于 2022-05-11 14:13:33 发布

花菜的学长

最新推荐文章于 2022-05-11 14:13:33 发布

阅读量1.1k

点赞数 2

分类专栏： HTML案例文章标签：百度首页 HTML css 资源

本文链接：https://blog.csdn.net/Milan___Kundera/article/details/100097754

版权

HTML案例专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS高仿百度首页的布局设计，包括头部导航栏、搜索框、下拉菜单和更多产品的展示。通过精确的样式设置，实现了与百度首页几乎一致的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本代码js相关的内容用css代替（起到同样的效果）

百度首页HTML代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>百度一下，你就知道</title>
	<link rel="stylesheet" type="text/css" href="static/css/style.css">
	<link rel="stylesheet" type="text/css" href="static\layui\css\layui.css">
	<link rel="icon" type="image/icon-x" href="static/images/title_logo.jpg">
</head>
<body>
	<ul class="header">
		<li class="up"><a href="http://news.baidu.com/">新闻</a></li>
		<li class="up" style="display:inline-block;margin-top:1px;"><a href="https://www.hao123.com/">hao123</a></li>
		<li class="up"><a href="https://map.baidu.com/@13181543,3650939,13z">地图</a></li>
		<li class="up"><a href="http://v.baidu.com/?fr=bd">视频</a></li>
		<li class="up"><a href="https://tieba.baidu.com/index.html">贴吧</a></li>
		<li class="up"><a href="http://xueshu.baidu.com/">学术</a></li>
		<li class="login"><a href="#">登录</a></li>
		<li class="setting_up"><a href="#">设置</a>
			<div class="setting_up01">
				<div class="j"></div>
				<a  class="a" href="">搜索设置</a>
				<a  class="a" href="">高级搜索</a>
				<a class="a" href="">关闭搜索</a>
				<a class="a" href="">隐私设置</a>
			</div>
		</li>
		<li class="more_products">
			<span>更多产品</span>
			<div class="list">
				<ul>
					<li class="more_products01">
						<span>更多产品</span>
					</li>
					<li><a href="https://www.nuomi.com/?cid=002540"><span style="background-image: url(static/images/logo2.png);background-position: 2px 0;"></span><br/>糯米</a>
					</li>
						<li><a href="http://music.taihe.com/"><span style="background-image: url(static/images/logo2.png); background-position: -67px 0;"></span><br/>音乐</a>
					</li>
						<li><a href="http://image.baidu.com/"><span style="background-image: url(static/images/logo2.png); background-position: -100px 0;"></span><br/>图片</a>
					</li>
						<li><a href="https://zhidao.baidu.com/"><span style="background-image: url(static/images/logo2.png); background-position: -33px 0;"></span><br/>知道</a>
					</li>
					<li><a href="https://wenku.baidu.com/"><span style="background-image: url(static/images/logo2.png);background-position: -131px 0;"></span><br/>文库</a>
					</li>
					<li><a href="http://top.baidu.com/"><span style="background-image: url(static/images/logo2.png);background-position: -162px 0;"></span><br/>风云榜</a>
					</li>
					<!-- <li class="all_products">
						<a><span>全部产品</span></a>
					</li> -->
					<li style="font-size: 11px;padding: 0;text-align: center;">
						<span><a href="https://www.baidu.com/more/">更多产品>></a></span>
					</li>
				</ul>
			</div>
		</li>
	</ul>
	<div class="clear"></div>
	<div class="search">
		<img src="static/images/bd_logo1.png" alt="bd_logo">
		<form >
			<input type="text">
			<i class="layui-icon">&#xe660;</i>
			<button>百度一下</button>
		</form>
		<div class="clear"></div>
	</div>
	<div class="button">
		<div style="border:1px solid #e7e8ed;padding: 5px;width: 108.33px;margin: -5px auto 0;">
			<img src="static\images\zbios_09b6296.png">
		</div>
		<span style="font-size: 15px; color: #000;margin-left: -11px;margin-top: 5px;">下 载 百 度 A P P</span>
		<span style="font-size: 13.5px;margin-top: 4px;margin-bottom: 37.5px;">有事搜一搜&nbsp;&nbsp;&nbsp;没事看一看</span>
		<span style="margin-right: -2.5px;">
			<a href="https://www.baidu.com/cache/sethelp/help.html">把百度设为主页</a>
			<a href="http://home.baidu.com/">关于百度</a>
			<a href="http://ir.baidu.com/">About Baidu</a>
			<a href="http://e.baidu.com/ebaidu/home?refer=888">百度推广</a>
		</span>
		<span style="margin-top: 8px;margin-left: -20px;">
			©2019 Baidu
			<a href="https://www.baidu.com/duty/">使用百度前必读</a>
			<a href="http://jianyi.baidu.com/"style="margin-left: -20px;margin-right: -1px;">意见反馈</a>
			京ICP证030173号
			<i class="button_img"style="background-image: url(static/images/button_img.png);background-position: -600px -95px;"></i>
			<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" style="margin-left: 15px;margin-left: 35px;margin-right: 2px;">京公网安备11000002000001号</a>
			<i class="button_img"style="background-image: url(static/images/button_img.png);background-position: -620px -95px;"></i>
		</span>
	</div>
	<ul style="margin-bottom: 8px;"></ul>
	<br/><br/><br/>
</body>
</html>

高仿百度css代码：

*{
	padding: 0px;
	margin: 0px;
}
li{
	list-style: none;
}
/*清除浮动*/
.clear{
	clear: both;
}
/*头部导航栏*/
.header{
	float: right;
	margin-top: 22px;
}
.header .up{
	margin-top:-1px;
}
.header li{
	float: left;
	margin-right: 20px;
	font-size: 13px;
	font-weight: bold;
}

.header li a{
	color: #000;
	text-decoration: underline;
}
.header li a:hover {
	color: #3388ff;
}
.header .setting_up{
	font-weight: normal;
	margin-right: 24px;
	position: relative;/*相对定位*/
}
.header .login{
	font-weight: normal;
}

/*设置的下拉菜单*/
.setting_up01{
	width: 65px;
	/*border-width: 1px;
	border-style: solid;
	border-color: #ccc;*/
	text-align: center;
	font-weight: normal;
	line-height: 25px;
	position: absolute;/*绝对定位*/
	top: 26px;
	left: -20px;
	box-shadow:1px -1px 15px #AFADAD;/*边框阴影*/
	display: none;/*隐藏下拉框*/
}
.setting_up:hover .setting_up01{
	display: block;
}
.setting_up01 .a{
	text-decoration: none;
	font-size: 12px;
	display: block;
}
.setting_up01 .a:hover{
	background-color: #3388ff;
	color: #fff;
}
/*小箭头*/
.j{
	width: 0;
	height: 6px;
	border-width: 6px;
	border-style: solid;
	border-color: transparent transparent #fff transparent;
	position: absolute;
	top: -18px;
	left: 26px;
}

/*更多产品*/
.header .more_products{
	margin-right: 12px;
}
.more_products>span{
	color: #fff;
	padding: 4px;
	padding-top: 5px;
	background-color:#3388ff;
	font-weight: normal;
}


/*侧边栏*/
.list{
	width: 80px;
	height: 100%;
	background-color: #f5f5f5;
	position: absolute;
	top: 0;
	right: 0;
	border-left: 1px solid #e5e5e5;
	display: none;
}
.more_products:hover .list{
	display: block;
}
.list>ul{
	width: 65px;
	margin: 21px auto 0px;
}
.list ul li{
	padding: 15px 10px;
	margin-top: -1px;
	margin-right: 0;
	font-weight: normal;
	text-align: center;
	border-bottom: 1px solid #e5e5e5;
}

.list ul li a>span{
	display: inline-block;
	width: 36px;
	height: 36px;
}
.list ul li>a{
	text-decoration: none;/*消除a链接中的下划线*/
}
.list ul li:hover a{
	color: #000;
	text-decoration: underline;/*展现a链接中的下划线*/
}
.header .more_products .list .more_products01{
	padding: 0 0 15px;
}
.list .more_products01>span{
	background-color: #f5f5f5;
	color: #000;
}


/*搜索框*/
.search{
	margin:0px auto 0;
	width: 730px;
/*	background-color: #ccc;*/
	text-align: center;
	position:relative;
}
.search img{
	margin-top: -2.1px;
	width: 270px;
	height: 130px;
}
form{
	/*margin:25px auto;*/
	width: 642px;
	position:absolute;
	bottom: -61px;
	right: 44px;
}
form input{
	border-width: 1px;
	border-color: #ccc;
	border-style: solid;
	width: 540px;
	height: 34px;
	float: left;
}
input:focus{
	border-color: #3388ff;
}
form .layui-icon{
	position: absolute;
	right: 110.5px;
	top: 7.5px;
	font-size:21.3px;
	color:#999999;
}

form button{
	border:none;
	width:  99px;
	height: 36px;
	color: #fff;
	background-color: #3388ff;
	float: left;
	font-size: 15.6px;
	font-weight: 460;
	padding-top:  -1px;
}
.button{
	width: 600px;
	margin:140px auto 0;
	text-align: center;
/*	background-color: #ccc;*/
}
.button>span{
	display: block;
	font-size: 12.1px;
	color: #999999;
	padding-left: 10px;
	margin-top: 10px;
}
.button>span>a{
	margin-top: 2px;
	margin-right: 20px;
	padding-left: 1px;
	text-decoration: underline;
	color: #999999;
}
.button span .button_img{
	position: absolute;
	margin-top: -3px;
	display: inline-block;
	width: 18px;
	height: 20px;
}

附件：

资源下载地址：https://download.csdn.net/download/milan___kundera/11618307