练习(一) 仿百度首页 html+css_用html和css模仿一个企业网站或者官网-CSDN博客

本文链接：https://blog.csdn.net/hyugyug/article/details/102570399

第一次仿页面，虽然页面简单，但也用了很长时间，还有一些不规范的地方，今后要继续努力！

效果图：
在这里插入图片描述
html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="../css/main.css">
		<link rel="stylesheet" type="text/css" href="../css/fonts.css"/>
		<title>百度一下，你就知道</title>
	</head>
	<body>
		<!-- 头部导航栏  start -->
		<div class="nav">
			<div class="nav-l">
				<div class="weather">
				    <span class="city">桂林：</span>
			     	<img src="../images/weather.png">
			    	<span>20°C</span>
		     		<span class="air">优</span>
				    <span class="num">22</span>
			    	<span class="show-vertical">|<span>
				</div>
				<div class="s-icons">
					<a href="#">换肤<a>
					<a href="#">消息<a>
					<a href="#">显示频道<a>
				</div>
			</div>
			<div class="nav-r">
				<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>
		<!-- 头部导航栏  end -->
		<!-- 中间部分  start -->
		<div class="logo">
			<img src="../images/logo.png" >
		</div>
		<div class="search-box">
			<input type="text" >
			<span class="icon-camera"></span>
			<button type="submit" >百度一下</button>
		</div>
		<!-- 中间部分  end -->
		<!-- 底部 start -->
		<div class="footer">
			<p><a href="#" class="set-home">设为主页</a>
			@2019 Baidu
			<a href="#">使用百度前必读</a>
			<a href="#">意见反馈</a>
			京ICP证030173号
			<img src="../images/icp.png"></p>
			<p><img src="../images/recordcode.png">
			   <a href="#" class="recordcodes">京公网安备11000002000001号</a></p>
		</div>
		<!-- 底部 end -->
	</body>
</html>

css代码：