2. 程式人生 > >百度首頁模仿（html）詳解

百度首頁模仿（html）詳解

阿新 • • 發佈：2018-12-12

相信大姐學習html這一門語言的第一步一般都是做一個百度首頁或者菜鳥教程首頁（菜鳥教程首頁模仿戳這裡）什麼的吧，下面就來分享一下我所寫的百度首頁的模仿過程：

1、分析佈局，這裡我將他的佈局分為三大塊，上中下各一個div塊

2、往div塊中新增詳細內容，設定樣式等等

原始碼：

<!DOCTYPR html>
<html>
	<head>
		<title>無標題文件</title>
		<style type="text/css">
			body{
				height:100%; 
				width:100%;  
				margin:0; 
				padding:0;
			}
			
			.main{
				width:100%; 
				height:100%;
				margin:0; 
				padding:0;
			}
			
			.menu{
				text-align:right;
			}
			
			a{
				text-decoration:none;
			}
			
			.middle{
				text-align:center;
				width:100%; 
				height:100px;
				margin-top:130px;
			}
			
			.input{
				    border: 1px solid #b6b6b6;
				width:474px;
				height:36px;
				font-size:20px;
			}
			.img{
				align:middle;
				border:0;  
				width:275px;
				height:140px;
			}
			.submit{
				background-color:#3385ff;
				height:38px;
				font-size:20px;
				color:white;
				border:0
			}
		</style>
	</head>
	<body>
	<div style="text-align:right;">
		<div class="menu">
			<a href="http://www.nuomi.com/?cid=002540">糯米</a>
			<a href="http://news.baidu.com">新聞</a>
			<a href="http://www.hao123.com">hao123</a>
			<a href="http://map.baidu.com">地圖</a>
			<a href="http://v.baidu.com">視訊</a>
			<a href="http://tieba.baidu.com">貼吧</a>
			<a href="https://passport.baidu.com/v2/?login&amp;tpl=mn&amp;u=http%3A%2F%2Fwww.baidu.com%2F">登入</a>
			<a href="http://www.baidu.com/gaoji/preferences.html">設定</a>
			<a href="http://www.baidu.com/more/">更多產品</a>
		</div>
	</div>

	<div class="middle">
		<form action="http://www.baidu.com/baidu" target="_blank">
			<a href="https://www.baidu.com/" target="_blank"  align="center">
				<img src="https://www.baidu.com/img/bd_logo1.png" alt="Baidu" class="img">
			</a>
			<br>
			<input type="text" class="input"  name="word">
			<input type="submit" value="百度一下" class="submit" href="https://www.baidu.com/" > 
		</form>
	</div>
	<div align="center" style="bottom:0;margin-top:300px;">
		<div>
			<a id="setf" href="//www.baidu.com/cache/sethelp/help.html" target="blank">把百度設為主頁</a>
			<a href="http://home.baidu.com">關於百度</a>
			<a href="http://ir.baidu.com">About&nbsp;&nbsp;Baidu</a>
			<a href="http://e.baidu.com/?refer=888">百度推廣</a></p>
			<p>©2016&nbsp;Baidu&nbsp;<a href="http://www.baidu.com/duty/">使用百度前必讀</a>&nbsp;<a href="http://jianyi.baidu.com/">意見反饋</a>&nbsp;京ICP證030173號&nbsp;</p>
			<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank">京公網安備11000002000001號</a>
		</div>
	</div>
	</body>
</html>

相關推薦

百度首頁模仿（html）詳解

相信大姐學習html這一門語言的第一步一般都是做一個百度首頁或者菜鳥教程首頁（菜鳥教程首頁模仿戳這裡）什麼的吧，下面就來分享一下我所寫的百度首頁的模仿過程： 1、分析佈局，這裡我將他的佈局分為三大塊，上中下各一個div塊 2、往div塊中新增詳細內容，設定樣式等等 原始

仿百度首頁登陸框拖拽效果（可視視窗內拖動）

            window.onload = function() {                //獲取函式物件                function G(id) {                    return document.getElementById(id);    

html,模仿製作百度首頁

模仿百度首頁，試著學習一個javaweb，第一個試著模仿 百度首頁 !!!那些圖片只能自己來找了!!! <html>     <head>         <title>百度頁面</title>         <

python爬蟲系列（一）百度首頁爬取

前言 經受不住爬蟲技術的吸引，為此決定踏入”爬蟲”這條不歸路。 爬蟲介紹 其實在我眼裡，爬蟲無非所見即所得，也就是一切皆可爬。至於url技術和python環境在此就不重複。在此使用urllib庫進行初步學習。 python:2.7 初次嘗試

（1）python+selenium第一個自動化指令碼：實現開啟百度首頁並搜尋selenium

一、第一個自動化指令碼：實現開啟百度首頁並搜尋”selenium”#coding=utf-8 #為防止亂碼，編碼為utf-8 from selenium import webdriver #匯入selenum的webdriver包 driver.find_

SEO【集】網站關鍵詞排名怎麼去優化到百度首頁（思維與技巧結合）

近期鼓搗自己的幾個網站做流量分析和seo、搜尋排名研究，收集了一些seo文章，近期將做些總結： 之前寫了一篇百度霸屏實操分享，關

練習html,scc,js仿制百度首頁

inf bottom onclick relative web name borde user scrip 1.練習目的 練習使用html,scc,js 完成界面樣式，用ul標簽實現文本框下拉，通過js完成添加列表內容等功能 2.效果 3.程序代碼 <!DOCTYP

HTML+CSS專案課1：利用table製作百度首頁

知識點：html文件基本結構、table標籤佈局、在單元格中插入文字、圖片、連結、表單。 網頁效果圖： 製作思路：將整個網頁當做一個table表格 1、製作一個6行1列的表格 2、在單元格中插入相關內容 3、在第4行的單元格里插入一個form表單 <!DOCT

css與html---模擬百度首頁

程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <s

HTML製作簡易百度首頁

前些天為了學習頁面佈局，做了一個簡易的百度首頁。做百度首頁的原因是因為它的佈局比較簡單，需要顧及的地方比較少，但是需要相關的知識點又基本上都能用上，對自己理解頁面佈局以及一些標籤（如float和margin）的用法有很大的幫助。 仿做一個網頁之前需要分析該網頁的佈局，下圖是

JavaWeb-模仿百度首頁並部署在Tomcat本地伺服器上執行

一、Tomcat簡介 Tomcat 伺服器是一個免費的開放原始碼的Web 應用伺服器，屬於輕量級應用伺服器，在中小型系統和併發訪問使用者不是很多的場合下被普遍使用，是開發和除錯JSP 程式的首選。對於

用CSS加HTML製作簡單的百度首頁

<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi

HTML之百度首頁

用HTML製作百度頁面。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

2017計蒜之道 初賽 第二場 百度的科學計算器（簡單）

line ret ext while () value nan pytho sca /** 題目：2017計蒜之道 初賽 第二場 百度的科學計算器（簡單） 鏈接：https://nanti.jisuanke.com/t/15504 題意：給一個合法的表達式，包含加號+

java爬取百度首頁源代碼

clas read 意思 出現異常 nts java.net new 有意思 all 爬蟲感覺挺有意思的，寫一個最簡單的抓取百度首頁html代碼的程序。雖然簡單了一點，後期會加深的。 1 package test; 2 3 import java.io.B

類似百度首頁搜索靜態圖

link org nav top vlog arch text art ack 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4

百度之星初賽（A）——T1

printf input acf 一行 while wid 3的倍數 main cli 小C的倍數問題 Problem Description 根據小學數學的知識，我們知道一個正整數x是3的倍數的條件是x每一位加起來的和是3的倍數。反之，如果一個數每一位加起來是3

2017百度之星初賽（A）1001,1005,1006解題報告

百度 src cout lose 初賽 bool amp spa span 1001 小C的倍數問題 純簽到題，求p-1的因數個數，暴力枚舉即可 1 #include<bits/stdc++.h> 2 using namespace std; 3 in

幾行代碼抓取百度首頁

python 百度python中源碼位置(以urllib為例): python中自帶的模塊: /usr/lib/python3.5/urllib/request.py(python3) /usr/lib/python2.7/urllib2.py(python2) py

phpcms之首頁組成（三）

title == blog type script span slist rst target {pc:content action="lists" catid="39" order="id ASC" num="3" } {