百度

百度首页布局与样式设计

最新推荐文章于 2025-09-13 15:06:44 发布

原创最新推荐文章于 2025-09-13 15:06:44 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

<!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="bdlogo.gif" alt="" width="270" height="129" 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="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>