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

本文链接：https://blog.csdn.net/u013818205/article/details/109611839

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

9.1 企业站首页

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

在这里插入图片描述

9.1.1 广告图

首页广告图的最终效果如图9-2.
在这里插入图片描述
布局代码如下：

<!--首页-广告图--> 
<view class='ad01'>
  <image src='/static/tupian/01.jpg' class='ad01-img'></image>
<!--image是图片组件，src属性表示图片的地址，/表示根目录-->
</view>

样式代码如下：

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