首页 > 其他分享 >第四章 页面组件课后习题

第四章 页面组件课后习题

时间:2024-03-29 22:31:05浏览次数:18  
标签:书单 wxml 空座 拼车 课后 组件 习题 输入 页面

二. 操作题

2.使用相应组件,完成"书单"页面。

//.wxml

<view style="text-align: left">←书单</view>
<image src="../image/shudan1.jpg" style="width: 100%"></image>
<view id="qian">
<image src="../image/si.jpg" style="width: 100px;height:200px"></image>
<view class="qi"style="font-size:16px;position:absolute;top:290px;left:110px">从你的全世界路过</view>
<view class="li" style="font-size:16px;position:absolute;top:320px;left:110px">张嘉佳</view>
<view style="font-size: 12px;position: absolute;top:350px;left:110px">该书由38个“睡前故事”组成,这些故事中有一半是爱情故事。纵览全书发现,这些小故事各有特点,主角以善良人物为主,诙谐幽默的俚语和脏话夹杂文中,结局总是“痴情者必有善终”。</view>
</view>
<view class="we" style="border-bottom: 1px solid darkgrey;"></view>
<view id="ee">
<image src="../image/zrg.jpg" style="width: 100px;height:160px;position:absolute;bottom:20px;left:12px"></image>
<view class="ei" style="font-size:18px;position: absolute;left:130px;bottom:140px">主人公</view>
<view class="le" style="font-size:14x;position: absolute;left:130px;bottom:110px">蒋方舟</view>
<view style="font-size: 14px;position: absolute;left:120px;bottom:40px">“在看书的时候,我是唯一的主人公,那个被命运眷顾的人,那个把所有的困难都当成磨炼的复杂的英雄。”</view>
</view>

运行结果如图所示:

3.使用相应组件,完成“西安找拼车”小程序部分界面。

//.wxml

<view style="text-align: left; font-size: 18px;background-color: black;color: white;width:100%;height:70px"><text style="position: absolute;top:30px;left:20px;">✖ 西安找拼车</text></view>
<view>
<view style="top:80px;left:10px;background-color: #BABABA;height:40px"><text style="position:absolute;top:80px;left: 10px;color: #474747;">联系方式(手机和微信至少填一项)</text></view>
<view style="font-size:18px;top:80px;left:10px;background-color: white;height:50px"><text style="position:absolute;top:120px;left: 15px;">称呼*</text><text style="position:absolute;top:120px;left:100px">请输入称呼</text></view>
<view style="border-bottom: 1px solid darkgrey;"></view>
<view style="font-size:18px;top:80px;left:10px;background-color: white;height:50px"><text style="position:absolute;top:180px;left: 15px;">手机号</text><text style="position:absolute;top:180px;left:100px">请输入手机号</text></view>
<view style="border-bottom: 1px solid darkgrey;"></view>
<view style="font-size:18px;top:80px;left:10px;background-color: white;height:50px"><text style="position:absolute;top:230px;left: 15px;">微信号</text><text style="position:absolute;top:230px;left:100px">请输入微信号</text></view>
<view style="border-bottom: 1px solid darkgrey;"></view>
<view style="height: 50px; background-color: darkgray;width:100%;position: absolute;top:262px"><text style="font-size: 16px;position: absolute;top:10px;left: 15px;color: #474747;">拼车信息</text></view>
<view style="border-bottom: 1px solid darkgrey;"></view>
<view style="font-size:18px;top:80px;left:10px;background-color: white;height:50px"><text style="position:absolute;top:330px;left: 15px;">出发地点*</text><text style="position:absolute;top:330px;left:110px">限7个字</text></view>
<view style="border-bottom: 1px solid darkgrey;"></view>
<view style="font-size:18px;top:80px;left:10px;background-color: white;height:50px"><text style="position:absolute;top:380px;left: 15px;">目的地*</text><text style="position:absolute;top:380px;left:110px">限7个字</text></view>
<view style="border-bottom: 1px solid darkgrey;"></view>
<view style="font-size:18px;top:80px;left:10px;background-color: white;height:50px"><text style="position:absolute;top:430px;left: 15px;">空座数*</text><text style="position:absolute;top:430px;left:110px">请输入空座数</text></view>
<view style="border-bottom: 1px solid darkgrey;"></view>
</view>


运行结果如图所示:

标签:书单,wxml,空座,拼车,课后,组件,习题,输入,页面
From: https://blog.csdn.net/qianli1/article/details/137141241

相关文章