随笔分类 - HTML/CSS
摘要：这节我们要实现的目的只有一个，就是一栏固定一栏自适应。 1、使用div，这样就可以自动填满父标签宽度，设想方案如下： 但这个有个限制，就是sidebar必须在content之前！ 2、遵循网页优化的角度，主要内容应该放前面，那么需要把content和sitebar位置换一下，然后固定栏使用绝对定位
阅读全文
摘要：任何标签的100%是相对于父亲节点而言的，如果需要根据窗口高度自适应，我们需要设置html和body为100% 直接body下的层 有其他父层的层
阅读全文
摘要：方法一：对收到影响的元素进行设置，哪侧受到浮动的影响就清除哪侧， clear:both; clear:left; clear:right; 方法二： 同时设置100% 或固定宽度 +overflow:hidden; 尝试一下： 如何使得p标签内容跟div标签的不同一行呢？
阅读全文
摘要：background-position:x y; 百分比定位并不能直观的看出来，需要通过计算。 background-position百分比计算公式： (容器宽度—背景图片的宽度)*x%=xpx(容器高度—背景图片的高度)*y%=ypx 上节我们使用的图片也可以继续拿来做练习： 预览效果： 因此不难
阅读全文
摘要：首先准备一张雪碧图，Like this 背景图片的定位方法有3种，比较常用的两种为 关键词： 其中关键字方法background-position: top left 和left top效果是一样的。（注意：如果您仅规定了一个关键词，那么第二个值将是"center"。） 关于像素值的正负：负数方向为
阅读全文
摘要：今天无意间看了到了line-height:1.8 感觉挺有意思的，然后翻了下行高的知识，发现还挺有文章的，不妨温故而知新。 先回顾下：顶线、中线、基线、底线 vertical-align是元素的垂直对齐方式，也依赖于这些线，分别有top(顶线对齐)、middle(中线对齐)、baseline(基线对
阅读全文
摘要：background的属性值 background : background-color | background-image | background-repeat | background-attachment | background-position ; background:transpa
阅读全文
摘要：媒体查询可以根据设备显示器特性设定CSS样式。 媒体查询语法： 1、写在样式里:@media 条件 @media screen and (max-width: 550px){ /*样式*/ } 2、写在link标签里 <link rel="stylesheet" media="screen and
阅读全文
摘要：LESS是动态样式语言，赋予CSS动态语言的特性，如变量、继承、运算、函数，使得CSS更方便编写与维护。>>官网 less 编译后 一：命令行用法： 安装： npm install -g less 解析styles.less 解析styles.less到styles.css 注意： 如果文件路径带有
阅读全文
摘要：滑动门Demo这是大按钮相当于a负责左门，span负责右门
阅读全文
摘要：html5标签 我是header 我是footerheader和footer是html5的块元素，但是旧版的ie并不支持，要支持的方法可以在head中加入js地址：http://html5shiv.googlecode.com/svn/trunk/html...
阅读全文
摘要：头部注释/** @description: 中文说明* @author: name* @update: name (2013-04-13 18:32)*/首尾注释/* Footer */ 内容区 /* End Footer */ 注意事项1、一律采用小写加中划线的方式，不允许使用大写字母或 _2、尽...
阅读全文
摘要：盒子模型 标准盒模型 鞋子 怪异盒模型 鞋子 /*盒子模型*/.shoes{ width: 10...
阅读全文
摘要：先回顾一下 圣杯布局的实现过程>>在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多，那么有没其他方法更加简洁方便呢？在淘宝UED探讨下，增加多一个div就可以不用相对布局了，只用到了浮动和负边距，这就是我们所说的双飞翼布局。DO...
阅读全文
摘要：圣杯布局和双飞翼布局，他们的都要求三列布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以优先渲染，而双飞翼布局是对圣杯布局的一种改良，下一篇文章会讲到。圣杯布局：用到浮动、负边距、相对定位，不添加额外标签DOM结构：Header Main Left Righ...
阅读全文
摘要：映射图像（Image Map）可以实现的效果是：一张图片上点不同位置可以跳转到不同的地方，实例：1、插入一张图片2、在底部“属性”栏中选择合适的热点工具，在图片上绘制热点区域，如3、然后返回代码模式，修改链接就可以了
阅读全文
摘要：文本：color颜色line-height行高direction文本方向letter-spacing字符间距text-align对齐方式text-decoration文本修饰text-indent首行缩进text-transform字母大小写unicode-bidi文本方向white-space空白...
阅读全文
摘要：访问网站的时候，可以在标题栏、搜索栏、收藏夹看到网站的小图标，它们其实就放在网站根目录下，名为：favicon.ico如：http://www.cnblogs.com/favicon.ico制作Favicon.ico的方法：创建2个256色的小图片：像素大小为32×32（用于桌面图标）和16 ×16...
阅读全文
摘要：正常情况下hx按照一定百分比增加字号，但是指定font-size:100%;就会继承body设置的字体大小 font-size:0的应用 上面图片跟边框内还有一些间隙，可以设置font-size:0; 或line-height:0;去除
阅读全文
摘要：等高布局 尝试添加内容尝试添加内容尝试添加内容尝试添加内容尝试添 尝试添加内容尝试添加内容尝试添加内容尝试添加内容尝试添加内容尝试 尝试添加内容尝试添加内容尝试添加内容尝试添加内容尝试添加内容尝试 尝试添加内容尝试添加内容尝试添加内容尝试添加内容尝试添加内容尝试 尝试添加内容尝试添加内容尝试添加内容尝试添加内容尝试添加内容尝试 尝试添加内容尝试添加内容尝试添加内容尝试添加内容尝试添加内容尝试 尝试添加内容尝试添加内容尝试添加内容尝试添加内容尝试添加内容尝试加内容尝试添加内容 尝试添加内容尝试添加内容...
阅读全文
