前台頁面 顯示步驟

2021-07-09 18:50:16 字數 2171 閱讀 6182

首先來說一下我們的主題。來看一下圖。

這兩張圖,主要是看頁面上部分,能夠顯示當前正在進行的操作步驟。我們分享一下這個頁面的製作過程。

首先,這個頁面主要是由三部分組成的。上部分是顯示當前順序,基本不會變化。中間部分會根據具體的業務顯示不同的內容。最下面會顯示操作步驟。我們看中間的部分是變化最大的,而相對上下部分則很固定。於是採用了巢狀頁面將中間的頁面巢狀進去。

關鍵**如下:

//此處先省略步驟的布局**

div>

id="content">

div>

style="float: right; margin-right: 5%;">

id="btnback"

href="#"

class="easyui-linkbutton l-btn l-btn-plain"

data-options="iconcls:'icon-undo'"

plain="true" >

上一步span>

a>

id="btnnext"

href="#"

class=" easyui-linkbutton l-btn l-btn-plain"

data-options="iconcls:'icon-redo'"

plain="true" >

下一步span>

a>

id="finish"

href="#"

class=" easyui-linkbutton l-btn l-btn-plain"

data-options="iconcls:'icon-ok'"

plain="true" >

class="l-btn-left">

完成span>

span>

a>

div>整體布局如下。下面我們看一下步驟條的布局。

class="ui-step ui-step-blue ui-step-4">

id="li1"

class="ui-step-start ui-step-active">

class="ui-step-line">-div>

id="d1"

class="ui-step-icon">

class="iconfont">i>

class="ui-step-number">1i>

class="ui-step-text">試卷名稱span>

div>

li>

id="li2"

class="ui-step-line">

class="ui-step-line">-div>

class="ui-step-icon">

class="iconfont">i>

class="ui-step-number">2i>

class="ui-step-text">選擇題型span>

div>

li>

id="li3"

class="ui-step-line">

class="ui-step-line">-div>

class="ui-step-icon">

class="iconfont">i>

class="ui-step-number">3i>

class="ui-step-text">題型順序span>

div>

li>

id="li4"

class="ui-step-end ui-step-line">

class="ui-step-line">-div>

class="ui-step-icon">

class="iconfont">i>

class="ui-step-number">4i>

class="ui-step-text">題型分值span>

div>

li>

ol>

div>具體js動態事件明日待續。

Thymeleaf在前台無法顯示頁面

在springboot把我搞了兩個小時,真的是笨到家了。通過控制器顯示在介面這在thinkphp中是多麼簡單的乙個問題。註解在spring中真的是用神了。tp中應用就用乙個use加命名空間就ok,阿西吧 spring中有點轉不過來呀!thymeleaf不能跳轉到html頁面,首先檢查是否安裝thym...

配置HTML頁面顯示的步驟

html檔案存放在templates目錄下 修改url檔案 第乙個引數,message form是我們自己的url,也就是我們在網頁上輸入鏈結。當django響應乙個請求時,它會從urlpatterns的第一項開始,按順序依次匹配列表中的項,直到找到匹配的項。第二個引數是對應的訪問函式,在djang...

前台頁面列印

前台頁面就是乙個button,就不寫了,對應的列印頁面div為 一 基本資訊 企業內部編號 經營企業編號 經營企業名稱 經營企業信用 倉庫編號 倉庫名稱 聯絡人 主管海關 倉庫面積 倉庫容積 錄入日期 結束有效日期 企業型別 區域場所類別 記賬模式 倉庫賬冊號 申報型別 暫停變更標記 申報企業編號 ...