day03_作业

最新推荐文章于 2024-03-12 19:04:08 发布

weixin_43928990

最新推荐文章于 2024-03-12 19:04:08 发布

阅读量183

点赞数 1

本文链接：https://blog.csdn.net/weixin_43928990/article/details/100568071

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.header{
			width: 100%;
			height: 40px;
			border-bottom: darkgray solid 1px;
		}
		.header-left{
			height: 100%;
			width: 400px;
			float: left;
			padding-left: 10px;
		}
		.header-mid{
			height: 100%;
			width: 450px;
			float: right;
		}
		.header-right{
			height: 100%;
			width: 130px;
			background-color: blue;
			float: right;
		}
		.header-weather{
			font-size: 20px;
			margin-top: 5px;
			float: left;
		}
		.header-more{
			font-size: 20px;
			margin-top: 8px;
			margin-left: 25px;
		}
		.header-url{
			font-size: 20px;
			margin-top: 8px;
			float: left;
		}
		.middle{
			height: 900px;
			width: 100%;
		}
		.middle-logo{
			height: 100px;
			width: calc(100% - 650px);
			padding-left: 650px;
			float: none;
		}
		.middle-input{
			height: 150px;
			width: calc(100% - 550px);
			padding-left: 550px;
			margin-top: 170px;
			float: left;
		}
		.input{
			height: 40px;
			width: 600px;
		}
		.carema{
			margin-left: -40px;
		}
		.search{
			height: 46px;
			width: 120px;
			background-color: #0000FF;
			margin-top: -66px;
			margin-left: 604px;
		}
		.p-search{
			font-size: 20px;
			text-align: center;
		}
	</style>
	<body>
		<div class="header">
			<div class="header-left">
				<p class="header-weather">宁波：多云&nbsp; 27℃ </p>
				<p class="header-weather" style="color: cornflowerblue;">&nbsp;优</p>
				<p class="header-weather">&nbsp;22&nbsp;|&nbsp;</p>
				<p class="header-weather"><u>换肤</u>&nbsp;<u>消息</u></p>
			</div>
			<div class="header-right">
				<p class="header-more">更多产品</p>
			</div>
			<div class="header-mid">
				<p class="header-url"><u>新闻</u>&nbsp;&nbsp;<u>hao123</u>&nbsp;&nbsp;<u>地图</u>&nbsp;&nbsp;<u>视频</u>&nbsp;&nbsp;<u>贴吧</u>&nbsp;&nbsp;<u>学术</u>&nbsp;&nbsp;<u>登录</u>&nbsp;&nbsp;<u>设置</u></p>
			</div>
		</div>
		<div class="middle">
			<div class="middle-logo">
				<img src="logo.png" />
			</div>
			<div class="middle-input">
				<input type="text" class="input" />
				<img src="https://s2.ax1x.com/2019/09/05/nnzlE4.jpg" class="carema" />
				<div class="search">
					<p class="p-search">百度一下</p>
				</div>
			</div>
			
		</div>
	</body>
</html>

在这里插入图片描述