随笔分类 -  xHTML+CSS

width100%，设置padding或border溢出解决方法
摘要：.box { width: 100px; height: 100px; background: red;} .bd { width: 100%; padding: 10px; background: black;} 如上结构，子元素将会溢出解决方法：CSS3： 加入box-... 阅读全文
posted @ 2014-08-04 22:51 素年锦时丶渔 阅读(6671) 评论(0) 推荐(0)
关于ie6下的双倍浮动
摘要：上例子：<div clss="test1" style="float:left;margin-left:50px; width:50px;height50px;background:red;"></div><div clss="test2" style="float:left;margin-left:50px; width:50px;height50px;background:red;"></div>上述例子中：test1就会产生双倍浮动，而test2则不会，这说明了 阅读全文
posted @ 2013-06-14 10:32 素年锦时丶渔 阅读(306) 评论(0) 推荐(0)
ie6,ie7,ie8 css bug汇总以及兼容解决方法
摘要：1：li边距“无故”增加 任何事情都是有原因的，li边距也不例外。 先描述一下具体状况：有些时候li边距会突然增 加很多，值也不固定（只在IE6/IE7有这种现象），让人摸不着头脑，仔细“研究”发现是由于其低级元素ul的padding引 起，padding的上下值对li有影响，左右无影 响。所以只好笨手笨脚地把padding去掉，换成margin。这是能解决问题，但往往不是我们想要的结果，或许 还会引起其他不必要的怪现象。 解决这个问题的方法，其实很简单，既然是有ul引 起的，就设置ul的显示形式为*display:inline-block;即可，前面加*是只 针对IE6/IE7有效，其... 阅读全文
posted @ 2013-06-10 10:10 素年锦时丶渔 阅读(795) 评论(3) 推荐(0)
xHTML和CSS容易犯的一些错误
摘要：CSS＋DIV是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。应用应用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误：1. 检查HTML元素是否有拼写错误、是否忘记结束标记即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。2. 检查CSS是否正确检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS 阅读全文
posted @ 2013-05-13 21:51 素年锦时丶渔 阅读(391) 评论(0) 推荐(1)
30个CSS使用技巧
摘要：1.文字的水平居中将一段文字置于容器的水平中点，只要设置text-align属性即可： text-align:center;2.容器的水平居中先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可。 div#container { width:760px; margin:0 auto; }3.文字的垂直居中单行文字的垂直居中，只要将行高与容器高设为相等即可。比如，容器中有一行数字。 <divid="container">1234567890</div>然后CSS这样写： div#container {height: 35px;line 阅读全文
posted @ 2013-04-29 10:06 素年锦时丶渔 阅读(641) 评论(1) 推荐(1)
阻止子元素继承父元素事件
摘要：<div id="p_box" onclick="a()"> <div id=p_cont> </div></div>#p_box包括#p_cont,当点击#p_box区域任何位置时（包括#p_cont），都会触发a事件。想要阻止点击#p_cont区域时触发a事件，需要在#p_cont区域内加入阻止事件冒泡的代码。变成<div id="p_box" onclick="a()"> <div id="p_cont" onclick=& 阅读全文
posted @ 2013-04-26 08:56 素年锦时丶渔 阅读(414) 评论(0) 推荐(0)
巧用css去除第一个元素或最后个元素的样式
摘要：很多人可能都碰到这样一个情况：<style> .test li{ float:left; border-right:1px solid #ccc; width:100px; height:100px; }</stly><ul class="test"> <li></li> <li></li> <li></li></ul>这样就会出现三条右边框，在实际运用中最后条边框是需要去掉的。这里为大家介绍两种方法： 1、为最后个li添加个样式，比如.b-none{bo 阅读全文
posted @ 2013-04-22 15:35 素年锦时丶渔 阅读(5956) 评论(7) 推荐(1)
HTML中的标签和元素的区别
摘要：很多人可能都没有把哪个叫标签，哪个叫元素这个概念搞清楚，包括之前的我也是，一直都是混淆着。事实上两者之间的概念还是很清楚的：比如<p>这就是一个标签；<p>这里是内容</p>这就是一个元素，也就是说元素由一个开始的标签和结束的标签组成，用来包含某些内容；这里有一个值得注意的例外，即<br/>本身既是开始标签也是结束标签，但不包含任何内容，所以这只是个标签。 阅读全文
posted @ 2013-04-20 16:21 素年锦时丶渔 阅读(422) 评论(0) 推荐(0)
防止浏览器记住表单信息
摘要：有时候在做前端的时候，提交表单会被浏览器的记录下来，每次预览页面表单都会遗留信息，要测试表单提交的功能，都需要自己手动删掉表单内容，十分麻烦，这里有各简单的方法，就是在在form里加入autocomplete="off"可以有效防止浏览器记住表单信息。 阅读全文
posted @ 2013-04-20 09:17 素年锦时丶渔 阅读(393) 评论(1) 推荐(0)
关于元素优先级
摘要：元素的优先级主要受样式名长度和位置影响。相同长度的情况下,受位置影响：<div class="class2 class1"></div>css： .class2{color:red} .class1{color:blue}这里class1的样式会覆盖class2，因为class2和class1的优先级相同，样式表中最后出现的会覆盖前面的样式。同一位置受长度影响：<div class="wrap"> <p class="p1"></p></div>长度A：" 阅读全文
posted @ 2013-04-19 09:01 素年锦时丶渔 阅读(366) 评论(3) 推荐(0)
CSS预处理器初次试用总结
摘要：css预处理器也叫动态样式语言，拥有编程的变量、继承、运算、函数的特性，它可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处，常用的有less、sass、stylus。 经过几天的试用和实践，主要是对less的使用，总结一下碰到的问题。 1、环境搭建 安装环境这里就不说了，大家可以参考这里http://www.w3cplus.com/node/683； 这里说下我碰到的编译（转化成CSS）问题：sass、less、stylus都可以通过自己的环境用命令编译成css，再引用css就可以使用了，但less比较特别，他分服务器端和客户端，可以引入less.js对... 阅读全文
posted @ 2013-04-15 22:17 素年锦时丶渔 阅读(335) 评论(4) 推荐(0)
30秒钟评价一个网页
摘要：当你已经做好准备要开发一个网站时，你一定希望你开发出的网站能给用户最好的用户体验。 能够准确快速的评价一个网站是一门艺术，也是一门科学，但这种艺术或科学是可以很快学会的。 这里有几个简单的技巧能帮助你在30秒或更短的时间内对你的网页进行评价，帮你拨开云雾，看清你的网页上那些部分的设计是好的，那些部分不够好。 阅读全文
posted @ 2013-04-14 18:05 素年锦时丶渔 阅读(379) 评论(0) 推荐(0)
开始写博客，为大家分享下我的自定义模板
摘要：作为一名程序员每天面对的都是一大堆枯燥的代码，这样的生活多无趣啊，世界本就如此精彩，何故一味地钟情coding。所以我要开始不定期的写一些博文，沉淀自我，写下自己的生活感触、心得分享、丰富人生。 刚刚入住博客园，发现这里模板还可以自定义，十分给力。我比较喜欢简约清爽的风格，所以选择了ThinkInside的这套摸版，并进行了一些修饰。 如下是我自定义的CSS风格样式： 路径：管理-->设置-->通过CSS定制风格//修改超链接的样式a:hover{text-decoration: underline;color: #3399cc;}//修改全局样式，并添加背景图片body {fon 阅读全文
posted @ 2013-04-14 09:02 素年锦时丶渔 阅读(440) 评论(0) 推荐(0)