仿百度首页完整版

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

returnadsss

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

阅读量402

点赞数 1

分类专栏： js+css+html 文章标签：百度 javascript html5

本文链接：https://blog.csdn.net/returnadsss/article/details/122750003

版权

js+css+html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

效果：
在这里插入图片描述
文档结构：

从网页上摘下来的图片（省的自己去弄雪碧图）

源码：
html+js(少量，内嵌)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="nav ">
		<div class="navleft">
			<a href="#">新闻</a>
			<a href="#">hao123</a>
			<a href="#">地图</a>
			<a href="#">直播</a>
			<a href="#">视频</a>
			<a href="#">贴吧</a>
			<a href="#">学术</a>
			<a href="#" id="more">更多</a>
			<div id="ha">
			<table>
				<tr>
					<td><div style="text-align: center;"><a href="#" class="blo"><img src="images/a1.png" alt=""></a></br><a href="#">翻译</a></div></td>
					<td><div style="text-align: center;"><a href="#" class="blo"><img src="images/a2.png" alt=""></a></br><a href="">学术</a></div></td>
					<td><div style="text-align: center;"><a href="" class="blo"><img src="images/a3.png" alt=""></a></br><a href="">文库</a></div></td>
				</tr>
				<tfoot>
					<tr><td colspan="3" style="text-align: center;"><a href="#">查看全部百度产品></a></td></tr>
				</tfoot>
			</table>
			</div>
	    </div>
	    <div class="navright">
	    	<a href="#" id="login">登录</a>
	    	<a href="#">设置</a>
	    </div>
	</div>
	<div class="main">
	    <div class="pic">
		    <a href=""><img src="images/1.png" alt=""></a>
	    </div>
	    <div class="search">
	    	<div class="holder">
		        <input type="text" id="searchcontent"/>
		        <div class="photo"></div>
		        <a href="#">百度一下</a>
		    </div>
	    </div>
	</div>
	<div class="foot">
		<div class="footout">
		<a href="#">关于百度</a>
		<a href="#">about BaiDu</a>
		<a href="#">使用百度必读</a>
		<a href="#">帮助中心</a>
		<a href="#">京备10212222200</a>
		</div>
	</div>
	<script>
		let moreBtn=document.getElementById("more");
		let haBtn=document.getElementById("ha");
		let searchBtn=document.getElementById("searchcontent");
		moreBtn.onmouseover=function(){
			haBtn.style.display="block";
		}
		moreBtn.onmouseout=function(){
			haBtn.style.display="none";
		}
		haBtn.onmouseover=function(){
			haBtn.style.display="block";
		}
		haBtn.onmouseout=function(){
			haBtn.style.display="none";
		}
	</script>
</body>
</html>

css

/*css reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/*end*/
.navleft{
	float: left;
	height: 40px;
}
.navright{
	float: right;
	height: 40px;
}
.nav{
	*zoom:1;
}
#ha{
	width: 180px;
	height: 150px;
	border-radius: 10px;
	position: absolute;
	top: 40px;
	left: 340px;
	box-shadow: 5px 0 5px lightgray,
				0 -5px 5px lightgray,
				0 5px 5px lightgray,
				5px 0 5px lightgray;
	display: none;
}
.nav::after{
	clear: both;
	content: "";
	display: block;
	height: 0;
	visibility: hidden;
}
.navleft>a{
	font: 13px/23px Arial,sans-serif;
	float: left;
	text-decoration: none;
	color: black;
	margin: 10px;
	padding : 5px 10px;
}
.navright>a{
	font: 13px/23px Arial,sans-serif;
	float: right;
	text-decoration: none;
	color: black;
	margin: 20px;
	padding: 3px 10px;
}
table a{
	font: 13px/23px Arial,sans-serif;
	text-decoration: none;
	margin: 5px;
	padding: 5px;
}
table img{
	width: 42px;
    height: 42px;
    margin-top: 8px;
    margin-left: 8px;
    margin-right: 8px;
    border: 1px solid rgba(0,0,0,.03);
    border-radius: 8px;
    display: block;
}
.nav a:hover{
	color: blue;
}
table div:hover{
	color: blue;
	background-color: rgba(0,0,0,.03);
}
#login{
	background-color: #7B8EF4;
	color: white;
	border-radius: 5px;
}
#login:hover{
	background-color:#4E6EF2;
}
.main{
	text-align: center;
}
.pic{
	text-align: center;
}
.pic img{
	width: 300px;
	height: 150px;
}
.search{
	text-align: center;
	width:100% ;
	height: 30px;
}
.foot{
	position: fixed;
	bottom: 0px;
}
.footout{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.foot a{
	padding-left: 200px;
	text-decoration: none;
	color: black;
}
.search{
	text-align: center;
}
.holder{
	display: inline-block;
	position: relative;
}
#searchcontent{
	height: 36px;
	width: 500px;
	float: left;
	border-style: solid;
	border-radius: 10px 0 0 10px;
	border-width: 2px;
	border-color: lightslategray;
	color: black;
}
.photo{
	position: absolute;
	background: url("../images/2.png") no-repeat -0px -48px;
	left: 480px;
	top: 10px;
	width: 24px;
	height: 20px;
}
.photo:hover{
	background: url("../images/2.png") no-repeat -0px -72px;
}
#searchcontent:focus{
	border-color: blue !important;
}
#searchcontent:hover{
	border-color: black;
}
.search a{
	text-decoration: none;
	display: inline-block;
	width: 100px;
	/*这里也可以使用基线对齐，height40px*/
	height: 42px;
	line-height: 36px;
	text-align: center;
	border-radius: 0px 5px 5px 0px;
	font-family: "微软雅黑";
	cursor: pointer;
	background-color: #4E6EF2;
	color: white;
	float: left;
}
.search::after{
	clear: both;
	content: "";
	display: block;
	height: 0;
	visibility: hidden;
}
.search a:hover{
	background-color: blue;
}
#ai{
	margin: 0 auto;
	width: 50px;
	height: 50px;
	background-color: red;
}

returnadsss

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
仿百度首页完整版

效果：文档结构：从网页上摘下来的图片（省的自己去弄雪碧图）源码：html+js(少量，内嵌)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
复制链接

扫一扫