百度首页制作

最新推荐文章于 2022-03-21 15:57:18 发布

那就可爱多一点点

最新推荐文章于 2022-03-21 15:57:18 发布

阅读量338

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_37241934/article/details/82939735

版权

HTML 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Document</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/baidu.css"/>
		<script type="text/javascript" src="js/baidu.js"></script>
	</head>
 
	<body>
		<div class="top" >
			
		<a href="https://www.baidu.com"> 新闻</a>
		<a href="https://www.baidu.com">hao123</a>
		<a href="https://www.baidu.com">地图</a>
		<a href="https://www.baidu.com">视频</a>
		<a href="https://www.baidu.com">贴吧</a>
		<a href="https://www.baidu.com">学术</a>
		<a href="https://www.baidu.com">登录</a>
		<a  href="https://www.baidu.com" id="more1" onmouseover="x()" onmouseout="y()">设置 </a>
		<a href="https://www.baidu.com" id="more" >更多产品</a>
			
			<ul id="nav">
			<a href="#">搜索设置</a>
			<a href="#">高级搜索</a>
			<a href="#">关闭预测</a>
			<a href="#">隐私设置</a>
			</ul>	
		</div>
		
		<div class="middle"> 
		<div >
		<img src="img/baidu.png" alt="百度logo" width="235px" height="85px" id="baidu" />
		</div>
		<div>
			<img src="img/1.png" class="img"/>
		<input type="text" name="text" id="text" value="" />
		<button>百度一下</button>
		</div>
		</div>
		
		<div class="button">
			<img src="img/4.png"/>
			<p ><a href="#">把百度设为首页</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">关于百度</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">About Baiudu</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">关于百度</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">百度推广</a></p>
			@2018&nbsp;Baidu&nbsp;<a href="#">使用百度前必读</a>&nbsp;<a href="#">意见反馈</a>&nbsp;京ICP证030173号<img src="img/2.png" alt="" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;京公网安备11000000102001号<img src="img/3.png" alt="" />
			
		</div>
	</body>
</html>

CSS：

			.top{
				margin: 0px 0 80px 0;
				width: 460px;
				height: 30px;
				text-align: center;
			
				position: absolute;
				right:5px;
				top: 5px;
			}
			
			.top a{
				color:#585858;
				font-family:"微软雅黑";
				font-size: 0.85em;
				padding: 6px;
				font-weight:800 ;
			}
			
			#more{
				background-color: dodgerblue;
				text-decoration: none;
				color: white;	
				margin-left: 10px;
			}
			 #nav{
			 	display: none;
			 	position: absolute;
			 	top: 20px;
			 	left: 333px;
			 	padding:5px 0 5px 0;
			 	line-height: 23px;
			 	width: 60px;
			 	
			 	font-size: 14px;
			 	box-shadow: 0.5px 0.5px  3px 1px #C0C0C0;
			 }
			 #nav a{
			 	text-decoration: none;
			 }
		.middle{
				margin-left: auto;
				margin-right: auto;
				position: absolute;
				top:100px;
				left: 40px;
				text-align: center;
			}
		
		.middle img{
			padding: 0 0 35px 0;
		}
		 button{
			height: 41px;
			width: 100px;
			background-color: #3366FF;
			color: white;
			border: none;
			margin-left: -4px;
			padding-bottom: 3px;
			
		}
		
			.middle input{
				height: 35px;
				width: 550px;
			
			}
			body div +div{
				width: 1300px;
				height: 100px;
				margin: auto 0;
			}
			.middle input:before{
				content: url(img/1.png);
			}
			.middle div div{
				width: 1000px;
				height: 100px;
			}
		.button{
				
				text-align: center;
				padding: 180px 0 0 0;
				font-size: 10px;
				font-family: "微软雅黑";
				color: #C0C0C0;
				line-height: 5px;
				position: absolute;
				top: 250px;
				left: 40px;
			}
			div.button a{
				color: #C0C0C0;
			}
			.img{
				position: absolute;
				top:130px;
				left: 840px;
				cursor: pointer;
			}

JS：

				function x(){
				var more = document.getElementById("nav");
					more.style.display = 'block';
				}
				function y(){
					var more = document.getElementById("nav");
					more.style.display = 'none';
				}