随笔分类 - HTML & CSS
摘要：::selection { background:#d3d3d3; color:#555;}::-moz-selection { background:#d3d3d3; color:#555;}::-webkit-selection { background:#d3d3d3; color:#555;}当然也可以修改部分指定特定标签内容文字选中后的样式状态：.maroon::selection { background:maroon; color:#fff;}.maroon::-moz-selection { background:maroo...
阅读全文
摘要：<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.5, user-scalable=1" name="viewport" />maximum-scale 允许放大的倍数user-scalable 等于零不允许放大
阅读全文
摘要：如下图：像这种列表布局我们一般用 float:left; 设置宽度和高度就OK了。但是，如果高度不同或者文字字数不同呢，再用float:left;布局就全乱了。如下图：现在，我们可以利用display:inline-block;完美的解决这个问题。如下图：代码如下：<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">* { margin:0;
阅读全文
摘要：一、CSS实现：<!doctype html><html><head><meta charset="utf-8"><title>让IE6支持min-width同时又支持max-width解决方法</title><style type="text/css">/* 正常宽度 */img.p1 {} /* 最大宽度200px; */img.p2 { max-width:200px; _width:expression((document.documentElement.clie
阅读全文
摘要：两个div并排，左边为绝对宽度，右边为相对宽度，这个问题，我也经常遇到，我一般的处理方法是将最大的容器padding-left固定宽度，左边的固定宽度的一块position:absolute，然后right的一块width为百分百今天学习到人家有三种解决方法，转载过来 两个div并排，很容易实现。如何让左边的div为固定宽度，右边的div为相对宽度呢？需要用到这种布局的情况比较多见，如左边为导航，右边为内容的页面。暂时想到了两种实现办法。方法一，使用position:absolute。代码如下。<style>body{ margin:0; height:100%}html{ hei
阅读全文
摘要：前端团队阿里巴巴 UED-- 我们设计的界面，并没有几十亿的流量，但每天来自上百个国家的百万商人在使用着。阿里巴巴中国站UED-- 阿里巴巴中国站UED成立于1999年，全称是用户体验设计部（User Experience Design Department），是阿里巴巴集团最资深的部门之一。支付宝前端开发-- 支付宝前端开发车间。淘宝UED-- 淘宝网用户体验团队。淘宝MED-- MED(Marketing Experience Design). 是淘宝营销体验设计部门，为淘宝网的营销产品做体验设计。口碑UED-- UED(User Experience Design) 中文意思就是用户体验
阅读全文
摘要：取消表单项聚焦时产生的黄色边框：input,button,select,textarea{outline:none}取消textarea的拖动改变大小的功能：textarea{resize:none}取消textarea在ie下的下拉框（或者叫滚动条）textarea {overflow:hidden; }综合起来：:focus { outline:none; } /*取消超链接的虚线框和表单项的黄色边框*/ textarea { resize:none; overflow:hidden; }/*取消下拉框和拖动改变大小*/去掉超链接虚线框a {/*IE6、IE7*/+noFocusLine:
阅读全文
摘要：网站将像10年前一样不堪入目。随着CSS技术的普及，越来越多的高质量CSS教程涌入互联网，让我们的学习更加方便。下面彬Go向大家推荐21个惊人的CSS技巧，相信其中必有你想不到的。还等什么，继续往下看吧！您还可以参考以下CSS相关教程及资源:《CSS Sprites(CSS图像拼合技术)教程、工具集合》《学无止境的CSS(xHTML+CSS技巧教程资源大全)》《精选30个优秀的CSS技术和实例《使用CSS为图片添加更多趣味的5种方法》1.CSS跨浏览器幻灯片点击上图查看清晰原图演示了如何仅适用CSS打造一个跨浏览器的图片画廊2.基于CSS的图片地图这个教程演示了如何使用纯CSS创建一个”疯狂”
阅读全文
摘要：<!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-
阅读全文
摘要：<!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-
阅读全文
摘要：HTML的特殊字符我们并不常用，但是有的时候却要在页面中用到这些字符，甚至有时候还需要用这些字符来实现某种特殊的视觉效果。现在，国外的设计师Neal Chester整理了一份很全的特殊字符集，我觉得这很赞～～，共享出来供大家查阅吧。使用方法：这些字符属于unicode字符集，所以，你的文档需要声明为UTF-8；下面符号列表的后面有两列编号，它们并不太一样，第一列是用于HTML的，你需要在前面加上&#符号；第二列可以用于CSS文件中，但是需要用反斜杠\转义；第二列也可以用于JavaScript，和CSS用法一样，不过要用\u来转义。需要主意的是：有的字符在不同的浏览器下表现不太一样；比如
阅读全文
摘要：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>导航中鼠标经过变换文字</title> <style type="text/css"> * { margin:0; padding:0; } .nav { list-style:none; width:500px; height:30px; background:#333; margin:50px auto; } .nav li { float:left;
阅读全文
摘要：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>用div+css模拟表格对角线</title> <style type="text/css"> * { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; border-left:1px solid #999; border-top:1px solid #999
阅读全文
摘要：<!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=gb23
阅读全文
摘要：<!DOCTYPE HTML><html lang="en"><head><meta charset="UTF-8"><title>利用float制作兼容ie6纯css下来菜单</title><style type="text/css">* { margin:0; padding:0; }ul { list-style:none; }a:hover { text-decoration:; color:#555; }.nav { float:left;
阅读全文
摘要：你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择器，包括我们最头痛的浏览器兼容性问题。掌握了它们，才能真正领略css的巨大灵活性。1.* {margin: 0; padding: 0;}星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面中所有元素的margin和padding设置为0。*选择符也可以在子选择器中使用。复制代码运行代码编辑代码#container * { border: 1px solid black;}复制代码运行代码编辑代码Powered by W3Cfuns.com
阅读全文
摘要：<!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin:0; padding:0; } html { background:url(about:blank) fixed; } body { height:2000px; } .box { width:100px; height:80px;
阅读全文
浙公网安备 33010602011771号