- 【bug记录5】flex横向布局时子元素设置宽度无效
音仔小瓜皮
bug记录CSS学习笔记bugcsscss3
一、问题背景对父元素list使用了flex布局之后,尝试将其子元素item固定宽度,但发现宽度设置不生效并且实际宽度被压缩了。具体的css代码如下:.list{display:flex;align-items:center;justify-content:space-between;//没设置宽度,因为想适配子元素的总宽度height:64px;padding:16px15px;overflow-
- 前端实现奥运五环图标
小刘|
前端
htmlDocumentcssbody{display:flex;justify-content:center;height:100vh;align-items:center;transform-style:preserve-3d;}.olympic-rings{width:800px;height:400px;display:flex;flex-wrap:wrap;justify-content
- 《网页中的绚丽爱意:I LOVE YOU 的动画魔法》
小刘|
csscss3javascript
以下是代码实现Document*{padding:0px;margin:0px;}body{display:flex;align-items:center;height:1000px;justify-content:space-between;background:black;}.container{text-align:center;}span{font-size:20vh;color:blue
- uni-app:文字竖直排列,并且在父级view中水平竖直对齐
25号底片~
uni-app前端uni-appjavascript前端
一、效果二、代码这是竖直排列的文字exportdefault{data(){return{}},methods:{},};.parent{display:flex;align-items:center;/*竖直居中*/justify-content:center;/*水平居中*/height:500px;/*父级高度设为100%,或指定一个固定高度*/border:1pxsolidblack;}.
- 卡片翻折效果
优雅的大白鹅
项目实用小方法前端css
{newArray(4).fill(1)?.map(()=>{return(cardcard);})}.cards{display:flex;justify-content:space-around;}.card{position:relative;}.card1,.card2{width:200px;height:220px;background-color:pink;position:abso
- 【css】 CSS之经典的三栏布局和水平垂直居中
小墨鱼_z
csscss前端
1、三栏布局问题:⾼度固定,左右两侧的盒⼦宽度为200px,中间⾃适应解决float实现position实现flex实现2、水平垂直居中行内块元素1.line-heighttext-align:center2.display:flex;justify-content:center;align-items:center;块级元素1.position+margin清楚⼦元素的宽⾼2.position+
- css动画实现转盘旋转,1.使用css3实现大转盘
小仙元
css动画实现转盘旋转
先上效果图,如图所示:最终效果第一步:画个父容器+12个子容器(扇叶)将父容器居中,子容器使用absolute定位,基本代码如下:html>body{display:flex;height:95vh;align-items:center;justify-content:center;}.container{position:relative;width:150px;height:150px;bac
- 移动端ipad布局适配
G24gg
cssjavascript前端
.wrapper{display:flex;align-items:center;justify-content:center;height:100%;}/*ipad移动端布局适配*/@media(min-width:768px){:deep(.yds-input){width:500px!important;border-radius:45px!important;/*其他样式规则*/}/*按钮
- 弹性盒子display:flex——justify-content主轴方向对齐方式、align-items交叉轴对齐方式、 flex-direction修改主轴方向、flex-wrap换行
钟意冉冉
前端css3html5
1、css3弹性盒子CSS3弹性盒(FlexibleBox或flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。2、弹性盒子属性值display:flex或inline-flexjustify-content(主轴方向的对齐方式)flex-start默
- 原神4.8版本重点培养和抽到角色数据表:修改了添加倒计时.隐藏了抽到角色数据表删除按钮、备注列和选择列
与妖为邻
前端htmljavascript
原神4.8版本抽到角色和重点培养数据表*{margin:0;padding:0;box-sizing:border-box;body{background:#1c3b5c;}a{color:#e6a23c;}}/*头部样式*/header{width:99vw;height:40px;display:flex;justify-content:space-between;align-items:ce
- html+css+js贪吃蛇游戏
睿智的海鸥
csshtml前端javascriptcss3
贪吃蛇游戏四个按钮控制方向源代码在图片后面点赞❤️关注收藏⭐️互粉必回源代码贪吃蛇游戏body{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#f5f5f5;margin:0;font-family:Arial,sans-serif;}.game-container{widt
- HTML5+CSS3小实例:抽屉式相册
艾恩小灰灰
HTML5+CSS3小实例:抽屉式相册技术栈:HTML+CSS效果:源码:抽屉式相册*{/*初始化取消内外边距*/margin:0;padding:0;}body{/*100%窗口高度*/height:100vh;/*弹性布局水平垂直居中*/display:flex;justify-content:center;align-items:center;background-color:#000;}.
- 【HTML/CSS】flex布局绘制骰子
CranberryPancake
HTML/CSScssflex
参考博文CSSflex弹性盒父级元素display:flex——子元素默认变成block,float失效flex-direction主轴方向row(默认)/row-reverse/column/column-reversejustify-content(沿着主轴方向):center/flex-start/flex-endalign-items(垂直主轴方向):center/flex-start/f
- HTML5+CSS3小实例:3D分层图像悬停效果
艾恩小灰灰
实例:3D分层图像悬停效果技术栈:HTML+CSS效果:源码:【html】3D分层图像悬停效果【css】*{/*初始化*/margin:0;padding:0;}body{/*100%窗口高度*/height:100vh;/*弹性布局居中*/display:flex;justify-content:center;align-items:center;overflow:hidden;/*渐变背景*/
- css3-水波浪球起伏效果
正在修炼web的小芮
css3css3
body样式css样式*{margin:0;padding:0;list-style:none;}html,body{width:100%;height:100%;}body{display:grid;justify-content:center;align-content:center;background-color:#fff;}.circle{width:150px;height:150px
- 【微信小程序】搜索框样式
Pulseum
微信小程序微信小程序小程序css
实现微信小程序搜索框样式搜索框效果:代码实现:(复制可用)index.wxml:搜索index.wxss:/*pages/index/index.wxss*/.search{display:flex;align-items:center;justify-content:center;height:90rpx;background-color:#16a0f8;}.search.search_in{d
- 如何让elementUI的icon图标伪元素相对容器居中
啊森森啊
elementui前端javascript
这里用一个flex简单方法居中对齐,span作为icon伪元素的容器span[class*="el-icon-"]{display:flex;justify-content:center;align-items:center;//假设容器宽高50pxwidth50pxheight50px}
- 情人节html代码
尘中928
编程#htmlhtmlcss
一、一个带有心形和祝福消息的页面如果想在网页上创建一个简单的情人节祝福,可以使用HTML和CSS。以下是一个简单的例子,它创建了一个带有心形和祝福消息的页面:情人节快乐body{font-family:Arial,sans-serif;background-color:#f2f2f2;display:flex;justify-content:center;align-items:center;he
- 移动端基础:flex布局
象更
csscss3前端
flex布局原理弹性布局,任何容器都可以指定flex布局当父类设为flex布局之后子类的float、clear、vertical-align属性将失效采用flex布局的元素,称为flex容器所有子元素称为容器成员,简称‘项目’。可以横向排列也可以纵向排列通过给父类添加flex属性,控制子盒子位置和排列方式属性作用flex-direction设置主轴方向justify-content设置主轴上子元素
- HTML+CSS炫酷效果(小伙伴赶紧收藏起来吧)
小小锋叔叔
Web炫酷效果csshtmlcss3
制作不易(点赞加关注哦)目录1.实现奥运徽效果2.实现3D效果3.翻开葵花宝典4.实现漂浮文字(动图)5.手机充电特效(动态)6.滚动时针7.立体相册1.实现奥运徽效果由于图片违规,就不给老铁发了哈亲自试试呗HTML如下奥运五环CSS如下body{/*弹性布局水平+垂直居中*/display:flex;justify-content:center;align-items:center;/*最小高度
- Css画一只皮卡丘
木子欢儿
csshtmlcss3jsnagios
皮卡丘*{margin:0;padding:0;box-sizing:border-box;}*::after{box-sizing:border-box;}*::before{box-sizing:border-box;}body{height:100vh;border:1pxsolidgreen;display:flex;justify-content:center;align-items:c
- js+css制作导航栏下划线跟随动画,自适应元素尺寸变化,Vue/Uniapp
千叶KE
javascriptvue.jscss
以前也写过一个差不多的,但上一个写的存在很多问题,尤其是css要使用justify-content:space-around才能正常计算下滑宽度,导致了在很多场景都不实用,其实那一天就想到更好的解决办法了,但是因为懒......就一直没更新文章......最终效果图↓1.使用Vue制作一个没有动画的初始导航栏HTML代码{{item}}JS代码exportdefault{data(){return
- CSS之水平垂直居中
大超-无痕
CSScss前端javascript
如何实现一个div的水平垂直居中contentflex布局.content-wrapper{width:400px;height:400px;background-color:lightskyblue;display:flex;justify-content:center;align-items:center;}transform.content-wrapper{width:400px;heigh
- flex布局与float布局
Faith丶信仰
前端javascriptcss
1、float前后2、flex布局.nav{display:flex;background-color:#f8f8f8;/*导航栏背景颜色*/}.nava{flex:1;display:flex;align-items:center;justify-content:center;padding:14px16px;text-decoration:none;color:#555555;/*导航栏文字颜
- 设置居中移动端显示文本偏上问题
小领袖
在有背景的view上Android手机文本显示偏上,iOS手机显示正常显示偏上.device-main-flag{height:30rpx;width:30rpx;background:#ff6e00;border-radius:6rpx;font-weight:bold;font-size:20rpx;color:#fff;display:flex;justify-content:center;
- 【布局技巧】Flex 布局下居中溢出滚动截断问题
在页面布局中,我们经常会遇到/使用这么一类常见的布局,也就是列表内容水平居中于容器中,像是这样:ul{width:500px;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;gap:10px;}效果如下:这里,外层的容器是定宽的,内层的flex-item也是定宽的。
- 用clip-path实现一个水波纹的字体
苏苏哇哈哈
1.实现效果GIF111.gif2.实现步骤2.1.写一个h2标签苏苏2.3.设置字体镂空body{margin:0;padding:0;display:flex;height:100vh;justify-content:center;align-items:center;background-color:#222;min-width:1200px;}h2{color:#fff;font-size
- #小程序 分享一个有趣轮播图特效
麦多馅饼
小程序小程序
因为最近在做一个智慧校园i小程序,写到学校概况页面,就想到这个动画,来分享一下一、先上图:不得不说,放上照片后既视感有点gaoxiao一、代码部分:{{name[index]}}.swiper-block{height:400rpx;width:100%;}.swiper-item{display:flex;flex-direction:column;justify-content:center;
- html+css 实现搜索框
温正实
csshtml前端
SearchMember/*PasteyourCSSstyleshere*/.search_member_container{width:calc(100%-20px);height:60px;position:fixed;top:60px;z-index:9999;display:flex;align-items:center;justify-content:center;}.search_co
- 蓝桥杯(Web大学组)2022国赛真题:新鲜的蔬菜
头发长出来了^
css前端蓝桥杯
主要是对flex的运用使用display:flex;justify-content:space-between;以及对其中单个子元素进行操作:align-self:center;align-self:end;.container{display:flex;justify-content:center;flex-wrap:wrap;width:960px;margin:0auto;}.item{di
- SQL的各种连接查询
xieke90
UNION ALLUNION外连接内连接JOIN
一、内连接
概念:内连接就是使用比较运算符根据每个表共有的列的值匹配两个表中的行。
内连接(join 或者inner join )
SQL语法:
select * fron
- java编程思想--复用类
百合不是茶
java继承代理组合final类
复用类看着标题都不知道是什么,再加上java编程思想翻译的比价难懂,所以知道现在才看这本软件界的奇书
一:组合语法:就是将对象的引用放到新类中即可
代码:
package com.wj.reuse;
/**
*
* @author Administrator 组
- [开源与生态系统]国产CPU的生态系统
comsci
cpu
计算机要从娃娃抓起...而孩子最喜欢玩游戏....
要让国产CPU在国内市场形成自己的生态系统和产业链,国家和企业就不能够忘记游戏这个非常关键的环节....
投入一些资金和资源,人力和政策,让游
- JVM内存区域划分Eden Space、Survivor Space、Tenured Gen,Perm Gen解释
商人shang
jvm内存
jvm区域总体分两类,heap区和非heap区。heap区又分:Eden Space(伊甸园)、Survivor Space(幸存者区)、Tenured Gen(老年代-养老区)。 非heap区又分:Code Cache(代码缓存区)、Perm Gen(永久代)、Jvm Stack(java虚拟机栈)、Local Method Statck(本地方法栈)。
HotSpot虚拟机GC算法采用分代收
- 页面上调用 QQ
oloz
qq
<A href="tencent://message/?uin=707321921&Site=有事Q我&Menu=yes">
<img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:1></a>
- 一些问题
文强chu
问题
1.eclipse 导出 doc 出现“The Javadoc command does not exist.” javadoc command 选择 jdk/bin/javadoc.exe 2.tomcate 配置 web 项目 .....
SQL:3.mysql * 必须得放前面 否则 select&nbs
- 生活没有安全感
小桔子
生活孤独安全感
圈子好小,身边朋友没几个,交心的更是少之又少。在深圳,除了男朋友,没几个亲密的人。不知不觉男朋友成了唯一的依靠,毫不夸张的说,业余生活的全部。现在感情好,也很幸福的。但是说不准难免人心会变嘛,不发生什么大家都乐融融,发生什么很难处理。我想说如果不幸被分手(无论原因如何),生活难免变化很大,在深圳,我没交心的朋友。明
- php 基础语法
aichenglong
php 基本语法
1 .1 php变量必须以$开头
<?php
$a=” b”;
echo
?>
1 .2 php基本数据库类型 Integer float/double Boolean string
1 .3 复合数据类型 数组array和对象 object
1 .4 特殊数据类型 null 资源类型(resource) $co
- mybatis tools 配置详解
AILIKES
mybatis
MyBatis Generator中文文档
MyBatis Generator中文文档地址:
http://generator.sturgeon.mopaas.com/
该中文文档由于尽可能和原文内容一致,所以有些地方如果不熟悉,看中文版的文档的也会有一定的障碍,所以本章根据该中文文档以及实际应用,使用通俗的语言来讲解详细的配置。
本文使用Markdown进行编辑,但是博客显示效
- 继承与多态的探讨
百合不是茶
JAVA面向对象 继承 对象
继承 extends 多态
继承是面向对象最经常使用的特征之一:继承语法是通过继承发、基类的域和方法 //继承就是从现有的类中生成一个新的类,这个新类拥有现有类的所有extends是使用继承的关键字:
在A类中定义属性和方法;
class A{
//定义属性
int age;
//定义方法
public void go
- JS的undefined与null的实例
bijian1013
JavaScriptJavaScript
<form name="theform" id="theform">
</form>
<script language="javascript">
var a
alert(typeof(b)); //这里提示undefined
if(theform.datas
- TDD实践(一)
bijian1013
java敏捷TDD
一.TDD概述
TDD:测试驱动开发,它的基本思想就是在开发功能代码之前,先编写测试代码。也就是说在明确要开发某个功能后,首先思考如何对这个功能进行测试,并完成测试代码的编写,然后编写相关的代码满足这些测试用例。然后循环进行添加其他功能,直到完全部功能的开发。
- [Maven学习笔记十]Maven Profile与资源文件过滤器
bit1129
maven
什么是Maven Profile
Maven Profile的含义是针对编译打包环境和编译打包目的配置定制,可以在不同的环境上选择相应的配置,例如DB信息,可以根据是为开发环境编译打包,还是为生产环境编译打包,动态的选择正确的DB配置信息
Profile的激活机制
1.Profile可以手工激活,比如在Intellij Idea的Maven Project视图中可以选择一个P
- 【Hive八】Hive用户自定义生成表函数(UDTF)
bit1129
hive
1. 什么是UDTF
UDTF,是User Defined Table-Generating Functions,一眼看上去,貌似是用户自定义生成表函数,这个生成表不应该理解为生成了一个HQL Table, 貌似更应该理解为生成了类似关系表的二维行数据集
2. 如何实现UDTF
继承org.apache.hadoop.hive.ql.udf.generic
- tfs restful api 加auth 2.0认计
ronin47
目前思考如何给tfs的ngx-tfs api增加安全性。有如下两点:
一是基于客户端的ip设置。这个比较容易实现。
二是基于OAuth2.0认证,这个需要lua,实现起来相对于一来说,有些难度。
现在重点介绍第二种方法实现思路。
前言:我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算,阅读下面的文档,实现自动化并获得收益。SeatGe
- jdk环境变量配置
byalias
javajdk
进行java开发,首先要安装jdk,安装了jdk后还要进行环境变量配置:
1、下载jdk(http://java.sun.com/javase/downloads/index.jsp),我下载的版本是:jdk-7u79-windows-x64.exe
2、安装jdk-7u79-windows-x64.exe
3、配置环境变量:右击"计算机"-->&quo
- 《代码大全》表驱动法-Table Driven Approach-2
bylijinnan
java
package com.ljn.base;
import java.io.BufferedReader;
import java.io.FileInputStream;
import java.io.InputStreamReader;
import java.util.ArrayList;
import java.util.Collections;
import java.uti
- SQL 数值四舍五入 小数点后保留2位
chicony
四舍五入
1.round() 函数是四舍五入用,第一个参数是我们要被操作的数据,第二个参数是设置我们四舍五入之后小数点后显示几位。
2.numeric 函数的2个参数,第一个表示数据长度,第二个参数表示小数点后位数。
例如:
select cast(round(12.5,2) as numeric(5,2))  
- c++运算符重载
CrazyMizzz
C++
一、加+,减-,乘*,除/ 的运算符重载
Rational operator*(const Rational &x) const{
return Rational(x.a * this->a);
}
在这里只写乘法的,加减除的写法类似
二、<<输出,>>输入的运算符重载
&nb
- hive DDL语法汇总
daizj
hive修改列DDL修改表
hive DDL语法汇总
1、对表重命名
hive> ALTER TABLE table_name RENAME TO new_table_name;
2、修改表备注
hive> ALTER TABLE table_name SET TBLPROPERTIES ('comment' = new_comm
- jbox使用说明
dcj3sjt126com
Web
参考网址:http://www.kudystudio.com/jbox/jbox-demo.html jBox v2.3 beta [
点击下载]
技术交流QQGroup:172543951 100521167
[2011-11-11] jBox v2.3 正式版
- [调整&修复] IE6下有iframe或页面有active、applet控件
- UISegmentedControl 开发笔记
dcj3sjt126com
// typedef NS_ENUM(NSInteger, UISegmentedControlStyle) {
// UISegmentedControlStylePlain, // large plain
&
- Slick生成表映射文件
ekian
scala
Scala添加SLICK进行数据库操作,需在sbt文件上添加slick-codegen包
"com.typesafe.slick" %% "slick-codegen" % slickVersion
因为我是连接SQL Server数据库,还需添加slick-extensions,jtds包
"com.typesa
- ES-TEST
gengzg
test
package com.MarkNum;
import java.io.IOException;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation
- 为何外键不再推荐使用
hugh.wang
mysqlDB
表的关联,是一种逻辑关系,并不需要进行物理上的“硬关联”,而且你所期望的关联,其实只是其数据上存在一定的联系而已,而这种联系实际上是在设计之初就定义好的固有逻辑。
在业务代码中实现的时候,只要按照设计之初的这种固有关联逻辑来处理数据即可,并不需要在数据库层面进行“硬关联”,因为在数据库层面通过使用外键的方式进行“硬关联”,会带来很多额外的资源消耗来进行一致性和完整性校验,即使很多时候我们并不
- 领域驱动设计
julyflame
VODAO设计模式DTOpo
概念:
VO(View Object):视图对象,用于展示层,它的作用是把某个指定页面(或组件)的所有数据封装起来。
DTO(Data Transfer Object):数据传输对象,这个概念来源于J2EE的设计模式,原来的目的是为了EJB的分布式应用提供粗粒度的数据实体,以减少分布式调用的次数,从而提高分布式调用的性能和降低网络负载,但在这里,我泛指用于展示层与服务层之间的数据传输对
- 单例设计模式
hm4123660
javaSingleton单例设计模式懒汉式饿汉式
单例模式是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例类的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系统源。如果希望在系统中某个类的对象只能存在一个,单例模式是最好的解决方案。
&nb
- logback
zhb8015
loglogback
一、logback的介绍
Logback是由log4j创始人设计的又一个开源日志组件。logback当前分成三个模块:logback-core,logback- classic和logback-access。logback-core是其它两个模块的基础模块。logback-classic是log4j的一个 改良版本。此外logback-class
- 整合Kafka到Spark Streaming——代码示例和挑战
Stark_Summer
sparkstormzookeeperPARALLELISMprocessing
作者Michael G. Noll是瑞士的一位工程师和研究员,效力于Verisign,是Verisign实验室的大规模数据分析基础设施(基础Hadoop)的技术主管。本文,Michael详细的演示了如何将Kafka整合到Spark Streaming中。 期间, Michael还提到了将Kafka整合到 Spark Streaming中的一些现状,非常值得阅读,虽然有一些信息在Spark 1.2版
- spring-master-slave-commondao
王新春
DAOspringdataSourceslavemaster
互联网的web项目,都有个特点:请求的并发量高,其中请求最耗时的db操作,又是系统优化的重中之重。
为此,往往搭建 db的 一主多从库的 数据库架构。作为web的DAO层,要保证针对主库进行写操作,对多个从库进行读操作。当然在一些请求中,为了避免主从复制的延迟导致的数据不一致性,部分的读操作也要到主库上。(这种需求一般通过业务垂直分开,比如下单业务的代码所部署的机器,读去应该也要从主库读取数