HTML+CSS制作簡(jiǎn)易百度首頁(yè)（代碼）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度一下，你就知道</title>
		<style type="text/css">
			#img1{
				position: relative;
				left: 650px;
			}
			ul li{
				float:left;
				list-style: none;
				padding: 5px;
			}
		a{
			padding: 5px;
			text-decoration:none;
		}
		
		#baidu{
			text-align: center;
		}
		#input1{
			font-size: 30px;
			width: 560px;
		}
		#db{
			position:fixed; bottom:0;
		}
		#div1{
			position: absolute;
			bottom: 0;
			right: 0;
		}
		#rebang{
			font-size: 25px;
			position: relative;
			left: 610px;
		}
		
		ul li div{
			display: none;
		}
		ul li:hover div{
			display: block;
		}
		#C{
			font-size: 20px;
			float: left;
		}
		#B{
			position: absolute;
			margin-left: 260px;
			display: none;
		}
		#A{
			font-size: 20px;
			width: 1000px;
		}
		#A:hover #B{
			display: block;
		}
		#D{
			
			font-size: 20px;
			float: right;
		}
		#F{
			position: absolute;
			
			display: none;
		}
		#D:hover #F{
			display: block;
		}
		#G{
			height: 50px;
			
			float: right;
		}
		#H{
			background-color: blue;
		}
		#J{
			position: absolute;
			right: 800px;
			top: 300px;
			display: none;
			z-index: 2;
			
		}
		#G:hover #J{
			display: block;
			
		}
		#Z{
			width: 100px;
			height: 30px;
		}
		#W{
			font-size: 22px;
		}
	</style>
	</head>
	<body>
		<div id="C">
			<a href="http://news.baidu.com/" target="_blank">新聞</a>
			<a href="https://www.hao123.com/" target="_blank">hao123</a>
			<a href="https://map.baidu.com/@12126927,4038819,13z/" target="_blank">地圖</a>
			<a href="https://haokan.baidu.com/?sfrom=baidu-top/" target="_blank">視頻</a>
			<a href="https://tieba.baidu.com/index.html/" target="_blank">貼吧</a>
			<a href="https://xueshu.baidu.com//" target="_blank">學(xué)術(shù)</a>
			</div>
			<div id="A">
			<a href="https://www.baidu.com/more//" target="_blank">更多</a>
			<div id="B">
				<ul>
					<li><a href="https://pan.baidu.com/" target="_blank"><img src="imgs/wangpan.png"></img><br>網(wǎng)盤(pán)</a></li>
				<li><a href="https://zhidao.baidu.com/" target="_blank"><img src="imgs/zhidao.png"></img><br>知道</a></li>
				<li><a href="https://baike.baidu.com/" target="_blank"><img src="imgs/baike.png"></img><br>百科</a></li>
				<li><a href="https://image.baidu.com/" target="_blank"><img src="imgs/tupian.png"></img><br>圖片</a></li>
				</ul>
				<ul>
				<li><a href="https://baobao.baidu.com/" target="_blank"><img src="imgs/baobao.png"></img><br>寶寶</a></li>
				<li><a href="https://wenku.baidu.com/" target="_blank"><img src="imgs/wenku.png"></img><br>文庫(kù)</a></li>
				<li><a href="https://jingyan.baidu.com/" target="_blank"><img src="imgs/jingyan.png"></img><br>經(jīng)驗(yàn)</a></li>
				<li><a href="http://music.taihe.com/" target="_blank"><img src="imgs/yinyue.png"></img><br>音樂(lè)</a></li>
				</ul>
			</div>
			</div>
			<div id="G">
			<a href="#"><input type="button"  value="登錄"></input></a>
			<div id="J">
				<img src="imgs/JJJ.png" >
			</div>
			</div>
			<div id="D">
				<a href="#">設(shè)置</a>
				<div id="F">
					<a href="#">搜索設(shè)置</a><br>
					<a href="#">高級(jí)搜索</a><br>
					<a href="#">關(guān)閉預(yù)測(cè)</a><br>
					<a href="#">隱私設(shè)置</a><br>
				</div>
			</div>
			
		<div id="img1">
		<img src="imgs/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
		</div>
		<div id="baidu">
		<a href="#"><input id="input1" type="text" id="" value=""  /><input id="Z" type="button"  value="百度一下" /></a>
		</div>
		<div id="rebang">
		<a href="http://top.baidu.com/?fr=mhd_card">百度熱榜</a>
		</div>
		<div id="resou" align="center">
			<table id="W" border="0" cellspacing="5" cellpadding="25">
				<tr>
				<td><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E7%89%B9%E6%9C%97%E6%99%AE%E7%A7%B0NBA%E5%83%8F%E4%B8%80%E4%B8%AA%E6%94%BF%E6%B2%BB%E7%BB%84%E7%BB%87&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">1.特朗普炮轟NBA</a></td>
				<td><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%AE%98%E6%96%B9%E8%B0%83%E6%9F%A5%E5%A5%B3%E6%95%99%E5%B8%88%E4%B8%BE%E6%8A%A5%E6%A0%A1%E9%95%BF%E6%80%A7%E9%AA%9A%E6%89%B0&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">4.官方調(diào)查女教師</a></td>
				</tr>
				<tr>
				<td><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E8%94%A1%E8%8E%89%E4%B8%8D%E5%86%8D%E6%8B%85%E4%BB%BB%E6%AD%A6%E6%B1%89%E5%B8%82%E4%B8%AD%E5%BF%83%E5%8C%BB%E9%99%A2%E4%B9%A6%E8%AE%B0&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">2.蔡麗不再擔(dān)任武漢市醫(yī)院書(shū)記</a></td>
				<td><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E9%99%88%E9%98%BF%E5%96%9C%E5%8E%BB%E4%B8%96&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">5.陳阿喜去世</a></td>
				</tr>
				<tr>
				<td><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%85%A8%E7%90%83%E8%BF%9110%E4%BA%BF%E4%BA%BA%E5%8F%97%E7%B2%BE%E7%A5%9E%E5%81%A5%E5%BA%B7%E9%97%AE%E9%A2%98%E5%BD%B1%E5%93%8D&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">3.全球近10億人受精神健康問(wèn)題影響</a></td>
				<td><a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=31%E7%9C%81%E5%8C%BA%E5%B8%82%E6%96%B0%E5%A2%9E%E5%A2%83%E5%A4%96%E8%BE%93%E5%85%A59%E4%BE%8B&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">6.31省區(qū)市新增境外輸入9例</a></td>
				</tr>
			</table>
		</div>
		<div id="db">
			<ul>
				<li>設(shè)為首頁(yè)</li>
				<li>關(guān)于百度</li>
				<li>About Baidu</li>
				<li>百度營(yíng)銷(xiāo)</li>
				<li>使用百度前必讀</li>
				<li>意見(jiàn)反饋</li>
				<li>幫助中心</li>
			</ul>
		</div>
		<div id="div1">
			<ul>
				
			
			<li>@2020 Baidu</li>
			<li>(京)-經(jīng)營(yíng)性-2017-0020</li>
			<li>京公網(wǎng)安備11000002000001號(hào)</li>
			<li>京ICP證030173號(hào)</li></ul>
		</div>
	</body>
</html>

上代碼寫(xiě)出來(lái)的結(jié)果如下圖：

新手勿噴！！！

對(duì)于一個(gè)網(wǎng)站的頁(yè)面，可以在源代碼中添加說(shuō)明語(yǔ)句。用以將網(wǎng)站的主題描述清晰，這就是描述語(yǔ)句的作用。這個(gè)描述語(yǔ)句的內(nèi)容也不會(huì)出現(xiàn)在瀏覽器顯示中，說(shuō)明文字可供搜索引擎尋找網(wǎng)頁(yè)，還可存儲(chǔ)在搜索引擎的服務(wù)器中，在瀏覽者搜索時(shí)隨時(shí)調(diào)用，還可以在搜索到網(wǎng)頁(yè)時(shí)作為檢索結(jié)果返回給瀏覽者。搜索引擎同樣限制說(shuō)明文字的字?jǐn)?shù)，所以?xún)?nèi)容要盡量簡(jiǎn)明扼要。

實(shí)例代碼：

TML 表單用于收集不同類(lèi)型的用戶(hù)輸入，它是一個(gè)包含表單元素的區(qū)域。

表單元素是允許用戶(hù)在表單中輸入內(nèi)容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復(fù)選框(checkboxes)等等。今天我們主要來(lái)說(shuō)說(shuō)文本域和密碼域這兩個(gè)部分，希望對(duì)大家學(xué)習(xí)有所幫助喲！

本文福利后臺(tái)回復(fù)【學(xué)習(xí)】即可獲得Python、HTML等編程學(xué)習(xí)資料

HTML 表單

表單使用表單標(biāo)簽 <form> 來(lái)設(shè)置:

<form>

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

</form>

HTML 表單 - 輸入元素

多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽（<input>）。輸入類(lèi)型是由類(lèi)型屬性（type）定義的。

如何在 HTML 頁(yè)面創(chuàng)建文本域？

用戶(hù)可以在文本域中寫(xiě)入文本，參考代碼如下：

<!DOCTYPE html>

<html>

<head>

<title>菜鳥(niǎo)教程(runoob.com)</title>

</head>

<body>

First name: <input type="text" name="firstname"><br>

Last name: <input type="text" name="lastname">

</form>

<p><b>注意：</b> 表單本身是不可見(jiàn)的。并且注意一個(gè)文本字段的默認(rèn)寬度是20個(gè)字符。</p>

</body>

</html>

運(yùn)行結(jié)果為

如何創(chuàng)建 HTML 的密碼域？

<!DOCTYPE html>

<html>

<head>

<title>菜鳥(niǎo)教程(runoob.com)</title>

</head>

<body>

Username: <input type="text" name="user"><br>

Password: <input type="password" name="password">

</form>

<p><b>注意：</b> 密碼字段中的字符是隱藏的(顯示為星號(hào)或圓圈)。</p>

</body>

</html>

運(yùn)行結(jié)果如下

戳了解更多免費(fèi)領(lǐng)取HTML試聽(tīng)課~

在線咨詢(xún)

上一篇：Qt繪圖
下一篇：12月19日NBA常規(guī)賽湖人隊(duì)VS籃網(wǎng)隊(duì)直播附直播

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

HTML+CSS制作簡(jiǎn)易百度首頁(yè)（代碼）

上代碼寫(xiě)出來(lái)的結(jié)果如下圖：

您的項(xiàng)目需求