佈局頁簡單搭建

阿新 • • 發佈：2021-08-16

在MVC中建立簡單的'"上左右"佈局的佈局頁

首先我們知道佈局頁是建立在Shared資料夾下的

右鍵新增分佈頁

接下來就可以編輯佈局頁的大概結構了

<body>
    <div>
        <!--頭部Start-->
        <div class="header">
            電商管理系統
        </div>
        <!--頭部end-->
        <!--容器Start-->
        <div class="context" 
>
            <!--左選單Start-->
            <div class="left">
                <ul>
                    <li>選單一</li>
                    <li>選單二</li>
                    <li>選單三</li>
                </ul>
            </div>
            <!--右選單Start-->
            <!--右內容Start-->
            <div class 
="right">
                @RenderBody()
            </div>
            <!--右內容Start-->
        </div>
        <!--容器end-->
    </div>
</body>

這是一個簡單的"上左右"結構的佈局頁

我們在檢視中編輯的內容都是放在@RenderBody()中

頭部標題選單寫在herder的div中

左側選單寫在left的div中

右側選單寫在right的div中

接下來我們就可以針對以上三個DIV進行效果新增

下面是我新增的簡單效果方便演示

<style>
    .header {
        width:100%;
        height:100px;
        border-bottom:5px #00ffff;
    }
    .left {
        width:250px;
        background-color:blanchedalmond;
        height:600px;
        float:left;
    }
    .right {
        top:105px;
        left:250px;
        float:left;
    }
</style>

接下來我們回到控制器

新建控制器之後會有預設Index檢視

右鍵新增檢視後

選擇我們剛剛建立好的佈局頁,之後執行就可以了

效果如下:

佈局頁簡單搭建

在MVC中建立簡單的\'\"上左右\"佈局的佈局頁首先我們知道佈局頁是建立在Shared資料夾下的

WPF 一個佈局的簡單例子

1. 注意 Grid 裡面，不管是行還是列，預設的尺寸大小就是，\"1*\" 2. 除了設定 “*”，固定值，還可以設定成 \"Auto\"

簡單搭建 @vue-cli3.0 及常用sass使用

1,在安裝了Node.js後使用其中自帶的包管理工具npm。或者使用淘寶映象cnpm（這裡不做說明）

動態網站的簡單搭建(基於ThinkPHP5)

靜態部分新建專案資料夾找到wampserver的www網站執行的根目錄新建專案資料夾，命名為Myproject（起一個自己喜歡的名字，純英文或拼音）

騰訊雲伺服器簡單搭建並部署WEB檔案

廢話不多說直接上圖提前準備以下軟體 1. Xshell6 連結你的伺服器用 2. FileZilla 上傳檔案使用

Flex佈局的簡單使用

最近通過觀看pink老師的視訊學習了flex佈局，以此來記錄flex的簡單使用！ flex佈局原理

基於LNMP快速簡單搭建wordpress平臺

1、WordPress簡介 WordPress是一種使用PHP語言開發的部落格平臺，使用者可以在支援PHP和MySQL資料庫的伺服器上架設屬於自己的網站。也可以把WordPress當作一個內容管理系統（CMS）來使用。WordPress是一款個

MySQL8主從簡單搭建

簡單介紹下MySQL8主從服務搭建 1.準備兩臺伺服器ip(主):192.168.56.151 , ip(從):192.168.56.152 2.確保2臺伺服器已安裝相同版本的mysql(這裡裝MySQL8)3.在主庫上,設定一個複製使用的賬戶,並授予 REPLICATI

solr8.0的簡單搭建（一）

solr8.0的簡單搭建（一）以下是windows下的solr搭建教程第一步，下載solr 進入solr官網進行下載：http://lucene.apache.org/solr/

spring-mvc框架簡單搭建

1.座標檔案 <?xml version=\"1.0\" encoding=\"UTF-8\"?> <project xmlns=\"http://maven.apache.org/POM/4.0.0\"

elk + filebeat，6.3.2版本簡單搭建，實現我們自己的集中式日誌系統

https://www.cnblogs.com/youzhibing/p/9553758.html 前言　　剛從事開發那段時間不習慣輸出日誌，認為那是無用功，徒增程式碼量，總認為自己的程式碼無懈可擊；老大的叮囑、強調也都視為耳旁風，最終導致的結果是

簡單搭建Elasticsearch7.10叢集搭建

技術標籤：linuxelasticsearch 寫在前面—準備當前使用版本elasticsearch-7.10.0-linux-x86_64.tar.gz

java簡單搭建分散式架構

一般來說，資料庫的資料過多，查詢效率就很慢，這時候我們如果把表分庫到不同的資料庫，這時候訪問速度就會快很多，如果並且採用多執行緒去訪問的話，查詢速度也會提高的更快，我這裡是執行記憶體8核電腦進行測試

node、express(路由)簡單搭建伺服器

1.node 原始： var http = require( \'http\' ) var server = http.createServer() server.on( \'request\', function(req res){

基於TOMCAT簡單搭建檔案伺服器

技術標籤：tomcatajax跨域問題tomcat伺服器java 背景：最近接了個工廠專案，裡面有個需求：內網環境中，PAD端和PC端可以預覽或下載公共檔案，公共檔案類別包括但不限於各種圖片、媒體格式、PDF、WORD和EXCEL。結

【css常用佈局】簡單的視窗頭部欄佈局（小白向）

技術標籤：css常用佈局csshtml 說明本次佈局只是給css和html初學者的一個佈局思路

使用Idea簡單搭建springcloud專案

前言：開發工具：IntelliJ IDEA 2020版 (Ultimate Edition) 框架：spring boot 、spring cloud 搭建一套spring cloud微服務系統，實現服務之間的呼叫。需要搭建一個父工程springcloud-test，一個服務註冊中心

CentOS7|8簡單搭建DNS服務

參考：https://blog.51cto.com/14156658/2411379 一、DNS系統在網路中的作用就是維護一個地址資料庫，其中記錄了各種主機域名與IP地址的對應關係，以便為客戶程式提供正向或反向的地址查詢服務，即正向解析和反

.Net Core 3.1簡單搭建微服務

學如逆水行舟，不進則退！最近發現微服務真的是大勢所趨，停留在公司所用框架裡已經嚴重滿足不了未來的專案需要了，所以抽空了解了一下微服務，並進行了程式碼落地。

簡單搭建UI自動化框架

1、環境：語言：python IDE：pycharn 測試工具：selenium+unittest+beautifulreport 測試頁面：某網路裝置

佈局頁簡單搭建

相關推薦