07 2014 档案

HTML标签总结
摘要：一，基本概念HTML(HypertextMarkupLanguage)超文本标记语言，是用于描述网页文档的一种标记语言，XHTML是一种遵循更严格的XML规则的HTML新版本，这种新的XML兼容版本的HTML被称为XHTML。声明必须是HTML文档的第一行，位于标签之前。它是指示web浏览器关于页面... 阅读全文
posted @ 2014-07-30 23:45 madwoman 阅读(190) 评论(0) 推荐(0)
让人惊叹的的创意404错误页面设计
摘要：一组让人惊叹的的创意404错误页面设计。在网上冲浪的时候碰到404错误页面是非常令人沮丧的，随后的一两秒内如果没有什么吸引你的注意力的话，我敢肯定你会离开网站，再也不会回来。因此，很多网站都会设计一个新颖的错误页面，以吸引用户继续浏览其它的内容。1.Batman2.Godzilla3.Oroza4.... 阅读全文
posted @ 2014-07-30 23:44 madwoman 阅读(201) 评论(0) 推荐(0)
E浏览器常见的9个css Bug以及解决办法
摘要：我们在浏览网页的时候经常看见这样的现象：某个网页在IE6浏览器中打开很正常，但是在IE8里面打开可能完全变形了。或者也有可能出现完全相反的现象。这让Web程序员及设计师往往为了其CSS在各个IE版本下表现怪异而痛苦不已，有时候需要通过专为IE6或者IE8设计单独的定义。IE浏览器则因此被公认为Web... 阅读全文
posted @ 2014-07-28 23:12 madwoman 阅读(200) 评论(0) 推荐(0)
Web 开发中很实用的10个效果【附源码下载】
摘要：在工作中，我们可能会用到各种交互效果。而这些效果在平常翻看文章的时候碰到很多，但是一时半会又想不起来在哪，所以养成知识整理的习惯是很有必要的。这篇文章给大家推荐10个在Web开发中很有用的效果，记得收藏：）超炫的页面切换动画效果 今天我们想与大家分享一组创意的页面切换熊效果集合。我们已经在示例中罗... 阅读全文
posted @ 2014-07-27 22:02 madwoman 阅读(244) 评论(0) 推荐(0)
CSS Sticky Footer: 完美的CSS绝对底部
摘要：下面是我找到的一个比较完美的方法，来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。 说明: 使用这个布局的前提，就是footer要在总的div容器之外，f... 阅读全文
posted @ 2014-07-27 22:01 madwoman 阅读(1914) 评论(1) 推荐(0)
你应该知道的25个非常有用的CSS技巧
摘要：在我们的前端CSS编码当中，经常要设置特殊的字体效果，边框圆角等等，还要考虑兼容性的问题， CSS网页布局，说难，其实很简单。 说它容易，往往有很多问题困扰着新手，在中介绍了非常多的技巧，这些小技巧与知识能事半功倍的给大家以帮助，经验丰富的CSS程序员通常都知道这一点，但初学者不要错过了! ... 阅读全文
posted @ 2014-07-23 23:02 madwoman 阅读(240) 评论(0) 推荐(0)
margin负值 – 一个秘密武器
摘要：CSS盒模型中，margin是我们老熟悉的一个属性了， 它的负值你用过吗? 你知道margin负值的秘密武器吗?我们一起看看吧! 1、带竖线分隔的横向列表(例如：网站底部栏目) 传统的分隔符是使用 “|” 来实现的，弊端显而易见，不利于表现与结构的分离，同时增加了后台输出时的判断工作。 所... 阅读全文
posted @ 2014-07-23 22:49 madwoman 阅读(331) 评论(0) 推荐(0)
Web前端开发工程师需要掌握哪些核心技能？
摘要：Web前端开发所涉及的内容主要包括W3C标准中的结构、行为和表现，那么这三项中我们需要掌握的核心技能是什么呢？1.开发语言HTML发展历史有二十多年，历经多次版本更新，HTML5和CSS3的出现又是一次革新。有些人认为前端开发要掌握的技能简单，不就是制作网页 嘛，其实不然，web前端需要掌握的核心语... 阅读全文
posted @ 2014-07-22 23:31 madwoman 阅读(891) 评论(0) 推荐(0)
CSS的color属性并非只能用于文本显示
摘要：虽然CSS并不是一种很复杂的技术，但就算你是一个使用CSS多年的高手，仍然会有很多CSS用法/属性/属性值你从来没使用过，甚至从来没听说过。对于CSS的color属性，相信所有Web开发人员都使用过。如果你并不是一个特别有经验的程序员，我相信你未必知道color属性除了能用在文本显示，还可以用作其它... 阅读全文
posted @ 2014-07-22 23:13 madwoman 阅读(662) 评论(0) 推荐(0)
CSS 外边距合并
摘要：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。外边距合并外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。... 阅读全文
posted @ 2014-07-21 21:53 madwoman 阅读(151) 评论(0) 推荐(0)
常用长度单位PX/EM/PT/百分比转换公式与对照表
摘要：PX、PT、EM、ex和in等都是我们常用的长度单位，尤其在网页的字体大小中经常用到。但是你知道PX、PT和EM之间是如何进行准换的吗？这里icech为大家找到了一个px、pt、em和percent大小转换的一个表格，尤其针对字体大小的转换十分方便。希望大家能够喜欢！PX和PT转换的公式：以前ice... 阅读全文
posted @ 2014-07-21 21:47 madwoman 阅读(1397) 评论(0) 推荐(0)
简单的单级下拉菜单实现
摘要：这里用纯CSS实现一个简单的单级下拉菜单，鼠标划过菜单标题时显示下拉菜单。基本思路在菜单处于光标之下时显示菜单，其余时候隐藏。这个过程首先得想到 :hover 伪类来实现，但是直接的利用伪类还不行，因为普通状态下菜单隐藏了，没办法触发 :hover ，不过下拉菜单隐藏了不是还有菜单标题么，菜单标题处... 阅读全文
posted @ 2014-07-19 17:12 madwoman 阅读(260) 评论(0) 推荐(0)
网页字体设置你了解吗？
摘要：以前做项目的时候就依葫芦画瓢的设置 { font-family:arial,”microsoft yahei”,simsun,sans-self; } 等类似的字体，然而当更多的设备和系统出现后，以前这样的设置已不能满足网页在各设备上的显示需求。就拿最简单的宋体(simsun)来说吧，在Window... 阅读全文
posted @ 2014-07-19 17:10 madwoman 阅读(309) 评论(0) 推荐(0)
CSS 定位 (Positioning)
摘要：CSS 定位 (Positioning) 属性允许你对元素进行定位。CSS 定位和浮动CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现... 阅读全文
posted @ 2014-07-17 21:08 madwoman 阅读(239) 评论(0) 推荐(0)
常用CSS缩写语法总结
摘要：使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下： 颜色 16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表... 阅读全文
posted @ 2014-07-17 21:03 madwoman 阅读(139) 评论(0) 推荐(0)
CSS 教程 - 闭合浮动元素
摘要：按照CSS规范，浮动元素(floats)会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列。 因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。 但是有时我们却需要这种自动闭合行为，具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签，... 阅读全文
posted @ 2014-07-16 23:27 madwoman 阅读(222) 评论(0) 推荐(0)
CSS Reset（CSS重置）
摘要：CSS Reset是指重设浏览器的样式。在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小。 但并不是所有的浏览器都使用一样的数值，所以有了CSS Reset，以让网页的样式在各浏览器中表现一致。 下面介绍几个主流的CSS Reset代码： 1、Er... 阅读全文
posted @ 2014-07-16 23:22 madwoman 阅读(349) 评论(0) 推荐(0)
边框模拟小三角形
摘要：利用边框模拟出小三角形，比较有创意。刚才去试了下，发现好看是好看但不实用，不过它也提醒了我们有必要去重温一下border的样式属性：语法：border-color : color 设置对象边框的颜色。 如果提供全部四个参数值，将按上-右-下-左的顺序作用于四个边框。 如果只提供一个，将用于全部... 阅读全文
posted @ 2014-07-15 23:33 madwoman 阅读(216) 评论(0) 推荐(0)
神奇的CSS形状
摘要：在StackOverflow上有这么一个问题，有位同学在http://css-tricks.com/examples/ShapesOfCSS/找到一些使用CSS做的形状，其中一位同学对下面的这个形状充满了疑问。形状是：代码是：#triangle-up {width: 0;height: 0;bord... 阅读全文
posted @ 2014-07-15 23:28 madwoman 阅读(166) 评论(0) 推荐(0)
圆角效果
摘要：圆角层实例 这里是测试文字,配合表现圆角效果!亲测通过浏览器IE6,IE7,FF,Chrome ... 阅读全文
posted @ 2014-07-14 19:01 madwoman 阅读(262) 评论(0) 推荐(0)
文本流向 layout-flow
摘要：作用与语法文本流向layout-flow用来定义网页中的文本流向方式。即排列方式，主要有两个属性，分别是horizonta (水平的) 和vertical-ideographic (垂直的)。文本流向 layout-flow语法如下layout-flow : horizontal | vertica... 阅读全文
posted @ 2014-07-13 19:19 madwoman 阅读(860) 评论(0) 推荐(1)
img标签下多余空白BUG解决方法
摘要：在进行页面的DIV CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是“见机行事”。1、将图片转换为块级对象即，设置img为“display:block;”。在本例中添加一组CSS代码：“#sub img {d... 阅读全文
posted @ 2014-07-13 19:13 madwoman 阅读(344) 评论(0) 推荐(0)
层定位原理
摘要：一、概述 本文以标签“”为例进行讲解，部分内容同样适用于部分其它块(block)标签元素。 本文中的范例通过测试的浏览器为IE6、IE7、Firefox2。 我们在平时的网页制作中，已经或多或少的接触过CSS样式表中的“position(位置)”属性，其实这基本算是定位根源所在了。当然了，这并... 阅读全文
posted @ 2014-07-11 18:47 madwoman 阅读(577) 评论(0) 推荐(0)
CSS：你真的懂margin吗？
摘要：你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？……写css，你... 阅读全文
posted @ 2014-07-09 22:08 madwoman 阅读(517) 评论(0) 推荐(0)
WAP网站的推广方式（自整合篇）
摘要：WAP网站推广随着无线互联时代的到来，已经日益受到大家的重视。虽然WAP网站的目前盈利模式还不是很清晰，但WAP网站推广的竞争强度将肯定会越来越激烈，下面和大家一起探讨下WAP网站的推广方法。 方法/步骤 1、WAP PUSH，这是最直接的方法，直接把商品连接或者柜台连接发给用户手机，用户根... 阅读全文
posted @ 2014-07-08 22:44 madwoman 阅读(2374) 评论(0) 推荐(0)
闲聊CSS之关于clearfix--清除浮动
摘要：一，什么是.clearfix 你只要到Google或者Baidu随便一搜"css清除浮动"，就会发现很多网站都讲到"盒子清除内部浮动时可以用到.clearfix"。 .clearfix:after { content: " "; display: block; clear: both;... 阅读全文
posted @ 2014-07-08 22:21 madwoman 阅读(3951) 评论(1) 推荐(0)
为什么要使用ul li布局网站导航条？使用ul li布局网站网页导航必要性
摘要：会布局的都知道网站导航条布局非常重要，可能一个导航条最终布局效果有时可以使用ul li列表标签布局，有时可以不用ul li布局，而是直接一个div盒子里直接放锚文本超链接的栏目名称，也能实现，看下图。 假如要布局出这样简单导航条效果 比如以下代码： 1、可以使用Ul li布局导航条 ... 阅读全文
posted @ 2014-07-08 22:08 madwoman 阅读(2961) 评论(0) 推荐(0)
如何确定要对DIV设置什么CSS属性样式呢？
摘要：设置什么CSS样式不是凭空想象的而是有参考的，一般分三种情况下得到需要知道设置什么样式。 第一种：没有美工图，自己边思考布局 这种没有美工图也没有可参考的情况下DIV CSS布局，根据自己实际构思的想法来布局设置CSS，比如布局左右结构时候，那就设置float:left和float:righ... 阅读全文
posted @ 2014-07-06 22:29 madwoman 阅读(328) 评论(0) 推荐(0)
CSS min-height 属性
摘要：实例设置段落的最小高度：p { min-height:100px; }浏览器支持IEFirefoxChromeSafariOpera所有主流浏览器都支持 min-height 属性。注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。定义和... 阅读全文
posted @ 2014-07-06 22:26 madwoman 阅读(448) 评论(0) 推荐(0)
ie6 png 透明的解决方法，大网站都在用
摘要：今天解决png图片在IE6下的背景透明问题，找到了一个好方法。之前的解决方案会造成错位，使页面变形。现把这个方法公布如下，本人亲测可以正常使用，如果你在使用中出现问题，请看实例中的说明（英文不精的童鞋可以用谷歌翻译哟） 在页面中head部分加上如上代码，是为了让IE6以下浏览... 阅读全文
posted @ 2014-07-05 14:52 madwoman 阅读(170) 评论(0) 推荐(0)
div覆盖div DIV相互重叠如何解决
摘要：div覆盖div,出现div与div盒子之间产生重叠覆盖现象，而内容没有出现覆盖重叠现象原因与解决方法。DIVCSS5通过CSS图文案例介绍产生原因与解决方法。DIV与DIV覆盖原因与解决方法。 可能您遇到过上下结构的布局，下面DIV内容重叠上面DIV内容上，也可能下面内容覆盖掉上面DIV布局... 阅读全文
posted @ 2014-07-04 18:12 madwoman 阅读(12373) 评论(0) 推荐(0)
div代码大全 DIV代码使用说明
摘要：一、DIV代码语法 - TOP DIV代码是放入小于与大于符号内，即“”。 DIV是一对闭合标签，即“”开始，“结束”的盒子标签。 语法结构：我是内容 说明：div代码有开始就要必须有闭合。使用“”开始，“/div”闭合。 二、DIV嵌套DIV - TOP div标签内可以嵌套无限级... 阅读全文
posted @ 2014-07-04 18:06 madwoman 阅读(5943) 评论(0) 推荐(0)
CSS中ul li居中的问题
摘要：一直以为对ul li居中对齐已经掌握了。但最近做项目时发现之前li的float:left方法显然有一个问题，就是无法居中（水平），只能使用padding-left或margin-right的方法方法来固定其居中。但这样可能在宽屏与窄屏的显示不一致。使用这种方法主要是利用li的浮动固定宽度来实现，li... 阅读全文
posted @ 2014-07-03 23:56 madwoman 阅读(2160) 评论(0) 推荐(1)
复选框单选框与文字对齐问题的研究与解决
摘要：目前中文网站上面的文字，就我的个人感觉而言，绝大多数网站的主流文字大小为12px，因为在目前高分辨率显示器屏幕下，11px的汉字，其像素点开始不规整，文字不如12px来的显示良好。12px大小的文字就是主流也是底线。然而12px的文字与单选框和复选框是不对齐的。例如下面这张雅虎中国首页在火狐浏览器下... 阅读全文
posted @ 2014-07-03 23:53 madwoman 阅读(371) 评论(0) 推荐(0)
CSS利用filter/opacity实现背景透明
摘要：先看看众所周知的解决方案如果我们想要一个半透明背景,有两种实现方式:1、利用CSS和opacity属性 .opacity {filter:alpha(opacity=50);/*IE浏览器*/opacity: 0.5;/*非IE浏览器*/} 2、建立一个24位PNG背景图片第一种利用opacity的... 阅读全文
posted @ 2014-07-02 20:47 madwoman 阅读(606) 评论(0) 推荐(0)