css+div
文章平均质量分 55
五月呀
在代码里游荡
展开
-
纯css实现横向滚动
<!DOCTYPE html><html><head> <title>横向滑动</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> * { margin: 0; padding:...原创 2020-10-21 14:17:48 · 1706 阅读 · 0 评论 -
css图片剪裁居中
最近工作遇到一个新的css属性object-fit工作使用场景: 列表显示图片的时候,一般设置图片宽度自适应,那么高度就会根据图片本身的宽高比等比缩放,那么问题来了,多张图片的宽高比可能本身并不相同,那么造成图片宽度一样,高度不一样,显示不好看,不协调。如下图,图1和图2.怎么才能实现图片居中剪切,避免图片变形呢,css属性object-fit就可以实现实现代码:注意:只是简单的用pc做了个d...原创 2018-06-26 11:45:02 · 21061 阅读 · 2 评论 -
IE6下面,为什么不能设置height:1px的元素
在用DIV构建网页的时候,有时候需要的高度很小,这时候就可能会出现问题,因为,IE6下DIV有个默认的高度,大约10-12px。当你试图定义一个高度小于这个默认值的 div 的时候, IE 会固执的认为这个层的高度不应该小于字体的行高。第一:定义该DIV字体大小。例如:第二:直接限制自动调整,这样也OK.原创 2014-08-21 16:33:34 · 1101 阅读 · 0 评论 -
css 浮动定位float详解
转载自: 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家。 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解。 如果读者理解CSS盒子模型,但对于浮动不理解,那转载 2014-07-11 16:17:03 · 1055 阅读 · 0 评论 -
去掉谷歌默认的input textarea边框样式
谷歌浏览器Chrome基于WebKit开源浏览器引擎,自然能够通过相关的一切方法自定义设置浏览器的默认状态。谷歌浏览器Chrome安装之后,大家应该都留意到所有的表单都会添加黄色边框特效。在某些时候这些特效还是很不错的,但是当网站本身就已经对于表单样式有一定的设计时,这种默认表单样式就会让人觉得套样了!这里我们介绍下如何去掉Chrome谷歌浏览器默认的input、textarea的边框(borde原创 2014-05-15 18:03:38 · 2149 阅读 · 0 评论 -
纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等),里面很多涉及到CSS3的一些属性。
今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形。图形包括基本的矩形、圆形、 椭圆、三角形、多边形,也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是 firefox或者chrome,当然IE也能看一部分的。那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如转载 2014-03-12 17:45:45 · 1249 阅读 · 0 评论 -
浮动(float)和清理浮动(clear)的经验分享
转载自:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解。 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你。 小菜水平有限,本文仅仅是入门教程,不当之处请谅解!转载 2013-08-13 15:59:52 · 943 阅读 · 0 评论 -
谈谈CSS Sprites(css精灵)
转载自:http://www.css88.com/archives/756#more-756CSS Sprites在国内很多人叫css精灵,其实这个技术不新鲜,这个技术老到什么程度呢,我不敢确定,但是我看到最早的关于CSS Sprites是在Dave Shea的《CSS Sprites: Image Slicing’s Kiss of Death》,时间是March 05, 2004 ,整转载 2013-08-13 15:57:35 · 829 阅读 · 0 评论 -
优雅降级和渐进增强
优雅降级:一开始就构建站点的全部功能,然后根据浏览器的测试进行修改和修复。渐进增强:一开始只构建站点的最小特性,然后不断针对浏览器进行追加功能。对于前端开发来说,我更喜欢渐进增强式的开发方案,首先以最简的方式支持的主流浏览器的展示,然后就可以在兼容HTML5+CSS3的浏览器上实现各种特效加强用户体验原创 2013-06-20 14:45:26 · 921 阅读 · 0 评论 -
清理浮动
为什么要清除浮动呢?清理浮动就是当外层标签没有浮动而内层标签却浮动的情况下,要为内层标签清除浮动。否则会外层标签的一些样式则显现不出来。我们粗略的一起来看看清除浮动的办法一共有多少个(IE里面用zoom:1就不写了,下一个专题再写)。对应的DEMO采用伪类:after进行后续空制的高度位零的伪类层清除采用CSS overflow:auto的方式撑高采用CSS overf转载 2013-06-20 15:14:03 · 818 阅读 · 0 评论 -
CSS 的优先级机制[总结]
样式的优先级多重样式(Multiple Styles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。一般情况下,优先级如下: (外部样式)External style sheet 有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。示例如下: head>转载 2013-06-13 11:21:03 · 792 阅读 · 0 评论 -
CSS样式控制页面的几种方式
1.行内样式。把样式写在元素标记之间。用css控制页面样式的行内样式2.内嵌式把样式写在head之间,并且用包括起来。p{font-size:24px;}3、链接式链接式是使用频率最高,最为实用的方式。实现了html代码和css样式完全分离,前期美工和后期维护都十分方便,也有助于前端和后台开发人员同时进行。使用样式的时候才链接原创 2013-05-07 17:19:12 · 1884 阅读 · 0 评论 -
CSS样式在线生成工具
http://jquery.org.cn/css/css3preview/Box-Shadow.html http://css-tricks.com/examples/ButtonMaker/ http://www.css3maker.com/#原创 2013-04-08 18:12:57 · 1456 阅读 · 0 评论 -
eclipse对css/html/js智能提示
我们平时用eclipse开发jsp页面时智能提示效果不太理想,今天用了两个小时发现了eclipse也可以像Visual Studio 2008那样完全智能提示HTML/JS/CSS代码,使用eclipse自带的插件,无需另外安装插件,具体步骤如下 1.打开eclipse→Windows→Preferences→Java→Editor→Content Assist 修改Auto Acti转载 2012-09-25 10:40:54 · 5232 阅读 · 2 评论 -
css+div 今日总结
忙碌了一段时间,前端界面学到不少知识。记录下,自己的所思所想所感...1.网页布局、背景色以及整体风格 网页布局常用的布局是顶部(top)、底部(footer)、中间部分(center)。顶部一般是标题(title)和菜单(menu),菜单一级菜单和二级菜单,二级菜单的样式方面有多中变化,一般体现在鼠标悬浮,鼠标点击时的字体颜色的更改和局部背景颜色的更改,没有特殊情况,顶部和头原创 2012-09-17 10:50:18 · 710 阅读 · 0 评论