企业官网小程序搭建教程-首页的搭建04
2022/1/7 22:06:05
本文主要是介绍企业官网小程序搭建教程-首页的搭建04,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
目录
01 总体介绍
02 首页搭建第一部分
03 首页搭建第二部分
04 首页搭建第三部分
上一节我们实现了图片的横向滚动,本节我们实现一下新闻列表功能,实现的效果如下:
打开首页,先添加一个普通容器
输入如下样式:
width: 710px; height: 620px; margin-top: 24px; margin-left: 20px; border-radius: 16px; background: rgb(255, 255, 255)
里边添加一个普通容器
输入如下样式
width: 710px; height: 96px; display: flex; box-sizing: border-box; align-items: center; border-radius: 16px; padding-right: 24px; justify-content: space-between
里边添加一个文本组件
输入如下样式
white-space: pre-line; margin-left: 40px; display: inline-block; font-size: 32px; font-weight: bolder
文本内容改为最新动态
在文本组件的同级添加一个普通容器
输入如下样式
display: inline-flex
往里添加一个文本组件和图片组件
给文本组件设置如下样式:
white-space: pre-line; display: inline-block; color: rgb(124, 132, 142); font-size: 24px
给图片组件设置如下样式
width: 34px; height: 34px; display: inline-block; position: static
图片的地址设置为:https://lowcode-3gzggxse31702e14-1253226562.tcloudbaseapp.com/resources/2021-06/lowcode-4206
这样标题就做好了
然后增加三个图文展示项组件用来显示新闻的列表
设置如下样式
border-bottom-style: solid; box-sizing: border-box; width: 670px; height: 176px; margin-left: 40px; padding: 24px 0px; font-weight: normal; border-width: 1px; border-color: #E7ECF2
基础属性设置如下
高级属性设置如下
在内容插槽里添加一个图片组件
设置如下属性
width: 192px; height: 128px; margin-top: 14px; margin-right: 30px
绑定为如下变量
主内容插槽里设置如下结构的组件
调整一下样式,并且绑定好变量,最终的效果
这篇关于企业官网小程序搭建教程-首页的搭建04的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04微信小程序如何实现点击图片查看大图功能-icode9专业技术文章分享
- 2024-09-28uniapp 小程序获取到数据库的换行符怎么展示-icode9专业技术文章分享
- 2024-09-20微信小程序全栈项目实战:从零开始的全面指南
- 2024-09-20微信小程序项目实战:零基础入门教程
- 2024-09-19微信小程序项目中miniprogram_npm文件跟node_modules文件的差别-icode9专业技术文章分享
- 2024-08-27小程序 单行显示,超出部分省略号显示的方法代码-icode9专业技术文章分享
- 2024-08-27微信小程序如何获取到特种设备的刘海屏高度-icode9专业技术文章分享
- 2024-08-27微信小程序如何获取苹果手机底部一横线高度信息方法代码-icode9专业技术文章分享
- 2024-08-27微信小程序 顶部状态栏标签背景为none但还是看不到状态栏什么原因-icode9专业技术文章分享
- 2024-08-21微信小程序全栈入门:从零开始的一站式指南