Axure RP 基于动态面板实现宽度自适应全屏的顶部导航栏，实现高度自适应全屏的侧边导航栏

╰半夏微凉° 2022-09-13 14:29 213阅读 0赞

### 文章目录 ###

*  一、前言
 *  二、初步布局
 *  三、初步预览
 *  四、宽度自适应全屏
 *  五、高度自适应全屏
 *  六、页面左对齐
 *  七、最终效果

# 一、前言 #

主要是动态面板的运用，其实非常简单。

# 二、初步布局 #

*  两个动态面板，填充->颜色随便选一个浅色的
 *  两个矩形1，填充->透明度->0%

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5bq35biI5YWE_size_20_color_FFFFFF_t_70_g_se_x_16]

# 三、初步预览 #

这时候预览的的效果如下，是没有高度宽度自适应全屏效果的。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5bq35biI5YWE_size_20_color_FFFFFF_t_70_g_se_x_16 1]

# 四、宽度自适应全屏 #

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5bq35biI5YWE_size_20_color_FFFFFF_t_70_g_se_x_16 2]

# 五、高度自适应全屏 #

`[[Window.height]]`  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5bq35biI5YWE_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
![在这里插入图片描述][68845fb457864373aa5cd5bfeaf293ac.png]

# 六、页面左对齐 #

如果没有这一步，那么效果会是酱紫的  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5bq35biI5YWE_size_20_color_FFFFFF_t_70_g_se_x_16 4]

需要在页面的**空白地方**点击下，样式->左对齐  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5bq35biI5YWE_size_20_color_FFFFFF_t_70_g_se_x_16 5]

# 七、最终效果 #

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5bq35biI5YWE_size_20_color_FFFFFF_t_70_g_se_x_16 6]  
***觉得好，就一键三连呗（点赞+收藏+关注）***

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5bq35biI5YWE_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/79e0edb64d224ab2a25db44c8422d21d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5bq35biI5YWE_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/46d8463945214250a5f72c0855d10bb2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5bq35biI5YWE_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/707c08c72532470192139ce134629c24.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5bq35biI5YWE_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/db01f0c688944ecbb30f1e7f31a24758.png
[68845fb457864373aa5cd5bfeaf293ac.png]: /images/20220828/f1dbdeb8935c4a52b60adebacf97fae2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5bq35biI5YWE_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/04f2246ca84a4df589410316d8e61634.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5bq35biI5YWE_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/176239d9919b4174aabdc6efb50e2ed1.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5bq35biI5YWE_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/c452966ae36541fab02fdb4331a1f649.png