自己做的非常简易的百度页面

最新推荐文章于 2024-02-01 15:08:06 发布

新人自学留痕

最新推荐文章于 2024-02-01 15:08:06 发布

阅读量461

点赞数 1

分类专栏：笔记文章标签： css html

本文链接：https://blog.csdn.net/weixin_46101074/article/details/113817672

版权

HTML CSS 前端开发网页设计搜索框

关键词由CSDN通过智能技术生成

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

## **自己做的非常简易的百度页面**
<html>
<head>
	<meta charset="utf-8" />
	<title>mybaidu</title>
	<link rel="stylesheet" type="text/css" href="try.css"/>
</head>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		li{list-style: none;}
		.img1{
		position:fixed; 
		left: 38%; top: 10%; right: 0;
		    margin: auto;
		}
		.sousuo{
			position: absolute;
			width: 601px;
			height: 35px;
			left: 30%;
			top: 27%;
		}
		input{
			width: 500px;
			height: 35px;
			border: 1px solid #317EF3;
			border-right: none;
			border-radius: 4px;
		}
		button{
			position: relative;
			
			width: 100px;
			height: 37px;
			font-size: 17px;
			color: white;
			background: #317EF3;
			border: 0;
			border-radius: 4px;
		}
				</style>
<body>
	<div style="height: 60px;width: 28%;margin: 0 auto;float: left;">
		<ul>
			<li style="height: 64px;width: 3%;float: left;"></li>
			<li style="height: 64px;width: 14%;line-height: 64px;font-size: 12px;float: left;">新闻</li>
			<li style="height: 64px;width: 14%;line-height: 64px;font-size: 12px;float: left;">hao123</li>
			<li style="height: 64px;width: 14%;line-height: 64px;font-size: 12px;float: left;">&nbsp;地图</li>
			<li style="height: 64px;width: 14%;line-height: 64px;font-size: 12px;float: left;">视频</li>
			<li style="height: 64px;width: 14%;line-height: 64px;font-size: 12px;float: left;">贴吧</li>
			<li style="height: 64px;width: 14%;line-height: 64px;font-size: 12px;float: left;">学术</li>
			<li style="height: 64px;width: 13%;line-height: 64px;font-size: 12px;float: left;">更多</li>
		</ul>
	</div>
	<div style="height: 60px;width: 9.6%;margin: 0 auto;float: right;">
	<div>
<ul>
<li style="height: 64px;width: 40%;line-height: 64px;font-size: 12px;float: left;">设置</li>
<li>
<input type="button" style="margin-left:12px;margin-top:22px;font-size: 12px;height: 20px;width: 45px;background-color: #3388FF;color: white;"  value="登录" />
</li>
</ul>
</div>
		</div>
		<div class="img1">
			<img src="img/baidu.PNG" />/*百度logo*/
		</div>
		
		<div class="sousuo">
		        <input type="" name="" id="" value=""><button>百度一下</button>
		</div>
	</body>
</html>