为您找到搜索结果：1786个
常用的 CSS 技巧
这段代码会让你的彩色照片显示为黑白照片，是不是很酷？img.desaturate{filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);}先给每一个菜单项添加边框/*addborder*/.navli{border-right:1pxsolid#666;}……然后再除去最后一个元素……//removeborder/.navli:last-child{border-right:none;}……可以直接使用:not()伪类来应用元素：.navli:not(:last-child){border-right:1pxsolid#666;}这样代码就干净，易读，易于理解了。当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）：..navli:first-child~li{border-...
Python之路-python(css布局、JavaScript)
CSS布局JavaScript css布局：后台管理界面一：（左右标签都有下来菜单）利用position:absolute;让某个标签固定在具体位置，然后使用overflow:auto;属性，让内容多的话把父级标签撑起来（出现下拉菜单）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>body{margin:0;}.left{float:left;}.pg-header{height:48px;background-color:#2459a2;color:white;}.pg-content.menu{position:absolute;top:48px;left:0;bottom:0;width:300px;background-color:#dddddd;overflow:auto;}.pg-content.content{position:absolute;top:48px...
Python之路-python(css、JavaScript)
cssJavaScript 一、CSS 分层： position:fixed;（固定到页面的具体位置） 例如：返回顶部<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><divonclick="GoTop();"style="width:50px;height:50px;background-color:black;color:white;position:fixed;bottom:20px;right:20px;">返回顶部</div><divstyle="height:5000px;background-color:#dddddd;">这里是第一行</div><script>functionGoTop(){document.body.scrollTop=0;}</scr...
Python之路-python(html、css)
概述： HTML是英文HyperTextMark-upLanguage(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！Doctype Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档 有和无的区别BackCompat：标准兼容模式未开启（或叫怪异模式[Quirksmode]、混杂模式）CSS1Compat：标准兼容模式已开启（或叫严格模式[Standardsmode/Strictmode]）这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始--浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一...
html+css使图片在页面中循环滚动
我们先通过html创建一个div盒子的框架，方便后续以及实际使用中调整位置。 1<!DOCTYPEhtml>2<html>3<head>4<metacharset="UTF-8">5<title>滚动播放</title>6</head>7<body>8<div>9<imgclass="c1"src="img/banner_3.jpg"/>10<imgclass="c2"src="img/banner_3.jpg"/>11</div>12</body>13</html> 接下来就是重点，css给内部添加样式 1<styletype="text/css">2*{3margin:0px;4padding:0px;5}6div{7overflow:hidden;8width:1500px;9height:400px;10margin:auto;11position...
css3 calc()的用法
说明：calc（四则运算）；任何长度值都可以使用calc()函数进行计算；和平时的加减乘除优先顺序一样一样的；特别注意：calc（）里面的运算符必须前后都留一个空格，不然浏览器识别不了，比如：calc(100%-5px);兼容性：HTML:<divclass="out"> <divclass="in">in</div></div>CSS：.out{ width:200px; height:200px; background:red; padding:10px; margin:40pxauto; }.in{ width:100%; height:100%; background:skyblue; padding:20px10%12%30px; }结果：这个时候out被撑破了怎么办呢，padding百分比不好计算啊。。。css3的calc()属性就帮了大忙了。重新设置in的css属性：.in{ width:calc(100%-30px-10%); width:-webkit-...
有关于CSS的面试题和练习
如果你处在一个需要面试别人有关于CSS方面技巧和知识，一时想起来还真有点难。我把我能想出来的整理在一起，提供给大家参考。正如他们说的，大家实际工作很重要。当然，大家通过工作练习更为重要。这些都是一些练习，并不特别困难，任何人或有没有CSS经验都应该做得到。只看或只听，这样做是没有任何意义的。在CodePen中做练习就挺完美的。 CodePen如何使用？详细使用可以点击这里。——大漠 创建这个按钮我在Mobify的CodePen账号里看到这样的一个想法。给大家一张按钮的图片，并告诉大家： 仅使用CSS属性，创建这样的一个按钮 这将是测试候选人的CSS3技能的一个强大的测试例子。这个按钮具有很多样式，我们一起来看看：他们是如何处理多边框的？在这里，box-shadow可能是最好的办法。他们是使用text-transform:uppercase;将文本转换成大写吗？这将是最好的。他们是如何处理星星？伪元素将是一种很好的候选方法。他们是使用了"unicode"还是字体图标？他们有没有使用text-shadow做微妙的处理？他们是怎...
纯CSS打造Flow-Steps导航
几个要点:1.三角箭头效果是用border实现的,详细的可以google下CSS三角2.IE6下不支持border-color:transparent(透明),解决方法是先将其设置为一个不常用的颜色,然后再用IE的滤镜将其透明化(Demo中有注释)3.每个Step之间的白色间隙为了等距所以处理比较复杂,当然也可以换成margin来做简单处理,但效果差很多;兼容IE的Demo,这个版本唯一优势就是支持IECSS：.wrapper{padding:20px;}.flow-steps{position:relative;height:30px;list-style:none;font-size:14px;overflow:hidden;}.flow-stepsli{float:left;height:30px;margin-right:-32px;background:#d7d7d7;line-height:30px;overflow:hidden;}.flow-stepsa{display:block;float:left;width:80px;padding:018px00;text-a...
让网站变灰的CSS代码（支持IE、FIREFOX和CHROME）
方法1：支持IE<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><htmlxmlns=”http://www.w3.org/1999/xhtml”><style>html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}</style>说明：此方法支持IE，不支持Firefox和Chrome等非IE内核浏览器。方法2：支持IEbody{filter:gray}说明：此方法支持IE，不支持Firefox和Chrome等非IE内核浏览器。提示：虽然这个方法代码量最小，但是效果却不好，而且网页也比较卡。方法3：同时支持IE和Chrome<style>html{overflow-y:scroll;filt...
推荐大家使用的CSS书写规范及顺序
@设计达人网写了这么久的CSS，但大部分前端er都没有按照良好的CSS书写规范来写CSS代码，这样会影响代码的阅读体验，这里我总结一个CSS书写规范、CSS书写顺序供大家参考，这些是参考了国外一些文章以及我的个人经验总结出来，我想对写CSS的前端用户来说是值得学习的。CSS书写顺序1.位置属性(position,top,right,z-index,display,float等)2.大小(width,height,padding,margin)3.文字系列(font,line-height,letter-spacing,color-text-align等)4.背景(background,border等)5.其他(animation,transition等) CSS书写规范使用CSS缩写属性CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。 去掉小数点前的”0″ 简写命名很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！ 16进制颜色代码缩写有些颜色...
CSS规则整理
一、善用css缩写规则/*注意上、右、下、左的书写顺序*/1.关于边距（4边）：1px2px3px4px(上、右、下、左)1px2px3px（省略的左等于右）1px2px(省略的上等于下)1px（四边都相同）2.简化所有：*/body{margin:0}------------表示网页内所有元素的margin为0#menu{margin:0}------------表示menu盒子下的所有元素的margin为03.缩写（border）特定样式：Border:1pxsolid#ffffff;Border-width:01px2px3px;4.关于文字的缩写规则：Font-style:italic;斜体形式Font-variant:small-caps/normal;变体样式：小型大写字母/正常Font-weight:bold;Font-size:12px;Line-height:1.2em(120%)/1.5em(150%);Font-family:arrial,sans-serif,verdana;缩写成：Font:italicsmall-capsbold12px/1.5emarria...
书写CSS需要注意的地方
1.注意对图片设置宽高和转化为块2.文字超出的设置3.空白部分用空div来设置4.做之前考虑重用,重用部分命名不要和内容相关尽量公共(comWidthareasmallbigimglisttxtboxline)5.需要复写的地方再加上一个class用后面的class复盖前面的样式6.多个class的运用flfrclearFix7.h1-h6不会继承父级样式需要设置大小和字体family8.图片列表左浮动margin-right时给最外层DIV固定宽度overflow:hiden解决掉下来的问题9.li里可以嵌套DIV10.负margin能解决看起来需要定位的问题11.input里居中用padding来挤line-height不靠谱12.超长页面注释不可少<--2014113补充-->13.列表前的图标用<i></i>标签包起来，而不给li加背景，个人理解方便csssprite(可以个i标签宽高) 14csssprite规划 参考新浪微博将图标放在一个图片里从坐到右边的顺序做好分类 15带有中线的HTML结构的...
css margin的相关属性，问题及应用
byzhangxinxufrom http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=48引言：margin为css中非常常用的一个属性，其所包含的内容也是很多的。本文主要分三部分对margin做一些分析叙述，包括其属性，使用过程中会遇到的问题，以及一些高级应用等。对于JavaScript与margin的控制表达这里不叙述。导航：一、margin的相关属性二、margin常见的问题1.IE6下双边距问题2.margin重叠的问题3.margin不起作用的情况三、margin负值的相关应用1.页面上实现csssprite背景定位效果2.在流动性布局中的应用3.在选项卡等边框线的处理4.图片与文字对齐问题一、margin相关属性margin属性是用于在一个声明中设置四个外边距的所有属性的简写属性。没有继承性，也就是它的设置的margin值不会自动传递到下一级标签中。margin后面的参数个数可以是一个，两个，三个或四个。一个参数，例如：margin:10px;表示四边外边距10像素；两个参数，例...