使用CSS完成商城首頁的優化

来源:https://www.cnblogs.com/zllk/archive/2020/05/05/12833732.html
-Advertisement-
Play Games

使用CSS完成網站首頁的優化 需求分析 由於我們昨天使用表格佈局存在缺陷,那麼我們要來考慮使用DIV+CSS來對頁面進行優化 表格佈局的缺陷 1. 嵌套層級太多, 一旦出現嵌套順序錯亂, 整個頁面達不到預期效果 2. 採用表格佈局,頁面不夠靈活, 動其中某一塊,整個表格佈局的結構全都要變 技術分析 ...


使用CSS完成網站首頁的優化

需求分析

由於我們昨天使用表格佈局存在缺陷,那麼我們要來考慮使用DIV+CSS來對頁面進行優化

表格佈局的缺陷

  1. 嵌套層級太多, 一旦出現嵌套順序錯亂, 整個頁面達不到預期效果
  2. 採用表格佈局,頁面不夠靈活, 動其中某一塊,整個表格佈局的結構全都要變

技術分析

HTML的塊標簽:

  • div標簽: 預設占一行,自動換行
  • span標簽: 內容顯示在同一行

步驟分析

  1. 創一個最外層div
  2. 第一部份: LOGO部分: 嵌套三個div
  3. 第二部分: 導航欄部分 : 放置5個超鏈接
  4. 第三部分: 輪播圖
  5. 第四部分:
  6. 第五部分: 直接放一張圖片
  7. 第六部分: 抄第四部分的
  8. 第七部分: 放置一張圖片
  9. 第八部分: 放一堆超鏈接

代碼實現

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			.logo{
				float: left;
				width: 33%;
				/*border-width: 1px;
				border-style: solid;
				border-color: red;*/
				height: 60px;
				line-height: 60px;
		/*		border: 1px solid red;*/
			}
			
			
			.amenu{
				color: white;
				text-decoration: none;
				height: 50px;
				line-height: 50px;
			}
			
			.product{
				float: left; text-align: center; width: 16%; height: 240px;
			}
			
		</style>
	</head>
	<body>
		<!--
			1. 創一個最外層div
			2. 第一部份: LOGO部分: 嵌套三個div
			3. 第二部分: 導航欄部分 : 放置5個超鏈接
			4. 第三部分: 輪播圖 
			5. 第四部分: 
			6. 第五部分: 直接放一張圖片
			7. 第六部分: 抄第四部分的
			8. 第七部分: 放置一張圖片
			9. 第八部分: 放一堆超鏈接
		-->
		<div>
			<!--2. 第一部份: LOGO部分: 嵌套三個div-->
			<div>
				<div class="logo">
					<img src="../img/logo2.png"/>
				</div>
				<div class="logo">
					<img src="../img/header.png"/>
				</div>
				<div class="logo">
					<a href="#">登錄</a>
					<a href="#">註冊</a>
					<a href="#">購物車</a>
				</div>
			</div>
			
				
			<!--清除浮動-->
			<div style="clear: both;"></div>
			
			
			<!--3. 第二部分: 導航欄部分 : 放置5個超鏈接-->
			<div style="background-color: black; height: 50px;">
				<a href="#" class="amenu">首頁</a>
				<a href="#" class="amenu">手機數位</a>
				<a href="#" class="amenu">電腦辦公</a>
				<a href="#" class="amenu">鞋靴箱包</a>
				<a href="#" class="amenu">香煙酒水</a>
			</div>
			
				
			<!--4. 第三部分: 輪播圖--> 
			<div>
				<img src="../img/1.jpg" width="100%"/>
			</div>
			<!--5. 第四部分:--> 
			<div>
				<div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
				
				<!--左側廣告圖-->
				<div style="width: 15%; height: 480px;  float: left;">
					<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
				</div>
				<!--
                	右側商品
                -->
                <div style="width: 84%; height: 480px;float: left;">
                	<div style="height: 240px; width: 50%; float: left;">
                		<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高壓鍋</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高壓鍋</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高壓鍋</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高壓鍋</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高壓鍋</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高壓鍋</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高壓鍋</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高壓鍋</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高壓鍋</p>
                		<p style="color: red;">$998</p>
                	</div>
					
                </div>
			</div>
			
			<!--6. 第五部分: 直接放一張圖片-->
			<div>
				<img src="../products/hao/ad.jpg" width="100%"/>
			</div>
			<!--7. 第六部分: 抄第四部分的-->
			<div>
				<div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
				
				<!--左側廣告圖-->
				<div style="width: 15%; height: 480px;  float: left;">
					<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
				</div>
				<!--
                	右側商品
                -->
                <div style="width: 84%; height: 480px;float: left;">
                	<div style="height: 240px; width: 50%; float: left;">
                		<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高壓鍋</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高壓鍋</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高壓鍋</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高壓鍋</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高壓鍋</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高壓鍋</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高壓鍋</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高壓鍋</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高壓鍋</p>
                		<p style="color: red;">$998</p>
                	</div>
					
                </div>
			</div>
			
			<!--8. 第七部分: 放置一張圖片-->
			<div>
				<img src="../img/footer.jpg" width="100%"/>
			</div>
			<!--9. 第八部分: 放一堆超鏈接-->
			<div style="text-align: center;">
				        
					<a href="#">關於我們</a>
					<a href="#">聯繫我們</a>
					<a href="#">招賢納士</a>
					<a href="#">法律聲明</a>
					<a href="#">友情鏈接</a>
					<a href="#">支付方式</a>
					<a href="#">配送方式</a>
					<a href="#">服務聲明</a>
					<a href="#">廣告聲明</a>
					
					<br />
					
					Copyright © 2005-2016 傳智商城 版權所有
			</div>
		</div>
	</body>
</html>

擴展

  • CSS的優先順序

    按照選擇器搜索精確度來編寫: 行內樣式 > ID選擇器 > 類選擇器 > 元素選擇器
    就近原則: 哪個離得近,就選用哪個的樣式

  • CSS中的其它選擇器

    • 元素選擇器: 標簽的名稱{}

    • 類選擇器: 以. 開頭 .類的名稱

    • ID選擇器: 以#開頭 , #ID的名稱 (ID必須是頁面上面唯一)

    • 選擇器分組: 選擇器1,選擇器2{ 屬性的名稱:屬性的值}

    • 屬性選擇器:

      a[title]
a[titile='aaa']
a[href][title]
a[href][title='aaa']

    • 後代選擇器: 爺爺選擇器 孫子選擇器 找出所有的後代

    • 子元素選擇器: 父選擇器 > 兒子選擇器

    <!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8">
  	<title></title>
  	<style>
  		/*請將H1下麵的所有 em 元素 的內容顏色改成 紅色*/
  		/*中間以空格隔開的是後代選擇器*/

          /*後代選擇器
            h1 em{
  			color: red;
  		}*/
  		h1 > em{
  			color: red;
  		}
  	</style>
  </head>
  <body>
  	<h1>
  		This is a 
  		<em>兒子</em>
  		<strong>
  			<em>孫子</em>
  		</strong>
  	 heading
  	</h1>
  </body>
</html>
    • 偽類選擇器: 通常都是用在A標簽上
    a:link {color: red}		/* 未訪問的鏈接 */
a:visited {color: #00FF00}	/* 已訪問的鏈接 */
a:hover {color: #FF00FF}	/* 滑鼠移動到鏈接上 */
a:active {color: #0000FF}	/* 選定的鏈接 */  ​

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 使用JavaScript完成表格隔行換色
    表格隔行換色 需求分析 ​ 我們商品分類的信息太多，如果每一行都顯示同一個顏色的話會讓人看的眼花，為了提高用戶體驗，減少用戶看錯的情況，需要對錶格進行隔行換色 技術分析 table對象 集合 cells[]：返回包含表格中所有單元格的一個數組。 rows[]：返回包含表格中所有行的一個數組。 tBo ...
  • 使用JavaScript完成表單的校驗
    完成表單的校驗 需求分析 ​ 昨天我們做了一個簡單的表單校驗，每當用戶輸入出錯的時候，我們是彈出了一個對話框，提示用戶去修改。這樣的用戶體驗效果非常不好好。我們今天就是需要來對他進行一個修改，當用戶輸入信息有問題的時候，我們就再輸入框的後面給他一個友好提示。 技術分析 【HTML中innerHTML ...
  • HTML連載86-添加視頻、伸縮佈局
    一、複習了伸縮佈局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="CSS/base.css"> <link rel="s ...
  • TS 自學筆記（一）
    TS 自學筆記（一） 本文寫於 2020 年 5 月 6 日 日常廢話兩句 有幾天沒有更新了，最近學的比較亂，休息了兩天感覺好一些了。這兩天玩了幾個設計軟體，過幾天也寫篇文章分享分享。 為啥要學 TS？ 進入正題哈，經常寫 JS 的人會特別多的碰到一個 bug： 之類的。 這是為什麼呢？ 其實就是我 ...
  • 使用JavaScript完成定時彈出廣告
    完成頁面定時彈出廣告 需求分析 ​ 一般網頁，當我們剛打開的時候，它會5秒之後，顯示一個廣告，讓我們看5秒鐘，然後他的廣告就自動消失了！ 技術分析 定時器 setInterval : 每隔多少毫秒執行一次函數 setTimeout: 多少毫秒之後執行一次函數 clearInterval clearT ...
  • 使用JavaScript完成圖片的輪播效果
    使用JS完成圖片的輪播效果 需求分析 在我們的網站首頁,通常需要有一塊區域,用來顯示廣告,但是這塊區域如果僅僅顯示一張圖片肯定是不夠的, 故我們需要採用動態迴圈播放我們所有的廣告. 顯示效果照抄黑馬程式員的網站首頁 技術分析 切換圖片: 每個三秒鐘做一件事: window.setInterval() ...
  • 使用JavaScript完成簡單的數據校驗
    使用JS完成簡單的數據校驗 需求分析 使用JS完成對註冊頁面的簡單數據校驗,不允許出現用戶名或密碼為空的情況 技術分析 from表單屬性——onsubmit必須要有返回值，若為true，submit提交成功，若為false，無法提交 JS方法 ：變數的值 ：變數的長度 ：檢驗括弧內的值 正則表達式 ...
  • 使用CSS完成註冊界面的優化
    使用DIV+CSS完成註冊頁面的優化 需求分析 由於我們的註冊頁面也是用table佈局的,存在與首頁同樣的問題,所以我們需要使用div+css對我們的註冊頁面進行美化 技術分析 CSS的盒子模型: 萬物皆盒子 內邊距: padding top padding right padding bottom ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類