Yii2框架博客系统前台界面布局

Posted 2023-01-24 jartins

操作步骤

1. 菜单导航的css操作
   1. 下面截图是完成左右浮动操作的具体方法
   2. 
   3. 
2. 登陆显示头像
   1. 首先在web目录下创建static的静态文件夹 用于存储css js img 等文件，目录结构 /web/static/css 或者 /web/static/images
   2. 其次要明白 /assets/AppAsset 是资源文件目录 css js images 等文件存储的样式引入路径
   3. 示例添加css需要在

      1. public $css = [
             'static/css/site.css',     #此处的目录结构就是在页面引入样式的路径
             '此处添加样式路径释义'
         ];

3. 显示头像
   1. 创建静态文件 static/images  存入图片
      1. 'label' =>'<img src="/static/images/1.jpg" alt="'.Yii::$app->user->identity->username.'">', #设定登陆后的图片
      2. 'encodeLabels' =>false,         // 取消对于图片标签的过滤        
         1. 
            1. 会出现的问题：图片大小会不符合整体 需要调试 
            2. 解决办法：添加class类 在web/static/css/site.css 样式中加入样式
               1. 添加class类的方法 'linkOptions' => ['class' => 'avatar'],   // 'linkOptions' => ['data-method' => 'post']
                  1. site.css 参考样式代码

                     1. .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;
                        

4. 由于注释了点击退出的功能 所以要加一个点击头像 能实现现退出的功能
   1. 
   2. 
      1. 代码

         1. 'items' => [
                ['label' => '退出',
                    'url' => [
                        '/site/logout'
                    ],
                    'linkOptions'=>[
                        'data-method' => 'post'
                    ]
                ],
            ],

5. font-awsome 引入 图标的一种组建 来改善‘退出’文字显示更好的效果
   1. 目录结构     /web/static/css/font-awesome 
      1. 
      2. 引入css       * 'static/css/font/css/font-awesome.min.css',
         1. ​​​​​​​
            1. 注意：因为font-awesome是一个组建 旗下有很多的图标可以引入，大部分图标都是i 标签包括的，具体的class定义可以百度
6. 显示到退出
   1. 
   2. 

完成！