行内元素内外边距探究:为何span设置上下margin和padding不起效
3Deshun 发布于 2年前 (2019-04-13) 阅读(4336) 评论(0) 赞 (2)
一直以为行内元素设置内外边距会不起效,之前也没有具体的去实验,只是在需要设置 margin 或者 padding 的时候给元素设置一个 display: inline-block; 就得了。今天正好有时间,就来实验了一把。原来 span 标签默认的不是只能设置左右边距,还有更有意...
Deshun 发布于 2年前 (2019-04-13) 阅读(4336) 评论(0) 赞 (2)
一直以为行内元素设置内外边距会不起效,之前也没有具体的去实验,只是在需要设置 margin 或者 padding 的时候给元素设置一个 display: inline-block; 就得了。今天正好有时间,就来实验了一把。原来 span 标签默认的不是只能设置左右边距,还有更有意...
Deshun 发布于 2年前 (2019-04-11) 阅读(4129) 评论(0) 赞 (7)
利用纯 CSS 设置 列表的 伪类 :after 实现不同颜色数字的排行榜效果。代码如下:HTML:<ul> <li>html中引入调用另一个公用html模板文件的方法19040 ℃&l...
Deshun 发布于 2年前 (2019-04-04) 阅读(2218) 评论(0) 赞 (0)
分享一个纯HTML+CSS写的下拉导航动画,代码如下:HTML部分:<div class="nav"> <ul class="clearfix"> <li>...
Deshun 发布于 2年前 (2019-03-18) 阅读(4506) 评论(0) 赞 (5)
利用CSS实现三角形效果,比较常用的思路是使用 border 边框来实现,border 边框是由四个三角形组成的,通过调整四个边来实现不同形状的三角形。通过上图应该能看懂 border 的实现原理。CSS代码如下:通过调整边框的宽度,来实现不同的形状。/*A1*/ .trian...
Deshun 发布于 2年前 (2019-03-06) 阅读(3051) 评论(0) 赞 (1)
纯CSS实现图片扫光效果,效果如下:html代码如下:<div class="ilogo"> <h1 class="ititle">  ...
Deshun 发布于 2年前 (2019-03-02) 阅读(4693) 评论(0) 赞 (6)
一般 hover 效果只用在自身元素和控制子元素,那么可以直接用 CSS 控制兄弟元素的 hover 效果吗?答案是可以的,不过只能控制相邻的元素,具体示例代码如下:1、如果 #b 元素是 #a 元素的子元素,可以直接通过 #a:hover #b {...} 这种方式来控制。示例...
Deshun 发布于 2年前 (2019-02-24) 阅读(1426) 评论(0) 赞 (1)
在查看网页源码的时候经常会发现带有类似 ?v=13566 或者 ?version=15678 的 CSS 和 JS 文件。如下所示:<script src="w3h5.js?version=15688″></script> <l...
Deshun 发布于 2年前 (2019-02-18) 阅读(9467) 评论(0) 赞 (5)
用JS来动态设置CSS样式,常见的有以下几种:1. 直接设置style的属性 某些情况用这个设置 !important值无效如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 ele...
Deshun 发布于 2年前 (2019-01-18) 阅读(7996) 评论(0) 赞 (4)
工作中或许会用到 table 表格固定表头, tbody 滚动的效果。为了方便我这里直接用的 Bootstrap 的表格样式。今天研究了一下,整理了几种方案:有的建议使用:position: absolute 或者 position: fixed; .table&nbs...
Deshun 发布于 2年前 (2019-01-16) 阅读(16920) 评论(0) 赞 (5)
我们一般设置表格的宽度是用如下方法:可以使固定尺寸,也可以是百分比th,td{ width: 20%; text-align: center; }设置 tab...