纯HTML百度主页

本文链接： https://blog.csdn.net/JackieDYH/article/details/102581746

<!DOCTYPE html> <!--申明文档类型html-->
<html>  <!--html标签--> 
	<head>
		<meta charset="UTF-8">
		<title>百度一下，你就知道</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.a{
				width:475px;
				height:24px;
				float:right;
				padding:18px 0;
			}
			.a>a{
				font-size:13px;
				padding-right:14px;
				width:26px;
				color:black;
				line-height: 24px;
			}
			
			.a a:nth-child(1),a:nth-child(2),a:nth-child(3),a:nth-child(4),a:nth-child(5),a:nth-child(6){
				font-weight: bold;
			}
			.a a:nth-child(9){
				width:60px;
				height:24px;
				background:#3388FF;
				padding:5px;
				text-align: center;
				color:#fff;
				text-decoration:none;
			}
			.logo{
				width:270px;
				height:129px;
				position: absolute;
				left:665px;
				top:85px;
			}
			#a{
				width:100%;
				height:240px;
				position: relative;
				overflow: hidden;/*规定元素超出区域如何显示*/
			}
			.c{
				width:650px;
				margin:0 auto;
				overflow: hidden;
			}
			.c>input{
				width:540px;
				height:32px;
				border:1px solid #3385FF;
				float:left;
				background: #FFF url("images/yuansu1.png") no-repeat scroll 97% 50%;
			}
			.c>button{
				background:#3385FF;
				width:100px;
				height:34.5px;
				border:0;
				color:#fff;
				font-size: 15px;
				float:left;
			}
			#ma{
				width:60px;
				height:86px;
				margin:260px auto 20px;
				font-size: 13px;
				text-align: center;
				
			}
			.ma{
				width:60px;
				height:60px;
			}
			#ma>p{
				font-weight: bold;
			}
			.e{
				text-align: center;
				color:#999;
				font-size: 13px;
				margin-bottom:5px;
			}
			.e>a{
				color:#999;
				font-size: 13px;
				margin-right:8px;
				
			}
		</style>
	</head>
	<body>
		<div id="a">
		<div class="a">
		<a href="#">新闻</a>	
		<a href="#">hao123</a>	
		<a href="#">地图</a>	
		<a href="#">视频</a>	
		<a href="#">贴吧</a>	
		<a href="#">学术</a>	
		<a href="#">登录</a>	
		<a href="#">设置</a>	
		<a href="#">更多产品</a>	
		</div>
		<div>
			<img class="logo" src="images/bd_logo1.png"/>
		</div>
		</div>
		<div class="c">
		<input type="text"/>
		<button>百度一下</button>
		</div>
		<div id="ma">
			<img class="ma" src="images/erweima.jpg">
			<p>手机百度</p>
		</div>
		<p class="e">
		<a href="#">把百度设为主页</a>
		<a href="#">关于百度</a>
		<a href="#">about baidu</a>
		<a href="#">百度推广</a>
		</p>
		<p class="e">©2017 baidu <a href="#">使用百度前必读</a><a href="#">意见反馈</a> 京ICP证030173号   <a href="#">京公网安备11000002000001号</a></p>
	</body>
</html>
猜你喜欢
