百度首页制作

Myth丶恋晨 2022-05-09 08:03 279阅读 0赞

![70][]

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>      <a href="#">关于百度</a>     <a href="#">About Baiudu</a>     <a href="#">关于百度</a>     <a href="#">百度推广</a></p>
    			@2018 Baidu <a href="#">使用百度前必读</a> <a href="#">意见反馈</a> 京ICP证030173号<img src="img/2.png" alt="" />      京公网安备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';
    				}

[70]: /images/20220509/d1593354172542ec823c10eb84807ae7.png