HTML로 Baidu 홈페이지를 만드는 방법은 무엇입니까? 코드는 무엇입니까?-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML로 Baidu 홈페이지를 만드는 방법은 무엇입니까? 코드는 무엇입니까?

云罗郡主

Oct 20, 2018 pm 02:17 PM

html 암호

이 글의 내용은 HTML로 Baidu 홈페이지를 만드는 방법에 관한 것입니다. 코드는 무엇입니까? 특정 참조 가치가 있습니다. 도움이 필요한 친구가 참조할 수 있기를 바랍니다.

바이두 홈페이지를 만들 때 분할을 위해 p를 사용하는 것 외에도 블록의 위치도 제어해야 합니다. 일반적으로

p의 크기는 너비와 높이에 각각 해당합니다.

margin: p의 위치 지정이 있습니다. margin-top, margin-left, margin-right, margin-buttom이 있습니다.

float-left: p 요소를 왼쪽에서 오른쪽으로 정렬합니다.

이러한 간단한 작업을 이해한 후에는 다음을 만들 수 있습니다. 혼자서 간단한 바이두 페이지 예:

HTML로 Baidu 홈페이지를 만드는 방법은 무엇입니까? 코드는 무엇입니까?

위 페이지의 html 코드는 다음과 같습니다.

 
 <html>
<head>
	<title>百度一下，你就知道</title>
	<link href="baidu.ico" rel="shortcut icon" type="ico图标路径"/>
	<style>
	.p_head{
			width:100%;
			height:150px;
			
			margin-top:0px;
	}
	
	.p_mid{
			width:100%;
			height:130px;
			
			margin-top:0px;
	}
	.p_body{
			width:100%;
			height:200px;
			
			margin-top:0px;
	}
	.p_base{
			width:100%;
			height:60px;
			
			float:left;
			margin-top:0px;
	}
	.p_based{
			width:100%;
			height:100%;
			
			float:left;
			margin-top:0px;
			
	}
	
	
	.p_head1{
		width:540px;
		height:24px;
		
		float:right;
		margin-top:25px;
		
	}
	.p_head2{
			width:50px;
			height:24px;
			
			float:left;
			line-height:24px;
			text-align:center;			
	}
	.p_mid1{
			width:270px;
			height:130px;
			
			float:left;
			
			margin-left:39%;
	}	
	.p_body1{
			width:600px;
			height:36px;
			background-color:#999;
			float:left;
			
			margin-left:32%;
	}	
	
	.p_base1{
			width:60px;
			height:60px;
			margin:0 auto;
			float:left;
			margin-top:5%;
	}
 
	</style>
</head>
<body style="margin:0 auto">
	<p class="p_head" >
			<p class="p_head1">
					<p class="p_head2" ><font size="1" ><ins>新闻 </ins></font></p>               
					<p class="p_head2" ><font size="1" ><ins>hao123</ins> </font></ins></p> 
					<p class="p_head2" ><font size="1" ><ins>地图 </ins></font></p> 
					<p class="p_head2" ><font size="1" ><ins>资源 </ins></font></p> 
					<p class="p_head2" ><font size="1" ><ins>视频 </ins></font></p> 
					<p class="p_head2" ><font size="1" ><ins>贴吧 </ins></font></p> 
					<p class="p_head2" ><font size="1" ><ins>学术 </ins></font></p> 
					<p class="p_head2" ><font size="1" ><ins>登录 </ins></font></p> 
					<p class="p_head2" ><font size="1" ><ins>设置 </ins></font></p>
					<p class="p_head2" style="width:70px;background-color:#38f" ><font size="1" color="white" >更多产品</font></p> 
			</p>
	</p>
 
	<p class="p_mid" >
	
		<p class="p_mid1" >
			<a href="https://www.baidu.com/s?wd=%E7%BD%91%E7%BB%9C%E8%A1%A8%E6%83%85%E7%AC%A6%E5%8F%B7%E8%AF%9E%E7%94%9F&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs" target="_blank">
				<img  src="/static/imghw/default1.png"  data-src="https://www.baidu.com/img/bd_logo1.png?where=super"  class="lazy"   height=130    style="max-width:90%"百度一下你就知道"/ alt="HTML로 Baidu 홈페이지를 만드는 방법은 무엇입니까? 코드는 무엇입니까?" >
			</a>	
 
		</p>
	</p>
 
	<p class="p_body" >
			<p class="p_body1" >
					<form action="https://www.baidu.com/s"  method="get"  >
					<input style="width:500px;height:36px;"type="text"/><input id="gender" name="gender" type="submit"  value="百度一下"style="width:100px;height:36px;"/>	
					</form>
			</p>
	</p>
	
	<p class="p_base" >
				<p class="p_base1" style="margin-left:48%;">
						<img  src="/static/imghw/default1.png"  data-src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png"  class="lazy"   height=60    style="max-width:90%"我是一个二维码"/ alt="HTML로 Baidu 홈페이지를 만드는 방법은 무엇입니까? 코드는 무엇입니까?" >
				</p>
	</p>
	
	
</body>
</html>

로그인 후 복사

위는 바이두 홈페이지를 HTML로 만드는 방법입니다. 코드가 무엇인지에 대한 완전한 소개입니다.

HTML 비디오 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.

위 내용은 HTML로 Baidu 홈페이지를 만드는 방법은 무엇입니까? 코드는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.