2. 程式人生 > >作業1：搭建網上購物商城結構

作業1：搭建網上購物商城結構

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

作業樣式

html程式

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<style >
		.pg-header{
			height:104px;
			width:100%;
			color:blue;
			border:1px solid #F00
		}
 		.pg-coloumns{ 
 			background-color:pink; 
 			height:40px; 
  			width:100%;  
  			border:1px solid #F00
 		}
 		.pg-coloumns a{
 			display:inline-block;
 			width:200px;
 			float:left;
 			background-color:green;
 			text-align:center;
 		} 
 		.pg-end{
 			height:2000px;
			width:100%;
			border:1px solid #F00
 		}
 		div img {
 			width:90%;; 
 			height:80%;;
 		}
	</style>
</head>
<body style="margin: 0" >
	<div class="pg-header">
		<div style="width:1080px;height:30px;line-height:30px; margin:0 auto;">
			<div style = "float:left;">收藏本站</div>
			<div style = "float:right;">
				<a href = "http://baidu.com/" style = " margin-left:10px">登入</a>
				<a href = "http://baidu.com/" style = " margin-left:10px">註冊</a>
				<a href = "http://baidu.com/" style = " margin-left:10px">收藏</a>
			</div>			
		</div>
		
		<div style ="width:980px;height:70px;margin:0 auto;">
			 
			 <div style = "float:left;">
			 	<img src="1.jpg" style ="width:80px;height:70px;margin-left:160px" >
			 </div>
			 
			 <div style = "float:left; margin-left:200px;">
			 	 <div>
			 	 	 <input style = "width:200px;height:30px">
			 	 </div> 
			 	 <label> 熱門搜尋：火龍果</label>
			 </div>
			 
			  <div style = "float:right;">
			 	<select name = "city">
			 		<option value = "1">南京</option>
			 		<option value = "2">上杭</option>
			 		<option value = "3">官莊</option>			 		
			 	</select>
			 	<select name ="country">
			 		<optgroup label="China">
			 			<option>南京</option>
			 			<option>上杭</option>			 			
			 		</optgroup>
			 	</select>
			 </div>
			 
		</div>
		
	</div>

	<div class="pg-coloumns">
		<div style="width:1080px;height:40px;line-height:40px; margin:0 auto;">
			<div style = "height:40px;line-height:40px; float:left;">
				<a >全部商品分類</a>		
				<a style = "width:50px;">首頁</a>		
				<a style = "width:100px;">網上超市</a>		
				<a style = "width:100px;">水果超市</a>		
				<a style = "width:100px;">生活娛樂</a>		
				<a style = "width:100px;">研究院</a>
			</div>
			<div style = "height:40px;line-height:40px; float:right;">
				<a style = "width:50px;">論壇</a>
				<a style = "width:50px;">研究院</a>
			</div>		
		</div>
	</div>
	
	<div class="pg-end">
		<div style="width:1080px;margin:0 auto;">
		
			<div style = "width:20%;border:1px solid #F00;float:left;">
					<div style = "font-size:18px;font-weight:bold;margin:5px;">南方水果</div>
					<span style ="border:1px solid #F00;font-size:16px;"> 火龍果&nbsp;&nbsp;&nbsp;&nbsp;火龍果&nbsp;&nbsp;&nbsp;&nbsp;火龍果&nbsp;&nbsp;&nbsp;&nbsp; </span>				
					
					<div style = "font-size:18px;font-weight:bold;margin:5px;">南方水果</div>
					<span style ="border:1px solid #F00;font-size:16px;"> 火龍果&nbsp;&nbsp;&nbsp;&nbsp;火龍果&nbsp;&nbsp;&nbsp;&nbsp;火龍果&nbsp;&nbsp;&nbsp;&nbsp; </span>				
					
					<div style = "font-size:18px;font-weight:bold;margin:5px;">南方水果</div>
					<span style ="border:1px solid #F00;font-size:16px;"> 火龍果&nbsp;&nbsp;&nbsp;&nbsp;火龍果&nbsp;&nbsp;&nbsp;&nbsp;火龍果&nbsp;&nbsp;&nbsp;&nbsp; </span>				
					
					<div style = "font-size:18px;font-weight:bold;margin:5px;">南方水果</div>
					<span style ="border:1px solid #F00;font-size:16px;"> 火龍果&nbsp;&nbsp;&nbsp;&nbsp;火龍果&nbsp;&nbsp;&nbsp;&nbsp;火龍果&nbsp;&nbsp;&nbsp;&nbsp; </span>				
					
					<div style = "font-size:18px;font-weight:bold;margin:5px;">南方水果</div>
					<span style ="border:1px solid #F00;font-size:16px;"> 火龍果&nbsp;&nbsp;&nbsp;&nbsp;火龍果&nbsp;&nbsp;&nbsp;&nbsp;火龍果&nbsp;&nbsp;&nbsp;&nbsp; </span>				
					
					<div style = "font-size:18px;font-weight:bold;margin:5px;">南方水果</div>
					<span style ="border:1px solid #F00;font-size:16px;"> 火龍果&nbsp;&nbsp;&nbsp;&nbsp;火龍果&nbsp;&nbsp;&nbsp;&nbsp;火龍果&nbsp;&nbsp;&nbsp;&nbsp; </span>				
			</div>
			
			<div style = "width:70%;float:right;">
				<div style = "height:200px;border:1px solid #F00">
					<div style ="margin:10px;border-bottom:5px solid #F00;">福特 &gt;&nbsp;蒙迪歐 &gt;&nbsp;2.0T</div>
					<div style = "margin-top:10px;margin-left:30px;font-weight:bold;float:left;">您已選擇:&nbsp;&nbsp;&nbsp;&nbsp;</div>
					<div style = "margin-top:20px;">蘋果</div>
					<div style = "margin-top:10px;margin-left:60px;font-weight:bold;float:left;">材質:&nbsp;&nbsp;&nbsp;&nbsp;</div>
					<div style = "margin-top:10px;">蘋果&nbsp;&nbsp;&nbsp;&nbsp;蘋果&nbsp;&nbsp;&nbsp;&nbsp;蘋果&nbsp;&nbsp;&nbsp;&nbsp;</div>
					<div style = "margin-top:10px;margin-left:60px;font-weight:bold;float:left;">品質:&nbsp;&nbsp;&nbsp;&nbsp;</div>
					<div style = "margin-top:10px;">蘋果&nbsp;&nbsp;&nbsp;&nbsp;蘋果&nbsp;&nbsp;&nbsp;&nbsp;蘋果&nbsp;&nbsp;&nbsp;&nbsp;</div>
					<div style = "margin-top:10px;margin-left:60px;font-weight:bold;float:left;">風格:&nbsp;&nbsp;&nbsp;&nbsp;</div>
					<div style = "margin-top:10px;">蘋果&nbsp;&nbsp;&nbsp;&nbsp;蘋果&nbsp;&nbsp;&nbsp;&nbsp;蘋果&nbsp;&nbsp;&nbsp;&nbsp;</div>
					<div style ="text-align:center;">更多選項</div>
				</div>
				<div style = "height:1800px;border:1px solid #F00">
					 <div style = "width:500px;height:30px;line-height:30px;margin-top:10px;margin-left:30px;float:left;border:1px solid #F00;"> 排序:價格&nbsp;&nbsp;&nbsp;&nbsp;銷量&nbsp;&nbsp;&nbsp;&nbsp;最新</div>
					 <div style = "height:30px;line-height:30px;margin-top:10px;margin-right:30px;float:right;border:1px solid #F00;"> 共**件商品</div>		
					 
					 <div style = "width:250px;height:250px;margin:20px;float:left;border:1px solid #F00;"> 
					 		<img alt="" src="1.jpg" style ="margin-left:13px" >	
					 		<div style = "text-align:center">商品名稱</div>	
					 		<div >
					 			<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "購買" style = "margin-left:40px">
					 			<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "加入購物車" style = "margin-left:40px">
					 		</div>	 
					 </div>
					 
					 <div style = "width:250px;height:250px;margin:20px;float:left;border:1px solid #F00;"> 
					 		<img alt="" src="1.jpg" style ="margin-left:13px" >	
					 		<div style = "text-align:center">商品名稱</div>	
					 		<div >
					 			<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "購買" style = "margin-left:40px">
					 			<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "加入購物車" style = "margin-left:40px">
					 		</div>	 
					 </div>
					 
					 <div style = "width:250px;height:250px;margin:20px;float:left;border:1px solid #F00;"> 
					 		<img alt="" src="1.jpg" style ="margin-left:13px" >	
					 		<div style = "text-align:center">商品名稱</div>	
					 		<div >
					 			<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "購買" style = "margin-left:40px">
					 			<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "加入購物車" style = "margin-left:40px">
					 		</div>	 
					 </div>
					 
					 <div style = "width:250px;height:250px;margin:20px;float:left;border:1px solid #F00;"> 
					 		<img alt="" src="1.jpg" style ="margin-left:13px" >	
					 		<div style = "text-align:center">商品名稱</div>	
					 		<div >
					 			<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "購買" style = "margin-left:40px">
					 			<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "加入購物車" style = "margin-left:40px">
					 		</div>	 
					 </div>
					 
					 <div style = "width:250px;height:250px;margin:20px;float:left;border:1px solid #F00;"> 
					 		<img alt="" src="1.jpg" style ="margin-left:13px" >	
					 		<div style = "text-align:center">商品名稱</div>	
					 		<div >
					 			<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "購買" style = "margin-left:40px">
					 			<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "加入購物車" style = "margin-left:40px">
					 		</div>	 
					 </div>
					 
					 <div style = "width:250px;height:250px;margin:20px;float:left;border:1px solid #F00;"> 
					 		<img alt="" src="1.jpg" style ="margin-left:13px" >	
					 		<div style = "text-align:center">商品名稱</div>	
					 		<div >
					 			<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "購買" style = "margin-left:40px">
					 			<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "加入購物車" style = "margin-left:40px">
					 		</div>	 
					 </div>
					 
					 <div style = "width:250px;height:250px;margin:20px;float:left;border:1px solid #F00;"> 
					 		<img alt="" src="1.jpg" style ="margin-left:13px" >	
					 		<div style = "text-align:center">商品名稱</div>	
					 		<div >
					 			<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "購買" style = "margin-left:40px">
					 			<input onclick="window.location.href='https://blog.csdn.net/zhuisaozhang1292'" type="button" value = "加入購物車" style = "margin-left:40px">
					 		</div>	 
					 </div>
					 
					 
	
					 
				</div>
									 

			</div>
			
		</div>
	</div>
</body>
</html>

輸出樣式：

相關推薦

作業1：搭建網上購物商城結構

作業樣式 html程式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <

淺入ABP(1)：搭建基礎結構的 ABP 解決方案

# 淺入ABP(1)：搭建基礎結構的 ABP 解決方案 [TOC] 版權護體©作者：痴者工良，微信公眾號轉載文章需要 《NCC開源社群》同意。 原始碼地址：https://github.com/whuanle/AbpBaseStruct 本教程結果程式碼位置：https://github.com/wh

python基礎作業------模擬實現一個ATM + 購物商城程序

setting water 轉賬 atm 結算 pan auth hide use 模擬實現一個ATM + 購物商城程序 作業需求： 額度 15000或自定義 實現購物商城，買東西加入 購物車，調用信用卡接口結賬 可以提現，手續費5% 每月22號出賬單，每月10號為還款日

網易雲課堂_C++程序設計入門(下)_第7單元：出入雖同趣，所向各有宜 – 文件輸入和輸出_第7單元 - 作業1：OJ編程

c++ detail using span 換行 tro size str cout 第7單元 - 作業1：OJ編程 查看幫助 返回 溫馨提示： 1.本次作業屬於Online Judge題目，提交後由系統即時判分。 2.學生可以在作業截止時間之前不限次數提

作業1：小型考勤登記表

btn ctype parameter edate 加油！ tab wid delet basepath 這次在廣州實習了20天，收獲還比較大。不過仍需要繼續努力。這次總共布置了兩個作業，我總結一下： 登記考勤信息，查看信息——主要就是往數據庫增加數據，然後再從數據庫中讀取

實踐作業1：測試管理工具實踐 Day2

測試 link 管理 mysq lin apache pac manage 網絡 1、嘗試配置TestLink所需環境 　　安裝配置php+apache+mysql時遇到一系列稀奇古怪的錯誤。 2、百度之後發現有可行的替代工具：Vertrigoserv（VertrigoS

hibernate框架學習筆記1：搭建與測試

for this ble action 1.7 turn yiq targe cts hibernate框架屬於dao層，類似dbutils的作用，是一款ORM（對象關系映射）操作 使用hibernate框架好處是：操作數據庫不需要寫SQL語句，使用面向對象的方式完成

struts2框架學習筆記1：搭建測試

method lang app org char 示例 重要 type img Servlet是線程不安全的，Struts1是基於Servlet的框架 而Struts2是基於Filter的框架，解決了線程安全問題 因此Struts1和Struts2基本沒有關系，只是創造者取

20180320作業1：源代碼管理工具調查

分析 代碼 版本控制 解決沖突 一致性 邏輯 不支持 red lte 當前較為流行的幾種源代碼管理工具的優缺點比較分析: 工具 優點 缺點 SVN 1、對中文支持好，使用界面統一，管理方便，邏輯明確，符合一般人思維習慣。 2、易於管理，集中

作業1：編寫登錄接口

r+ pre 登錄系統 while 作業 添加 usr %s adl #！/usr/bin/env python# Author:Zhan Weiimport os,sys,getpass #導入os,sys,getpass 模塊u = 0

升級微服務架構1：搭建Eureka Server服務中心

ont 瀏覽器 hostname 手動 節點 cti 還原 strong The 　　Spring Cloud中使用Eureka來做服務註冊和發現，來統一管理微服務實例。 　　1.使用IDEA創建一個空的Maven項目做父模塊 　　（也可以不用父項目，所有模塊都用

軟工作業1：wc.exe項目開發（java）

代碼行數 學習正則表達式 default man 控制字符 min 目的 若有 多個 Github地址：https://github.com/Zzhaomin/learngit 項目相關要求 ： wc.exe 是一個常見的工具，它能統計文本文件的字符數、

階段作業1：完整的中英文詞頻統計

ini str clas rms encoding nic app 英文 around strBig =‘‘‘Big Big World Emilia I‘m a big big girl In a big big world It‘s not a big

自我介紹+課後作業1：準備

如何 first 合格 代碼量 小菜 不知道 .cn 路徑 過去 【自我介紹】 035107334；我是石臻林；我的愛好是玩遊戲； 我的碼雲個人主頁是：https://gitee.com/qq605277743/events 我的第一個項目地址是：https://gite

Flink 專題1 ： 搭建Flink 及Flink 簡介

目錄 Flink 專題1 ： 搭建Flink 及Flink 簡介 Flink 簡介 Flink 的優勢: Flink 安裝 flink 安裝步驟 Flink 專題1 ： 搭建Flink 及Flink

Omnipeek空口抓包(1)：搭建開發環境

轉載請註明原文地址：https://mp.csdn.net/mdeditor/79279630 開發環境準備 安裝Omnipeek、安裝rtl8812a wifi驅動適配Omnipeek軟體 Omnipeek 10下載連結：http://download.csdn.net/do

階段作業1：完整的中英文詞頻統計+補交上次作業

#補交作業 cc = ('''Counting stars Lately I've been, I've been losing sleep 　　 Dreaming 'bout the things that we could be 　　 But baby I've been, I've been p

並行作業1：MPI安裝，及示例程式執行

執行MPI程式 系統採用vm下ubuntu16.04 一、MPI系統安裝 1.1 安裝環境 (1)作業系統：Ubuntu 16.04.4 （64位）。 (2)g++ 版本：gcc version 5.4.0 1.2 安裝包下載地址及安裝包 (1)下載地址：http

openstack--JUNO10搭建手冊整理1：搭建前準備工作

一、提前宣告： 1.本系列整理只是完整的openstack--JUNO10搭建過程，沒有過多的原理，如果你想詳細瞭解openstack的執行原理及機制，請參考其他資料。 2.openstack--JUNO10對所使用的系統版本有要求，必須是CENTOS7-1406，如果沒

DSP 基礎學習 1：搭建環境與CCS6建立工程模板

DSP 基礎學習 1：搭建環境與CCS6建立工程模板 1 DSP簡介 1.1 DSP 發展 1.2 DSP 應用領域 1.3 DSP 產品現狀 1.4 哈佛結構 1.5 TMS320F28335 簡介 2 搭