> For the complete documentation index, see [llms.txt](https://rakosell.gitbook.io/rakosell-tutorials-zh/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rakosell.gitbook.io/rakosell-tutorials-zh/33-shi-yong-jian-dan-de-coding-ji-qiao-mei-hua-nin-de-wang-ye.md).

# (33) 使用簡單的Coding技巧美化您的網頁

Rakosell是一個出色的電子商務平台，讓您輕鬆建立和管理自己的網上商店。本文將介紹一些簡單易用的編程技巧，讓Rakosell用戶能夠在後台的網站設計中美化網頁，提升用戶體驗。這些技巧只需要一些基本的HTML和CSS知識，無需高級編程技能。

<figure><img src="/files/zHqQeQPWQ6PnbTaHoFhV" alt=""><figcaption></figcaption></figure>

在Rakosell後台的「[網站設定](https://rakosell.com/website/settings)」，您可以在Custom HTML輸入各種自定義代碼，有效地優化您的網站。以下是小編常用的代碼（建議將Code貼在\<head>的方格內）：

#### **1. 將Navigation bar轉為透明色**

要使您的Navigation bar變成透明，您可以使用以下代碼：

<mark style="background-color:purple;">\<style></mark>\ <mark style="background-color:purple;">body .rs-merchant-navbar {</mark>\ <mark style="background-color:purple;">box-shadow: none !important;</mark>\ <mark style="background-color:purple;">}</mark>\ <mark style="background-color:purple;">.bg-nav, .rs-member-nav-bar, .rs-nav-placeholder {</mark>\ <mark style="background-color:purple;">background-color: unset !important;</mark>\ <mark style="background-color:purple;">}</mark>\ <mark style="background-color:purple;">.rb-sticky-top.rs-nav-placeholder {</mark>\ <mark style="background-color:purple;">display:none !important;</mark>\ <mark style="background-color:purple;">}</mark>\ <mark style="background-color:purple;">\</style></mark>

#### **2. 隱藏Footer**

如果您想要隱藏Footer部分，您可以使用以下代碼：

<mark style="background-color:purple;">\<style></mark>\ <mark style="background-color:purple;">.footer-top {</mark>\ <mark style="background-color:purple;">display:none !important;</mark>\ <mark style="background-color:purple;">}</mark>\ <mark style="background-color:purple;">\</style></mark>

#### **3. 隱藏Navigation bar**

如果您想要完全隱藏Navigation bar，可以使用以下代碼：

<mark style="background-color:purple;">\<style></mark>\ <mark style="background-color:purple;">body .rs-merchant-navbar {</mark>\ <mark style="background-color:purple;">display:none !important;</mark>\ <mark style="background-color:purple;">}</mark>\ <mark style="background-color:purple;">.rb-sticky-top.rs-nav-placeholder {</mark>\ <mark style="background-color:purple;">display:none !important</mark>\ <mark style="background-color:purple;">}</mark>\ <mark style="background-color:purple;">\</style></mark>

#### **4. 自定義Dropdown Menu顏色**

要自定義Dropdown Menu的背景顏色，您可以使用以下代碼：

<mark style="background-color:purple;">\<style></mark>\ <mark style="background-color:purple;">.custom-dropdown-item-list{</mark>\ <mark style="background-color:purple;">background-color: {{ COLOR }} !important;</mark>\ <mark style="background-color:purple;">}</mark>\ <mark style="background-color:purple;">\</style></mark>

在這個代碼中，您可以將{{ COLOR }}替換為您想要的具體顏色(如Red, Blue等)，這將改變Dropdown Menu的背景色。

請注意，這些代碼片段中的`!important`樣式規則可以確保您的設置優先於其他樣式。使用這些簡單的編程技巧，您可以輕鬆美化您的Rakosell後台網頁，以滿足您的設計需求。希望這些技巧對您有所幫助！
