day04_作业

weixin_43928990
于 2019-09-08 21:56:24 发布
阅读量84
点赞数
本文链接：https://blog.csdn.net/weixin_43928990/article/details/100640147
版权
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		* {
			margin: 0;
			padding: 0;
			font-family: arial;
		}
		ul,
		li {
			list-style: none;
		}
		input {
			box-shadow: none;
			border: none;
			outline: none;
		}
		.clearfloat {
			clear: both!important;
		}
		.head {
			min-width: 790px;
		}
		.head>img {
			float: left;
			margin: 7px;
			width: 101px;
			height: 33px;
		}
		.input {
			height: 34px;
			padding-left: 10px;
			border: 1px solid #b6b6b6;
			width: calc(80% - 400px);
			margin-left: 10px;
			margin-top: 11px;
			position: relative;
			float: left;
		}
		.input:hover {
			border-color: #4791ff;
		}
		
		.input>input {
			font-size: 16px;
			font-weight: 400;
			font-family: arial;
			height: 20px;
			line-height: 20px;
			width: calc(100% - 39px);
			margin-top: 7px;
		}
		
		.input>img {
			position: absolute;
			top: 5px;
		}
		
		.input>a {
			position: absolute;
			right: 0;
		}
		
		.sure {
			background: rgb(51, 133, 255);
			color: white;
			width: 100px;
			height: 36px;
			line-height: 36px;
			text-align: center;
			float: left;
			margin-top: 11px;
		}
		
		.sure>a {
			text-decoration: none;
			color: white;
		}
		
		.head {
			height: 93px;
		}
		
		.head>.menu {
			vertical-align: middle;
			height: 55px;
			float: right;
			padding-right: 20px;
		}
		
		.head>.menu>a {
			font-size: 12px;
			font-family: arial;
			color: #333;
			line-height: 55px;
			vertical-align: middle;
			margin-left: 12px;
		}
		
		.head>.menu>span {
			font-size: 10px;
			font-family: arial;
			color: #333;
			line-height: 55px;
			vertical-align: middle;
		}
		
		.head>.href {
			width: 100%;
			height: 40px;
			background: rgb(248, 248, 248);
			float: left;
			border-top: 1px solid #ebebeb;
			padding-left: 125px;
			text-align: center;
			line-height: 38px;
		}
		
		.head>.href li {
			width: 54px;
			font-size: 14px;
			cursor: pointer;
			float: left;
			color: #666;
		}
		
		.active {
			color: #323232;
			font-weight: 700;
			border-bottom: 2px solid #38f;
		}
		
		.body {
			width: 1002px;
		}
		
		.body>.left {
			padding-left: 125px;
			width: 540px;
			display: block;
			float: left;
		}
		
		.body>.left>.top {
			height: 45px;
			width: 100%;
		}
		
		.body>.left>.top>p {
			float: left;
			line-height: 42px;
			font-size: 12px;
			color: #999;
		}
		
		.body>.left>.top>p:last-child {
			float: right;
		}
		
		.body>.left>.main>.box>p>a {
			color: rgb(0, 0, 204);
			font-family: arial;
			text-decoration: underline;
		}
		
		em {
			color: #c00;
			font-style: normal;
			text-decoration: underline;
		}
		
		.guanwang {
			width: 24px;
			height: 12px;
			background: #2b99ff;
			font-size: 12px;
			color: white!important;
			text-decoration: none!important;
			padding: 2px 5px;
			line-height: 12px;
			margin-left: 5px;
		}
		
		.box>img {
			margin-right: 17px;
			float: left;
		}
		
		.box>.text {
			height: 80px;
			width: 397px;
			display: block;
			float: left;
		}
		
		.box>.text>div:nth-child(2) {
			float: left;
		}
		
		.box>.text p {
			font-size: 13px;
			display: block;
			line-height: 19px;
			margin-top: 2px;
		}
		
		.box>.text .web {
			color: green;
			cursor: pointer;
			border-collapse: collapse;
			display: inline;
		}
		
		.kuaizhao {
			float: right;
			color: #666;
		}
		
		.kuaizhao>a {
			color: inherit;
		}
		.right{
			float: right;
			text-align: left;
			width: 271px;
			margin-top: 45px;
			border-left: rgba(225,225,225,1) 1px solid;
		}
		
		.right>div{
			padding-left: 20px;
		}
		
		.right p{
			text-align: center;
			color: -webkit-link;
			font-size: 13px;
			text-decoration: underline;
		}
		
	</style>
</head>

<body>
	<div class="head">
		<img src="http://www.baidu.com/img/baidu_jgylogo3.gif" />
		<div class="input">
			<input type="text" />
			<img src="https://s2.ax1x.com/2019/09/05/nnzlE4.jpg" />
		</div>
		<div class="sure">
			<a href="#">百度一下</a>
		</div>
		<div class="menu">
			<a href="#">百度首页</a>
			<a href="#">设置</a><span>▼</span>
			<a href="#">登录</a>
		</div>
		<div class="href">
			<ul>
				<li class="active">网页</li>
				<li>资讯</li>
				<li>视频</li>
				<li>图片</li>
				<li>图片</li>
				<li>图片</li>
				<li>图片</li>
				<li>图片</li>
				<li>图片</li>
				<li>图片</li>
				<li>更多》</li>
			</ul>
		</div>
		<div class="clearfloat"></div>
	</div>
	<div class="body">
		<div class="left">
			<div class="top">
				<p>百度为您找到相关结果约100,000,000个</p>
				<p>搜索工具</p>
			</div>
			<div class="main">
				<div class="box">
					<p>
						<a><em>百度</em>一下，你就知道</a>
						<a class="guanwang">官网</a>
					</p>
					<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2920084749,2018893236&fm=58&s=39C718720E8EBE011B398BAC0300F024&bpow=121&bpoh=75" />
					<div class="text">
						<div>
							<p>全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。</p>
							<div>
								<p class="web">https://www.baidu.com/</p>
								<p class="kuaizhao">
									<a href="#">百度快照</a>-
									<a href="#">7616条评价</a>
								</p>
							</div>
						</div>
					</div>
					<div class="clearfloat"></div>
				</div>
			</div>
		</div>
		<div class="right">
			<div>
				<h4>百度高管</h4>
			</div>
			<div>
				<img src="https://s2.ax1x.com/2019/09/08/n83ZzF.jpg" />
				<p style="width: 75px;text-align: center;">李彦宏</p>
			</div>
		</div>
	</div>
</body>