css
残墨海颜
爱死前端爱死前端爱死前端
展开
-
box-shadow的遇坑经历
box-shadow的遇坑经历记录学前端两年了,可以说box-shadow这个属性我认识的比较早,但理解得比较晚,每每用到这位娇生惯养的“小公主”我都要好好百度一番,然后才能好好“伺候”她。哇,不得不说我燥得很,这家伙的属性值参数实在太多了,记不住,记住又容易乱。还不如乖乖做个笔记,好下回免了盲目百度,直接上这儿来找多好嘿嘿嘿~(滑稽脸挠头)先贴一下w3c的文档大概的内容上图都写了,我...原创 2019-12-17 11:08:33 · 319 阅读 · 0 评论 -
使用less来编写css样式表
《进阶的css——less!》各位前端小伙伴们,我又来啦!上一期给大家讲解了通过emmet编写html,来加快html文档开发效率。你们想过吗?css也有奇招来提高开发效率。让咱们请出另一位小伙伴less桑~~~(喊破喉咙)在less里我们可以使用嵌套结构来编写css,还可以使用变量来给属性赋值等等,嵌套结构可以使css代码结构像html标签那样层层嵌套,使css代码看起来更为清晰。使用变量可...原创 2019-07-21 21:03:27 · 3559 阅读 · 0 评论 -
less的简单语法
less的简单语法接着上回的less主题,less的用法相关内容有嵌套、变量、mixin等。下面一样一样介绍用法:嵌套像原生的css语法是不允许样式嵌套的,每个选择器都得分别写。例如像下面的demo它的html结构<div class="outer"> 我是一个skyblue色的大盒子 <div class="inner"> 我是...原创 2019-07-29 14:09:30 · 447 阅读 · 0 评论 -
惊!小程序也能引用font-awesome
小程序引入外部字体文件教程在这里插入代码片我们知道,字体图标有着许多优点,比如font-awesome、iconfont之类的字体图标库。首先它比位图图标使用起来方便很多,不会失真,图标颜色随便调,不言自喻它是咱们web前端的一大好伙伴!但当我们开发微信小程序时,也想引用font-awesome怎么办,小程序的样式表是wxss,直接修改font-awesome的后缀名?不不不,事情恐怕没那么简...原创 2019-06-29 13:29:16 · 705 阅读 · 0 评论 -
Emmet的学习记录
Emmet的学习记录前端开发中,我们都知道写html结构是必须的,但过程却是费时且无聊的。这是因为往往需要写大量的html标签来表现网页文档。很多时候就一小小段的内容,只为了表现段落结构、文档层次或者页面语义化,就需要书写大量的标签来包裹相应部分内容。有没有一种效率既高又能按预想的那样实现html结构呢?有!当然有!用起来贼~~~酸爽。来!请出咱们这一期的主角emmet这本来是一个插件,由于...原创 2019-07-12 20:05:22 · 234 阅读 · 0 评论 -
前端布局新朋友-网格布局
认识网格布局(Grid Layout)相信学web前端的朋友们应该对“布局”这个概念不陌生吧,在前端布局里有这么几大布局技术:流式布局(Flow Layout 默认)浮动布局(Float Layout)定位布局(Position Layout)表格布局(Table Layout 已弃用)CSS3之后新增了两个新布局弹性布局(Flexbox Layout)网格布局(Grid L...原创 2019-06-25 11:43:45 · 619 阅读 · 0 评论 -
CSS宽度分离与box-sizing
CSS宽度分离与box-sizing本文章分为box-sizing和宽度分离两部分。熟悉box-sizing属性的童鞋可以直接空降到第二部分。引言估计大部分初入CSS的童鞋们或许会遇到一个莫名其妙的问题,当给盒子加了border或者padding之后盒子的width跟height是不是变大了? 其实这个时候问题就在于boxSizing。第一部分理解盒模型的朋友应该知道,一个盒子分为con...原创 2019-05-27 12:58:21 · 407 阅读 · 0 评论 -
CSS属性补漏计划——第一弹(border-image)
CSS属性补漏计划——第一弹(border-image)该属性属于css3属性,它允许盒子模型的边框样式为自定义图片。该属性的参数主要分为三个方面:图片路径裁切距离显示方式下面分别解释这三个方面的参数。第一个图片路径,它有单独的一个属性名叫border-image-source,用法和background-image一样,用url引入图片路径。如border-image-sour...原创 2019-05-13 22:29:58 · 313 阅读 · 0 评论 -
js渐变轮播图的实现方法
js渐变轮播图的实现方法渐变切换主要运用css的opacity属性,结合transition实现渐变过渡。html结构方面大体分为三部分:①图片展示部分(主体)②左右切换部分③轮播焦点部分 <div class="banner"> <div class="ban-image"> <img class="on" src="img/1.jpg" /&...原创 2019-04-29 14:19:45 · 3250 阅读 · 4 评论 -
圣杯布局和双飞翼布局的学习总结
圣杯布局和双飞翼布局的学习总结最近做响应式网页时遇到了圣杯布局和双飞翼布局这两个概念,它们俩的特点比较相似,都是三个横向排列的块元素,但其具有当调整浏览器窗口时,左右两边的块元素宽度不变,中间的块元素宽度自适应的特点。这两个布局配合flex布局以及bootstrap能达到很好的响应式效果。以下是对这两个布局的学习笔记:我们先来说说圣杯布局吧,实现这个布局的原理很简单,步骤如下: 1. 首先...原创 2019-04-23 13:01:58 · 222 阅读 · 0 评论