![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 80
AnitaOvO
hang in there,so far so good
展开
-
Ajax实现聊天机器人接口的调用
文章目录前言一、UI布局二、用户内容渲染到聊天窗口三、获取聊天机器人消息1.jquery中的ajax2.调用机器人接口四、将机器人的聊天内容转化为语音播放五、使用回车发送消息总结前言本文介绍如何用ajax调用聊天机器人接口,将信息显示到聊天框中,语音播放机器人消息。一、UI布局聊天框分为头部Header、中间聊天区域、底部Footer消息编辑三大部分。在聊天区域,每条信息都放到每个li中,机器人消息左浮动,用户消息右浮动。这里给出html代码,方便后面理解对标签的操作<body&g原创 2021-08-06 23:30:23 · 959 阅读 · 0 评论 -
用css实现翻转卡片之登录注册
文章目录前言一、翻转卡片思路二、代码实现总结前言本文用css实现登录注册的翻转卡片效果,点击登录翻转到登录卡片,点击注册则翻转到注册卡片。效果如下:提示:以下是本篇文章正文内容,下面案例可供参考一、翻转卡片思路1.首先写两个盒子,分别是login(登录)、signup(注册),将两个盒子用绝对定位放置于中间并重叠。2.先将signup盒子旋转-180deg,接着用backface-visibility:hidden;来隐藏掉翻转到背面的signup盒子。3.添加点击事件,当点击登录时,将原创 2021-06-21 17:26:25 · 2536 阅读 · 1 评论 -
Tab导航栏切换的实现
文章目录前言一、自定义属性1.自定义属性的目的2.自定义属性的操作3.规范二、导航栏的实现1.静态样式2.JS实现交互总结前言Tab导航栏切换在网页场景中十分常见,本文将介绍如何用js来实现交互的导航栏。分析:1.当鼠标点击上面相应的选项卡(tab),下面盒子的内容跟随变化2.点击某一个选项,当前这一个底色会变成红色,字体变白色,其余不变。3.下面的模块显示内容需要和上面选项卡一一对应,互相匹配。思路:可以给选项卡添加自定义属性(索引号index),属性值从0开始编号。当点击某个选项卡,下原创 2021-06-19 11:18:58 · 6730 阅读 · 2 评论 -
用css实现轮播标题文字
文章目录一、实现思路二、代码总结本文介绍了用css和js来实现一个具有轮播效果的标题,最终结果如下:一、实现思路css部分:将要轮播的文字赋予绝对定位,并且对盒子增加移除隐藏,overflow:hidden。js部分:1.设置一个定时器setInterval函数,每2000毫秒执行一次函数内容,(setInterval和setTimeOut是有区别的,前者是在间隔指定时间后执行,后者是只会执行一次)2.在函数中获取span[data-show],span[data-up]标签元素(da原创 2021-06-18 17:16:57 · 2034 阅读 · 0 评论 -
vue+ElementUI日期选择器实现禁用多时间段
文章目录前言一、引入elementui1.npm下载插件2.引入elementUI2.1 全局引用2.2 按需引用,需要下载babel2.3引入ElementUI的日期选择器DatePicker二、实现多时间段禁用总结前言本文将讲解如何在vue中使用elementui的日期选择器,如何同时禁用多个时间段,以及终止日期不能选择起始日期之前的日期。这里以订房选择日期为例,效果如下。1.选择起始日期(已被预订的日期不能选):2.选择终止日期(入住日期是6/11,则退房日期不能选11号之前):一、引原创 2021-06-06 15:32:19 · 3352 阅读 · 0 评论 -
css实现八种垂直居中方式
文章目录一、使用flex布局实现二、margin+transform实现三、绝对定位+translate四、绝对定位+margin:auto五、grid网格布局实现六、使用table-cell实现七、inline-block+vertical-align实现八、绝对定位+负margin值总结先给出html,下面用八种方式来实现垂直居中。<body> <div class="box"> <div class="contain">原创 2021-05-25 16:45:10 · 338 阅读 · 0 评论 -
用vue实现消息弹框
一、弹框组件1.首先需要写一个弹框组件model.vue,包括遮罩层及弹框本身。//html部分<template> <div class="model"> <div class="mask">123</div> <div class="model-dialog"> <div class="model-header"> <span>提示</span>原创 2021-05-24 16:56:15 · 14079 阅读 · 0 评论