浮动—春联(文字竖直排列)

<div id="main"><div class="top">李白</div><div class="left">明月几时有</div><div class="right">把酒问青天</div>
</div>

1
#main{ 2 height: 540px; 3 width: 400px; 4 margin:0 auto; 5 border:1px solid black; 6 overflow: hidden; 7 } 8 .top{ 9 height: 60px; 10 width: 150px; 11 margin:0 auto; 12 margin-bottom: 10px; 13 line-height: 50px; 14 font-size: 35px; 15 text-align: center; 16 letter-spacing: 10px; 17 background:red; 18 } 19 .left,.right{ 20 float:left; 21 height:480px; 22 width:100px; 23 padding-left: 15px; 24 font-size: 65px; 25 word-wrap:break-word; 26 letter-spacing: 50px; 27 background:red; 28 box-sizing:border-box; 29 } 30 .right{ 31 float: right; 32 33 }

!!!竖直排列!!!

可以利用文字的大小,文字间距,行高,padding来保证文字是竖行排列的!

转载于:https://www.cnblogs.com/xmlearning/p/7887276.html

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

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

相关文章

UE 动画系统框架介绍及使用

UE 动画系统介绍 UE 动画系统介绍 UE 动画系统介绍一 动画基础介绍1.1 骨架1.2 骨架网格体1.3 动画序列1.4 动画蓝图二 状态机三 动画混合Blend3.1 动画混合3.2 混合空间BlendSpace3.3 惯性混合四 瞄准偏移AimOffset五 叠加动画Additive Animation六 动画蒙太奇 Animation Mont…

了解下广告计费模式CPC、CPA和CPM

目前各大广告平台最常见的广告计费模式分别有CPC、CPA、CPM。例如知乎、头条、百度、腾讯等各类平台投放广告&#xff0c;基本都离不开这几种广告计费方式。由于博客流量日渐见好&#xff0c;最近也申请了谷歌的广告的流量主&#xff0c;所以有必要了解下这几种广告模式&#x…

JUnit 5 –设置

2015年11月&#xff0c; JUnit Lambda团队展示了他们的原型 。 此后&#xff0c;该项目更名为JUnit 5&#xff0c;并于2016年2月发布了Alpha版本。我们将在一系列简短文章中对其进行探讨&#xff1a; 设定 基本 建筑 条件 注射 … 本章讨论JUnit 5的设置&#xff0c;以便…

Python非递归实现二叉树的后续遍历

leetcode 145. Binary Tree Postorder Traversal 思路一&#xff1a; 使用一个栈stack保存经过的根结点&#xff0c;另一个栈flag保存每个结点的右子树是否遍历&#xff1b;如果根结点存在&#xff0c;结点入栈&#xff0c;并把结点的右子树遍历结果置为0&#xff0c;代表没遍历…

删除对象中值为 null 或者 undefined 的属性

针对对象属性的操作&#xff0c;往往用到遍历。如何遍历对象的所有属性&#xff0c;有一种方法是 Object.entries(obj) 将属性名添加到一个数组中&#xff0c;然后来操作数组。 第一种方法 const removeNullUndefined (obj) > Object.entries(obj).reduce((a, [k, v]) &g…

《Linux命令行与shell脚本编程大全 第3版》Linux命令行---55

以下为阅读《Linux命令行与shell脚本编程大全 第3版》的读书笔记&#xff0c;为了方便记录&#xff0c;特地与书的内容保持同步&#xff0c;特意做成一节一次随笔&#xff0c;特记录如下&#xff1a;转载于:https://www.cnblogs.com/guochaoxxl/p/7888785.html

如何在 VS Code 中创建自己的代码片段

在项目开发中&#xff0c;我们经常需要新建文件&#xff0c;而这些初始化这些文件又需要敲出很多相同的代码&#xff0c;比如我们新建一个 .vue 的文件&#xff0c;需要我们在写正式的功能代码之前&#xff0c;完成以下初始化代码&#xff1a; <script setup langts> &l…

java基础(第七章课后作业)03

1 package shuzu;2 3 import java.util.Scanner;4 5 public class ZuoYe03 {6 7 public static void main(String[] args) {8 Scanner meng00new Scanner(System.in);9 int []numsnew int[10];//定义一个输入10个整数的数组 10 int []countnew int…

如何使用 Apifox 来管理测试你的接口

日常开发&#xff0c;你是使用 Postman 来测试接口&#xff0c;还是用接口文档生成工具 Swagger&#xff0c;最近发现了一个很好用的工具 Apifox&#xff0c;集API 文档、API 调试、API Mock、API 自动化测试功能为一体&#xff0c;兼客户端和 Web 端的强大的功能。 主要界面如…

登录之后更新导航

用上下文处理器app_context_processor定义函数获取session中保存的值返回字典 app.context_processor def mycontext():username session.get(user)if username:return {username:username}else:return {} 在父模板中更新导航&#xff0c;插入登录状态判断代码。注意用{% ... …

完善系统的最后一公里,增加系统日志功能

当我们在开发一个系统的时候&#xff0c;随着规划的功能越来越多&#xff0c;按照复杂度和稳定性相反的原则&#xff0c;为了保证系统能够按照我们设想的目标运行&#xff0c;我们需要对系统的运行状况进行监控。 那么什么时候介入监控比较好&#xff1f;在系统功能开发的前期…

java泛型面试_Java泛型面试问题

java泛型面试Java面试中的通用面试问题在相当长的时间内在Java 5周围越来越普遍&#xff0c;许多应用程序都转移到Java 5上&#xff0c;并且几乎所有新的Java开发都发生在Tiger&#xff08;Java 5的代号&#xff09;上。 泛型和Java 5功能&#xff08;例如Enum&#xff09;的重…

Python 连接MongoDB并比较两个字符串相似度的简单示例

本文介绍一个示例&#xff1a;使用 pymongo 连接 MongoDB&#xff0c;查询MongoDB中的 字符串 记录&#xff0c;并比较字符串之间的相似度。 一&#xff0c;Python连接MongoDB 大致步骤&#xff1a;创建MongoClient---> 获取 DataBase --->获取Collection&#xff0c;代码…

Vue3 实现网页背景水印功能

经常有一些公司和组织出于系统文件或信息安全保密的需要&#xff0c;需要在系统网页上增加带有个人标识&#xff08;系统账号或个人信息&#xff09;的水印&#xff0c;可以简单防止截图外传首先我们来看这样一个水印功能的实现思路&#xff0c;通常是在我们原有的网页上附上一…

部署微服务– Spring Boot fatjar到Amazon Elastic Beanstalk

最近&#xff0c;我正在研究概念验证的Web应用程序&#xff0c;我想将其部署到公共云以进行快速演示。 我决定使用Amazon&#xff0c;因为我已经有过使用它的经验。 亚马逊提供了几种不同的方式来部署Java Web应用程序。 EC2使我们可以灵活地在机箱上安装和配置任何我们想要的…

洛谷P2286 [HNOI2004]宠物收养场

题目描述 凡凡开了一间宠物收养场。收养场提供两种服务&#xff1a;收养被主人遗弃的宠物和让新的主人领养这些宠物。 每个领养者都希望领养到自己满意的宠物&#xff0c;凡凡根据领养者的要求通过他自己发明的一个特殊的公式&#xff0c;得出该领养者希望领养的宠物的特点值a&…

Vue 自定义指令可以实现哪些有用的功能

Vue 有一些很实用的指令 v-show v-if v-text v-html v-bind v-on 可以帮助我们实现很复杂的功能&#xff0c;同时它还开辟了钩子供我们自己实现自定义指令。根据自己平时开发总结了一些可以通过指令实现的功能场景&#xff1a;控制页面元素显示与隐藏&#xff0c;可用作控制权限…

正三角形的外接圆面积

描述给你正三角形的边长&#xff0c;pi3.1415926 ,求正三角形的外接圆面积。 输入只有一组测试数据 第一行输入一个整数n(1<n<1000)表示接下来要输入n个边长m(1.0<m<1000.0)输出输出每个正三角形的外接圆面积&#xff0c;保留两位小数&#xff0c;每个面积单独占一…

在线答卷系统的前端设计与数据库系统的设计与实现

如果要你实现一个在线的答题系统&#xff0c;你能想到它该具有哪些功能&#xff1f;当我接到这样一个需求的时候&#xff0c;脑海中立马能想到的就是它有录入题库的功能&#xff0c;创建试卷后可以从题库选择试题&#xff0c;并且可以针对试题进行分数的设置和排序。试卷发布后…

jgroups传输消息_使用JGroups进行ElasticMQ消息复制

jgroups传输消息ElasticMQ是一个消息服务器&#xff0c;具有Scala&#xff0c;Java和与Amazon SQS兼容的接口。 它通过跨服务器群集复制消息来支持有保证的消息传递&#xff0c;并通过日志记录实现消息持久性。 消息复制是ElasticMQ的核心功能之一。 但是&#xff0c;如果您看一…