学完html与css自制百度首页

最新推荐文章于 2025-02-12 17:42:47 发布

A__QAQ

最新推荐文章于 2025-02-12 17:42:47 发布

阅读量626

点赞数 1

分类专栏： html+css

本文链接：https://blog.youkuaiyun.com/A__QAQ/article/details/79912859

版权

html+css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何运用HTML和CSS技术，从零开始制作一个仿百度首页的页面。通过这个过程，读者将深入理解HTML标记语言和CSS样式表在网页设计中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>百度一下，你就知道</title>
	<link rel="stylesheet" href="css/Navigation.css" type="text/css" />
</head>	
<body>
	<!-- 导航栏 -->
	<div id="navigation">
		<ul>
			<!-- 前半部分的导航栏 -->
			<div class="head" style="width:50%">
				<li class="h" style="margin-right: 0px; ">  沈阳:</li>
				<li class="h"><img src="pic/闪电.png" width="30px" height="30px" style="position: relative; top: 0;margin: 0;" /></li>
				<li class="h" style="margin-left: 0px; ">气温  </li>
				<li class="h"> 空气质量   </li>
				<li class="h"> | </li>				
				<li class="h" style="margin-left: 10px;"><a href="#">换肤</a></li>
				<li class="h" style="margin-left: 19px;"> <a href="#">消息 </a></li>
				<li class="h" style="margin-left: 19px;"> <a href="#">显示频道<a herf="#"></a> </li>
			</div>
			<!--中间部分的空白 -->
			<div class="center" style="width:0%">
				<li></li>
			</div>
			<!-- 后半部分的导航栏 -->
			<div class="foot" style="width:50%">
				<li style="
					float: right;
					display: inline-block;
					position: relative;
					line-height: 32px;
					right:  0;
					width: 86px;
					height: 32px;
					background: #398bfb;
					text-align: center;
					color: white;
					font-size: 13px; 
					">
					更多产品
				</li>
				<li class="f"><a href="#">设置</a></li>
				<li class="f"><a href="#">登录</a></li>
				<li class="f"><a href="#"><strong>学术</strong></a></li>
				<li class="f"><a href="#"><strong>贴吧</strong></a></li>
				<li class="f"><a href="#"><strong>视频</strong></a></li>
				<li class="f"><a href="#"><strong>地图</strong></a></li>
				<li class="f"><a href="#"><strong>hao123</strong></a></li>
				<li class="f"><a href="#"><strong>新闻</strong></a></li>
			</ul>
		</div>
	</div>

	<!-- 中间的搜索框 -->
	<form action="#">
		<div id="b_ody">
			<div >
				<img src="pic/baidu.png" width="270px" height="129px" >
			</div>
			<div class="big" >
				<div style="float: left;height: 100%;border: 1px solid gray;border-right:none; ">
					<input type="text" name="select" maxlength="100"  >
				</div>
				<div style="float: left;height: 100%;border-top:1px solid gray;border-right:none;border-bottom:1px solid gray;">
					<img src="pic/照相机.png" width="40px" height="30px";  style="padding-top: 4px; ">
				</div>
				<div style="float: left;height: 100%;border: 1px solid blue">
					<button type="submit" value="submit"  >百度一下</button>
				</div>
			</div>
		</div>
	</form>	
	

	<!-- 页脚 -->
	<div id="footer">
		<div id="plain1">设为首页&copy; 2018 Baidu 使用百度前必读 意见反馈 	京ICP证030173号    
			<img src="pic/问号.png" width="13px" height="16px" style="display: inline;position: relative; bottom: -3px;">
		</div>
		<div id="plain2">
			<img src="pic/国徽.png" height="15px" style="padding-top: 5px;  " >
			 <div style="display: inline;position: relative; bottom: 3px;">京公网安备11000002000001
			 </div>
		</div>
	</div>

</body>
</html>
<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">

 body{
 	margin: 0px;
 	padding: 0px;
 }


 a{
 	color: #555;
 }


 /*导航栏的样式Navigation*/
 #navigation{
 	width: 100%;
 	line-height: 32px;
 	height: 32px;
 	text-align:left;
 	border-bottom: 1px solid #ebebeb;
 	/*border: 1px solid red;*/
 	overflow:hidden;
 	color:#555;
 }

 #navigation ul{
 	list-style-type: none;
 	margin: 0;
 	padding: 0;
 }
 .head,.center,.foot{
 	float: left;
 }

 .h{
 	/*position: relative;*/
 	float:left;
 	font-size: 12px;
 	/*border:1px solid green;*/
 	 
 }
 .f{
 	float:right;
 	/*border:1px solid green;*/
 	margin-right: 19px;  
 	font-size: 14px; 
 }

 /*搜索框的样式*/
 #b_ody{
 	position:absolute;
 	top:115px;
 	width: 100%;
 	height: 300px;
 	text-align:center;
 	/*border: 1px solid red;*/
 	overflow:hidden;
 	/*background-color: green;*/
 	
 }


 /*用big包含了input和button*/
 .big{
 	margin:15px auto;
 	height:40px;
 	width:700px;
 }

 input{
 	padding-left: 10px;
 	height: 95%;
 	width: 535px;
 	border:none;
 	outline: medium;
 	font-size: 15px;
 }

 button{
 	height: 100%;
 	width:100px;
 	border:none;
 	background-color: #398bfb;
 	color: white;
 	font-size: 16px;
 }

 /*页脚的样式footer*/
 #footer{
 	position:absolute;
 	bottom:0px;
 	width: 100%;
 	height: 50px;
 	margin: 0px auto;
 	text-align:center;
 	/*border: 1px solid red;*/
 	overflow:hidden;
 	/*background-color: yellow;*/
 	color:#999;
 	font-size: 12px; 
 }