CSS
文章平均质量分 54
无名前端小白
这个作者很懒,什么都没留下…
展开
-
less中使用calc 解析错误解决办法
<style lang="less"> // 会被解析成 height: 57% .ivu-card-head + .ivu-card-body { height: calc(100% - 43px); } // 能够被正确识别 .ivu-card-head + .ivu-card-body { height: calc(~"100% - 43px"); }</style>原创 2021-07-07 08:50:39 · 353 阅读 · 0 评论 -
WEB前端技能考核内容及岗位要求
在找工作的过程中,多多少少都会涉及到个人能力水平,技术技能水平等级。为了应大家的要求,web前端中文站给大家聊一聊web前端这块的工作要求情况。将岗位区分,从主要职责、专业技能、素质能力、特别要求共四大方面给大家介绍下。PS,当然,不同的岗位,薪资不一样,特别是工作三年后,一般会有一个质的提升!web前端岗位等级分类实习生/见习生(实习生)主要职责:1、页面及需求练习2、基本技能学习专业能力:HTML技能:了解HTML技术,能运用一些HTML标签css技能:了解CSS,能.转载 2021-02-24 20:13:39 · 3756 阅读 · 0 评论 -
rem, 另外一种设置根 html 字体大小的方法, 简单粗暴
html { font-size: calc(100vw / 750 * 100); }使用 css3 calc() 计算函数关于 calc 更多介绍详见:https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc另一种 rem 设置方法见:https://blog.csdn.net/byc233518...原创 2020-02-16 15:26:21 · 1007 阅读 · 0 评论 -
[转] CSS Grid 网格布局教程
CSS Grid 网格布局教程作者:阮一峰日期:2019年3月25日一、概述网格布局(Grid)是最强大的 CSS 布局方案。它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。上图这样的布局,就是 Grid 布局的拿手好戏。Grid 布局与Flex 布局有一定的相似性,都...转载 2019-10-14 10:16:25 · 205 阅读 · 0 评论 -
scss 遍历生成 padding margin ... 等类名
_basic.scss: @for $i from 1 through 200 { .m-#{$i} { margin: ($i/100)+rem; } .m-t-#{$i} { margin-top: ($i/100)+rem; } .m-b-#{$i} { margin-bottom: ($i/100)+rem; } .m-l-#{$i} { margin-left: (...原创 2019-01-21 19:26:19 · 2919 阅读 · 4 评论 -
less 遍历生成 padding margin ... 等类名
_basic.less:.loop(@counter) when (@counter > 0) { .p-@{counter} { padding: (1px * @counter); } .p-t-@{counter} { padding-top: (1px * @counter); } .p-r-@{counter} { padding...原创 2019-01-21 19:14:50 · 2183 阅读 · 0 评论 -
CSS --root 声明全局变量
在编写css公共样式的时候,我们都会声明很多通用的颜色、字号等。现在我们可以通过声明CSS变量来实现了1.变量的声明CSS变量声明是字母前加两个横线(--)如:body{ --Colors:#dfdfdf; --fS16px:16px;}上述代码中,body选择器中声明了Colors和fS16px两个变量。而使用‘--’是因为$被Sass占用了,@被Les...转载 2018-12-06 17:08:39 · 3156 阅读 · 1 评论 -
css 变量 实现页面换肤
开始之前先说说css3的自定义属性,之前我们在写css的时候全部都是使用自身属性,比如margin,padding等。但是你曾是否见过这样的css:root{ --primary-color:#989898; --light:#fff; --dark:#000;}其中的–primary-color、–light、–dark就是自定义的属性。自定义属性的命名规...转载 2018-09-29 10:50:33 · 2431 阅读 · 0 评论 -
修改 HTML5 input type date默认样式
1.时间选择的种类:HTML代码: 选择日期: 选择时间: 选择星期: 选择月份:2.对日期时间控件的样式进行修改目前WebKit下有如下9个伪元素可以改变日期控件的UI:::-webkit-datetime-edit – 控制编辑区域的::-webkit-datetime-edit-fields-wrapper – 控制年月日这个区域的::原创 2018-01-26 09:19:10 · 24856 阅读 · 2 评论 -
CSS3自定义滚动条样式 ::webkit-scrollbar
windows 下默认的滚动条样式巨丑,项目中又有比较多地方会显示滚动条, 故回头翻了一下CSS3, 还真能不用插件实现自定义滚动条的样式,正合我意代码如下:/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 6px; height: 6px; background-color:原创 2017-11-07 16:49:49 · 23851 阅读 · 2 评论 -
响应式布局之尺寸单位rem使用
web实际开发过程中,特别是移动端的页面,会遇到元素尺寸及字体在不同分辨率设备上表现差异较大,甚至严重影响用户体验;我现在的做法是使用rem作为尺寸单位,来实现页面内元素尺寸及字体在不同宽度设备下自由缩放尺寸,从而解决小屏幕上显示牛大字的尴尬情况;1. 设置html的字体为100px;2.页面内需要用到尺寸的地方都使用rem作为尺寸单位;(这样在改变html字体大小的时候页原创 2015-10-25 11:50:36 · 9246 阅读 · 3 评论 -
关于表格高度在移动端某些应用内高度设置为百分比后不能被压缩问题的解决
这几天项目中用到table来展示一些数据,页面是一屏一屏这样的,有些页面又有别的内容,又有表格,想要数据完整的展示,开始想到使用VH做尺寸单位,这样就能根据当前视窗的高度来对表格高度进行压缩,实际使用过程发现在安卓机上,调应用自带浏览器打开后好像设置的高度没起作用一行,但是给他来个200%,又可以看到效果,所以就想到是不是表格默认有个最小高度,于是就对行高做了处理,用rem来设置了一下行高,然后又原创 2016-06-13 22:52:20 · 982 阅读 · 0 评论 -
CSS3 transform-origin属性之初理解
转自:W3FUNSW3School上给出的定义是:transform-origin 属性允许您改变被转换元素的位置。借几张W3CPLUS上的图片来简单的说明:(当transform-origin的值在不同情况下,元素转动时所围绕的点不同); 看到这里,相信已经能够理解transform-origin属性应用在2D场景下改如何设置其值。转载 2015-10-25 11:51:55 · 824 阅读 · 0 评论 -
jQuery 无缝切换图片列表
代码部分:ul>li>a>img 然后两个左右切换的按钮 实现思路:当点击下一张按钮的时候,把第一个 li 从开始的位置删除【$(“li:first”).remove】,然后将其添加至ul的最后【.appendTo(“ul”)】 然后加个定时器,让鼠标不在ul上时自动切换图片;设置定时器来删除添加li,当鼠标经过ul或li的时候清除定时器,原创 2015-10-25 11:49:45 · 508 阅读 · 0 评论 -
Reset参考
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{mar原创 2015-10-25 11:46:47 · 323 阅读 · 0 评论 -
CSS 动画之初识
CSS3 动画之初识:一、transition: transition-property transition-duration transition-timing-function transition-delay; 1.transition-property 执行变换的属性; 2.transition- duration 变换延续的时间; 3.transiti原创 2015-07-16 08:45:08 · 345 阅读 · 0 评论 -
CSS 清除浮动的写法
一、clear.clear{ clear:both;}二、chearfix:1..clearfix:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size: 0;}.clearfix{ display: block; }2.cl原创 2015-06-10 07:19:26 · 841 阅读 · 0 评论 -
CSS 中一些常见到的BUG及解决办法整理【转】
各种CSS bug与技巧1、容器不扩展问题这个是经常在我切图的时候遇到的问题,如:容器不扩展问题#divGroup{ border:2px solid #333;}#a,#b{ border:2px solid #333; float:left; margin:5px;} 子容器a 子容器b解决办法:在di转载 2015-06-10 07:14:17 · 1287 阅读 · 0 评论 -
CSS 常用到的一些技巧【转】
DIV+CSS网页布局技巧实例1:设置网页整体居中的代码以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已。#layout { width:778px; margin:0 auto; text-align:center;}标准之路www.aa25.cn转载 2015-06-10 07:16:33 · 354 阅读 · 0 评论