玲儿灵

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

随笔分类 -  css

1

摘要:原文链接:http://blog.csdn.net/freshlover/article/details/7610269 text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及,这一特殊效果使用越来越普遍。 基本语法是{box-sh 阅读全文
posted @ 2016-10-24 17:36 玲儿灵 阅读(356) 评论(0) 推荐(0) 编辑

摘要:我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的,后面文章会总结。 思路: input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹, 阅读全文
posted @ 2016-10-19 17:12 玲儿灵 阅读(4814) 评论(1) 推荐(0) 编辑

摘要:事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计。 一切看起来很好,很正常,直到你看到他/她设计的一个选择下拉框跟浏览器默认提供的样式有些不同!你说:“这没办法做!你应该不会抱怨设计师,其实更改下拉输入的默认样式并不是非常难的! Mobile 阅读全文
posted @ 2016-10-19 17:04 玲儿灵 阅读(367) 评论(0) 推荐(0) 编辑

摘要:Filters主要是运用在图片上,以实现一些特效。(尽管他们也能运用于video上),不过我们在些只来讨论图片上的运用。 语法: 其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选: 浏览器的兼容性: 目前支持这个属性的浏览器少得可怜,现在只是webkit支持, 阅读全文
posted @ 2016-10-13 11:34 玲儿灵 阅读(150) 评论(0) 推荐(0) 编辑

摘要:译自:http://css-tricks.com/efficiently-rendering-css/无可否认我并不经常考虑这个问题… 我们书写的CSS的效率如何,浏览器渲染它的速度如何?浏览器的开发者肯定关心这个问题(页面加载越快,人们用着越开心)。Mozilla有篇文章about best pr... 阅读全文
posted @ 2015-04-07 13:50 玲儿灵 阅读(211) 评论(0) 推荐(0) 编辑

摘要:一、文件规范1、文件均归档至约定的目录中所有的CSS分为两大类:通用类和业务类。通用的CSS文件,放在如下目录中:基本样式库 /css/core通用UI元素样式库 /css/libJS组件相关样式库 /css/ul业务类的CSS是指和具体产品相关的文件,放在如下目录中:读书 /css/book/电影... 阅读全文
posted @ 2015-04-07 12:27 玲儿灵 阅读(388) 评论(1) 推荐(0) 编辑

摘要:弹性框布局 (flexbox) 添加了级联样式表级别 2 修订版 1 (CSS2.1) 中定义的四个基本布局模式:块布局、内联布局、表格布局和定位布局。使用弹性框布局功能,你可以更加轻松地设计复杂网页布局,并且可以在屏幕和浏览器窗口大小发生变化时进行调整以保持元素的相对位置和大小。 弹性框可减少对浮... 阅读全文
posted @ 2015-03-26 11:40 玲儿灵 阅读(1404) 评论(0) 推荐(0) 编辑

摘要:在用户的显示器分辨率越来越大的今天,之前的1024*768固宽的网页布局设计方式有点越来越不合时宜,对大屏幕的用户而言,两侧空空的留白给人第一眼的印象是严重的屏幕浪费,作为网页设计师的你有责任采取自适应屏幕宽度的弹性网页布局方式,给这一批用户一个良好的用户界面。当然为了减少这种屏幕的浪费,采用弹性流... 阅读全文
posted @ 2015-03-26 09:42 玲儿灵 阅读(226) 评论(0) 推荐(0) 编辑

摘要:Bootstrap是Twitter推出的一个由动态CSS语言Less写成的开源CSS/HTML框架(同时提供Sass 移植版代码)。Bootstrap提供了全面的基本及组件样式并自带了13个jQuery插件(模态对话框、标签页、滚动条、弹出框等),可满足常用开发需要,而且还根据需要定制。另外,Boo... 阅读全文
posted @ 2014-10-27 10:31 玲儿灵 阅读(268) 评论(0) 推荐(0) 编辑

摘要:一.允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?其实并不难。 首先,在网页代码的头部,加入一行viewport元标签。viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scal... 阅读全文
posted @ 2014-10-27 10:30 玲儿灵 阅读(301) 评论(0) 推荐(0) 编辑

摘要:haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值... 阅读全文
posted @ 2014-10-08 15:47 玲儿灵 阅读(161) 评论(0) 推荐(0) 编辑

摘要:做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验。可是啊,现实太残酷,浏览器... 阅读全文
posted @ 2014-09-19 13:56 玲儿灵 阅读(234) 评论(0) 推荐(0) 编辑

摘要:css选择有十种方式:元素选择器、类选择器、ID选择器、选择器分组、属性选择器、子元素选择器、后代选择器、相邻兄弟元素选择器、伪元素、伪类。元素选择器。文档的元素就是最基本的选择器。如:html {color:black;}、note{font-family:Verdana, Arial;}(xml... 阅读全文
posted @ 2014-09-18 11:13 玲儿灵 阅读(265) 评论(0) 推荐(0) 编辑

摘要:设置元素的最大高度、最小高度、最大宽度、最小宽度,用max-height、min-height、max-width、min-width。visibility:设置元素是否可见。visible和hidden。filter:alpha(opacity=70);-moz-opacity:0.7;-webk... 阅读全文
posted @ 2014-09-18 09:08 玲儿灵 阅读(373) 评论(0) 推荐(0) 编辑

摘要:1.屏幕三部分自适应居中?(js没奏效)2.背景透明内容也透明? 阅读全文
posted @ 2014-09-13 15:46 玲儿灵 阅读(119) 评论(0) 推荐(0) 编辑

摘要:1.filter:alpha(opacity=70);-moz-opacity:0.7;-webkit-opacity: 0.7;-o-opacity: 0.7;-ms-opacity: 0.7;opacity: 0.7;2.注释在bootstrap里在文档流中时,要注意,在它前后的标签要与它紧贴,... 阅读全文
posted @ 2014-09-13 15:40 玲儿灵 阅读(146) 评论(0) 推荐(0) 编辑

摘要:1.不同浏览器默认边距不同,必须对body自定义:margin:0;padding:0;2.margin、padding属性值为%时,不是所有浏览器都支持;3.transparent属性,IE7之前不支持。4.-moz-border-radius:25px; /* Old Firefox */ -m... 阅读全文
posted @ 2014-09-11 18:01 玲儿灵 阅读(144) 评论(0) 推荐(0) 编辑

摘要:元素的背景是内容、内边距和边框区的背景。css中:width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。bootstrap中:width 和 height 指的是包含border、padding、element的框的总尺寸... 阅读全文
posted @ 2014-09-11 17:54 玲儿灵 阅读(231) 评论(0) 推荐(0) 编辑

摘要:1.css中一切元素皆为框。div、p、h1等为块框;span、strong等为行内框,(在文本中每一行会被自动默认为行框,行框和行内框是不一样的概念)。通过display可以改变框的类型,行内框通过display:block可以变为块框,块框通过display:inline-block可以变为行内... 阅读全文
posted @ 2014-09-11 11:27 玲儿灵 阅读(262) 评论(0) 推荐(0) 编辑

摘要:取值: [ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize ... 阅读全文
posted @ 2014-09-10 12:35 玲儿灵 阅读(451) 评论(2) 推荐(0) 编辑

1