![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
切图
文章平均质量分 72
励志故事
分享与成长
展开
-
【HTML+CSS】教你切图篇4-iframe布局、多列布局实现
iframe框架布局;项目中经常会使用到iframe,iframe虽然比较多毛病,也比较老了,但是有些项目还是需要,一般项目情况如下图:一般需求:让iframe区域填充满内容div区域,并且窗口大小改变时自适应。以往的解决方法是通过js判断window的宽高,然后使用窗口宽高减去左侧和头部的尺寸得到iframe的高度,并且添加窗口resize事件函数,当窗口尺寸改变时,原创 2017-08-22 17:51:34 · 3075 阅读 · 0 评论 -
【HTML+CSS】教你切图篇3-自定义单选、多选、下拉框的实现
大家都知道,默认的单选、多选、下拉控件样式实在是丑哭了。下面小编介绍两种实现单选、多选、下拉控件的样式。首先来介绍第一种:1.用CSS+HTML实现这种实现方式是简单,获取数据方便,兼容主流浏览器,缺点就是IE8以及以下的浏览器都不兼容,所以要兼容到更低版本的IE浏览器就需要用到第二种方法了。首先先看效果图:代码如下: 表单测试 /*复选 S*/ /*将i原创 2016-02-22 17:50:38 · 5230 阅读 · 6 评论 -
【HTML+CSS】教你切图篇2-文本输入框编写
在之前的一篇文章我们提到按钮的实现,今天我们来说一下同样很常用的文本框的用途,在网页中我们经常会看到文本输入框,结合上一篇的按钮实现,那么文本框和按钮的结合我们可以用来做什么呢?1.首先我们可以想到登录框的实现,一个登录框通常包括文本输入框、登录/注册按钮、选择是否下次登录,选项框我们会在下一篇文章详细介绍,首先我们来实现一个简单的登录窗口,效果图如下:废话不多说,代码如下:原创 2015-12-15 16:55:52 · 3094 阅读 · 0 评论 -
【HTML+CSS】教你切图篇1-实现按钮
最近实习一直在做前端切图,也是一种需要绣花般耐心的活儿,在这里总结一下一些基础页面元素的实现方式,后续陆续更新。首先我们遇到最多的可能是按钮的切图,按钮可能有很多种外观,但是一般可分为纯文字的和带图标的按钮,下面就来说说这两种按钮的实现方法。效果图如下: 代码如下: 按钮写法 a:hover{text-decoration: none;} .b原创 2015-12-14 01:31:12 · 5543 阅读 · 0 评论 -
【CSS】背景图套路二:单一元素设置多背景图
单一元素设置多背景图原创 2017-11-13 18:27:28 · 1591 阅读 · 0 评论 -
【HTML+CSS】教你切图篇5-星星评分纯CSS实现
俗话说得好,前端切图玩的就是心机,有时候多动脑子想一想,就能避免写很多的js脚本,何乐而不为,废话少说,这次实现的的东西长下面这样:原材料也很简单,就是两张图片,看看:实现原理也是非常简单滴,把灰色星星作为背景,然后在上面叠加黄色星星,通过控制黄色星星的宽度,实现评分变化,是不是很简单?先来看看HTML标签:<div class="star-eval"> <span class="stars原创 2017-11-29 11:35:30 · 10248 阅读 · 0 评论