Yii2框架部落格系統前臺介面佈局

操作步驟

1.選單導航的css操作

    下面截圖是完成左右浮動操作的具體方法

2.登陸顯示頭像

首先在web目錄下建立static的靜態資料夾 用於儲存css js img 等檔案   目錄結構/web/static/css 或者 /web/static/images

其次要明白 /assets/AppAsset 是資原始檔目錄css js images等檔案儲存的樣式引入路徑

示例新增css需要在

        public $css = [

            ‘static/css/site.css’,     #此處的目錄結構就是在頁面引入樣式的路徑

            ‘此處新增樣式路徑釋義’

        ];

 2.1顯示頭像

        建立靜態檔案 static/images  存入圖片

        ‘label’ =>'<img src=”/static/images/1.jpg” alt=”‘.Yii::$app->user->identity->username.'”>’, #設定登陸後的圖片

        ‘encodeLabels’ =>false,         // 取消對於圖片標籤的過濾        

會出現的問題:圖片大小會不符合整體 需要除錯  

解決辦法:新增class類 在web/static/css/site.css 樣式中加入樣式

            新增class類的方法 ‘linkOptions’ => [‘class’ => ‘avatar’],     

            // ‘linkOptions’ => [‘data-method’ => ‘post’]

site.css 參考樣式程式碼 ⤵️

.navbar-right > li > a.avatar {
    padding-top: 10px;
    padding-bottom: 0;
}
.navbar-right > li > a.avatar img{
    border:#ccc solid 1px;
    width:32px;
    height: 32px;
}

由於註釋了點選退出的功能 所以要加一個點選頭像 能實現現退出的功能

程式碼

 ‘items’ => [
                [‘label’ => ‘退出’,’url’ => [‘/site/logout’],’linkOptions’=>[‘data-method’ => ‘post’]],
            ],

4.font-awsome 引入 圖示的一種組建 來改善‘退出’文字顯示更好的效果

目錄結構     /web/static/css/font-awesome

引入css       * ‘static/css/font/css/font-awesome.min.css’,

注意:因為font-awesome是一個組建 旗下有很多的圖示可以引入,大部分圖示都是i 標籤包括的,具體的class定義可以百度

顯示到退出

效果圖顯示

完成!