HTML的練習之網上書城靜態頁面的實現

阿新 • • 發佈：2019-01-20

用了幾天時間學完了HTML,於是乎,編寫了個網上書城專案以對所學知識做個總結.常見標籤我也會對其進行標註,若寫的有什麼不好之處也請大家勿怪.

好了,廢話不多說,程式碼奉上

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bookStore</title>
</head>
<body>
	<!-- 整個頁面 -->
	<div id="page">
		<!-- top -->
		<div id="top">  <!-- <div></div>為行級塊標籤 --> 

			<table width="100%">
				<tbody>
					<tr>
						<td width="70%">  <!-- <td></td>為列標籤 -->
							<img alt="logo" src="images/logo.png"/>
						</td>
						<td>
							<img alt="cart" src="images/cart.gif">
							<a href="#">購物車</a>   <!-- 這裡的"#"代表跳轉本頁 <a></a>為連結標籤,用於超連結的跳轉 --> 

							|
							<a href="#">幫助中心</a>
							|
							<a href="#">我的賬戶</a>
							|
							<a href="#">新使用者註冊</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<!-- menu -->
	<div id="menu">
		<table width="100%" bgcolor="#1C3F09">
			<tbody>
				<tr align="center">
					<td>
						<a herf="#">
							<font color="#ffffff">文學</font>  <!-- <font>為基本文字標籤 --> 

						</a>
						<a herf="#">
							<font color="#ffffff">生活</font>
						</a>
						<a herf="#">
							<font color="#ffffff">計算機</font>
						</a>
						<a herf="#">
							<font color="#ffffff">外語</font>
						</a>
						<a herf="#">
							<font color="#ffffff">經管</font>
						</a>
						<a herf="#">
							<font color="#ffffff">勵志</font>
						</a>
						<a herf="#">
							<font color="#ffffff">社科</font>
						</a>
						<a herf="#">
							<font color="#ffffff">學術</font>
						</a>
						<a herf="#">
							<font color="#ffffff">少兒</font>
						</a>
						<a herf="#">
							<font color="#ffffff">藝術</font>
						</a>
						<a herf="#">
							<font color="#ffffff">原版</font>
						</a>
						<a herf="#">
							<font color="#ffffff">科技</font>
						</a>
						<a herf="#">
							<font color="#ffffff">考試</font>
						</a>
						<a herf="#">
							<font color="#ffffff">生活百科</font>
						</a>
						<a herf="#">
							<font color="#ffffff">全部商品目錄</font>
						</a>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<!-- search -->
	<div id="search">
		<table width="100%" bgcolor="#B6B684">
			<tbody>
				<tr align="right">
					<td>
						<font>Search</font>
						<input type="text">
						<input value="搜尋" type="button">
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<!-- content -->
	<div id="content">
		<div align="right"> 首頁 > 旅遊 > 圖書列表  </div>
		<h1>商品目錄</h1>
		<hr>  <!-- <hr>標籤用於建立一條水平線 -->
		<h1>計算機類</h1>
		<span>共XXX種商品</span>
		<hr>  
		<div>
			<img alt="productlist" src="images/productlist.gif" width="100%">
		</div>
		<div>
			<table width="100%">
				<tbody>
					<tr align="center">
						<td>
							<div>
								<img alt="book" src="bookcover/101.jpg">
							</div>
							<div>
								<span>書名:xxx</span>
								<br>
								<span>售價:xxx</span>
							</div>
						</td>
						<td>
							<div>
								<img alt="book" src="bookcover/102.jpg">
							</div>
							<div>
								<span>書名:xxx</span>
								<br>
								<span>售價:xxx</span>
							</div>
						</td>
						<td>
							<div>
								<img alt="book" src="bookcover/103.jpg">
							</div>
							<div>
								<span>書名:xxx</span>
								<br>
								<span>售價:xxx</span>
							</div>
						</td>
						<td>
							<div>
								<img alt="book" src="bookcover/104.jpg">
							</div>
							<div>
								<span>書名:xxx</span>
								<br>
								<span>售價:xxx</span>
							</div>
						</td>
					</tr>
					
					<tr align="center">
						<td>
							<div>
								<img alt="book" src="bookcover/105.jpg" width="102">
							</div>
							<div>
								<span>書名:xxx</span>
								<br>
								<span>售價:xxx</span>
							</div>
						</td>
						<td>
							<div>
								<img alt="book" src="bookcover/106.jpg" width="102">
							</div>
							<div>
								<span>書名:xxx</span>
								<br>
								<span>售價:xxx</span>
							</div>
						</td>
						<td>
							<div>
								<img alt="book" src="bookcover/107.jpg">
							</div>
							<div>
								<span>書名:xxx</span>
								<br>
								<span>售價:xxx</span>
							</div>
						</td>
						<td>
							<div>
								<img alt="book" src="bookcover/108.jpg" width="102">
							</div>
							<div>
								<span>書名:xxx</span>
								<br>
								<span>售價:xxx</span>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<!-- bottom -->
		<div id="bottom">
			<table width="100%" bgcolor="#EFEEDC">
				<tbody>
					<tr>
						<td rowspan="2" width="70%">
							   
							<img alt="logo" src="images/logo.png">
						</td>
						<td>CONTACT US</td>
					</tr>
					<tr>
						<td>
						<span>copyright 2017 &copy; striner all rights reserved</span> <!-- 這裡的&copy;是©版權符號的標籤 -->
					</tr>
				</tbody>
			</table>
		</div>		
	</div>
</body>
</html>

ok.接下來為效果展示,由於頁面略長沒我就分為兩部分截取了.

這篇程式碼只是HTML基礎標籤的一個複習,要是做專案的話這些可是遠遠不夠的,待學完了HTML,博主就要向CSS和JS進發了,就期待我的下一篇部落格吧~

喜歡就請關注我,你們的關注是我最大的動力~~

HTML的練習之網上書城靜態頁面的實現

用了幾天時間學完了HTML,於是乎,編寫了個網上書城專案以對所學知識做個總結.常見標籤我也會對其進行標註,若寫的有什麼不好之處也請大家勿怪. 好了,廢話不多說,程式碼奉上 <!DOCTYPE html> <html> <head> &

HTML+CSS的練習之網上書城主頁面的實現

博主終於把CSS學完了,廢話不說,先上程式碼~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bookStore</title>

html靜態頁面實現微信分享思路

<?php $url = $_GET['url']; class JSSDK { private $appId; private $appSecret; private $url; public function __construct($appId, $appSecret,$url

Django之使用celery和NGINX生成靜態頁面實現效能優化

效能優化原理：當我們要給client瀏覽器返回一個頁面時，我們需要去資料庫查詢資料並將資料和基本頁面模板渲染形成頁面返回給客戶端，但如果每一個使用者訪問時都去查詢一次首頁的的資料時，當日訪問量很大時那麼無疑會給資料庫查詢帶來很大的效能問題。為了解決這個問題，我們可以給未登入使用者返回一個早就渲染好的靜態首

HTML學習筆記-網上書城案例 AND 2018-11-14（22:14）

小夥伴們，又見啦！一、HTML 網上書城案例 1.頁頭實現程式碼： <div> <table> <tr> <td><img src="圖片路徑" height="50" width="100" /><

自己動手寫Web容器之TomJetty之四：靜態頁面起步

上一節我們實現了將HTTP請求頭的內容解析後列印到控制檯上，讓HTTP請求頭的各個組成部分完全暴露在在我們面前。這個功能在IE瀏覽器的一款叫作HttpWatch的外掛中有類似的體現，相信很多讀者都用過它，利用HttpWatch檢視網頁請求和響應的日誌資訊功

JavaWeb網上圖書商城完整項目--day02-6.ajax校驗功能之頁面實現

ret code 需要 gis 提交 ima date else back 1 、現在我們要在regist.js中實現ajax的功能,使用用戶名到後臺查詢是否註冊，郵箱是否到後臺註冊，驗證碼是否正確的功能我們來看regist.js的代碼 //該函數在html文檔加載完成

HTML頁面靜態化實現

java靜態化文件位置註意：實體類定義：public class News { private String title; private String pubTime; private String category; private String newsContent; public

html+css實現小米商城首頁靜態頁面

學了一個星期的html和css，用新學的東西寫點東西，仿照小米商城的首頁按照它的頁面佈局盜用它的圖片寫了個小米商城的靜態頁面。原始碼：連結:https://pan.baidu.com/s/1qf63B6dBAUoDd6tpHFgESQ 密碼:lwc5 總結寫前端時的不足： css很

利用html和csss實現京東首頁靜態頁面

京東首頁靜態頁面的程式碼書寫，熟悉html和css的使用和網頁頁面的實現。 1.編碼格式為UTF-8，由於頁面程式碼冗長，選擇外鏈式css檔案來加入css程式碼。 2.京東首頁整體分為頁面頭部導航，中部內容和頁面底部服務欄，其中頭部導航與底部服務在每個京東子頁面裡出現，可以

前端學習筆記之5 靜態頁面練習(登入)

引言 : 博主目前是一名iOS開發者, 所會的語言有Objective-C 和 Swift, 目前正在學習前端; 這篇文章只是作為我的筆記發在這裡, 供自己業餘時間看看; 全是很基礎的東西, 看到的小夥伴酌情略過吧^_^ 效果圖 : 1. 程式碼

html靜態頁面通過vue實現資料動態化

1.引入vue，引入jQuery（因為等下用Ajax請求資料用到jQuery）如： <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="http:

學習MVC之租房網站（十二）-緩存和靜態頁面

.html 控制臺 ron 在線教育適合取代 system caching 租房網站在上一篇<學習MVC之租房網站（十一）-定時任務和雲存儲>學習了Quartz的使用、發郵件，並將通過UEditor上傳的圖片保存到雲存儲。在項目的最後，再學習優化網站性能的

asp .net 模板引擎使用 Razor 生成html靜態頁面

property efault index returns true getprop pattern exc lec 剛開始不是理解寫完之後覺得還蠻簡單的分為這幾個步驟 1.獲取頁面模板Html 2.獲取數據 3.解析模板和數據，生成靜態頁Html代碼 4.生成靜態

aspx生成靜態頁面html 例子

.com .net path test ati data name bpa lose 原文發布時間為：2009-07-26 —— 來源於本人的百度文章 [由搬家工具導入]using System;using System.Data;using System.Configur

數據結構之線性表代碼實現順序存儲，鏈式存儲，靜態鏈表（選自大話數據結構）

新元素 error 失敗尾插法後繼順序存儲 %d 帶表頭 tle 一，線性表順序存儲 #include <stdio.h> #include <string.h> #include <ctype.h> #i

html模板生成靜態頁面及模板分頁處理

htm 系統測試頻道 arr writable 屬性處理 ges 它只讓你修改頁面的某一部分，當然這“某一部分”是由你來確定的。美工先做好一個頁面，然後我們把這個頁面當作模板（要註意的是這個模板就沒必要使用EditRegion3這樣的代碼了，這

vue_cli下開發一個簡單的模塊權限系統之建立登錄頁面並且實現在瀏覽器輸入地址出現內容

all tro 標識打開 logs 開發內容引入系統新建一個Login.vue（登錄頁面，先把Hello.vue的內容復制過來即可）然後我們打開router下面的index.js,第一個箭頭:（引入vue路由）第二個箭頭（引入我們新建的Login.vue頁面

ps之轉化靜態頁面（是不是感覺又能和設計師好好玩耍了呢）

頁面 .com 參考 hub 實現 art 最新除了 nbsp 詳情請參考：　　 http://jingyan.baidu.com/article/546ae1850560a31149f28c94.html 除了ps可以完成外，還有github上面的托管

NGINX-html靜態頁面Access Denied

cgi 查找 3.5 scrip clas err acc div html NGINX-html靜態頁面Access Denied，包括.js 和.png都無法顯示 more /var/log/nginx/error.log "fastcgi://127.0.0.1:90

HTML的練習之網上書城靜態頁面的實現

相關推薦