简单百度页面模仿

最新推荐文章于 2024-07-11 14:41:43 发布

你的负卿是我

最新推荐文章于 2024-07-11 14:41:43 发布

阅读量512

点赞数

分类专栏： web前端文章标签： css html html5 css3 前端

本文链接：https://blog.csdn.net/weixin_43909373/article/details/108088080

版权

web前端专栏收录该内容

17 篇文章 10 订阅

订阅专栏

代码部分非常简单

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			text-align: center;/*元素居中*/
		}
		body {
			font-size: 16px;  /*调整文字大小*/
		}
		.width {
			width: 400px; /*调整宽度*/
			height: 20px; /*调整高度*/
		}
		.tj {
			height: 30px;
			width: 100px;
		}
		.nav {
			height: 60px;
			font-size: 14px;
		}
		.bk {
			font-size: 14px;
			height: 60px;
		}
		.sou {
			height: 50px;
		}
		.map {
			height: 60px;
		}
		.copyright {
			line-height: 30px;
		}
		.font{ font-family:Arial, Helvetica, sans-serif;}
 
	</style>
</head>
<body>
 
	<div class="logo">
	<img src="img/bdlogo.jpg" alt="" width="500" height="200" title="百度一下，你就知道">
	</div>
	<div class="nav">
	<a href="#">新 闻</a>
	<a href="#">网 页</a>
	<a href="#">贴 吧</a>``
	<a href="#">知 道</a>
	<a href="#">音 乐</a>
	<a href="#">图 片</a>
	<a href="#">视 频</a>
	<a href="#">地 图</a>
	</div>
	<div class="sou" >
	<input type="text" class="width"> <input type="submit" value="百度一下" class="tj">
	</div>
	<div class="bk">
		<a href="#">百科</a>
		<a href="#">文库</a>
		<a href="#">hao123</a> | 
		<a href="#">更多>></a>
	</div>
	<div class="map"><img src="img/ic.jpg" >
	<a href="#">百度地图带你吃喝玩乐，全心全意为人民服务</a>
	</div>
	<div class="copyright">
		<a href="#">把百度设为主页 </a>
		<a href="#">安装百度卫士</a>
		<a href="#">加入百度推广</a> |
		<a href="#">搜索风云榜</a> |
		<a href="#">关于百度 </a> |
		<a href="#">About Baidu</a><br>
		<font>©</font>2013 百度使用前必读 京ICP证030173号
	</div>
</body>
</html>