css
苏小苏
不管做什么,基础学扎实了才是王道
展开
-
圣杯布局与双飞翼布局的理解
圣杯布局与双飞翼布局是前端开发中是经常用到的一种布局方式,掌握该方式对开发是非常有用的。圣杯布局与双飞翼布局最终要实现的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。实现效果图如下:两者的实现方法略有差异,但都遵循以下要点:两侧宽度固定,中间宽度自适应中间部分中DOM结构上优先,这样以便先行渲染允许三列中的任意一列成为最高列圣杯布局1.DOM结构首先定义出整个布局的DOM结构,主体部分是由container包裹的center,left,right三列,其中cen转载 2020-08-27 16:54:01 · 604 阅读 · 1 评论 -
css四种引入方式 | link和@import引入方式的区别
css的引入方式css的引入方式有四种:内联样式,嵌入样式,链接样式,导入样式。1.内联样式内联样式也叫行内样式,指的是直接在HTML标签中的style属性中添加css的样式。<div style="font-size:20px;color:#333">我是行内样式/内联样式</div>...原创 2020-08-26 15:02:53 · 1196 阅读 · 0 评论 -
用css3的cursor:zoom-in/zoom-out实现微博看图片放大镜效果
1.前言 css3的出现解决了很多让人头疼的问题,至少我想很多童鞋都这样认为。css3的cursor属性大家用的应该是非常的多的,我想用的比较多的像cursor:pointer;cursor:help;cursor:text;等等。很少人用到cursor:zoom-in/zoom-out;今天就来讲一下这两个属性值的用法。 2.简介 zoom-in/zoom-out 就是让元素的鼠标形状变成“原创 2017-07-17 16:41:11 · 6985 阅读 · 0 评论 -
进阶篇之纯css+字体实现五角星(半颗星)评分
1.前言 之前写了一篇实现五角星打分效果的demo。这个demo用来实现打分效果绰绰有余,那么有时候我们在统计评分的时候,就会有半颗星或者1/3颗星星这样的那要如何实现呢?来来来,纯字体+css实现! 2.详情 1.下载字体 webFontIcon 我不会把压缩文件上传,会的童鞋可以教教我(微信:1048725765),感谢赐教,这样我就可以把字体上传以供大家下载了。 2.css样式原创 2017-07-28 12:04:24 · 3840 阅读 · 9 评论 -
css实现接地气的checkbox框
1.前言 我做的项目中,很少默认用原生的样式,甚至连下拉框都很少用select框,不过,原生也有原生的好处,来得快,没有什么大问题。如果是自己用html+css去拼接的话,样式会好看一点。不过应人而异了。我还是比较喜欢去拼接一些。那今天就教大家如何在自己的项目中做接地气的checkbox框呢? 2.详情 1.css样式body{font-family:'微软简行楷'}ul li{list-s原创 2017-07-27 11:19:39 · 462 阅读 · 2 评论 -
如何简单方便的用字体代替页面中常见常用的小图标小按钮(上)
一、前言今天要学习的内容:今天主要是稍微总结一下,页面中如何用字体代替图片,省事,省时,方便,实用! 小苏啰嗦:人都是有惰性的。真的。刚开始我们有一个经验丰富的美工,加上我们关系又非常好,以至于每次我都是等着她把设计图给我,我才开始码html。遇到图片的地方,会切的就自己切了,不会的,就直接让美工切图给我。成了一个不动脑子的码农!现在,美工换人了,新的美工太忙了。加上可能对我们前端交互不熟悉,现在原创 2017-08-12 11:59:10 · 1605 阅读 · 0 评论 -
简单实现大方接地气的五角星评分
1.前言 如何在页面中实现五角星评分呢?鼠标放上去有动态效果并可以点击。来来来,demo走起来! 2.详情 1.css样式 .cleanfloat::after{display: block; clear: both; content:""; visibility: hidden; height: 0;} ul li{list-style:none; float:left; font-size原创 2017-07-28 10:17:12 · 2300 阅读 · 3 评论 -
html超级简单实现点赞(收藏)和取消赞效果
1.前言 我们经常会遇到对一些列表呀进行点赞呀收藏数据等效果呀。今天就用html+css实现超级简单易上手的点赞和取消赞的demo展示。 2.详情 1.css样式.like{ font-size:66px; color:#ccc; cursor:pointer;}2.html内容<p class="like">❤</p>3.js代码<script typet="text/jav原创 2017-07-28 10:34:56 · 26366 阅读 · 16 评论 -
css超简单实现div页面居中【适合做弹出框】
1.前言现在项目中用到弹出框的话大部分都是直接用控件的。不过有控件虽方便,但有时候会有冲突的地方。我上次用layui的弹出框控件,然后也用到了百度的编辑器uEditor,然后一切都好好的,结果编辑赋值不成功。我也不知道什么问题。如果有知道原因的大神,求赐教!所以说一旦有不兼容的弹出框,就自己画了。画多了,就习惯了。今天就分享一个方法【文章最后会改进的】2.详情代码是这样的,一个div.point无宽原创 2017-08-15 14:13:34 · 1017 阅读 · 3 评论