首页 > 其他分享 >头像和消息组件css实现思路

头像和消息组件css实现思路

时间:2024-01-27 21:55:26浏览次数:24  
标签:middle color align height 头像 组件 css 200px

vertical-align

布局小技巧

示例

修改后:

示例-修改后

实现代码(可以用于组装头像和消息):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <span>xxxx</span>
        <img src="https://img2.imgtp.com/2024/01/27/MjRKnVp0.jpg">
    </div>
</body>
</html>
<style>
    img{
        width: 50px;
        vertical-align: middle;
    }
    div{
        font-size: 0;
        text-align: center;
        height: 200px;
        width: 200px;
        background-color: red;
        line-height: 200px;
    }
    span{
        background-color: yellow;
        font-size: 50px;
        vertical-align: middle;
    }
</style>

标签:middle,color,align,height,头像,组件,css,200px
From: https://www.cnblogs.com/liuguangshuo/p/17991987

相关文章

  • 如何改Maven Dependencies的源码,如何把springboot组件的源码改造后使用
    由于springboot提供的源码有些地方不太符合预期,所以需要改动改动,这里就会说到,如何改MavenDependencies的源码。如何把springboot组件的源码改造后使用。v修改源码的几种方式直接在自己工程中建同包同类名的类进行替换采用@Primary注解排除需要替换的jar包中的类@Bean......
  • 004*:组件的生命周期(初始化、进行中、销毁)
    目录 正文1:生命周期-初始化/*目标1:始化生命周期的执行过程2:理解生命周期的各个钩子函数的作用*/importReact,{Component}from'react'exportdefaultclassLifeCycleComponentextendsComponent{//构造函数constructor(props){super(p......
  • 鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Checkbox组件
    鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Checkbox组件一、操作环境操作系统: Windows10专业版、IDE:DevEcoStudio3.1、SDK:HarmonyOS3.1二、Checkbox组件提供多选框组件,通常用于某选项的打开或关闭。子组件无。接口Checkbox(options?:{name?:string,group?:string})参数参数......
  • 在K8S中各个组件及其作用?
    Kubernetes(简称K8s)是一个强大的容器编排系统,其主要组件及其作用如下:kube-apiserver:集群的主入口点,提供了RESTfulAPI接口供用户或内部组件与集群进行交互。它负责验证和配置数据,并将所有请求持久化存储在etcd中。etcd:分布式键值存储系统,用于保存集群的所有关键配置数据......
  • K8S中组件是如何实现高可用?
    在Kubernetes(K8S)中,各个组件实现高可用的主要方法包括冗余部署和自动故障恢复机制。以下是Kubernetes主要组件的高可用性实现方式:kube-apiserver:高可用策略:通过在多个节点上部署多个API服务器实例,并使用负载均衡器(如云服务商提供的负载均衡或自建的负载均衡解决方案如HAProxy......
  • 微信小程序中使用Vant Weapp组件库
    【快速上手-VantWeapp(gitee.io)】【node版本对应的npm版本表-菜小鱼~-博客园(cnblogs.com)】【报错npmERR!Acompletelogofthisruncanbefoundin:npmERR!-CSDN博客】【解决:npminstall报错‘Theoperationwasrejectedbyyouroperatingsystem‘-C......
  • 使用debezium-connector-jdbc组件完成数据同步(io.debezium.connector.jdbc.JdbcSinkCo
    1.情景展示在网络上几乎找不到关于debezium-connector-jdbc插件的博客文章,基本上都在吹io.confluent.connect.jdbc.JdbcSinkConnector,由于一开始对数据同步插件并不了解,导致自己走了不少弯路。生产数据组件:debezium-connector-mysql、debezium-connector-oracle等数据库组件,通......
  • el-input el-tree组件 问题:blur先于click触发怎么解决
    页面构造 使用mousedowm触发比blur更早,因为是组件所以得使用native,prevent阻止默认事件然后this.$refs.parentInput.focus();让焦点保持,点击展开或关闭箭头时候让焦点存在,点击节点的时候让页面关闭要兼容筛选效果,做了一个临时tempNode用于存放之前选择的对象,这样当在未进......
  • css 的三种元素
    css中包含3中元素:块状元素、内联元素(又叫行内元素)和内联块状元素。一、常用的块级元素(block):<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>主要特点:display:block1、每个块级元素独占一行。2、元素的高度、宽度、行高以及顶和底边......
  • 使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv
    使用命令行方式搭建uni-app+Vue3+Typescript+Pinia+Vite+TailwindCSS+uv-ui开发脚手架项目代码以上传至码云,项目地址:gitee.com/breezefaith…目录一、前言近日心血来潮想做一个开源项目,目标是做一款可以适配多端、功能完备的模板工程,包含后台管理系统和前台......