day4

Neolemen
于 2019-09-08 14:35:32 发布
阅读量99
点赞数
本文链接：https://blog.csdn.net/qq_43145816/article/details/100627533
版权
<!DOCTYPE html>
<html>

	<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>

</html>
Neolemen
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day4

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; font-family: arial; } ul,...
复制链接

扫一扫