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

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

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>

【uniapp参考资料】

(1)uni-app跨平台开发 入门到实战
https://ke.qq.com/course/package/26512

(2)uni-app 完整商城界面设计实战
https://ke.qq.com/course/2381059

(3)基于vue的uniapp商城完整项目源代码
https://ke.qq.com/course/3064977

(4)小白教程资料 http://www.2d5.net

(5)毕业设计网http://www.pc-365.net
(6)小程序编程网www.4317.org

(7)计算机编程网http://www.05423.com/

阅读终点,创作起航,您可以撰写心得或摘录文章要点写篇博文。去创作
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黄菊华老师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值