# (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後台網頁，以滿足您的設計需求。希望這些技巧對您有所幫助！


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://rakosell.gitbook.io/rakosell-tutorials-zh/33-shi-yong-jian-dan-de-coding-ji-qiao-mei-hua-nin-de-wang-ye.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
