前言

展示前端页面：以下是本篇文章正文内容，下面案例可供参考

一、vue是什么？

示例：vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架；Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互

二、使用步骤

1.创建页面并配置路由

代码如下（示例）：

import Wt from '../views/Wt.vue'
const routes = [{path: '/wt',name: 'wt',component: Wt},]

2.插入需要的图片

代码如下（示例）：

在public文件夹下创建img文件夹，图片存入img文件夹下
模板渲染图片时代码如下（示例）：

<img src="img/preview.jpg">

3.模板渲染

<div><div class="a"><div><img src="img/preview.jpg" class="b"></div><div><div class="c"><h3>舞台剧东野圭吾【虚无<br>的十字架】</h3></div><div class="c"><font color='gray'>舞台剧</font> </div><div class="c"><h3>￥990-￥1990.0</h3></div><div class="c"><font color='gray'>202010.18-2020.10.30</font></div></div></div><div class="a"><div class="e"><font size='4'>上海市1862时尚艺术中心</font><br><font color='gray' size='3'>滨江大道1777号</font></div><div class="d"><i class="el-icon-location"></i></div></div><div class="f"><div><div><button class="g">新人红包</button></div><div><font color='white' size='5'>￥10</font> </div></div><div class="h"><div class="i"><font color='white' size='4'>满990可用</font></div><div class="i"><font color='white'>2020.05.09-2020.06.18</font> </div></div><div class="k"><button class="j">立即领取</button></div></div><div><h1>演出简介</h1><font color='gray'>Touki Delphine剧团擅长制作音乐剧场作品，致力于歌颂平凡人的伟大之处。成员们相信大多数人是友善的，并在平凡人的每一点日常努力当中发掘出诗意。他们最欣赏的艺术家包括：Michael Johansson, Marcel Duchamp和David Byrne，这些艺术家都从日常物件与生活场景中获取灵感。</font></div><div class="a"><div class="l"><font size='6'><i class="el-icon-star-off"></i></font> </div><div class="l"><font size='6'><i class="el-icon-headset"></i></font></div><div ><button class="m">立即购买</button></div></div></div>

4.css样式

代码如下（示例）：

.a{display: flex;width: 100%;height: 100%;}.b{width: 160px;height: 190px;}.c{text-align: left;margin-left: 20px;}.d{width: calc(100% - 230px);height: 70px;text-align: right;font-size: 30px;}.e{text-align: left;width: 230px;}.f{background: red;width: 100%;height: 100%;display: flex;}.g{background: orange;color: white;border-top-right-radius: 10px;border-bottom-right-radius: 10px;}.h{text-align: left;}.i{margin-top: 10px;margin-left: 20px;}.j{border-radius: 50px;width: 100px;height: 40px;border-color: white;background: red;color: white;}.k{width: calc(100% - 260px);text-align: right;padding-top: 10px;}.l{margin-right: 50px;padding-top: 10px;}.m{width: 210px;height: 50px;background: red;color: white;}

总结

以上就是前端页面展示了一个舞台剧页面的效果。

作业---舞台剧前端页面显示相关推荐

java后台如何给数据给前端_JAVA后台关于如何从后台传递信息在jsp前端页面显示...
JAVA后台关于如何从后台传递信息在jsp前端页面显示首先,博主今天为了将后台的信息传递到前台,废了不少的脑筋,一开始,博主采用了request.setAttribute()的方法,来实现的,具体 ...
long型长整数字在前端页面显示异常及其解决方法
文章目录 1.引子 2.解决问题 (1)初试EL表达式取long型数值 (2)再探EL表达式取字符串格式long型数值 (3)最后一试---给EL表达式加引号 3.总结 1.引子在做项目中,发现了一 ...
前端页面显示的时间格式为：2022-03-18T01:46:08.000+00:00 如何转换为：年-月-日时:分:秒？
解决办法: 第一种办法:后端格式处理,在后端转数据格式为字符串类型第二种办法:前端格式处理, ElementUI 中 Table-column Attributes 列属性中有一个 formatte ...
web页面注册验证，实现从后端动态获取证码，到前端页面显示
文章目录前言一.创建生成验证码的工具类二.创建Servlet,将生成的验证码发送到前端页面三.从前端页面接收验证码四.编写js函数,实现点一下获取新的验证码前言验证码模板,可供参考. 一 ...
php生成二维码并返回给前端页面显示
一.背景需求是需要在后台点击生成二维码,然后这个二维码不上传到服务器.我们需要把二维码返回给前台页面,并且显示出来. 二.实现过程 1.生成二维码这里使用的是qrcode这个第三方.网上百度,教程 ...
Spring Security总结之如何让认证失败消息自定义在前端页面显示（一）
采用springboot+thymeleaf 前端登录页面代码 <form action="/doLogin" method="post">用户名: ...
python前端页面显示_Python flask框架如何显示图像到web页面
代码如下 webfig1.py from flask import Flask from flask import render_template import matplotlib.pyplot a ...
前端页面显示图片的多种方法小结
对我使用过的前端显示图片的方法进行小总结,作为以后参考的依据. 说在前面的话:关于这几种实现方式,有可能原理是一样的,而且肯定有更优的实现方式.因为时间关系我没有进行深入研究,如果哪里写的不对,请多多 ...
手动搭建的VGG16网络结构训练数据和使用ResNet50微调（迁移学习）训练数据对比（图像预测+前端页面显示）
文章目录 1.VGG16训练结果: 2.微调ResNet50之后的训练结果: 3.结果分析: 4.实验效果: (1)VGG16模型预测的结果: (2)在ResNet50微调之后预测的效果: 5.相关代 ...
前端页面显示图片jpg和png
如何选择jpg和png 当图片要和背景融为一体的时候用png(透明),不融为一体用jpg(不透明)比如轮播

作业---舞台剧前端页面显示

文章目录

前言

一、vue是什么？

二、使用步骤

1.创建页面并配置路由

2.插入需要的图片

3.模板渲染

4.css样式

总结

作业---舞台剧前端页面显示相关推荐

最新文章

热门文章

作业---舞台剧 前端页面显示

文章目录

前言

一、vue是什么？

二、使用步骤

1.创建页面并配置路由

2.插入需要的图片

3.模板渲染

4.css样式

总结

作业---舞台剧 前端页面显示相关推荐

最新文章

热门文章

作业---舞台剧前端页面显示

作业---舞台剧前端页面显示相关推荐