HTML製作菜鳥教程首頁

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

成果圖如下所示：

雖然比起原網站要遜色的多，但是猛地一看還是很有迷惑性的。（哈哈）

1、首先對頁面用div進行佈局（先分成幾個大塊）如圖：

2、然後在大塊裡面放上小塊，如圖

3、寫上文字：

4、加上圖片修改顏色，調整下位置，就得到如上的第一張圖。

程式碼如下：



<html>
<head>
<title>菜鳥教程-學的不僅僅是技術，更是夢想！</title>

<style>
.div_caihead{
	width:100%;
	height:100px;		
	float:left;
	
	margin-left:0%;
}
.div_caihead1{
	width:47%;
	height:60px;		
	float:left;
	
	margin-left:3%;
	margin-top:1%;
}
.div_caihead2{
	width:253px;
	height:30px;		
	float:left;
	
	margin-left:33%;
	margin-top:10;
}
.div_mid{
	width:100%;
	height:40px;		
	float:left;
	background-color:#96b96d;
	margin-left:0%;
}
.div_mid1{
	width:6%;
	height:40px;		
	float:left;
	background-color:#96b96d;
	margin-left:0%;
	text-align:center;
	line-height:40px;	
}
.div_left{
	width:200px;
	height:800px;		
	float:left;
	
	margin-left:17%;
	margin-top:1%;
}
.div_left1{
	width:200px;
	height:50px;		
	float:left;
	;
	margin-left:0%;
	margin-top:2px;
	text-align:center;
	line-height:50px;
}
.div_right{
	width:40%;
	height:800px;		
	float:left;
	
	margin-left:1%;
	margin-top:1%;
}
.div_right2{
	width:100%;
	height:450px;		
	float:left;
	
	margin-left:2%;
	margin-top:0%;
}
.div_right1{
	width:96%;
	height:40px;		
	float:left;
	
	margin-left:2%;
	margin-top:1%;
}

.div_rights{
	width:47%;
	height:90px;		
	float:left;
	
	margin-left:2%;
	margin-top:1%;
}
.div_rights1{
	width:92%;
	height:35px;		
	float:left;
	
	margin-left:5%;
	margin-top:2%;
}
.div_rights2{
	width:33px;
	height:33px;		
	float:left;
	
	margin-left:6%;
	margin-top:1%;
}
.div_rights3{
	width:70%;
	height:33px;		
	float:left;
	
	margin-left:3%;
	margin-top:1%;
}
</style>
</head>

<body>

<div class="div_caihead">
<div class="div_caihead1">
<div class="div_caihead2">
<a href="http://www.runoob.com/" ><img src="cainiao.png" width=253 height=30/></a>
</div>
</div>
<div class="div_caihead1">
<form action="https://www.runoob.com/" method="get">
        <input  style="width:450px;height:40px;"id="s" name="s" type="post" placeholder="搜尋……" autocomplete="off"/>

</form>
</div>
</div>
<div class="div_mid" >
<div class="div_mid1" style="margin-left:17%;"><font color="white">首頁</font></div>
<div class="div_mid1"><font color="white">菜鳥筆記</font></div>
<div class="div_mid1"><font color="white">菜鳥工具</font></div>
<div class="div_mid1"><font color="white">參考手冊</font></div>
<div class="div_mid1"><font color="white">使用者筆記</font></div>
<div class="div_mid1"><font color="white">測試/考試</font></div>
<div class="div_mid1"><font color="white">設計神器</font></div>
<div class="div_mid1"><font color="white">本地書籍</font></div>
<div class="div_mid1"><font color="white">登入</font></div>



</div>
<div class="div_left">
<div class="div_left1">HTML/CSS</div>
<div class="div_left1">JaveScript</div>
<div class="div_left1">服務端</div>
<div class="div_left1">資料庫</div>
<div class="div_left1">移動端</div>
<div class="div_left1">XML教程</div>
<div class="div_left1">ASP.NET</div>
<div class="div_left1">Web Service</div>
<div class="div_left1">開發工具</div>
<div class="div_left1">網站建設</div>
</div>
<div class="div_right">

<div class="div_right2">
<div class="div_right1"><b>HTML/CSS</b></div>
<div class="div_rights"><a href="http://www.runoob.com/html/html-tutorial.html"><img src="pic.png"/></a></div>
<div class="div_rights"><a href="http://www.runoob.com/html/html-tutorial.html"><img src="pic.png"/></a></div>
<div class="div_rights">
<a href="http://www.runoob.com/html/html-tutorial.html">
<div class="div_rights1"><font size='2'><b>【學習 HTML】</b></font></div>
<div class="div_rights2"><img src="html.png"/></div>
<div class="div_rights3"><font size='1'><b>HTML,即超文字標記語言(Typer Text Markup Language)</b></font></div>
</a>
</div>
<div class="div_rights">
<a href="http://www.runoob.com/html/html-tutorial.html">
<div class="div_rights1"><font size='2'><b>【學習 HTML】</b></font></div>
<div class="div_rights2"><img src="html.png"/></div>
<div class="div_rights3"><font size='1'><b>HTML,即超文字標記語言(Typer Text Markup Language)</b></font></div>
</a>
</div>
<div class="div_rights">
<a href="http://www.runoob.com/html/html-tutorial.html">
<div class="div_rights1"><font size='2'><b>【學習 HTML】</b></font></div>
<div class="div_rights2"><img src="html.png"/></div>
<div class="div_rights3"><font size='1'><b>HTML,即超文字標記語言(Typer Text Markup Language)</b></font></div>
</a>
</div>
<div class="div_rights">
<a href="http://www.runoob.com/html/html-tutorial.html">
<div class="div_rights1"><font size='2'><b>【學習 HTML】</b></font></div>
<div class="div_rights2"><img src="html.png"/></div>
<div class="div_rights3"><font size='1'><b>HTML,即超文字標記語言(Typer Text Markup Language)</b></font></div>
</a>
</div>
<div class="div_rights">
<a href="http://www.runoob.com/html/html-tutorial.html">
<div class="div_rights1"><font size='2'><b>【學習 HTML】</b></font></div>
<div class="div_rights2"><img src="html.png"/></div>
<div class="div_rights3"><font size='1'><b>HTML,即超文字標記語言(Typer Text Markup Language)</b></font></div>
</a>
</div>
<div class="div_rights">
<a href="http://www.runoob.com/html/html-tutorial.html">
<div class="div_rights1"><font size='2'><b>【學習 HTML】</b></font></div>
<div class="div_rights2"><img src="html.png"/></div>
<div class="div_rights3"><font size='1'><b>HTML,即超文字標記語言(Typer Text Markup Language)</b></font></div>
</a>
</div>
</div>
<div class="div_right2">
<div class="div_right1"> <b>JavaScript</b></div>
<div class="div_rights"><a href=""></div>
<div class="div_rights"><a href=""></div>
<div class="div_rights"><a href=""></div>
<div class="div_rights"><a href=""></div>
<div class="div_rights"><a href=""></div>
<div class="div_rights"><a href=""></div>
<div class="div_rights"><a href=""></div>
<div class="div_rights"><a href=""></div>
</div>
</div>

</body>

</html>

HTML製作菜鳥教程首頁

成果圖如下所示：雖然比起原網站要遜色的多，但是猛地一看還是很有迷惑性的。（哈哈） 1、首先對頁面用div進行佈局（先分成幾個大塊）如圖： 2、然後在大塊裡面放上小塊，如圖 3、寫上文字： 4、加上圖片修改顏色，調整下位置，就得到如上的第

前端——“一看就會的”菜鳥教程首頁製作！

之前在複習網頁製作，仿照菜鳥教程的首頁寫了一個仿菜鳥首頁。效果如下：製作網頁之前先佈局。原網頁如下：分析該網站的佈局，我們可以發現，菜鳥教程的首頁主要有四個模組，分別是頂端，頂端導航，左邊選單，右邊選單內容。先在原網站檢視原始碼，找到相應模組的引數，根

HTML製作簡易百度首頁

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

面向HTML初學者 -- 菜鳥教程HTML彙總(1)

只是做一個精要的整理，讀者也可開啟菜鳥教程網頁學習。同為初學者，該文僅進行一個HTML的初涉，錯誤之處歡迎指正。第一篇內容主要涉及HTML簡介、HTML元素、HTML屬性、HTML4個簡單例項（標題、段落、連結、影象）和HTML文字格式化。 1 HTML簡介

菜鳥教程丨Egret製作Loading頁面及分步載入資源教程

我們都知道，當遊戲越做越大，資源越來越多的時候，載入資源會造成大量時間的浪費。為避免載入資源時遊戲黑屏，導致玩家誤認為遊戲非正常執行，Loading介面起到至關重要的作用。今天就為大家帶來用Egret製作Loading頁面及分步載入資源的教程。本文涉及以下內容： RES載入Loadi

HTML菜鳥教程學習筆記

最近想學習學習前端相關，先從基礎吧；本文主要是在菜鳥筆記上的html教程中的筆記或者總結，主要給自己查詢；參考連結：http://www.runoob.com/ HTML 教程超文字標記語言（英語：HyperText Marku

菜鳥教程之工具使用（五）——JRebel與Windows服務的Tomcat集成

-m end 個人再見 proc key pre 安裝 target 之前寫過一篇Tomcat借助JRebel支持熱部署的文章——《借助JRebel使Tomcat支持熱部署》。介紹的是在開發、測試環境中的配置。可是正式的部署環境。我們不會通過命令行來啟動Tomcat，

Angular js 過濾器筆記（轉自菜鳥教程）

per test 筆記 ring ood filter 子集 true 貨幣格式 1、uppercase，lowercase 大小寫轉換 {{ "lower cap string" | uppercase }} // 結果：LOWER CAP STRING {{ "TA

菜鳥教程-練習實例答案I

core 其中a是一個數字再落下乘法 white 超過 -1 英文字母三位數題目：有四個數字：1、2、3、4，能組成多少個互不相同且無重復數字的三位數？各是多少？ 1 #coding=utf-8 2 3 from itertools import permuta

菜鳥教程 Python 手記 1

報錯信息數據類型字符串表 ring max last pda 每次 none Python是一種解釋型、面向對象、動態數據類型的高級程序設計語言。編碼編碼默認情況下，Python 3 源碼文件以 UTF-8 編碼，所有字符串都是 unicode 字符串。當然你

sphinx 菜鳥教程

edt cool lis file lpad 抽象 mage settings length 簡介 Sphinx 是一種工具，它允許開發人員以純文本格式編寫文檔，以便采用滿足不同需求的格式輕松生成輸出。這在使用 Version Control System 追蹤變更時非常有

JPA 菜鳥教程 15 繼承-一個表-SINGLE_TABLE

column turn rate pre school fill 技術一個表 tor 原地址：http://blog.csdn.net/JE_GE/article/details/53678422 繼承映射策略一個類繼承結構一個表的策略，最終只生成一個表，這是繼承映射的

Java 8 新特性-菜鳥教程 (3) -Java 8 函數式接口

但是 style vax arr 結果友好 face todo 兩個 Java 8 函數式接口函數式接口(Functional Interface)就是一個有且僅有一個抽象方法，但是可以有多個非抽象方法的接口。函數式接口可以被隱式轉換為lambda表達式。函數式接口

Linux學習_菜鳥教程_1

ssh sync 起點計算機 16px 指令 span 語句完成 Linux系統啟動過程：內核的引導、運行init、系統初始化、建立終端、用戶登錄系統內核引導：計算機開機，然後BIOS開機自檢，按照BIOS中設置的啟動設備（通常是硬盤）來啟動。操作系統接管硬件以後

Java菜鳥教程———學習筆記

class this 關鍵字多繼承之間字母 ext javac 多個編譯錯誤（1）Java中的繼承有兩種：extends 和 implements extends 類的繼承是單一繼承，也就是說，一個子類只能擁有一個父類，所以 extends 只能繼承一個類。使用

【菜鳥教程】小白接觸白鷺引擎4天，成功做了一款足球小遊戲

下一步發現 https sta 圖片 sce 變量名找到是否寫在前面：隨著越來越多的新人開始接觸白鷺引擎，創作屬於自己的遊戲。考慮到初學者會遇到一些實際操作問題，我們近期整理推出“菜鳥”系列技術文檔，以便更好的讓這些開發者們快速上手，Egret大神們可以自動忽略此類

PHP Ajax 跨域問題最佳解決方案【摘自菜鳥教程】

set color ray quest origin tty 所有 $origin con PHP Ajax 跨域問題最佳解決方案分類編程技術 http://www.runoob.com/w3cnote/php-ajax-cross-border.html 本文

Lua菜鳥教程學習筆記三（重難點）

內容會持續更新，有錯誤的地方歡迎指正，謝謝! 上一篇文章：Lua菜鳥教程學習筆記二（一些細節）介紹了Lua的一些細節內容，但缺少重難點內容，本文總結一些重難點。 Lua 模組與包定義模組模組類似於一個封裝庫，從 Lua 5.1 開始，Lua 加入了標準的模組管理機制，

Lua菜鳥教程學習筆記四（重難點續）

內容會持續更新，有錯誤的地方歡迎指正，謝謝! Lua 檔案 I/O Lua I/O 庫用於讀取和處理檔案。分為簡單模式（和C一樣）、完全模式（以一種面對物件的形式，將所有的檔案操作定義為檔案控制代碼的方法）。如果同時讀取多個檔案的話，使用完全模式則較為合適。簡單模式以

用vue製作餓了麼首頁(1)

無論是靜態網頁還是動態互動網頁，實現原則是將他們分塊，然後各個擊破。很明顯的餓了麼首頁分為三個部分（元件），上面的頭部（商家資訊），中間路由購物車每部分先佔住自己位置，然後挨個將這三部分分別實現完整。我

HTML製作菜鳥教程首頁

相關推薦