为您找到搜索结果：1786个
CSS复合样式
关于fontOK，我们先从font来谈起。如下一段代码：div{font-size: 14px;font-family: '5FAE8F6F96C59ED1';font-weight: bold;font-style:italic;line-height: 28px;}OK，我们看到，这一系列的操作都是针对font的。这些样式，其实我们是可以缩写的。div{font: italic bold 14px/28px '5FAE8F6F96C59ED1';} 5行的代码用一个font搞定，那么这样写是什么意思呢？首先，font系列，也是可以缩写的我们来分析一下上面的例子。div{font: italic bold 14px/28px '5FAE8F6F96C59ED1';}font-style:italicfont- weight:boldfont-size:14px;line-height:28px;font-family: '5FAE8F6...
CSS hack
在这个浏览器百花争鸣的时代，作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心，主要体现在javascript和css上面。javascript我这次就不谈了，先说说css。 为了适应不同浏览器不同的版本（版本主要就ie来说），ie这朵奇葩以前我们要兼容6-9，而现在10也出来了，在ie下我们可以写条件注释来区分ie和其他浏览器，以及ie的版本，这些请大家自行去搜索吧。不过ie10这朵奇葩，丫的居然不支持条件注释。在这里向ie 10 的开发工程师的全家问“好”。Ok，废话不多说了。直接上代码。 .test{background: #f00; /*各浏览器都认识，主要给高级浏览器用*/background: blue; /*ie10、9、8*/background: red9; /*所有的 ie*/background:#F609; /*9 或 9 IE8*/+background:...
利用css中的border生成三角，兼容包括IE6的主流浏览器
#ladder{width:20px;height:20px;border:10pxsolid;border-color:#ff3300#0000ff#339966#00ff00;}#ladder-top{width:20px;height:20px;border:10pxsolid;border-color:#ff3300transparenttransparenttransparent;border-style:soliddasheddasheddashed;}#ladder-bottom{width:20px;height:20px;border:10pxsolid;border-color:transparenttransparent#339966transparent;border-style:dasheddashedsoliddashed;}#triangle-top{width:0px;height:0px;border:10pxsolid;border-color:#ff3300transparenttransparenttransparent;/border-styl...
IE下实现类似CSS3 text-shadow文字阴影的几种方法
一、开始的擦边话为了测试IE9浏览器，下午晃晃荡荡把系统换成window7的了。果然，正如网上所传言的一样，IE9浏览器确实不支持CSS3 text-shadow属性，且根据最近的IE10preview版的反馈，IE10浏览器也是不支持text-shadow属性的。至于为何不支持，就像女孩的心思一样，我也是百思不得其解。不过考虑到text-shadow的更多的是效果性质的属性，且潜力有限，所以，就我个人而言，最近版本的IE浏览器不支持该属性我还是相对比较淡然的。虽然IE浏览器不支持text-shadow文字阴影属性，但是我们可以使用一些特殊的手段，或是方法实现类似于文字阴影的效果，而本文就将简单展示几种我所知的方法。二、glow滤镜下的文字阴影效果IE滤镜中有个名叫glow的滤镜，用来实现光晕效果，于是，我们可以用来实现无方向的文字阴影效果。该滤镜最简单的使用类似下面：filter:glow(color=black,strength=5);上面实现的效果就是5像素扩散大小的黑色光晕，效果类似下面（截自IE9浏览器）：您可以狠狠地点击这里：glow滤镜下文字阴影效果demode...
IE兼容CSS3圆角border-radius的方法（同时兼容box-shadow，text-shadow）
IE兼容CSS3圆角border-radius，box-shadow，text-shadow的方法1.下载ie-css3.htc 2.CSSbox{-moz-border-radius:15px;/*Firefox*/-webkit-border-radius:15px;/*Safari和Chrome*/border-radius:15px;/*Opera10.5+,以及使用了IE-CSS3的IE浏览器*/-moz-box-shadow:10px10px20px#000;/*Firefox*/-webkit-box-shadow:10px10px20px#000;/*Safari和Chrome*/box-shadow:10px10px20px#000;/*Opera10.5+,以及使用了IE-CSS3的IE浏览器*/behavior:url(ie-css3.htc);/*通知IE浏览器调用脚本作用于'box'类*/} 3.问题：一、只能同时4角圆角，不能单独设置；二、div上可以正常使用，测试text文本框，会出现异常；三、CSS文件要和页面在同一目录下，否则无效四...
CSS布局中一个简单的应用BFC的例子
什么是BFCBFC(BlockFormattingContext)，简单讲，它是提供了一个独立布局的环境，每个BFC都遵守同一套布局规则。例如，在同一个BFC内，盒子会一个挨着一个的排，相邻盒子的间距是由margin决定且垂直方向的margin会重叠。而float和clearfloat也只对同一个BFC内的元素有效。什么情况产生BFCW3C标准中这样描述：Floats,absolutelypositionedelements,blockcontainers(suchasinline-blocks,table-cells,andtable-captions)thatarenotblockboxes,andblockboxeswith‘overflow’otherthan‘visible’(exceptwhenthatvaluehasbeenpropagatedtotheviewport)establishnewblockformattingcontextsfortheircontents.非块级盒子的浮动元素、绝对定位元素及块级容器(比如i...
css 扩大点击范围
业务场景：比如某个按钮大小已经固定了，但是需求点击按钮周边就可以触发点击事件。设置一下before属性里面的height,width就是设置你要点击的范围。 rem是css3中新增加的一个单位属性(fontsizeoftherootelement),根据页面的根节点的字体大小进行转变的单位。root！！！！！！！！！根节点，也就是需要扩大点击事件的html元素例：(下面例子中的根节点是html，它的字体大小是100px，所以根节点下面的元素所设置的rem，都是1rem=100px。)rem的初始值是16px，也就是说在没有设置根节点的font-size的时候，1rem=16px.og_next{width:25px;height:50px;background:url(../images/btn.png)no-repeat;position:absolute;top:250px;z-index:99;cursor:pointer;margin-left:0px;padding-left:-2px;}.og_next:before{margin-top:-250px;conte...
CSS自动控制图片大小的代码
img{max-width:800px;height:auto;}代码中的max-width:800px限制图片的最大宽度为800像素，而下面的hight:auto很关键，可以保证图片有正确的长宽比，不至于因为被调整宽度而变形。 实用例子（未经测试————————————————————） WordPress自动调整图片大小 1、打开你的“样式表(style.css)”文件，然后在pimg{或类似的地方添加下列代码(可以将所有550改成你想要的宽度)代码如下pimg{max-width:550px;width:expression(this.width>550?"550px":true);height:auto;} 这里是我实际中用到的一个设置样式<styletype...
前端进阶试题（css部分）
unknow 一、css 40分1. 什么是盒模型？答：2. Doctype的几种类型？答：①.过渡的；②.严格的；③.框架的更多详细介绍参考：资料3. 如何布局左不动右边自适应的两列布局？答：两种简单的方法：position:absolute;和float:left;两种效果是一样的，代码：1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2<htmlxmlns="http://www.w3.org/1999/xhtml">3<head>4<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5<title>1</title>6<styletype="text/css">7*{8margi...
JS+CSS简单实现DIV遮罩层显示隐藏【转藏】
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>DIVCSS遮罩层</title><scriptlanguage="javascript"type="text/javascript">functionshowdiv(){document.getElementById("bg").style.display="block";document.getElementById("show").style.display="block";}functionhidediv(){document.getElementById("bg").style.display='none';document.getElementById("show").s...
重温css系列01
2016-01-07——解决背景层透明度的问题需要ie9+问题：如果我对div设置opacity:0.8;这个透明属性后希望内容不发生改变怎么弄？A:做两层，或者rgba 解决后的效果图： 独自坐着地铁突然一股莫名的孤独感涌上心头，原来这么久都是一个人承载着生活中的苦辣与酸甜！往往都在拼命的往终点狂奔，忽略了太多身边的人和事了，需要我们静下来，重新整理一下自己的思绪，勿忘初衷！——2015-10-11（帮朋友搬家）好，我们进入今天的主题重新整理一下css中一些容易忽略的问题1.css盒子模型 <!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><style>body{margin:0;}.container{margin:10px;}.bd{border-style:dotted}.pd{p...
css技巧
一、设置等宽的表格table-layout:fixed;table设置宽，则每列平分table的宽示例<style>table{table-layout:fixed;border-collapse:collapse;width:200px;}tr,td{border:1pxsolid#eee;}</style><table><thead><tr><td>三个字</td><td>八字八字八字八字</td></tr><tr><td>六个字六个字</td><td>六个字六个字</td></tr></thead><tbody><tr><td>两字</td><td>两字</td></tr><tr><td>六个字六个字</td><td>六个字六个字</td>...
【一起来烧脑】一步学会CSS3体系
[外链图片转存失败(img-yfi1VPyy-1563434266398)(https://upload-images.jianshu.io/upload_images/11158618-fc8784aa1868fbb5.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]CSS3完全向后兼容选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面[外链图片转存失败(img-v3cEr47w-1563434266400)(https://upload-images.jianshu.io/upload_images/11158618-722281d083eec175.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)][外链图片转存失败(img-huN4JfPI-1563434266401)(https://upload-images.jianshu.io/upload_images/11158618-f7d4183236cb28f3.png?imageM...
CSS 公共样式分享
global.css|reset.css（格式化样式） common.css（公共组件样式） layout.css（当前页面样式）清除全站所有页面的浏览器默认样式，保证在初始样式在所有浏览器下一致。common.css（公共组件样式）一般一个网站所有页面头部、底部样式都是一致的，而且很长时间不会有大的改变，改变的大概就是产品、运营的经常需要添加、去掉某些入口的需求，要保证全站所有页面头部一次替换生效，只要把头文件，已经对应的样式一发，马上生效，很快就有响应。比如翻页、表单（输入框、按钮）等样式也是全站统一的，把这些样式都放到common.css里面，如果哪天所有的按钮样式要变更，一次替换就成功了。layout.css（当前页面样式）公共组件以外的所有样式都写到这个样式文件里面，并且保证一个页面一个独立样式，页面html和css写法要模块化，保证迅速响应项目频繁的迭代。为什么要保证一个页面一个独立样式，而且要模块化，肯定有朋友和我有过一样的经历，修改一行样式代码，整个页面甚至N个页面都会受影响，搞了半天还不知道哪里出了问题，返回到修改前的版本，就没问题了。...
初探css-18 尺寸
CSS尺寸(Dimension)属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。这个例子演示了如何设置不同元素的高度。<style>img.normal{height:auto;}img.big{height:120px;}p.ex{height:100px;width:100px;}</style></head><body><imgclass="normal"src="logocss.gif"width="95"height="84"/><br><imgclass="big"src="logocss.gif"width="95"height="84"/><pclass="ex">这个段落的高和宽是100px.</p><p>这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本.</p></body>这个例子演示了如何使用百分比值设置元素的高度。<sty...