搜索到
16
篇与
的结果
-
HTML5实现微信聊天气泡效果 HTML5实现微信聊天气泡效果图： 话不多说直接放代码：<div class="container-manc"> <!-- Notice/Center --> <div class="chat-notice"> <span>漫川邀请“汤圆”进入群聊</span> </div> <!-- Left --> <div class="chat-sender"> <div><img src="http://q.qlogo.cn/headimg_dl?dst_uin=82632418&spec=640&img_type=jpg"></div> <div>汤圆</div> <div> <div class="chat-left_triangle"></div> <span>哇！博主的站点真的好好看，请问如何给博主进行留言呢？</span> </div> </div> <!-- Right --> <div class="chat-receiver"> <div><img src="http://q.qlogo.cn/headimg_dl?dst_uin=28422961&spec=640&img_type=jpg"></div> <div>漫川</div> <div> <div class="chat-right_triangle"></div> <span>您可以在下面与博主进行留言，看到会回复您的喔！</span> </div> <!-- Right --> <div class="chat-receiver"> <div><img src="http://q.qlogo.cn/headimg_dl?dst_uin=28422961&spec=640&img_type=jpg"></div> <div>漫川</div> <div> <div class="chat-right_triangle"></div> <span>您的每句话都会记录在漫川站点的数据库里，直到风消失的那天.</span> </div> </div>CSS代码：/*微信聊天气泡*/ .chat-sender{ clear:both; font-size: 80%; } .chat-sender div:nth-of-type(1){ float: left; } .chat-sender div:nth-of-type(2){ margin: 0 50px 2px 50px; padding: 0px; color: #848484; font-size: 70%; text-align: left; } .chat-sender div:nth-of-type(3){ background-color: #efefef; /*float: left;*/ margin: 0 50px 10px 50px; padding: 10px 10px 10px 10px; border-radius:7px; text-indent: -12px; } .chat-receiver{ clear:both; font-size: 80%; } .chat-receiver div:nth-of-type(1){ float: right; } .chat-receiver div:nth-of-type(2){ margin: 0px 50px 2px 50px; padding: 0px; color: #848484; font-size: 70%; text-align: right; } .chat-receiver div:nth-of-type(3){ /*float:right;*/ background-color: #b2e281; margin: 0px 50px 10px 50px; padding: 10px 10px 10px 10px; border-radius:7px; } .chat-receiver div:first-child img, .chat-sender div:first-child img{ width: 40px; height: 40px; border-radius: 10%; } .chat-left_triangle{ height: 0px; width: 0px; border-width: 6px; border-style: solid; border-color: transparent white transparent transparent; position: relative; left: -22px; top: 3px; } .chat-right_triangle{ height: 0px; width: 0px; border-width: 6px; border-style: solid; border-color: transparent transparent transparent #b2e281; position: relative; right:-22px; top:3px; } .chat-notice{ clear: both; font-size: 70%; color: white; text-align: center; margin-top: 15px; margin-bottom: 15px; } .chat-notice span{ background-color: #cecece; line-height: 25px; border-radius: 5px; padding: 5px 10px; }
-
简单CSS3技巧实现的Logo动画 之前不少人提过说要实现像阿里百秀Logo那样的动画效果，为了满足广大用户的需求，这里就简单做个演示。东西相对较简单，所以不要认为你搞不定它。下面是案例代码<style>.imlogo{ display: block; width: 160px; height: 80px; background: #FF5E52 url(https://themebetter.com/uploads/2015/01/logo2.png) center 22px no-repeat; -webkit-transition: background-position linear .2s; -moz-transition: background-position linear .2s; transition: background-position linear .2s;}.imlogo:hover{ background-position: center -48px;} </style> <a class="imlogo" href="#"></a>其实你只需要改变其中的图片地址、Logo区域大小（160px和80px）背景图的坐标（22px和-48px），你就能实现自己的动画了，如果你很懒，那就做个119*100px的logo即可，像下面这样的一张图（背景做成透明的，png格式，即可实现代码改变颜色）。在主题的style.css最后加上，再做个原来Logo高度2倍的图先替换，然后更改其中的-48为你的位置即可，不会计算的话直接多试几个就能知道哪个合适了。本文属原创，转载请注明原文：https://themebetter.com/css3-logo.html -
-
CSS横竖排格式化工具 每次扒皮，发现好多CSS代码是横写着的，可我喜欢竖着看，发现网上有这样的工具，赶紧收集一份先。 演示地址：https://cmsblog.cn/pp/css.html 源码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css横排竖排工具</title> <style> .toolarea {width:800px;height:300px;outline:none;padding:10px;border:5px solid #ddd;} .bt {width:150px;height:40px;} </style> </head> <body> <!-- /工具开始 --> <script language=JavaScript> <!-- function $() { var elements = new Array(); for (var i = 0; i < arguments.length; i++) { var element = arguments[i]; if (typeof element == 'string') element = document.getElementById(element); if (arguments.length == 1) return element; elements.push(element); } return elements; } function CSSencode(code){ code = code.replace(/\r\n/ig,''); code = code.replace(/(\s){2,}/ig,'$1'); code = code.replace(/\t/ig,''); code = code.replace(/\n\}/ig,'\}'); code = code.replace(/\n\{\s*/ig,'\{'); code = code.replace(/(\S)\s*\}/ig,'$1\}'); code = code.replace(/(\S)\s*\{/ig,'$1\{'); code = code.replace(/\{\s*(\S)/ig,'\{$1'); return code; } function CSSdecode(code){ code = code.replace(/(\s){2,}/ig,'$1'); code = code.replace(/(\S)\s*\{/ig,'$1 {'); code = code.replace(/\*\/(.[^\}\{]*)}/ig,'\*\/\n$1}'); code = code.replace(/\/\*/ig,'\n\/\*'); code = code.replace(/;\s*(\S)/ig,';\n\t$1'); code = code.replace(/\}\s*(\S)/ig,'\}\n$1'); code = code.replace(/\n\s*\}/ig,'\n\}'); code = code.replace(/\{\s*(\S)/ig,'\{\n\t$1'); code = code.replace(/(\S)\s*\*\//ig,'$1\*\/'); code = code.replace(/\*\/\s*([^\}\{]\S)/ig,'\*\/\n\t$1'); code = code.replace(/(\S)\}/ig,'$1\n\}'); code = code.replace(/(\n){2,}/ig,'\n'); code = code.replace(/:/ig,':'); code = code.replace(/ /ig,' '); return code; } //--> </script> <div style="width:820px;margin:0 auto;"> <h3>css格式化工具</h3> <textarea class="toolarea" id="code"></textarea><br/><br/> <input class="bt lvse" onclick="$('code').value = CSSencode($('code').value);" value="横排" type="button" /> <input class="bt lanse" onclick="$('code').value = CSSdecode($('code').value);" value="竖排" type="button" /> </div> </body> </html>
-
网站设计的一些css命名规则 头：header内容：content/containe尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content标签页：tab文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guild服务：service注册：regsiter状态：status投票：vote合作伙伴：partnerXHTML文件中id的命名1)页面结构容器: container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center(2)导航导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu标题: title摘要: summary(3)功能标志：logo广告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg当前的: current小技巧：tips图标: icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyrightXHTML文件中class的命名(1)颜色:使用颜色的名称或者16进制代码,如(不建议以表现来命名).red { color: red; }.f60 { color: #f60; }.ff8600 { color: #ff8600; }(2)字体大小,直接使用"font+字体大小"作为名称,如.font12px { font-size: 12px; }.font9pt {font-size: 9pt; }(3)对齐样式,使用对齐目标的英文名称,如.left { float:left; }.bottom { float:bottom; }(4)标题栏样式,使用"类别+功能"的方式命名,如.barnews { }.barproduct { }注意事项1.一律小写;2.尽量用英文;3.不加中杠和下划线;4.尽量不缩写，除非一看就明白的单词.主要的 master.css模块 module.css基本共用 base.css布局，版面 layout.css主题 themes.css专栏 columns.css文字 font.css表单 forms.css补丁 mend.css打印 print.css
-
CSS学习笔记 打算把默认模版弄下，在学习下CSS，记录些笔记。四种样式的优先级按照“就近原则”：行内样式>内嵌样式>链接样式>导入样式body,div,p,a,ul,li{margin:0; padding:0;}以下为页面模块的常用命名 头：header 热点：hot 内容：content/ 新闻：news 尾：footer 下载：download 寻航：nav 子寻航：subnav 侧栏：sidebar 菜单：menu 栏目：column 子菜单：submenu 页面外围控制整体布尿宽度：wrapper 搜索：search 左右中：left right center 友情链接：friendlink 登彔条：loginbar 页脚：footer 标志：logo 版权：copyright 广告：banner 滚劢：scroll 页面主体：main 小技巧：tips我们在布局页面的时候，会将HTML标签分成丟种，块状元素和内联元素（我们平时用到的标签div和p就是块状元素，链接标签a就是内联元素）。他们是径重要的两个概念，既然说到概念就先看看块状元素和内联元素的定义，在定义中你要留意他们两个的不同之处块状元素 一般是其他元素的容器，可容纳内联元素和其他坑状元素，块状元素排斥其他元素不其位于同一行，宽度(width)和高度(height)起作用。帯见块状元素为div和p。 内联元素 内联元素叧能容纳文本戒者其他内联元素，它允讲其他内联元素不其位于同一行，但宽度(width)和高度(height)不起作用。帯见内联元素为“a”。 块状元素排斥其他元素不准位于同一行 如果要让定义好的宽度和高度对内联元素起作用，有什举办法没有？答案是：当然。因为事情没有绝对的，在CSS上面也成立，因为CSS中有两种元素，内联元素和块状元素，但是宽度和高度叧对坑状元素起作用，内联元素丌起作用，如果我们把内联元素转化成块状元素，他们就具有了块状元素的特性了嘛，当然宽度和高度也就起作用了，如果你能想到这个思路，证明你的大脑现在非帯活跃哟，这时候我们叧需要给相应的内联元素加上一个属性display:block就可以了，如下： a{color:#fff; background:#F93;width:100px;height:50px; display:block;} 为什举两个a都处于同一行了呢，那是因为这两个内联元素a都被转化成了坑状元素，既然成功转化为坑状元素，就应该具有坑状元素最显著的一个特点，不允讲其他元素不他同一行，所以返丟个a垂直掋列喽body,div{padding:0; margin:0;} margin:0 auto; 居中清除：<div class="clear"></div> .clear{clear:both;}ul里面癿li 标签也是块状元素 #nav ul li{ float:left;} 可以让它们横向排列 list-style:none; 无图标 #nav ul li a{display:block; height:35px; font-size:12px; color:#333; text-decoration:none; float:left; padding:0 10px;}首先有个标题，其次下面是标题癿一个列表，这样子容易让人想到用“ul+li”的组吅，但是我们返里有一个更好用法， 用“dl+dt+dd”组吅，返种组吅在返里是一个径丌错癿选择，要比“ul+li”要好侧边栏可用dl dt dd 方便CSSbody,div,p,ul,li,dl,dt,dd,h1,a,img{margin:0; padding:0;} img{border:none;} 图片无边框img 标签是一个径特别癿标签，因为它本身是内联元素，但却体现出坑状元素宽高起作用癿特性，返是径矛盾癿地斱，返就为页面布尿埋下隐患，要举为内联元素，要举为坑状元素，在返里我们更需要它癿坑状元素癿属性，所以我们将身为内联元素癿img标签转化为坑状元素，用“display:block; ”。#banner img{display:block; width:1000px; height:292px;} 返句话癿意思就是#banner里面癿图片大小为1000px*292px，无讳图片原本大小，叧要在#banner内，就是返个宽高。 overflow:hidden; 隐藏 line-height:32px; 行高，可以让文字有垂直居中的效果块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心xhtml的块级元素(div)和内联元素(span)块级元素：就是一个方块，像段落一样，默认占据一行出现；内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ..<em>...... 块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。级元素默认占据一行，相当于在它之前和之后各插入了一个换行；而内联元素span没对显示效果造成任何影响，事实也是如此；em只是让字体变成了斜体，也没有单独占据一行。这就是块级元素和内联元素，正因为有了这些元素，才使我们的网页变得丰富多彩。如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。也就是说，可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素二级菜单：#menu ul li ul { border:1px solid #ccc;}#menu ul li ul li { float:none; width:85px; background:#eee; margin:0;}#menu ul li ul li a { background:none;}#menu ul li ul li a:hover { background:#333; color:#fff;}下一步就该把二级菜单隐藏，当鼠标划过时显示出来了。增加如下代码#menu ul li ul { display:none; border:1px solid #ccc;}#menu ul li:hover ul { display:block;}注意第二行的写法，#menu ul li:hover ul这个样比较难理解，它的意思是定义当鼠标划过#menu下ul下li时，li下的ul的样式（有点饶舌），这里设置为display:block，意思是鼠标划过时显示这块内容。开始隐藏，鼠标划过时显示， 这就实现了我们想要的效果。目前IE6只支持a的伪类，其它标签的伪类不支持，所以要想在IE6下也显示正确，需要借助js来实现。我们定义一个类.sfhover（自己命名，需和JS中相同）的属性为display:block;然后当鼠标划过后，用JS给当前li添加上这个样式上，根据css的优先级：指定的高于继承的原则，就实现了IE6下的正确显示。所以增加如下代码：#menu ul li.sfhover ul { display:block;} 认真跟着教程制作的朋友可能已经发现，现在应用的JS和纵向导航时应用的不样，但最终实现的效果是一样的。同理css在布局网站时，也是可以多种方法的，正所谓条条大道通罗马，希望大家举一反三，加深前面教程的掌握。JS部分本例不做讲解，如果你想弄清楚JS是如何实现的，请学习js相关内容。到这里，本例就基本完成了，还有一个问题是当前导航下有内容的话，如果二级菜单显示，将会把下边的内容挤跑，所以需要给#menu ul li ul增加position:absolute;属性，当其绝对定位后，它将脱离原来文档流，不再占据空间，因此也不会再把下边内容挤跑了下拉菜单完整代码：#menu ul li ul { border:1px solid #ccc; display:none; position:absolute;}#menu ul li ul li { float:none; width:87px; background:#eee; margin:0;}#menu ul li ul li a { background:none;}#menu ul li ul li a:hover { background:#333; color:#fff;}#menu ul li:hover ul { display:block;}#menu ul li.sfhover ul { display:block;}
-
转一些CSS技巧 1. 文字的水平居中将一段文字置于容器的水平中点，只要设置text-align属性即可： text-align:center;2. 容器的水平居中先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可。 div#container { width:760px; margin:0 auto; }3. 文字的垂直居中单行文字的垂直居中，只要将行高与容器高设为相等即可。比如，容器中有一行数字。 1234567890然后CSS这样写： div#container {height: 35px; line-height: 35px;}如果有n行文字，那么将行高设为容器高度的n分之一即可。4. 容器的垂直居中比如，有一大一小两个容器，请问如何将小容器垂直居中？ 首先，将大容器的定位为relative。 div#big{ position:relative; height:480px; }然后，将小容器定位为absolute，再将它的左上角沿y轴下移50%，最后将它margin-top上移本身高度的50%即可。 div#small { position: absolute; top: 50%; height: 240px; margin-top: -120px; }使用同样的思路，也可以做出水平居中的效果。5. 图片宽度的自适应如何使得较大的图片，能够自动适应小容器的宽度？CSS可以这样写： img {max-width: 100%}但是IE6不支持max-width，所以遇到IE6时，使用IE条件注释，将语句改写为： img {width: 100%}6. 3D按钮要使按钮具有3D效果，只要将它的左上部边框设为浅色，右下部边框设为深色即可。 div#button { background: #888; border: 1px solid; border-color: #999 #777 #777 #999; }7. font属性的快捷写法font快捷写法的格式为： body { font: font-style font-variant font-weight font-size line-heightfont-family; }所以， body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: normal; font-variant: small-caps; font-style: italic; line-height: 150%; }可以被写成： body { font: italic small-caps normal 13px/150% Arial, Helvetica,sans-serif; }8. link状态的设置顺序link的四种状态，需要按照下面的前后顺序进行设置： a:link a:visited a:hover a:active9. IE条件注释你可以利用条件注释，设置只对IE产生作用的语句： 还可以区分各种不同的IE版本： 10. IE6专用语句：方法一由于IE6不把html视为文档的根元素，所以利用这一点，可以写出只有IE6才能读到的语句： * html{ } * html body{ } * html .foo{ }IE7专用语句则要写成 *+html .foo{ }11. IE专用语句：方法二除了IE6以外，所有浏览器都不能识别属性前的下划线。而除了IE7之外，所有浏览器都不能识别属性前的*号，因此可以写出只有这两个浏览器才能读到的语句： .element { background: red; *background: green; _background: blue; }12. CSS的优先性如果同一个容器被多条CSS语句定义，那么哪一个定义优先呢？基本规则是： 行内样式 > id样式 > class样式 > 标签名样式比如，有一个元素： 行内样式是最优先的，然后其他设置的优先性，从低到高依次为： div < .class < div.class < #id < div#id <#id.class < div#id.class13. IE6的min-heightIE6不支持min-height，有两种方法可以解决这个问题：方法一： .element { min-height: 500px; height: auto !important; height: 500px; }共有三条CSS语句，第一句是针对其他浏览器设置最小高度，第三句是针对IE设置最小高度，第二句则是让其他浏览器覆盖第三句的设置。方法二： .element { min-height: 500px _height: 500px }_height只有IE6能读取。14. font-size基准浏览器的缺省字体大小是16px，你可以先将基准字体大小设为10px： body {font-size:62.5%;}后面统一采用em作为字体单位，2.4em就表示24px。 h1 {font-size: 2.4 em}15. Text-transform和Font VariantText-transform用于将所有字母变成小写字母、大写字母或首字母大写： p {text-transform: uppercase} p {text-transform: lowercase} p {text-transform: capitalize}Font Variant用于将字体变成小型的大写字母（即与小写字母等高的大写字母）。 p {font-variant: small-caps}16. CSS重置CSS重置用于取消浏览器的内置样式，请参考YUI和Eric Meyer的样式表。17. 用图片充当列表标志默认情况下，浏览器使用一个黑圆圈作为列表标志，可以用图片取代它： ul {list-style: none} ul li { background-image: url("path-to-your-image"); background-repeat: none; background-position: 0 0.5em; }18. 透明将一个容器设为透明，可以使用下面的代码： .element { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }在这四行CSS语句中，第一行是IE专用的，第二行用于Firefox，第三行用于webkit核心的浏览器，第四行用于Opera。19. CSS三角形如何使用CSS生成一个三角形？先编写一个空元素 然后，将它四个边框中的三个边框设为透明，剩下一个设为可见，就可以生成三角形效果： .triangle { border-color: transparent transparent green transparent; border-style: solid; border-width: 0px 300px 300px 300px; height: 0px; width: 0px; }20. 禁止自动换行如果你希望文字在一行中显示完成，不要自动换行，CSS命令如下： h1 { white-space:nowrap; }21. 用图片替换文字有时我们需要在标题栏中使用图片，但是又必须保证搜索引擎能够读到标题，CSS语句可以这样写： h1 { text-indent:-9999px; background:url("h1-image.jpg") no-repeat; width:200px; height:50px; }22. 获得焦点的表单元素当一个表单元素获得焦点时，可以将其突出显示： input:focus { border: 2px solid green; }23. !important规则多条CSS语句互相冲突时，具有!important的语句将覆盖其他语句。由于IE不支持!important，所以也可以利用它区分不同的浏览器。 h1 { color: red !important; color: blue; }上面这段语句的结果是，其他浏览器都显示红色标题，只有IE显示蓝色标题。24. CSS提示框当鼠标移动到链接上方，会自动出现一个提示框。 链接文字提示文字CSS这样写： a.tooltip {position: relative} a.tooltip span {display:none; padding:5px; width:200px;} a:hover {background:#fff;} a.tooltip:hover span{display:inline; position:absolute;}25. 固定位置的页首当页面滚动时，有时需要页首在位置固定不变，CSS语句可以这样写，效果参见http://limpid.nl/lab/css/fixed/header： body{ margin:0;padding:100px 0 0 0;} div#header{ position:absolute; top:0; left:0; width:100%; height:; } @media screen{ body>div#header{position: fixed;} } * html body{overflow:hidden;} * html div#content{height:100%;overflow:auto;}IE6的另一种写法（用于固定位置的页脚）： * html #footer { position:absolute; top:expression_r((0-(footer.offsetHeight)+(document.documentElement.clientHeight ?document.documentElement.clientHeight :document.body.clientHeight)+(ignoreMe =document.documentElement.scrollTop ?document.documentElement.scrollTop :document.body.scrollTop))+'px');}26. 在IE6中设置PNG图片的透明效果 .classname { background: url(image.png); _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='image.png', sizingMethod='crop'); }27. 各类浏览器的专用语句 * html #uno { color: red } *:first-child+html #dos { color: red } html>body #tres { color: red } html>body #cuatro { color: red } html:first-child #cinco { color: red } html[xmlns*=""] body:last-child #seis { color: red } body:nth-of-type(1) #siete { color: red } body:first-of-type #ocho { color: red } @media screen and (-webkit-min-device-pixel-ratio:0) { #diez { color: red } } @media screen and (max-device-width: 480px) { #veintiseis { color: red } } html[xmlns*=""]:root #trece { color: red } *|html[xmlns*=""] #catorce { color: red } :root *> #quince { color: red } *+html #dieciocho { color: red } #veinticuatro, x:-moz-any-link { color: red } #veinticinco, x:-moz-any-link, x:default { color: red } #once { _color: blue } #doce { *color: blue; } #diecisiete { color: blue } #diecinueve { color: blue\9; } #veinte { color: blue\9; } #veintesiete { color: blue !ie; }28. 容器的水平和垂直居中HTML代码如下： CSS代码如下： .logo { display: block; text-align: center; display: block; text-align: center; vertical-align: middle; border: 4px solid #dddddd; padding: 4px; height: 74px; width: 74px; } .logo * { display: inline-block; height: 100%; vertical-align: middle; } .logo .photo { height: auto; width: auto; max-width: 100%; max-height: 100%; }29. CSS阴影外阴影： .shadow { -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc; }内阴影： .shadow { -moz-box-shadow:inset 0 0 10px #000000; -webkit-box-shadow:inset 0 0 10px #000000; box-shadow:inset 0 0 10px #000000; }30. 取消IE文本框的滚动条 textarea { overflow: auto; }
-
优秀的CSS布局大全 这份列表收集一些比较优秀的CSS布局，这些布局都免费供个人和商业使用。当然，你使用之前还是得看版权说明，也许会发生许可协议变更。 Layout Gala- 这个网站收集了40多个专业的CSS布局，每个布局都通过了CSS和HTML验证，且不需要Hack，兼容各大主流浏览器。 CSS Layouts - 另一个专门收集CSS布局的网站。 Dynamic Drive CSS Layouts – Dynamic Drive对于喜欢设计的人来说是比较熟悉的网站了，它们同样提供有很多CSS布局，两栏，三栏，自适应宽度，固定宽度都有。 Nice and Free CSS Layouts – 12 个免费的CSS布局。 Strictly CSS – 10个CSS布局。 Maxdesign - 多种CSS布局，且含有详细的说明教程。 CSSplay ThreeColumnLayouts, by CSS Discuss CSS Intensivstation Code-Sucks - CSS Tinderbox Jimmy Lin - 8 个简单的 CSS/XHTML 模板 Little Boxes - 16 个CSS布局 Ruthsarian - 免费的CSS layouts ，还有CSS下拉菜单 Mitchbryson TJK Design Bluerobot csscreator - CSS 布局生成器.
-
最佳PHP，HTML5和CSS框架大荟萃之二 HTML5框架 这篇文章继续我们的框架大荟萃，如果你没有阅读前面的文章，请点击这里查看PHP框架。1. Foundation 5数以百万计的设计师和工程师都接受使用foundation框架来作为产品或者网站的前端设计。foundation是第一个支持响应式，语义化，移动为先的开源框架。最近Foundation5已经发布，作为当今最快速的发布版本工具，在很多方便比如开发产品和网站都很快。内建了一个新的命令行工具可以让你加速foundation的项目开发，并且所有这些项目都使用libsass，一个后端的SASS编译类库，可以大大的提高SCSS的变化，提速了5倍。 (如果大家对于foundation框架有兴趣，请阅读foundation专题教程）源代码2. IonicIonic是一个强大HTML5本地应用开发框架，可以帮助你创建本地风格的移动应用，使用web相关技术，例如，HTML,CSS，javascript。Ionic主要针对UI界面和Look and Feel。开源并且基于SASS，针对Angular.js优化。通过知名的本地移动开发SDK来建模设计，使得对于熟悉iOS和Android开发的开发人来说上手非常容易。源代码3. Lime JS这是个HTML5的游戏框架，帮助你看起来像本地应用的游戏，在桌面，平板或者触摸设备浏览器上运行速度非常快。主要使用来自Google的losure类库开发，拥有很丰富的功能和class来控制时间轴，事件，图形和动画。同时这个框架拥有完整的Sprite sheet来支持。源代码4. 52 Framework52 frameworks在设计师和开发人员中最知名的HTML5/CSS3的框架。支持现代浏览器（包括IE6）使得它成为最有特色并且最实用的框架。源代码5. Sencha TouchSencha touch是一个高性能的HTML5移动应用框架，并且是Sencha HTML5平台的基石。帮助开发具有世界级用户体验的应用。Sencha touch是唯一的允许开发人员在iOS，Android，Window phone及其其它平台开发强大应用的框架。源代码6. JoJo是一个开源的HTML5移动应用框架。帮助你开发基于多平台的应用，支持：webOS，Android，Symbian，Safari，Chrome和Dashboard组件。这个框架非常迷你，只有8kb。没有任何的类库依赖并且兼容很多其它的JS框架。同时兼容PhoneGap，使得它也可以支持本地应用。源代码7. FireShellFireShell主要为现代浏览器开发人员准备。鼓励更好的工作流，并且可以适应单人或者团队使用。支持javascript任务运行，编译过程，自动压缩和文件组合，使用高级的HTML5 boidlerplated来封装。对于HTML5语义，WAI-ARIA角色和web访问来说拥有非常的功能。CSS框架支持小项目，并且可以升级大项目，拥有非常棒的配置安装，帮助你生成基于对象得到CSS开发扩展过程。源代码8. GridlessGridLess是一个HTML5/CSS3的boilerplate框架，帮助你开发移动为先的响应式跨浏览器网站，拥有非常漂亮的印刷排版。支持DBY方式并且允许开发人员使用CSS normalization，漂亮的排版，组织非常清楚地目录，IE Bug fix及其其它非常不错的功能。源代码9. iio EngineiiO Engine是一个开源的使用JS/画布创建HTML5应用的框架。这个框架非常轻量级（45kb），并且整合了一个debugging系统和跨平台的引擎。不依赖任何JS框架，可以和Box2D联合工作。提供了完整的文档和很多简化开发的例子。源代码10. Lungo.jsLungo.js是第一个移动框架，包含了很多丰富的HTML5，CSS3，和JS特性。帮助开发人员开发iOS，Android和BlackBerry，WebOS的应用。这个框架利用了目前移动设备的很多特性，可以捕获很多不同事件，例如，swipe，tap，double tap等等。不试用任何图片，所有内容都是vector，你可以直接发布你的应用到“应用商量”里或者网站上。源代码via codegeekz.com
-
最佳PHP，HTML5和CSS框架大荟萃之一 PHP框架 开发框架是用来帮助开发人员快速设计和开发动态网站的基础，几乎每个月都会有大量的框架被开发人员发布，用来帮助大家更简单和高效的开发web应用。在这篇文章中，我们将总结荟萃出最佳的PHP，HTML5和CSS框架，希望能够在大家选择框架的时候能够供大家参考借鉴。如果你有任何建议和补充，欢迎给我们极客标签社区的编辑们留言推荐，谢谢阅读！ 同时如果你有兴趣翻译或者翻译技术文章，请加入我们的原创翻译小组。PHP框架1. Cake PHPCakePHP是一个拥有极大灵活性的开发，维护和部署的快速开发框架。使用非常常见的MVC和ORM设计模式，及其配置规则帮助大家简化开发过程而无须开发过多的代码和ZF类似，CakePHP不要求配置。使用简单。在IRC上拥有非常友好的社区#cakePHP，用来帮助新的用户快速开始学习。基于MIT License，拥有最佳实践，例如，安全，认证和session处理。拥有面对对象的方式帮助你更简单的使用。源代码2. Yii FrameworkYii是一个免费，开源的web应用开发框架，使用PHP5开发，帮助开发干净，简洁的设计并且鼓励开发开发。它帮助流水化的开发应用，并且保证高效，可扩展和易维护。性能极大的优化，非常适合开发任何类型的产品和项目。然而，它内建复杂，企业级别的应用。你拥有完整的控制，包括表现层和持久层，符合了企业级别开发的指导方针源代码3. ZendZend Framework 2 是一个使用PHP5.3+来开发web应用和服务的开源框架。使用100%的面对对象的代码并且使用PHP5.3种的新特性，例如名字空间，late static binding，lamda function和closure。Zend framewok 2 由成功的PHP框架Zend Framework 1演变而来，而Zend framework 1拥有1500万的下载量。Zend framework2拥有独特的组件结构，每一个组件都设计的尽量少和其它组件产生依赖关系。 ZF2遵循了严格的面对对象的设计原理。这种非严格的组件关系结构允许开发人员使用任何他想使用的组件。源代码4. SymfonySmyfony是一个web应用框架，遵循了典型的MVC（model view controller）的设计结构，现在越来越受欢迎，Symfony基于MIT license，它使用一些PHP代码类的辅助类库得开发的过程简单源代码5. Webasystwebasyst是一个开源的PHP框架用来开发平滑的多用户web应用或者复杂的网站。和其它的框架，例如，zend和symfony，比较起来，Webasyst框架更专注，并且允许更快和更高效的创建基于商业和团队使用的应用。这个框架提供了大量的现成的工具用来管理用户和授权，UI创建，移动端的访问等等源代码6. LaravelLaravle是一个定位于优雅简单的PHP框架。变成不会变的苦闷。事实上，使用正确的工具绝对是让它成为一个让人愉悦的事情。Laravel适合所有的PHP开发人员，特别是初学者。除了完善的文章，Laravel的友好的社区一直帮助回答文档上没有涉及到的相关问题。使用Bundle来打包和分享代码绝对是一个非常棒的方式源代码7. GuzzleGuzzle是一个帮助大家解决发送HTTP请求和创建web service 客户端中多余的步骤的框架。包含了用来创建强壮的web service客户端的工具，其中： 定义输入和输出的服务描述API，用来遍历分页资源的资源迭代，高效发送大量请求等等。源代码8. Phalcon PHPPhalcon PHP是一个被发布成为C扩展并且提供高性能和低资源消耗的web框架。使用C书写，平台无关。作为这样的框架，PHP支持微软的windows系统， GNU/linux，Max OSX，你可以下载一个适合你的系统的二进制包或者自己编译源代码9. CodeIgniterCodelgiter是一个强大的PHP框架，拥有非常小的体积，针对需要使用简单优雅的工具套件开发完整特性的web应用而开发。如果你需要处理共享主机账号或者客户时间有限制，并且厌倦了没有文档的大型框架的话，Codeignier可能非常适合你源代码10. Fuel PHPFuel是一个简单，灵活，社区驱动的PHP5.3 web框架，基于其它框架中的好的想法而开发一个框架。在Apache,，IIS和Nginx上测试过。Fuel使用另外一种方式实现，和其它框架不同，它努力成为社区驱动的框架。刚成立不到6个月，已经有30多个开发人员贡献了代码和文档。源代码via codegeekz来源:gbtags.com
-
纯CSS打造wordpress时间轴文章归档页 建页面archives,然后把下面的代码扔进去<div class="archives"> <?php $previous_year = $year = 0; $previous_month = $month = 0; $ul_open = false; $myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC'); foreach($myposts as $post) : setup_postdata($post); $year = mysql2date('Y', $post->post_date); $month = mysql2date('n', $post->post_date); $day = mysql2date('j', $post->post_date); if($year != $previous_year || $month != $previous_month) : if($ul_open == true) : echo '</ul>'; endif; echo '<h3 class="m-title">'; echo the_time('Y-m'); echo '</h3>'; echo '<ul class="archives-monthlisting">'; $ul_open = true; endif; $previous_year = $year; $previous_month = $month; ?> <li> <a href="<?php the_permalink(); ?>"><span><?php the_time('Y-m-j'); ?></span> <div class="atitle"><?php the_title(); ?></div></a> </li> <?php endforeach; ?> </ul> </div> 其实归档的教程一大堆，主要是我这个CSS样式哈，纯CSS实现时间轴，当然，IE9-是挂掉了。.archive-title{border-bottom:1px #eee solid;position:relative;padding-bottom:4px;margin-bottom:10px} .archives li a{padding:8px 0;display:block} .archives li a:hover .atitle:after{background:#ff5c43} .archives li a span{display: inline-block;width:100px;font-size:12px;text-indent:20px} .archives li a .atitle{display: inline-block;padding:0 15px;position:relative} .archives li a .atitle:after{position:absolute;left:-6px;background:#ccc;height:8px;width:8px;border-radius:6px;top:8px;content:""} .archives li a .atitle:before{position:absolute;left:-8px;background:#fff;height:12px;width:12px;border-radius:6px;top:6px;content:""} .archives{position:relative;padding:10px 0} .archives:before{height:100%;width:4px;background:#eee;position:absolute;left:100px;content:"";top:0} .m-title{position:relative;margin:10px 0;cursor:pointer} .m-title:hover:after{background:#ff5c43} .m-title:before{position:absolute;left:93px;background:#fff;height:18px;width:18px;border-radius:6px;top:3px;content:""} .m-title:after{position:absolute;left:96px;background:#ccc;height:12px;width:12px;border-radius:6px;top:6px;content:""} 再加个点击月份伸缩效果吧 $('.archives ul.archives-monthlisting').hide(); $('.archives ul.archives-monthlisting:first').show(); $('.archives .m-title').click(function() { $(this).next().slideToggle('fast'); return false; }); 文章来源：http://fatesinger.com/wordpress-archive.html
-
CSS边角折叠实战 在大量的网页设计作品中，都用到了这种折叠效果，通常用于标题背景。一般可以用PhotoShop来实现这样的效果，但是在当今广泛提倡减少网页图片使用量的情况下，我们还是少用图片为好。其实使用CSS是可以很容易地实现这种效果的，废话少说，直接上代码：代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Shapes</title> <style> #container { background: #666; margin: auto; width: 500px; height: 700px; padding-top: 30px; font-family: helvetica, arial, sans-serif; } h1 { background: #e3e3e3; background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8); background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8)); padding: 10px 20px; margin-left: -20px; margin-top: 0; position: relative; width: 70%; -moz-box-shadow: 1px 1px 3px #292929; -webkit-box-shadow: 1px 1px 3px #292929; color: #454545; text-shadow: 0 1px 0 white; } .arrow { width: 0; height: 0; line-height: 0; border-left: 20px solid transparent; border-top: 10px solid #c8c8c8; top: 104%; left: 0; position: absolute; } </style> <!--[if IE]> <style> .arrow { top: 100%; } </style> <![endif]--> </head> <body> <div id="container"> <h1> My Heading <span class="arrow"></span> </h1> </div> </body> </html> 这其中关键的属性是border-left 和 border-top，这两个属性形成了一个三角形效果，也就是带子的拐角效果。 border-right、border-left和border-bottom、border-top的不同组合，可以实现三角形的不同的朝向，你可以举一反三制作你的折叠效果了
-
纯CSS写的下拉菜单代码 Dropmenu 分享一个纯CSS写的下拉菜单代码，结构非常简单，代码十分清晰，HTML+CSS下拉菜单代码。HTML代码部分：<ul id="menu"> <li><a href="">Home</a></li> <li><a href="">About Us</a> <ul> <li><a href="">The Team</a></li> <li><a href="">History</a></li> <li><a href="">Vision</a></li> </ul> </li> <li><a href="">Products</a> <ul> <li><a href="">Cozy Couch</a></li> <li><a href="">Great Table</a></li> <li><a href="">Small Chair</a></li> <li><a href="">Shiny Shelf</a></li> <li><a href="">Invisible Nothing</a></li> </ul> </li> <li><a href="">Contact</a> <ul> <li><a href="">Online</a></li> <li><a href="">Right Here</a></li> <li><a href="">Somewhere Else</a></li> </ul> </li> </ul>CSS代码部分：ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; } ul li { display: block; position: relative; float: left; } li ul { display: none; } ul li a { display: block; text-decoration: none; color: #ffffff; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #2C5463; margin-left: 1px; white-space: nowrap; } ul li a:hover { background: #617F8A; } li:hover ul { display: block; position: absolute; } li:hover li { float: none; font-size: 11px; } li:hover a { background: #617F8A; } li:hover li a:hover { background: #95A9B1; }
-
CSS Sprites 网页背景图片定位技术简述 很多时候我们打开一些网站的背景图片会发现是很多图标集合的一张完整的图片。这种网页使用的就是CSS Sprite，通过将多个图标整合在同一张图片，可以减少向服务器请求图片的次数，加快网页的加载速度。 CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。 加速的关键，不是降低质量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。 CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。背景图片定位方法： 我们知道，CSS中写背景的代码形式为：.class{ background:url(./images/bg.png) no-repeat left top #ccc;} 如果使用CSS Sprite方式对背景图片进行定位，那么需要修改的就是上述代码中的 left 和 top 两处。事实上，left 和 top两个单词所对应的均是0px，也就是说上述代码也可以写成：.class{ background:url(./images/bg.png) no-repeat 0px 0px #ccc;} 其实现的效果是背景图片坐上对其。下面，Kurly根据自己的经验和理解，给大家绘制一张坐标图，如下。CSS的背景图片是以左上角为原点的，这样我们就可以理解前面代码是左上角对齐的效果了。同时，请注意观察图示坐标轴的正方向，明白了这一点就好办了。图中Kurly标出了(-50px, -50px)的坐标位置，如果我们要将白色图片中的边长为50px的灰色正方形作为一个长宽分别为50px的DIV的背景图片，那么我们只需要这样来编写CSS：.box{ height:50px; width:50px; background:url(./images/bg.png) no-repeat -50px -50px; } 另外，如果我们的DIV层为边长200像素的正方形，我们想让这个灰色正方形作为背景且居中，那CSS又该怎么写呢？很简单，只要理解了坐标轴的方向，根据上例，我们很容易就知道坐标值应该修改为正的50px即可（注意：黑色区域为背景图片以外的区域）。CSS如下.box{ height:200px; width:200px; background:url(./images/bg.png) no-repeat 50px 50px; } 相信，读完上面的示例，你已经明白如何通过CSS Sprite方式定位你的背景图片了吧！ 来源：http://www.yilushang.net/post-313.html
-
html+css 中 em和px 的尺寸解释 px像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。因此用px来定义字体，就无法用浏览器字体放大的功能。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。CSS中em属性有如下特点1.em的值并不是固定的；2.em会继承父级元素的字体大小。所以我们在写CSS的时候，需要注意1.body选择器中声明Font-size=62.5%；2.将你的原来的px数值除以10，然后换上em作为单位；3.重新计算那些被放大的字体的em数值。避免字体大小的重复声明。也就是避免1.2*1.2=1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em,因为此em非彼em，它因继承#content的字体高而变为了1em=12px。但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。
-
一个漂亮的CSS浮出层写法[公告对话型] HTML代码：<div class="poptip"> <span class="poptip-arrow poptip-arrow-top"><em>◆</em><i>◆</i></span> <span class="poptip-arrow poptip-arrow-right"><em>◆</em><i>◆</i></span> <span class="poptip-arrow poptip-arrow-bottom"><em>◆</em><i>◆</i></span> <span class="poptip-arrow poptip-arrow-left"><em>◆</em><i>◆</i></span> Hi，知道吗？ <br>大前端D7主题很快就疯抢了！ </div>以上HTML构成了一个浮出层和四个方向的尖角，其实你只需要其中的一个span标签，所以真正用上的代码并没那么多。CSS代码如下：/* poptip */ .poptip{position: absolute;top: 20px;left:20px;padding: 6px 10px 5px;*padding: 7px 10px 4px;line-height: 16px;color: #DB7C22;font-size: 12px;background-color: #FFFCEF;border: solid 1px #FFBB76;border-radius: 2px;box-shadow: 0 0 3px #ddd;} .poptip-arrow{position: absolute;overflow: hidden;font-style: normal;font-family: simsun;font-size: 12px;text-shadow:0 0 2px #ccc;} .poptip-arrow em,.poptip-arrow i{position: absolute;left:0;top:0;font-style: normal;} .poptip-arrow em{color: #FFBB76;} .poptip-arrow i{color: #FFFCEF;text-shadow:none;} .poptip-arrow-top,.poptip-arrow-bottom{height: 6px;width: 12px;left:12px;margin-left:-6px;} .poptip-arrow-left,.poptip-arrow-right{height: 12px;width: 6px;top: 12px;margin-top:-6px;} .poptip-arrow-top{top: -6px;} .poptip-arrow-top em{top: -1px;} .poptip-arrow-top i{top: 0px;} .poptip-arrow-bottom{bottom: -6px;} .poptip-arrow-bottom em{top: -8px;} .poptip-arrow-bottom i{top: -9px;} .poptip-arrow-left{left:-6px;} .poptip-arrow-left em{left:1px;} .poptip-arrow-left i{left:2px;} .poptip-arrow-right{right:-6px;} .poptip-arrow-right em{left:-6px;} .poptip-arrow-right i{left:-7px;}来源：http://www.daqianduan.com/css-poptip/
![一个漂亮的CSS浮出层写法[公告对话型]](https://fastly.jsdelivr.net/npm/typecho-joe-next@6.0.0/assets/thumb/24.jpg)