随笔分类 - html/css
摘要:美国 174.139.114.214香港 103.30.43.213台湾 61.220.93.42 中国 218.93.205.136韩国 103.249.28.89日本 160.16.76.18新加坡 103.233.81.251 /** * * @author LJ * @date 2015-0
阅读全文
摘要:一、TureTpe(.ttf)格式:.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;二、OpenTy...
阅读全文
摘要:@media only screen and (max-device-width: 480px) { //页面最大宽度480px} //外链式 @media only screen and (min-width:480px) and (max-width : 768px){ //480 < x <...
阅读全文
摘要:width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。height:和 width 相对应,指定高度。initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。maximum-scale:允许用户缩放到的最大比例。minimum-scale:允许用户缩放到的最小比例。user-scalable:用户是否可以手动缩放一、telephone你明明写的一串数字没加链接样式,而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号
阅读全文
摘要:float right 次碳酸钴align right 次碳酸钴direction rtl 次碳酸钴
阅读全文
摘要:首先要知道在应用 box-flex 时必须给父容器定义 css 属性display:box其子容器才可以进行划分。.box{ display: -webkit-box; display: -moz-box; display:box;}.sbox1 { -moz-box-flex:3; -webkit-box-flex:3; box-flex:3;}.sbox2 { -moz-box-flex:2; -webkit-box-flex:2; box-flex:2;}.sbox3 { -moz-box-flex:1; ...
阅读全文
摘要:和Baseline一遍扫描不同,Progressive JPEG文件包含多次扫描,这些扫描顺寻的存储在JPEG文件中。打开文件过程中,会先显示整个图片的模糊轮廓,随着扫描次数的增加,图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下,可以看到图片的轮廓知道正在加载的图片大概是什么。在一些网站打开较大图片时,你就会注意到这种技术。在photoshop中有“存储为web所用格式”,打开后选择“连续”就是渐进式JPEG。
阅读全文
摘要:响应式页面布局的引用media queries判断设备尺寸规格后的基本使用方法:1.通过link引入文件式 //屏幕大于400px时应用styleA.css文件 //屏幕大于600px小于800px时应用styleB.css文件screen是媒体类型,css2.1定义了10种媒体类型and是关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)(min-width: 400px) 就是媒体特性,其被放置在一对圆括号中2.通过内嵌式@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/ .cla.
阅读全文
摘要:1 <ul class="readers-list"> 2 <li> 3 <a href="#"> 4 <img src="default.jpg" alt="" /> 5 <em>点头猪</em> 6 <strong>+10</strong><br /> 7 lilyxue.blogbus.com/ 8 </a> 9 </li>10 <li>11 <a href=&
阅读全文
摘要:在ie6中,relative块元素内,absolute块元素的上一个元素如果是浮动的话,absolute块元素将消失掉。具体触发原因是:绝对定位层前面一个元素是浮动层;大元素内的总宽度被所有子元素占满了,即子元素宽度排列已经塞不下任何一像素了。代码如下:<!DOCTYPE html><html><head><meta http-equiv="content-type" content="text/html;charset=utf-8" /><style>*{ margin:0; padding:
阅读全文
摘要:方法一(行高式).box{ display:table-cell; *display:block; *font-size:262px; *font-family:arial;/* font-size约为高度的.873,font-family是为了防止utf8引起的hack失效,如gbk编码*/ width:300px; height:300px; text-align:center; vertical-align:middle; background:#eee;}<div class="main"><img src="1.jpg" /&
阅读全文
摘要:IE6 下设置 line-height 无效的解决办法BUG症状:当在一个容器里文字和img、input、textarea、select、object等元素相连的时候,对这个容器设置的line-height数值会失效; 同时以上元素的行高可能×2:受影响的浏览器: Microsoft Internet Explorer 5.01 / Windows Microsoft Internet Explorer 5.5 / Windows Microsoft Internet Explorer 6; 解决方法: 对和文字相连接的img、input、textarea、select、object
阅读全文
摘要:去掉Chrome有焦點時土黃框:input,textarea { outline:none;}FF给img加css的hover属性为opacity时,图片会有微小的缩小:-moz-transform:rotate(0);smartphone横纵翻转文字大小不变:-webkit-text-size-a...
阅读全文
摘要:filter:alpha(opacity=60); IE(<9)透明滤镜失效。如果我们设置宽度后filter就会有效果,而这个没有设置宽度hasLayout 属性值是0熟悉haslayout 的都知道,这个表示当前容器不是一个有形体在IE中filter套用到容器上时,容器必需是「有形体」,意思就是,必需「必须明确知道套用范围」,这个在 IE 中称为 layout,同时 IE支持 hasLayout 这个属性,但是 hasLayout 这个属性沒有 HTML 或css写法,也就是只能使用 JavaScript / JScript 來驱动,使这个属性变成启动或不启动。当 hasLayout为
阅读全文
摘要:--行内元素不能嵌套块元素,这种格式在w3c校验无法通过。块级元素也有嵌套顺序:哪些块元素里面不能放哪些块元素呢?先把所有的块元素再次划分成几个级别的,<html>是在最外层,<html>下一级里面只会 有<head>、<body>、<frameset>、<noframes>,而我们已经知道了可视的元素只会出现在<body>里,所以我们把<body>划在第一个级里面。接着,把不可以自由嵌套的元素划在第三个级,其他的就 归进第二个级。所谓的不可自由嵌套的元素就是里面只能放内联元素的,它们包括有:标题标
阅读全文
摘要:<a name="a1">a1</a><a href="#a1">1</a>弊端:--产生一个无意义的 a 标签;-- a 标签缺少 href 属性,不符合 XHTML 标准;--多了 name 属性,不符合 XHTML 标准。解决办法:使用 id 时,我们不再局限于 a 标签,可以用于其他标签<h2 id="a1">zzz</h2>这种用 id 做锚点在 IE、Firefox、Chrome、Opera 中都是受支持的。另外再说一下,<a name=&quo
阅读全文