首先來說一下我們的主題。來看一下圖。
這兩張圖,主要是看頁面上部分,能夠顯示當前正在進行的操作步驟。我們分享一下這個頁面的製作過程。
首先,這個頁面主要是由三部分組成的。上部分是顯示當前順序,基本不會變化。中間部分會根據具體的業務顯示不同的內容。最下面會顯示操作步驟。我們看中間的部分是變化最大的,而相對上下部分則很固定。於是採用了巢狀頁面將中間的頁面巢狀進去。
關鍵**如下:
//此處先省略步驟的布局**
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為 一 基本資訊 企業內部編號 經營企業編號 經營企業名稱 經營企業信用 倉庫編號 倉庫名稱 聯絡人 主管海關 倉庫面積 倉庫容積 錄入日期 結束有效日期 企業型別 區域場所類別 記賬模式 倉庫賬冊號 申報型別 暫停變更標記 申報企業編號 ...