響應式網頁設計實現的一種方法（1）

響應式網頁要求設計出來的網頁在不同的顯示裝置（如大屏、普通電腦端、手機端、平板電腦端）都能自適應顯示。這就要求設計軟體具備響應式網頁設計的能力。金蜘蛛網頁設計對響應式網頁設計支援非常好，無需要寫任何HTML程式碼就能實現。本文介紹一種利用金蜘蛛網頁設計器實現響應試網頁設計的方法，非常簡單實用。

本文分別就常用的控制元件如選單，面板，圖片和文字框的設計予以說明。共分三節，第一節講選單、第二節講面板、第三節講圖片和文字框。

一、響應式的選單設計

1。響應式選單介紹

金蜘蛛網頁設計器的響應式選單有“頂部菜單面板（響應式）”、“頂部菜單面板（響應式、兩級）”、“頂部菜單面板（響應式、多級）”、“左邊欄菜單面板（響應式）”，還有LayUI的“導航選單”也是響應式，如下圖：

上面的這些響應式選單，直接拖放到網頁即可建立，即可使用，無需要寫任何程式碼。但我們有更簡單的方法，不需要這樣從頭做起，那就是從金蜘蛛網頁設計器特有的功能元件“常用組合元件”中建立更簡單。然後再在建立好的常用元件的基礎上再修改為自己所需要的。

如下圖，常用元件中響應式選單有如下幾種：頂部選單（響應式）、頂部選單（響應式、兩級）-風格1、頂部選單（響應式、兩級）-風格2、頂部選單（響應式、多級）、左邊欄選單（響應式）-風格1、左邊欄選單（響應式）-風格2、頂部選單和左邊欄選單結合 的後管理框架。

2。使用例子

如下圖，點“建立移動網頁”建立一個空白的網頁（

說明：

電腦網頁不適應移動裝置下顯示，但移動網頁既可以適應電腦裝置也可以適應移動裝置顯示，所以響應式網頁都要建立移動網頁

）。

我們選擇“常用組合元件”->“選單”->“頂部選單（響應式、兩級）”->“風格2——LayUI”建立到剛才建立的空白網頁上。如下圖：

這時可以直接把圖片和文字替換為你所需要的，這樣響應式的選單做好了，無需寫一行程式碼，是不是很快速方便！

下一節我們講響應式Div面板，敬請關注！