应用高等CSS让客户或需求方懂得“渐进加强,安稳退化”的思路是很首要的,对于传统Web设计开辟也是如此。对响应式站点来说,CSS3在降落材料花费、进步页面加载速度等方面的浸染尤为首要。 互联网的一些事IE系列 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=""#FF0000"",endColorStr=""#F9F900"",gradientType=""0"");参数:startColorStr肇端色彩 endColorStr停止色彩 gradientType为0时代表垂直,为1时代表程度 Firefox background: -moz-linear-gradient(top, #FF0000, #F9F900); 参数:top、bottom垂直,left、right程度 例如:top时从顶部由#FF0000到#F9F900渐变,bottom时从底部由#FF0000到#F9F900渐变 Opera background: -o-linear-gradient(top,#FF0000, #F9F900); 参数:top、bottom垂直,left、right程度 例如:top时从顶部由#FF0000到#F9F900渐变,bottom时从底部由#FF0000到#F9F900渐变 webkit,如Chrome、Safari等 background: -webkit-gradient(linear, 0% 0%, 0% 100%, (#FF0000), to(#F9F900)); 参数:linear线性, x1 x2,
1、应用空标签清除浮动。 我用了好久的一种办法,空标签可所以div标签,也可所以P标签。这种体式格式是在须要清除浮动的父级元素内部的所有浮动元素后添加如许一个标签清除浮动,并为其定义CSS代码:clear:both。此办法的弊病在于增长了无意义的布局元素。对于应用额外标签清除浮动(闭合浮动元素),是W3C推荐的做法。至于应用<br />元素还是空<div></div>可以按照本身的爱好来选(当然你也可以应用其它块级元素)。不过要重视的是,<br />本身是有发挥解析的,它会多出一个换行出来,所以要设定它的heigh为0,以隐蔽它的发挥解析。所以大多半景象下应用空<div>斗劲合适。<style type=”text/css”> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} .clear{clear:both;} –> </style> <div id=”layout”> <div id=”left”>Left</div> <div id=”right”>Right</div> <div class=”clear”> </div> </div>
<style type="text/css">*{margin:0;padding:0}.wrap
如今Web应用法度的数量在急剧增长,这些便捷的在线对象让我们的生活生计变得更轻松。然则要建树一个成功的应用法度,仅有好的设法是不敷的,还要有优雅的用户界面给用户发明杰出得应用体验。是以,我从网上收集了60套免费的精美 PSD 用户界面素材包,你可以免费并应用到本身的项目中。记得分享和推荐一下哦 :)Black UI ElementsDark Web Design ElementsGrayness UI KittUI for JapanGreen Contact FormClean and Sexy Form ElementsBlue and White GUI KitSignup Modal BoxBloom UI KitProgress and loading b
对搞科学的人来说,勤恳就是成功之母! 在网页设计中,选择公允的色彩长短常重要的。用户在打开一个网站的时辰,第一眼看到的不是网站丰硕的内 容,也不是斑斓的结构,而是网页操作的色彩。色彩的视觉吸引力是最强烈的,是以网页色彩的选择需要经由细心思虑。今天,本文汇集了20个优良网页色彩搭配 实例与人人分享,希看这些实例能带给你灵感!Typemedia 2011念书之法,在循序而渐进,熟读而精思5emegaucheMore Hazards More HeroesShout DigitalTheo Thermometer
li {width:150px;white-space:nowrap;text-overflow:ellipsis;overflow: hidden;}
text-shadow: 1px 1px 3px rgba(50, 50, 50, 0.15);
浏览器一直以来挺喜欢用谷歌的Chrome,界面简洁,体积小,速度快。因为苹果Safari也是使用Webkit内核,因此他们有着类似的样式体现。虽然有诸多优点,但也有好心办坏事的时候,比如对文本域、文本框的处理,首先对于文本域右下角会多出一个手动缩放尺寸的功能,然后会自动加上黄色的高亮边框显示,这种“人性化”处理,一般情况下是很不错的,但是对于前端开发来讲,有时候反而成了问题,比如你想精准控制文本框文本域的外观样式和状态,那么Webkit这些处理反而成了败笔,怎么去掉这些呢?其实挺简单:1、黄色高亮外边框的取消input {outline: none;}textarea {outline: none;}如上代码,使用CSS的outline就可以取消掉;2、文本域缩放功能的取消也是使用CSS,具体有两种方法textarea {width: 400px;max-width: 400px;height: 400px;max-height: 400px;}上面是限定最大宽度和高度(CSS2),这也是最容易想到的方法了texearea {resize: none;}需要注意,这个方法中的resize是CSS3中的语法
<style> a{ blr:expression(this.onFocus=this.blur()); /* IE Opera */ outline:none; /* FF Opera */ } a:focus{ -moz-outline-style: none; /* FF */ outline:none;/*FF*/ -moz-outline:none;/* FF */ } </style> <a href="#" onfocus="this.blur()">test</a> <a href="#">链接1</a> <a href="#">链接2</a> <a href="#">链接3</a>
<aclass="bt_3" href="javascript:void(0)"id="btnSubmit1"onclick="submitPage()">提交</a> submitPage() 是我定义的一个函数,原意是点击这个<a>时,提交一个表单。ft, ie6 居然不可以,怎么也不能提交。看来是因为 ie6 执行默认动作引起来,目前两种解决方法:第一种方法: <aclass="bt_3" style="cursor:pointer;"id="btnSubmit1"onclick="submitPage()">提交</a> 这种方法根本没有href属性,用style="cursor:pointer;" 产生手型图标来模拟。