css+html
文章平均质量分 90
面条请不要欺负汉堡
道理不是拿来懂的,而是拿来悟的
展开
-
css 高频实用小技巧
利用 drop-shadow 对元素的部分内容添加单重及多重阴影 <div class="setCss"> <div class="round"></div></div>.setCss { width: 300px; height: 300px; background: #000; padding: 32px}.round{ --colorA: #fff; position: relative; margin: aut原创 2021-10-09 10:02:52 · 408 阅读 · 0 评论 -
整合CSS 变量及Js 和 Sass 之间共享变量
CSS 变量 这个是 CSS 新功能,2017年3月,微软宣布 Edge 浏览器将支持 CSS 变量,所有主要浏览器已经都支持了。一.css 变量 语法(1).变量的声明声明变量的时候,变量名前面要加两根连词线(–)。/* ody选择器里面声明了两个变量:--bgc和 --color。 */body { --bgc: #B3C0D1; --color: #ccc;}它们与color、font-size等正式属性没有什么不同,只是没有默认含义。所以 CSS 变量(CSS variabl原创 2021-09-23 13:56:20 · 1295 阅读 · 0 评论 -
手机端切图注意
一.了解以iPhone6设置屏幕大小, psd设置大小为750×1334。在切图的时候 以要屏幕的一半来切图(无论图片还是文字 间距 都除以2 )1.图片要切2张, 一张是750×1334 屏幕下的 命名@2x; 另一张是 750×1334屏幕1.5倍的情况下 命名@3x如:图片在 750×1334屏幕下是44×24 imgs@2x.png 那么imgs@3x.png就是66×36...原创 2018-05-14 13:22:59 · 1532 阅读 · 0 评论 -
sticky-footer的三种解决方案
sticky-footer的三种解决方案 在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送,我们看到的效果就如下面两张图这样。这种效果基本是无处不在的,很受欢迎。那么面对这样的问题有什么解决方法呢?首先我们先构建简单...转载 2018-05-14 09:21:23 · 1967 阅读 · 2 评论 -
css与html注意的点
解决设置table中td宽度不生效特性:table是一个整体,每一列td的宽度是由一个其中一个最长td的宽度决定的。解决:一定要在table标签上加word-wrap: break-word; word-break: break-all;之后再设置百分比宽度就可以生效了多出俩行则显示省略号 width: 100%; height: 1.2rem; line-he...原创 2017-02-24 10:00:39 · 1755 阅读 · 0 评论 -
了解CSS/CSS3原生变量var
一、变量是个好东西在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处。随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,CSS工作组迅速跟进CSS变量的规范制定,并且,很多浏览器已经跟进,目前,在部分项目中已经可以直接使用了。Chrome/Firefox/Safari浏览器都是绿油油的,兼容性大大超出我的预期,于转载 2018-01-31 16:07:29 · 1522 阅读 · 0 评论 -
BFC 神奇背后的原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。一、BFC是什么? 在解释 BFC 是什么之前,需要转载 2018-01-15 13:59:35 · 261 阅读 · 0 评论 -
CSS兼容浏览器
margin-bottom:40px; /*ff的属性*/margin-bottom:140px\9; /* IE6/7/8的属性 */color:red\0; /* IE8支持 */*margin-bottom:450px; /*IE6/7的属性*/ +margin-bottom:450px;_color:#ff0000; ...原创 2017-02-24 09:12:48 · 691 阅读 · 0 评论 -
CSS 选择器权重计算规则
其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式;ID>class>元素。一、样式类型 1、行间我的行间CSS样式。 2、内联 h1{font-size:12px; color:#000; } 3、外部二、选择器类型 1、ID #id 2、clas转载 2017-09-13 11:11:26 · 326 阅读 · 0 评论 -
css中的px、em、rem 详解
标签:概念介绍:1、px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,Apple系统默认是72dpi。2、em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽转载 2017-07-27 10:57:19 · 713 阅读 · 0 评论 -
你所不知的 CSS ::before 和 ::after 伪元素用法
CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了。Creative Button Style转载 2017-07-07 13:12:36 · 3455 阅读 · 0 评论 -
div中图片的处理-居中垂直
经常会遇到img垂直居中div的问题,下面我们来整理下一.水平居中1.text-align:center.wrap1{ text-align: center; width: 500px; background-color: #000; height: 100px;}.wrap1 img{ width: 100px; height: 50px;} 2原创 2017-06-20 14:39:40 · 832 阅读 · 0 评论 -
html标签注意点
当初在学校没有打好基础,毕业工作了,过于追求学习速度,掌握更多知识,从而忽略了细节。导致现在基础不扎实。。所以啊,基础很重要,不要过于求成,一步一步来。细节决定命运啊。名人都是这么说的,那就一定不会错啦。下面我们就来总结下:一.html标签注意1.html编写要合法的,带有良好结构并拥有语义2.避免过度使用div和span,使文档更易于应用样式,且在逻辑段落上也更加清晰。根原创 2017-04-24 14:11:39 · 845 阅读 · 0 评论 -
响应不同分辨率ViewPort
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 ViewPort 标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么。使用ViewPort 标记还表示文档针对移动设原创 2017-03-06 08:50:53 · 527 阅读 · 0 评论 -
纯css制作三级菜单
一.注意点:1.选择器的使用①element1>element2:如果元素element2不是父元素element1的直接子元素,则不会被选择。②element1+element2: 选择器用于选取第一个指定的元素element1之后(不是内部)紧跟的元素element2,同级元素③:hover :选择器用于选择鼠标指针浮动在上面的元素④:after: 选择器在被选元素的内原创 2017-03-07 09:13:52 · 1942 阅读 · 0 评论