随笔分类 -  编写高质量CSS代码

编写高质量CSS代码
左右固定，中间自适应布局，中间栏优先加载
摘要：html代码：左边栏右边栏主内容方法一：利用绝对定位方法(不推荐)css部分：body{margin:0;padding:0;height:100%;}#left,#right{position:absolute;top:0;width:220px;height:100%;background:pink;}#left{left:0;}#right{right:0;}#main{margin:0230px;height:100%;}这种方法是最简单，也是麻烦最多的，如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。方法二：采用的是浮动布局css部分 阅读全文
posted @ 2013-08-21 23:05 yexingwen 阅读(4253) 评论(1) 推荐(0)
前端面试试题
摘要：1、上图代码如下，有不规范的请指出并给出理由。同意请说明理由。 1 <li> 2 <a href="#"><imgsrc="img.png" title="pic" /></a> 3 <div> 4 <h2>This is title</h2> 5 <p>wirter:xxx on 14/09/2012<br> 6 miaoshu miaoshu miaoshu miaoshu miaoshu miaoshu miaoshu m 阅读全文
posted @ 2012-09-14 16:43 yexingwen 阅读(350) 评论(1) 推荐(0)
CSS权重优先级的认知
摘要：从CSS代码存放位置看权重优先级：内嵌样式 > 内部样式表 > 外联样式表。其实这个基本可以忽视之，大部分情况下CSS代码都是使用外联样式表。从样式选择器看权重优先级：important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。important的权重为1,0,0,0ID的权重为0,1,0,0类的权重为0,0,1,0标签的权重为0,0,0,1伪类的权重为0,0,1,0属性的权重为0,0,1,0伪对象的权重为0,0,0,1通配符的权重为0,0,0,0实例：<html>&l 阅读全文
posted @ 2012-06-07 16:50 yexingwen 阅读(12244) 评论(0) 推荐(4)
多用组合，少用继承
摘要：要做出上图的效果，有多种方法，但我们要用的方法是多用组合少用继承。多用组合少用继承：把相对稳定的部分拆成一个类，把不稳定的部分分拆成几个类。观察上图可知稳定部分是边框样式，区块间隙和行距，不稳定的部分就是字体大小和颜色。现在可以根据规律得出如下代码：.f18{font-size:18px;}.f20{font-size:20px;}.f22{font-size:22px;}.red{color:#F00;}.common-list{border:solid 1px #CCC;padding:10px;margin-top:20px;width:400px;}.common-list li{he 阅读全文
posted @ 2012-06-07 15:51 yexingwen 阅读(1497) 评论(0) 推荐(0)