CSS
前端的南姐
这个作者很懒,什么都没留下…
展开
-
canvas画布上的文字随窗口大小变形
问题:使用canvas的时候,画布上的文字会随着浏览器大小而改变被挤压变形原因:canvas标签设置了如下样式:<div class="content"> <canvas id="canvasId"></canvas></div><style> /*---------就是这个样式导致的,得去掉----------*/ #canvasId{ width:100%; height:1.原创 2020-10-14 18:09:53 · 1436 阅读 · 0 评论 -
WEB页面,固定+自适应布局--圣杯-双飞翼布局
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>圣杯-...转载 2019-07-26 18:06:21 · 172 阅读 · 1 评论 -
transform-origin解析例子:环形旋转
transform-origin属性其实就是指定2D或3D变换/动画的中心点。其赋值是基于变换元素的位置。元素的左上角位置为(0,0)。下面的例子是小DIV绕着中心进行圆环形旋转。中心点的位置是200,200。但是设置transform-origin时要计算出这个中心点相对于小DIV(变换元素)所在的位置,即190,100<!DOCTYPE html><html...原创 2019-07-26 10:58:06 · 1352 阅读 · 0 评论 -
定位背景图片
CSS 定位背景图片,常见的例子有树型插件,前面的+号,-号,和文件夹等都是根据图片中的位置来取显示的。只有一张背景图。实现代码也很简单<html><head><style type="text/css">#div0{ width:50px;height:130px;background-image: url('/i/eg_bg_03.g...原创 2019-01-12 11:59:25 · 766 阅读 · 0 评论 -
有用的知识链接
闭包的理解:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closureshighstock高级篇之股票分时图:https://www.cnblogs.com/onetwo/p/6085179.html百度地图JS只显示一个省:https://blog.csdn.net/myfmyfmyfmyf/article/detail...原创 2018-11-30 17:00:41 · 212 阅读 · 0 评论 -
折行问题
div自动折行:转自(http://blog.sina.com.cn/s/blog_9085b0f201012cbx.html)全英文的情况,浏览器会把内容当前一个单词,不会自动折行,强制折行:word-break:break-all;dispaly:block;仅ie有效word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自...转载 2018-11-29 17:42:11 · 874 阅读 · 0 评论 -
HTML网页底部空白
设置了高度和滚动条也不行,最后发现,我给页面多个checkbox设置了position:absolute,检查是不是某个元素设置了position:absolute,改成position:relative;就可以了...原创 2018-10-25 11:08:22 · 9846 阅读 · 0 评论 -
CSS左侧固定,右侧自适应
DIV中左侧若显示,右侧自适应到最大宽度。左侧不显示时,右侧自适应到100%<template> <div class="row"> <div class="card-left" v-show="isShow"> 左侧固定内容 </div> <div c转载 2018-08-31 14:26:21 · 220 阅读 · 0 评论 -
div文字居中
1.文字垂直居中<div>要垂直居中的文字</div>div{height:50px;line-height:50px;}2.背景图片大小自适应div{ background: url("../s-bg1.png") no-repeat;background-size:contain;}3.背景图片,文字自适应居中<div class="row"> ...原创 2018-06-29 17:13:29 · 2498 阅读 · 0 评论 -
CSS mouseover重复多次,不好用
<div style="width:200px;margin-left:-200px;" @mouseover="doShow" @mouseout="doHide"> <img src="../img/control" style="width:230px"/> <div id="queryR"&g原创 2018-04-19 15:48:51 · 1481 阅读 · 0 评论