二、首页影院/我的 栏制作《仿淘票票系统前后端完全制作(除支付外)》

页面效果,影院内容:
在这里插入图片描述
我的页分为登录、注册、我的,如果登录了那么就显示我的页面否则显示登录页。
登录页:
在这里插入图片描述
我的页:
在这里插入图片描述

一、标题头部制作

接着我们点击影院,发现当前页内容为空:
在这里插入图片描述
我们的影院页面跟首页内容类似,此时我们先复制首页的标题到影院页面:
在这里插入图片描述
删除右侧栏目的内容以及logo区域内容:
在这里插入图片描述
此时在右侧添加一个下拉菜单以及一个图标:
在这里插入图片描述
图标为 search:
在这里插入图片描述
此时你还需要更改这些图标的属性内容,使其能够大小合适与当前页面。接着我们发现当前右边栏并不垂直居中,我们需要更改右侧栏的垂直对齐为居中:
在这里插入图片描述
这样的话,这个标题就做完了。

二、内容区域制作

接着制作内容区域,我们发现内容区域跟首页的内容类似,也是需要对应的内边距,此时只需要复制首页栏部分的内容行到当前页面之中即可:
在这里插入图片描述
此时是需要删除其他内容的,保留热映内容作为等下影院信息的内容部分。

复制过去后,更改热映内容名称为影院地点:
在这里插入图片描述
接着添加一个图片,作为广告图,并且需要设置其宽度为 100%,否则就按照原本的比例显示了:
在这里插入图片描述
其实这个影院信息还有个新人价的,之前截图没截全,此时页面应该 如下:
在这里插入图片描述

我们可以从图中得知,当前影院信息内部分为左侧和右侧,左侧是影院信息,右侧为新人价格,此时我们在影院信息内部新建两个行一个是左,另一个是右,剩下的标签内容暂时先不用理:
在这里插入图片描述
此时宽度左侧行设置为 70%,右侧行设置为 30%,使其占据整一行:
在这里插入图片描述
在这里插入图片描述
当然高度也要设置为包裹,并且这两个行还需要给予对应的内边距,使其内部有一定厚度,不然紧贴就不好看了,左边框给予的内边距:
在这里插入图片描述
右边框给予的内边距:
在这里插入图片描述

接着赋予文本:
在这里插入图片描述
文本记住一定要给予宽度为 100%,否则会超格,并且还需要使其换行为否:
在这里插入图片描述
接着我们再创建一个标签占满整个宽度,在里面添加一个文本即可:
在这里插入图片描述
文本若想使其有一定的宽度,只需要给予内边距即可:
在这里插入图片描述
由于需要距离顶部一定距离和左侧一定距离,在此直接给予了一个小量的边距值,后期显示便签将会有多个标签,为了不挨近,所以给予对应的小数值。

接着设置期边框颜色和边缘圆角值即可:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286208.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【数据库系统经典案例】销售系统数据库分析及完整实现过程

文章目录 一、产品表以及产品添加更新二、顾客管理三、销售记帐四、统计问题一、产品表以及产品添加更新 GOODLUCK的产品表:PRODUCTS(PNO,PNAME,PR,QTY) 从该表可以知: PNO->PNAME、PR、QTY 所以这个表只能按产品编号增加行,也就是说:有新产品了,可以在这个表中…

聊聊 C# 方法重载的底层玩法

最近在看 C 的方法重载&#xff0c;我就在想 C# 中的重载底层是怎么玩的&#xff0c;很多朋友应该知道 C 是不支持重载的&#xff0c;比如下面的代码就会报错。#include <stdio.h>int say() {return 1; } int say(int i) {return i; }int main() {say(10);return 0; }从错…

Nginx图片剪裁模块探究 http_image_filter_module

#yum install -y gd-devel Install add http_image_filter_module Module #./configure --prefix/usr/local/nginx_image_filter/ --with-http_image_filter_module #make && make install use: off:关闭模块处理 test:确保图片是jpeg gif png否则返415错误 size:输出有…

三、我的/登录 栏制作《仿淘票票系统前后端完全制作(除支付外)》

我的页分为登录、注册、我的&#xff0c;如果登录了那么就显示我的页面否则显示登录页。 登录页&#xff1a; 我的页&#xff1a; 一、登录页制作 1.1 登录头制作 首先我们创建一个行&#xff0c;命名为登录块&#xff0c;设置高度为包裹&#xff1a; 之后将会在这个行中…

【NOIP2010】【P1317】乌龟棋

似乎很像搜索的DP&#xff08;应该也可以用搜索写&#xff09; 原题&#xff1a; 小明过生日的时候&#xff0c;爸爸送给他一副乌龟棋当作礼物。乌龟棋的棋盘是一行N 个格子&#xff0c;每个格子上一个分数&#xff08;非负整数&#xff09;。棋盘第1格是唯一的起点&#xff0c…

mysql添加普通用户用于管理单一数据库

2019独角兽企业重金招聘Python工程师标准>>> 使用phpmyadmin进行操作 创建用户&#xff0c;输入密码 关键选择&#xff1a;勾选 Create database with same name and grant all privileges 其他权限一律不要勾选 转载于:https://my.oschina.net/u/2485194/blog/5491…

C# 11 新特性:接口中的静态抽象成员

之前假设我们有一个非常复杂的数学运算方法&#xff1a;public static int Calc(int x, int y) > x y;但是&#xff0c;上述方法只能支持int类型。如果需要传入其它数字类型&#xff0c;需要再次定义&#xff1a;public static double Calc(double x, double y) > x y;…

四、一般页面制作《仿淘票票系统前后端完全制作(除支付外)》

一、播放影片影院页制作 上一节已经做完了首页所有栏目内容&#xff0c;那么点击购票后应该出现对应有购票的影院&#xff0c;选择影院后进入购买票务页。 首先新建一个页面命名为播放该影片的影院&#xff1a; 接着复制首页中的标题栏到播放影片的影院页中&#xff0c;此时…

700行无用 纯 CSS 祝考生 金榜高粽《1_bit 的无用 CSS 代码 》

今天才想起来这回事&#xff0c;没办法就急急忙忙的赶工一下&#xff0c;接下来我就画一下这个海报试试手了&#xff1a; 一、背景制作 1.1 准备工作 先给整个网页制作一个布局吧&#xff0c;直接 flex 搞定&#xff0c;并且使其居中 justify-content、align-items 都要赋值为…

【CASS精品教程】win10安装CAD+CASS过程中出现的错误问题及解决办法集锦

文章目录 1. 无法安装2. 提示DWF Viewer、AutoCAD2008未安装3. 安装完成后一直出现如下窗口4. Win10 64位 cass9.1+cad2008打开后出现Frame主框架程序没有加载。5. 注册程序无法运行,提示由于无法安装此service pack。1. 无法安装 解决办法:开启Administrator,以管理员身份…

(01).NET MAUI实战 建项目

1.概要本系列文章将会针对.NET MAUI实战开发的一些内容&#xff0c;会长期不间断更新我了解学习到的内容。当学习新的软件开发技术时&#xff0c;都会从基础建项目开始MAUI也不例外。ref&#xff1a;https://docs.microsoft.com/zh-cn/dotnet/maui/get-started/first-app?pivo…

Android Studio 引用aar包 更新后找不到新增的方法问题(踩坑)

明明已经更新了aar文件&#xff0c;但死活找不到新增的方法&#xff0c;代码提示里也找不到新增的方法名&#xff0c;但编译能编译&#xff0c;运行也一切正常&#xff0c;只是IDE一直提示错误&#xff0c;有强迫症的小猿好几天都想不明白。 其间有高手指教说&#xff1a;“那…

Asp.net 批量导入Excel用户数据功能加强版

平时我们用Asp.net导入用户&#xff0c;一般是提供一个用户Excel表的模板&#xff0c;实际导入数据时并非有些人愿意按你的模版制表&#xff0c;因此对Asp.net导入功能进行加强&#xff0c;可以导入非模版化的Excel数据&#xff0c;并且支持一次处理多个Sheet表&#xff0c;方便…

C#+Signalr+Vue实现B站视频自动回复评论,当一个最懒程序员!

Part1前言前几天刷到了程序员鱼皮的自动回复视频评论的视频&#xff0c;于是我也想来试试&#xff01;Part2开始第一步打开想要自动回复评论的视频url&#xff0c;打开调试模式&#xff01;然后找到可以触发评论的网络请求可以看到我们的oid是可以唯一确定视频的id,那么这个oid…

一张图不用,纯CSS 做个生日贺卡

朋友生日了&#xff0c;直接画&#xff0c;炫技并且表示本人闲的全身疼才会去拿CSS画画&#xff0c;以此嘲弄对方的加班&#xff1a; 既然贺卡做出来了&#xff0c;那就顺便介绍一下贺卡制作流程吧&#xff0c;其实也不是什么技术&#xff0c;也就是CSS 拼拼拼就可以了&#…

Android Notification总结

Android Notification总结 目录[-] &#xfeff;&#xfeff;一、通知的主要功能 二、通知简介 三、通知的使用流程 四、使用NotificationCompat.Builder设置通知的属性&#xff1a; 五、管理通知 &#xfeff;&#xfeff;一、通知的主要功能 显示接收到短消息、即使消息等信…

五、登录页倒计时制作《仿淘票票系统前后端完全制作(除支付外)》

一、登录功能的实现 首先打开在线编辑器进入我们的项目&#xff1a;https://editor.ivx.cn/ 上一节我们已经完成了基本页面的制作&#xff0c;在本节中&#xff0c;我们将会开始完成登录功能的实现。 实现登录功能需要增加一个用户组件&#xff1a; 这个用户组件是需要选择…

【MATLAB统计分析与应用100】案例001:matlab使用Importdata函数导入文本txt数据

配套实验数据包下载&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1T4zUFmCIOCKIisdGRQPddg?pwdddi1 文章目录1. 调用importdata函数读取文件中的数据2. 调用importdata函数读取文件数据&#xff0c;返回结构体变量x3. 调用importdata函数读取文件中的数据&#xff0c…

MAUI 入门教程系列(3.多目标平台)

前言如果您是第一次创建MAUI项目, 并且在之前也并没有接触过Xamarin.Forms应用, 或许你并不知道MAUI的强大优势, 在原来的Xamarin.Forms当中, 我们基于不同平台的项目他们是单独维护的。如下所示:因为如此, 你需要维护不同平台的项目。包括每个项目当中包含的资源、图像、属性定…