07-百度首页模拟

zmosquito 2020-03-04

<html>
	<head>
		<title>百度首页模拟</title>
		<meta charset="UTF-8"/>
		<!--
			模拟百度首页:
				1、首页使用css+div进行页面的布局
					css代码一般使用外联方式进行开发
				2、使用HTML进行每一个块中的内容填充			
		-->
		<!--引入外部声明的css文件-->
		<link rel="stylesheet" type="text/css" href="css/baidu01.css"/>
		<!--引入网页标题图片-->
		<link href="img/title.ico" rel="shortcut icon"/>
	</head>
	<body>
		<!--声明头 部分-->
		<div id="header">
			<!--声明导航栏-->
			<ul id="header_nav">
				<li><a href="">新闻</a></li>
				<li><a href="">hao123</a></li>
				<li><a href="">地图</a></li>
				<li><a href="">视频</a></li>
				<li><a href="">贴吧</a></li>
				<li><a href="">学术</a></li>
				<li><a href="">登录</a></li>
				<li><a href="">设置</a></li>
			</ul>
		</div>
		<!--声明主体-->
		<div id="main">
			<!--引入百度logo-->
			<img id="img_logo" src="img/bd_logo.png" width="270px" height="129px"/>
			<br />
			<!--声明搜索框和按钮-->
			<input type="text" name="" id="" value="" />
			<input type="submit" name="" id="" value="百度一下" />
		</div>
		<!--声明底部-->
		<div id="footer">
			<!--声明网站声明内容-->
			<img src="img/footer.png"/>
		</div>
	</body>
</html>

相关推荐