![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
DOM元素及CSS基础
收集在编写布局时踩的坑和注意事项
weixin_43939111
这个作者很懒,什么都没留下…
展开
-
box-shadow技巧(转)
https://segmentfault.com/a/1190000016935062转载 2021-05-26 17:04:31 · 46 阅读 · 0 评论 -
PC端窗口缩放时处理方法
pc端web页面开发时windows系统经常推荐用户使用125%、150%比例的缩放窗口,解决方法https://my.oschina.net/huashijun/blog/4672587转载 2021-03-10 17:17:15 · 653 阅读 · 0 评论 -
DOM--table里放img注意事项
table里放图片不能直接扔一个img标签进去,需包裹在子标签td中,以下是错误示范 <div id="pie-box"> <table id="items2" cellspacing="0" cellpadding="0"> <tbody id="t-body"> <img class="loading" src="./img/loading.gif" alt=""> </tb原创 2021-03-09 09:15:50 · 471 阅读 · 0 评论 -
echarts柱状图添加转换视图功能
与xAxis、yAxis、series平级 toolbox:{ show:true, feature:{ dataView:{ show:true,readOnly:false, optionToContent:function(opt){ console.log(opt) } },原创 2021-03-08 09:17:42 · 88 阅读 · 0 评论 -
关于input type=file样式设置的坑
项目要求对原来的bootstrap样式进行修改,在对input type=file右边的选择文件按钮修改样式时发现获取到的元素不是我设置id的元素,控制台找到button的设置发现也无效 <div class="form-group"> <div class="col-sm-6"> <input type="file" name="upload_file" style="width:448px;" class="file" id="u原创 2021-02-25 15:14:04 · 166 阅读 · 0 评论 -
background使用
这里只是个人在自学过程中用的小案例,由于涉及内容比较多我的描述与理解可能有些偏差,后半部分的解析为个人理解,请大家以官网教程为准!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D原创 2021-02-19 14:34:05 · 74 阅读 · 0 评论 -
进度条
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>进度条</title> </head> <body> <p>原创 2021-02-18 09:43:08 · 41 阅读 · 0 评论 -
关于label标签
以前没怎么注意这个标签,直到用bootstrap加了一堆class弄得表单乱七八糟,有些基础还是要巩固。label是行内元素,不是行内块元素,设置label宽度需display:inline-block;目前,label可以自动与input框垂直居中对齐,除非使用了float会让label和input顶部对齐(按自己的需求来)...原创 2021-02-10 11:02:45 · 658 阅读 · 0 评论 -
css编写菜单前置图标效果
一、双色菱形 #box { width: 0; height: 0; border: 10px solid transparent; border-right: 10px solid #0077f7; } #box2 { width: 0; height: 0; border: 10px solid transparent; border-lef原创 2021-02-10 10:43:23 · 135 阅读 · 0 评论 -
background可以同时使用图片和背景色
<div id="contentArea"> 内容 </div> #contentArea{ width:400px; height:250px; background:green url("imgs/2.jpg") center/200px 200px no-repeat; font-size:28px; color:brown; font-weight:bold; line-height:250px; text-align: cent.原创 2021-02-09 14:42:12 · 3449 阅读 · 1 评论 -
label和input自动垂直居中对齐
<label>提示:</label> <input type="text" id="name1" style="line-height:50px;">原创 2021-02-08 09:52:31 · 1136 阅读 · 0 评论 -
获取<html>标签
documen.documentElement(最常用)document.childNodes[0]document.firstChild原创 2021-02-04 11:09:27 · 407 阅读 · 0 评论 -
css中position(absolute)与margin同时使用的情况
当元素绝对定位以后,它在父元素的位置是根据top/left/right/bottom来定位的,而margin是根据自身当前位置来定位的当它距离父元素left:50%,top:50%,那就是父元素一半的距离,因为要实现居中即自身的中点在父元素的中间才算,所以margin-left/margin-top 负的自身宽/高的一半,那么正好水平垂直居中。元素在绝对定位以后,left/rigth和top/bottom是没有优先等级的,不像margin-left作用的时候margin-right没用,如果现在lef.转载 2021-02-02 10:49:21 · 1583 阅读 · 1 评论 -
css中结构伪类用法(案例)
结构伪类有如下几种::first-child:last-child:nth-child():nth-last-child():nth-of-type():nth-last-of-type():first-of-type:last-of-type:only-child:only-of-type:empty具体含义解释可以看网上的教程文档,这里只列举直观案例,便于区别理解记忆一、结构伪类选择的是该种类在其父元素下属于该种类的元素可以看到背原创 2021-02-01 17:28:49 · 861 阅读 · 0 评论 -
给背景图加透明度的解决方法
纯css处理元素背景图透明度这个问题还是第一次碰到,查找百度尝试过用::before并设为absolute,然后opacity:0.3+z-index:-1;操作,问题就出现在z-index:-1;上,看了大佬写的代码我自信满满来了一套相同操作,结果发现背景图没了???打开调试框拉动浏览器,发现加z-index:-1出现了错位,居然跑到元素下面,于是我仔细对比了代码,发现大佬把增加的**::before设定absolute**,元素则用的fixed,后来尝试了下确实只能这样设定才有效果: .log原创 2021-02-01 10:37:56 · 584 阅读 · 0 评论 -
使用display和fadin(),fadeout发现的问题(待解决)
最近练习弹框效果使用到display,fadeIn()和fadeOut()发现几个奇怪的问题我实现的效果是,点击表格行遮罩层瞬间出现,遮罩上的子元素(也就是弹框)有一个透明度变化的过渡效果,以下我发现两个奇怪的地方①display:block使遮罩显示时,弹框第一次的fadeIn()和fadeOut()是没有透明过渡效果的,之后再点击才会有②在display下必须fadeIn()和fadeOut()都使用,否则这两个动画无效。(我在display:block后使用fadeIn(),关闭弹窗displ原创 2021-02-01 09:50:45 · 381 阅读 · 0 评论 -
table实现表头固定,表身滚动效果
在vue中有现成的element-ui有这种表格效果,但手头项目规定用原生js来写。用bootstrap发现没有像el-ui一样现成的表头固定表身滚动的处理方法,为了保留bootstrap好看的样式,只好把两个table拼接成一个来实现效果,后来发现其实对table及其子元素加特定的Css就能实现,以下是关键代码#t-head,#t-body tr{ display:table; width:100%; table-layout: fixed;}#t-body{ display:block;原创 2021-01-29 09:29:10 · 786 阅读 · 1 评论 -
table边框加弧度
<table id="tableArea" cellspacing="0" cellpadding="0"> <thead id="tableHead"> <!--内容--> </thead> <tbody id="tableBody"> <!--内容--> </tbody> </table>#tableArea...原创 2021-01-28 11:10:05 · 669 阅读 · 0 评论 -
浮动的子div撑起父div的高度
<div style="border:1px solid green;margin-top:100x;"> <div style="float:left;position:relative;height:100px;background-color: blueviolet;"> <span>子元素</span> </div> <div style="clear:b...原创 2021-01-26 11:34:57 · 850 阅读 · 0 评论