欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

用html和css写一个仿百度首页

程序员文章站 2022-04-24 12:38:54
...
  • 效果图如图：用html和css写一个仿百度首页
  • baidu.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>百度一下，你就知道</title>
	<link rel="shortcut icon" type="image/x-icon" href="./images/1.ico" />
	<link rel="stylesheet" href="css/css1.css" />
</head>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	body{
		width: 100%;

	}
	.outer .first a{
		font-family: "微软雅黑";
		font-size: small ;
		color: #777;
		font-weight:bold ;

	}
	.outer .first a:hover{
		color: blue;
	}
	.outer{
		width: 1600px;
	}
	.first{
		position: absolute;
		top: 10px;
		right: 0px;
	}
	.second{
		height:400px;
		padding-left: 480px;
		padding-top: 100px;
	}
	.thrid{
		width:1595px;
		height:280px;
		position: relative;
	}
	.first .product{
		background:cornflowerblue;
		display: inline-block;
		top: 0;
		height: 30px;
		width: 62px;
		text-align: center;
	}
	.first .more{
		width: 60px;
		height: 25px;
		color: #fff;
		background: #38f;
		line-height: 22px;
		font-size: 13px;
		text-align: center;
		border-bottom: 1px solid #38f;
		margin-left: 5px;
		margin-top: 0px;
	}
	.first .product a{
		color: white;
		text-decoration: none;
	}
	.second_input{
		width: 600px;
		height: 40px;
		border: 1px solid dodgerblue;
		position: absolute;
		left: 320px;
		top: 240px;
	}
   .second_button{
		width: 100px;
		height: 41px; 
		color: white;
		background: #317ef3;
		border: 0;
		font-size:medium;
		position: absolute;
		top:240px;
		left: 850px;
	}
	.thrid .h{
		position: absolute;
		top:38px;
		left:450px;
		width: 550px;
		height: 20px;
		font-size: smaller;
	}
	.thrid .r{
		position: absolute;
		top:56px;
		left:530px;
		width: 580px;
		height: 20px;
		font-size: smaller;
	}
	.thrid .r img{
		width: 16px;
		height: 16px;
		float: left;
	}
	.thrid a{
		font-family: "微软雅黑";
		font-size: smaller;
		color: gray;
	}
</style>
<body>
	<div class="outer">
		<div class="first">
			<a href="http://news.baidu.com/" target="_blank">新闻</a>&nbsp;&nbsp;&nbsp;
			<a href="https://www.hao123.com/" target="_blank">hao123</a>&nbsp;&nbsp;&nbsp;
			<a href="https://map.baidu.com/" target="_blank">地图</a>&nbsp;&nbsp;&nbsp;
			<a href="http://v.baidu.com/" target="_blank">视频</a>&nbsp;&nbsp;&nbsp;
			<a href="https://tieba.baidu.com/index.html" target="_blank">贴吧</a>&nbsp;&nbsp;&nbsp;
			<a href="http://xueshu.baidu.com/" target="_blank">学术</a>&nbsp;&nbsp;&nbsp;
			<a href="">用户名</a>&nbsp;&nbsp;&nbsp;
			<a href="">设置</a>&nbsp;&nbsp;&nbsp;
			<span class="product more">
				<a href="https://www.baidu.com/more/" target="_blank">更多产品</a>
			</span>
		</div>
		<div class="second">
			<img src="./images/3.png" width="320px" height="139px" />
			<input type="text" class="second_input"/>
			<input type="button" class="second_button" value="百度一下"/>
		</div>
			<div class="thrid">
			<!-- <img src="./imges/2.jpg" height="60" width="60" class="er"/><br/> -->
			<div class="h">
		   	<a href="">设为首页</a>&nbsp;&nbsp;
		   	<a>©2019 Baidu</a>&nbsp;&nbsp;
		   	<a href="">使用百度前必读</a>&nbsp;&nbsp;
		   	<a href="">意见反馈</a>&nbsp;&nbsp;
		   	<a>京ICP证030173号</a>&nbsp;&nbsp;<br>	   	   	
			</div>
			<div class="r">
				<img src="./images/2.jpg">&nbsp;
			   <a> 京公网安备11000002000001号</a>&nbsp;&nbsp;
			</div>		
		</div>
</body>
</html>

1.title前加百度图标的方法：在title下面加上下面代码，href中放图片.ico的位置
<link rel="shortcut icon" type="image/x-icon" href="./images/1.ico" />

上一篇： 25岁程序员 VS 35岁程序员，太真实！

下一篇： 【LeetCode】332. 重新安排行程

推荐阅读