9.1.1广告图界面开发企业站uniapp实战【uniapp教程uniapp教程（黄菊华跨平台开发系列教程）】

本章节主要讲解企业站项目界面的制作&＃xff0c;主要包括以下页面&＃xff1a;首页、产品列表和产品详情、案例列表和案例详情、资讯列表和咨询详情、关于我们、留言反馈页面。


9.1 企业站首页

企业站项目首页主要包括下面几个模块&＃xff1a;广告图、公司简介、最新产品、最新案例、最新资讯。首页效果如图9-1。


9.1.1 广告图

首页广告图的最终效果如图9-2.

布局代码如下&＃xff1a;

<!--首页-广告图-->
<view class&＃61;&＃39;ad01&＃39;><image src&＃61;&＃39;/static/tupian/01.jpg&＃39; class&＃61;&＃39;ad01-img&＃39;></image>
<!--image是图片组件&＃xff0c;src属性表示图片的地址&＃xff0c;/表示根目录-->
</view>


样式代码如下&＃xff1a;

<style>
/*广告图*/
.ad01 {margin: 4px; /*定义外边距*/box-shadow: 0px 2px 2px gainsboro; /*定义图片的阴影*/
}
.ad01-img {width: 100%; /*定义图片的宽度&＃xff1a;百分比*/height: 125px; /*定义图片的高度&＃xff1a;绝对值*/
}
</style>


【uniapp参考资料】

&＃xff08;1&＃xff09;uni-app跨平台开发 入门到实战
https://ke.qq.com/course/package/26512

&＃xff08;2&＃xff09;uni-app 完整商城界面设计实战
https://ke.qq.com/course/2381059

&＃xff08;3&＃xff09;基于vue的uniapp商城完整项目源代码
https://ke.qq.com/course/3064977

&＃xff08;4&＃xff09;小白教程资料 http://www.2d5.net

&＃xff08;5&＃xff09;毕业设计网http://www.pc-365.net
&＃xff08;6&＃xff09;小程序编程网www.4317.org

&＃xff08;7&＃xff09;计算机编程网http://www.05423.com/