不一樣的瀏覽器對各個標籤默認的樣式是不同的,並且有時候咱們也不想使用瀏覽器給出的默認樣式,咱們就能夠用reset.css去掉其默認樣式javascript
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5 tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }
一般咱們在有浮動元素的狀況下,會在同級目錄下再建立一個<div style="clear:both;"></div>
;不過這樣會增長不少無用的代碼。此時咱們用:after
這個僞元素來解決浮動的問題,若是當前層級有浮動元素,那麼在其父級添加上clearfix類便可。css
.clearfix:after { content: "\00A0"; display: block; visibility: hidden; width: 0; height: 0; clear: both; font-size: 0; line-height: 0; overflow: hidden; } .clearfix{zoom:1}
var cookie = { //寫cookies setCookie: function (name, value){ var Days = 365; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name + "=" + escape (value) + ";expires=" + exp.toGMTString(); }, //讀取cookies getCookie: function (name){ var arr,reg= new RegExp( "(^| )" +name+ "=([^;]*)(;|$)" ); if (arr=document.cookie.match(reg)) return unescape(arr[2]); else return null ; }, //刪除cookies, name能夠爲字符串('username')或數組(['username', 'password', ...]) delCookie: function (name) { var delItem = function(item){ var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval = cookie.getCookie(item); if (cval!== null ) document.cookie= item + "=" +cval+ ";expires=" +exp.toGMTString(); } if( typeof name === 'string' ){ delItem( name ); }else{ for(var i=0, len=name.length; i<len; i++){ delItem( name[i] ); } } } }
/* 強制不換行 */ div{ white-space:nowrap; } /* 自動換行 */ div{ word-wrap: break-word; word-break: normal; } /* 強制英文單詞斷行 */ div{ word-break:break-all; }
table { border: 1px solid #000; padding: 0; border-collapse: collapse; table-layout: fixed; margin-top: 10px;} table td { height: 30px; border: 1px solid #000; background: #fff; font-size: 15px; padding: 3px 3px 3px 8px; color: #000; width: 160px;}
div{
position:absolute; width:400px; height:300px; left:50%; top:50%; margin-left:-200px; margin-top:-150px; }
一種經常使用的方式是把外層的div設置爲table-cell;而後讓內部的元素上下左右居中。固然也還有一種方式,就是把img當作div,參考6中的代碼進行設置。
CSS代碼以下:html5
.content{
width: 400px; height: 400px; border: 1px solid #ccc; text-align: center; display:table-cell; vertical-align:middle; }
html代碼以下:java
<div class="content"> <img src="./4.jpg" alt="img"> </div>
js中沒有直接對字符串進行反轉的,須要咱們先轉換成數組,而後使用數組中的reverse()
方法翻轉,最後在把數組拼接回字符串。jquery
var str = "abcdefg"; var revs = str.split("").reverse().join(""); console.log(revs);
這是一個適配iPad頁面的大體框架,包括豎屏和橫屏ios
iPad 適配
/* ipad 豎屏 */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { body{ color:#000; } /* … */ } /* ipad 橫屏 */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { body{ color:#000; } /* … */ }
這是Google提供的js框架,使IE8及如下的瀏覽器支持html5新標籤 html5.js 連接git
/*
HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed */ (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}</style>"; c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type