banner · UI 課程標準教案 V1.0

# Banner > 網站頁面的橫幅廣告，讓上下內容有機隔開，也讓網頁更加美觀，一般會采用GIF動畫作為 banner。 ## 尺寸我們經常做的是1920px，即全屏界面，建好一個寬度1920px的文檔后畫兩條參考線3600px、15600px，保證主要內容不超過參考線就可以了，參考線中間的寬度是12000px。 ![](https://box.kancloud.cn/620eb132781eadb47ae5509c97a4406f_800x651.png) ## 制作流程 ![](https://box.kancloud.cn/49db87f4295438d1018ce9271ecfac4a_800x450.jpg) ![](https://box.kancloud.cn/d5ceaa0301cf37162bd90f4c996faa02_800x450.jpg) ![](https://box.kancloud.cn/6d7107999027921c3f4407d0a65ca854_800x450.jpg) ![](https://box.kancloud.cn/9ae6a03689ce0fd2ffddb3ad217ca045_800x450.jpg) ![](https://box.kancloud.cn/1021b38bd0e867e72fc8c7bcac5b033c_800x450.jpg) ![](https://box.kancloud.cn/ab469a6774b302954252cb5d80fa8a62_800x450.jpg) ![](https://box.kancloud.cn/dbf412637b086de84feaf03399f0b898_800x450.jpg) ![](https://box.kancloud.cn/3f6ac0c7252cb32fad1b4eb8dbc8b8e4_800x450.jpg) ![](https://box.kancloud.cn/bb224d9de5ceee796289ec26d385aa9a_800x450.jpg) ![](https://box.kancloud.cn/862c1896d6c6335f2c96ba51c8f9d10d_800x450.jpg) ![](https://box.kancloud.cn/f57855df3ad4cf72a6910a1d77a4aba7_800x450.jpg) ![](https://box.kancloud.cn/ee92e81b49c70d28d421386036068a85_800x450.jpg) ![](https://box.kancloud.cn/cb71d598499ef7e699f16384ff9c270f_800x450.jpg) ![](https://box.kancloud.cn/8bccad291391f4cca7c61b3af15017b6_800x450.jpg) ![](https://box.kancloud.cn/d846619d81c7ac3d9b6e89dd757747e4_800x450.jpg) ![](https://box.kancloud.cn/e0e4b8e302334a16a647991bb11db90f_800x450.jpg) ![](https://box.kancloud.cn/d4ed1725ae95ec9c8c0c510c5c2f0192_800x450.jpg) ![](https://box.kancloud.cn/f75730cbc74229b8af6f01377aede8ec_800x450.jpg) ![](https://box.kancloud.cn/111d3169984069a72e4942a8200d5606_800x450.jpg) ![](https://box.kancloud.cn/21df5d259422eacc13a685af33be80a6_800x450.jpg) ![](https://box.kancloud.cn/a71393d2ef68564a3bf366fb39aceeb0_800x450.jpg) ![](https://box.kancloud.cn/09766828a320b6010105e991cffa28b9_800x450.jpg)