03 2014 档案

margin负值 – 一个秘密武器
摘要：CSS盒模型中，margin是我们老熟悉的一个属性了， 它的负值你用过吗？ 你知道margin负值的秘密武器吗？我们一起看看吧！1、带竖线分隔的横向列表（例如：网站底部栏目）传统的分隔符是使用 “|” 来实现的，弊端显而易见，不利于表现与结构的分离，同时增加了后台输出时的判断工作。所以我们采用border-left 左边框来模拟分割线，然后通过margin-left：-1px隐藏掉第一个列表项的边框，父元素设置 overflow：hidden 来隐藏溢出部分，这样完美达到首尾无分割线的要求。实际测试中发现 iphone safari 设置margin负值=border-widht 并不能很好的 阅读全文
posted @ 2014-03-31 14:29 唸随爱 阅读(223) 评论(0) 推荐(0)
应该知道的25个非常有用的CSS技巧
摘要：在我们的前端CSS编码当中，经常要设置特殊的字体效果，边框圆角等等，还要考虑兼 容性的问题， CSS网页布局，说难，其实很简单。说它容易，往往有很多问题困扰着新 手，在中介绍了非常多的技巧，这些小技巧与知识能事半功倍的给大家以帮助，经验丰 富的CSS程序员通常都知道这一点，但初学者不要错过了!重要的CSS规则 这里有25个非常有用的CSS技巧，将帮助你解决让你棘手的CSS代码问题。你可以直接 使用到你现在的项目当中 1。更改文本突出显示颜色(Change Text Highlight Color) 您可能不知道!使用CSS，你可以控制颜色测试，至少对符合标准的浏览器，如Saf... 阅读全文
posted @ 2014-03-28 15:41 唸随爱 阅读(251) 评论(0) 推荐(0)
让你的网站变成响应式的3个简单步骤
摘要：如今，一个网站只在桌面屏幕上好看是远远不够的，同时也要在平板电脑和智能手机中能够良好呈现。响应式的网站是指它能够适应客户端的屏幕尺寸，自动响应客户端尺寸变化。在这篇文章中，我将向您展示如何通过3个简单的步骤轻松地使网站变成响应式（Responsive）。1 – 布局 当创建一个响应式网站，或让现有的网站变成响应式的，首先要关注的元素的布局。我在建立响应式的网站，总是先创建一个非响应的布局，页面宽度固定大小。如果非响应版本完成得非常不错，我再添加媒体查询（Media Queries）和响应式代码。这种操作方式更容易实现响应式特性，在同一时间专注于一个任务。 当你已经完成了无响应的网站，做的第.. 阅读全文
posted @ 2014-03-28 15:17 唸随爱 阅读(1039) 评论(0) 推荐(0)
css之自动换行
摘要：自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大, 挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义 的宽度之后自动换行。 html： 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义 css： #wrap{white-space:normal; width:200px; } 1.（IE浏览器）连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者... 阅读全文
posted @ 2014-03-26 16:43 唸随爱 阅读(298) 评论(0) 推荐(0)
textarea中的文字自动换行问题
摘要：在textarea中设置输入内容的自动换行，也是在CSS中设置word-wrap:break-word; 属性。需要额外注意的是textarea元素本身有一个warp属性，其取值含义如下： off：不自动换行; hard：自动硬回车换行，换行标记一同被传送到服务器端(Opera、Chrome下不 传); soft：自动软回车换行，换行标记不会传送到服务器端。 阅读全文
posted @ 2014-03-26 16:39 唸随爱 阅读(10824) 评论(0) 推荐(0)
margin负值的使用
摘要：margin负值的使用左边盒子123456 阅读全文
posted @ 2014-03-24 18:13 唸随爱 阅读(209) 评论(0) 推荐(0)
margin负值 – 一个秘密武器
摘要：CSS盒模型中，margin是我们老熟悉的一个属性了， 它的负值你用过吗？ 你知道margin负值的秘密武器吗？我们一起看看吧！1、带竖线分隔的横向列表（例如：网站底部栏目）传统的分隔符是使用 “|” 来实现的，弊端显而易见，不利于表现与结构的分离，同时增加了后台输出时的判断工作。所以我们采用border-left 左边框来模拟分割线，然后通过margin-left：-1px隐藏掉第一个列表项的边框，父元素设置 overflow：hidden 来隐藏溢出部分，这样完美达到首尾无分割线的要求。实际测试中发现 iphone safari 设置margin负值=border-widht 并不能很好的 阅读全文
posted @ 2014-03-24 18:08 唸随爱 阅读(452) 评论(0) 推荐(0)
sass教程汇总
摘要：Sass @at-root http://www.w3cplus.com/preprocessor/Sass-3-3-new-feature-at-root-bem.html Sass中连体符(&)的运用 http://www.w3cplus.com/preprocessor/use-ampersand-in-selector-name-with-Sass.html Sass3.3新特性之连体符& http://www.w3cplus.com/preprocessor/sass-future-use-ampersand.html 理解Sass的list http://www.. 阅读全文
posted @ 2014-03-21 16:01 唸随爱 阅读(390) 评论(0) 推荐(1)
SASS用法指南
摘要：学过CSS的人都知道，它不是一种编程语言。 你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师 的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没 有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。很自然地，有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（csspreprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。各种"CSS预处理器"之中，我自己最喜欢SASS，觉得它有很多优点，打算以后都用它来写CSS。下面是我整理的用法总结， 阅读全文
posted @ 2014-03-21 16:00 唸随爱 阅读(390) 评论(0) 推荐(0)
SASS、COMPASS 安装指南
摘要：如果你还不知道 SASS 和 COMPASS 是什么，可以参看http://sass-lang.com和http://compass-style.org，近期可能会更新一篇介绍性的入门教程，但是本文只是安装使用教程，不包含介绍信息。安装安装 RubySASS 需要运行在 Ruby 下，进入这个页面，下载最新版本的rubyinstaller，一路 Next 完成安装。安装 SASS 和 COMPASS在开始菜单中找到 “Ruby 1.9.3-p0 -> Start Command Prompt with Ruby”并运行。输入以下命令gem install compass 该命令会自动下载 阅读全文
posted @ 2014-03-21 15:41 唸随爱 阅读(425) 评论(0) 推荐(0)
web前端开发分享-css,js进阶篇
摘要：一，css进阶篇： 等css哪些事儿看了两三遍之后，需要对看过的知识综合应用，这时候需要大量的实践 经验， 简单的想法：把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html，有无 从下手的地方可以用firebug, chrome调试工具分析网站结构样式。如果技术熟练自信 可以自己先写，写完之后在对比，以其来找寻自己的差距。结构是网站的骨架，如果 写的不合理，将是bug产生的重要根源，所以学习分析大型网站的布局样式对初学者 来说帮助是很大的。大多数初学者由于对技术的不自信，html结构往往写的很少， 而且期望在少的结构上尽可能多的实现页面效果，这样无非加大了... 阅读全文
posted @ 2014-03-18 17:58 唸随爱 阅读(381) 评论(0) 推荐(0)
ie6 css sprites重复加载
摘要：如果你使用css sprites，那么在ie6下并不能发挥sprites的作用，它还是会每次再重新 加载这个图片，解决方法为为ie6添加下面这条js： 阅读全文
posted @ 2014-03-18 17:55 唸随爱 阅读(125) 评论(0) 推荐(0)
web网页前端制作中的SEO方法
摘要：在SEO盛行的今天到处都在谈优化，对于网站前端制作人员来说，有几点是跟SEO相关 的，也就是SEO站内优化中的一部分，下面总结几点： 1.title，。页面的标题，不用多说，这个必须有! 2.keywords，。为搜 索引擎提供的关键字列表，各关键词间用英文逗号“,”隔开。页面的主关键词可以列举 在这里。 3.description。。告诉搜索引 擎你的网站主要内容。虽然现在description对百度等搜索引擎排名影响不是很大，但是 对于用户体验方面还是有用的，可以让用户了解到网页的大概内容，引导点击。 4.robots，。告诉搜索引擎哪些页 面需要索引，哪些页面不需... 阅读全文
posted @ 2014-03-17 17:43 唸随爱 阅读(759) 评论(0) 推荐(0)
对html进行SEO的一点点总结
摘要：1. 要考虑用户用哪些关键在查找您的网页 2. SE无法识别图形中的内容 3. 确保title和alt中的内容准确 4. 尽量用静态页，如果是动态页，参数要少 5. 每个图片都尽量用alt 6. 不用mouserovers ,用CSS 7. SE不识别javascript 8. SE只能识别最常用的html标签 ———————————- 一. 多多使用: ———————————- 1. 每页用1个识别页主题 2. 多个同级次要主体 .hn系列不要跨号使用 3. 文本的停顿 4. 无序列表: 导航链，标题 5. 有序列表定义过程的步骤 6. 表示术... 阅读全文
posted @ 2014-03-17 17:39 唸随爱 阅读(225) 评论(0) 推荐(0)
CSS:命名规范
摘要：个好的命名习惯(当然这里指的并不仅仅是CSS命名)。不仅可以提高开发效率，而且 有益于后期修改和维护。假设我们当前使用的命名方式都是约定成俗的，所有人都是这样写， 那么你去到一个新团队，或者别人来接手你的工作，都可以大大缩短去阅读别人代码的时间。 一个规范化的命名，不用说，只要想想就能体会到其中的好处了。CSS:命名规范心得分享板块(Plate)命名(Naming)说明(Description)主容器wrapper页面上最大的外部容器，如无特殊需求，不推荐使用页面头部header主体内容以上的部分，即页面头部位置，可包含logo导航等页面底部footer主体内容以下的部分，即页面底... 阅读全文
posted @ 2014-03-14 16:53 唸随爱 阅读(200) 评论(0) 推荐(0)
CSS斜线
摘要：斜线 如果不支持，可见这里 斜线 阅读全文
posted @ 2014-03-14 16:47 唸随爱 阅读(279) 评论(0) 推荐(0)
CSS3制作下拉菜单
摘要：导航菜单其实是没有什么可说的，制作方法到处可见，今天这个案例本来不只是一个导航，还有一个搜索表单的，可是为了偷懒，把搜索表单部分去掉了，就变成了一个CSS3制作的下拉菜单。在这个导航中主要两点，一个是渐变运用，另一个就是box-shodow制作的立体效果。HTML 结构：Home Portfolio Identity Print Online AboutContactW3cplus CSS代码*{margin: 0;padding: 0;}body {padding: 50px;background: url(data:image/j...);font-family: 'Joc... 阅读全文
posted @ 2014-03-13 17:49 唸随爱 阅读(367) 评论(0) 推荐(0)
CSS3制作时钟
摘要：这个效果是一个CSS3制作的时钟，不过并不是我们传统的时钟风格，分别用三块显示 时、分、秒三个部分，而且这个DEMO中藤藤还为其加上了一个js的效果，能让这个效 果和现实时钟的时间同步。这个效果运用到的CSS3知识点就是渐变、阴影，而最为关键 的就是CSS3的渐变制作。 HTML结构: Hours Minutes Seconds CSS代码：body,ul,li{ padding: 0; margin:0;}a {color: rgb(1, 124, 185);text-decoration: none;}body{ font-size:16px; color: #5a5... 阅读全文
posted @ 2014-03-13 17:47 唸随爱 阅读(541) 评论(0) 推荐(0)
网页背景音乐
摘要：第一步：首先建一个txt文本。在txt文本框中加入 歌曲名的路径 (因为我的歌曲和页面都在桌面。所以路径是相同。就直接写歌曲的信息) //以下都是歌曲名和后缀名MP3组成、、 张政 - 香烟爱上火柴.mp3 儿歌 - 三个和尚没水喝 - 小孩子.mp3 儿童歌曲大全 - 乖孩子.mp3 儿童歌曲大全 - 好孩子要诚实 - 精选儿童歌曲.mp3 儿童歌曲 - 幸福的孩子爱唱歌.mp3 (。。。。。) 注：(文本中可以加入你的任何的歌曲) 第二步： 保存txt文本后，比如是music.txt的后缀名改成 music.m3u的文件 第三步：页面 index.html 播放音... 阅读全文
posted @ 2014-03-12 17:05 唸随爱 阅读(420) 评论(0) 推荐(0)
CSS 实现背景半透明
摘要：IE过渡滤镜 + CSS3 rgba 即可完美实现。 具体实现代码如下： .transparent { background:rgba(0, 0, 0, 0.3); filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000');}:root .transparent { filter:progid:DXImageTransform.Microsoft.Gradient(GradientTyp 阅读全文
posted @ 2014-03-12 16:59 唸随爱 阅读(286) 评论(0) 推荐(0)
实战中总结出来的CSS常见问题及解决办法
摘要：一、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。 二、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次。对 一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效， 是因为id的权重要比class大。 三、一个兼容性调整(IE和Mozilla)的笨办法： 初学可能会碰到这样一个情况：同样一个标签的属性在IE设置成A显示是正常的，而在 Mozilla里必须要设成B才能正常显示，或者两个倒过来。 临时解决方法：选择符{属性名:B !important;属性名:A} 或许有时候并没... 阅读全文
posted @ 2014-03-11 15:03 唸随爱 阅读(269) 评论(0) 推荐(0)
尝试一下响应式布局
摘要：所谓响应式布局（Responsive Design），就是让网页针对不同设备的浏览器“响应”出不同的显示效果，于是抽了点时间把博客做成了响应式布局，适应一下移动浏览器。响应式布局主要依赖于CSS3 的媒体查询特性，其原理就是根据浏览器宽度或高度，适配不同的 CSS，以达到改变页面布局的目的。例如，当浏览器宽度小于 640px 时，将一些不太必要的元素隐藏，在有限的屏幕上显示更多主要的内容。例如，如下 CSS 只在浏览器宽度小于或等于 640px（iPhone 的屏幕宽度） 的时候才会生效：@media screen and (max-width:640px) { /* 页面宽度设置为 1... 阅读全文
posted @ 2014-03-11 14:58 唸随爱 阅读(201) 评论(0) 推荐(0)
CSS3实战：让我们尽情的圆角吧
摘要：如果说，WAP2.0网页的机型、浏览器适配给我们无线制作经理造成了巨大的心理阴影，那么从iPhone、Android这些高端手机应用 起，我们终于可以庆幸比其他同行提前迎来了一个新时代，这两种高端手机上的Safari Mobile和GoogleAndroid浏览器近乎完美的渲染效果，让css3有了尽情挥洒的天地。 在没有css3 以前，或者说，在webkit没有占绝对的优势以前，圆角对于制作经理来说，都是一个纠结的死角。九宫格、N层div嵌套、一个图片的十八般切法，甚至不 惜恐吓威胁设计师：你再做圆角，我就死给你看！好吧，到了高端手机时代，这一切恩怨都可以抛下了，一个html元素、几行css. 阅读全文
posted @ 2014-03-10 17:15 唸随爱 阅读(277) 评论(0) 推荐(0)
IE9、 Firefox、Safari, Chrome的CSS3圆角属性
摘要：这篇文章主要是记录一下，微软最新发布的 IE9 浏览器CSS 圆角属性，现在CSS3已经 可以轻松实现跨浏览器的圆角效果，包括Firefox高版本，IE9，Safari，Chrome等高端 浏览器。 我们这样去定义一个盒子模型： -moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius:10px; 在Firefox，和Chrome中的效果： 其中 -moz-border-radius 是 Firefox 实现圆角的私有属性，而 -webkit-border- radius是 webkit 内核浏览器(如... 阅读全文
posted @ 2014-03-10 17:04 唸随爱 阅读(375) 评论(0) 推荐(0)
css清除浮动的几种方法整理
摘要：四种清除浮动方法如下： 1、使用空标签清除浮动。空标签可以是div标签，也可以是P 标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签 清除浮动，并为其定义CSS代码：clear:both。此方法的弊端在于增加了无意义的结构元 素。 对于使用额外标签清除浮动（闭合浮动元素），是W3C推荐的做法。至于使用 元素还是空可以根据自己的喜好来选（当然你也可以使用其 它块级元素）。不过要注意的是，本身是有表现的，它会多出一个换行出 来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空 比较合适。 2、使用overflow属性。 此方法... 阅读全文
posted @ 2014-03-04 15:45 唸随爱 阅读(1074) 评论(0) 推荐(0)