As many small partners know, the landlord recently in the development of mobile-responsive layout of the adaptive page, now share a just finished the small demo
Html:
<!DOCTYPE HTML><HTMLLang= "en"><Head><Metaname= "Viewport"content= "Width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, User-scalable=no"><Metaname= ' apple-mobile-web-app-capable 'content= ' Yes '/><Metaname= "Format-detection"content= "Telephone=no" /><Metahttp-equiv= ' Content-type 'content= ' Textml;charset=utf-8 '/><title>Mobile side</title><Linkrel= "stylesheet"href= "Css/style.css"type= "Text/css" /></Head><Body> <Divclass= "img"> <imgsrc= "Images/img-1.jpg" /></Div> <Scripttype= "Text/javascript"> functionimganimation () {varimgobj=document.getElementsByTagName ("Div")[0]; Imgobj.onclick=function(){ if(imgobj) {imgobj.classname= "img imganimation"; }}} imganimation (); </Script></Body></HTML>
Css:
@charset "Utf-8";/*CSS Document*/BODY,DIV,DL,DT,DD,UL,OL,LI,H1,H2,H3,H4,H5,H6,FORM,INPUT,TABLE,TBODY,P,TH,TD{-webkit-text-size-adjust:None;margin:0;padding:0;Border:None;-webkit-tap-highlight-color:Rgba (0,0,0,0);font-size:1em;font-family:"Microsoft Yahei", "Microsoft Jas Black", Tahoma,arial,helvetica, Stheiti;Color:#4c4948; }Html,body{Min-height:100%; }Img,input,button,a,select,textarea{margin:0;padding:0;Resize:None;Border:None;Outline:None; }Ol,ul{List-style:None; }H1,h2,h3,h4,h5,h6,p,em{font-size:100%;Word-wrap:Break-word;Font-weight:Normal;Font-style:Normal; }a:active, A:focus{Outline:None; }Button::-moz-focus-inner,input::-moz-focus-inner{padding:0;Border:0; }Table{Border-collapse:collapse;border-spacing:0; }. Clearfix:after{content: ".";Display:Block;Height:0;Clear:both;Visibility:Hidden;font-size:0; }. Clearfix{Zoom:1; }a{Color:#4c4948;text-decoration:None; }. IMG{width:190px;Height:120px;padding:3px;Border:1px solid #ccc;position:Absolute;Z-index: A;Top:50px; Left:50%;Margin-left:-95px; }/*animation name, animation run time, alternate smooth transition, infinite is repeatedly executed*/. Imganimation{Animation-name:imganimation;Animation:imganimation 2s alternate infinite;-webkit-animation:imganimation 2s alternate infinite;-moz-animation:imganimation 2s alternate infinite; }/*@-webkit-keyframes imganimation{0%{left: -198px} 100%{left:50%;}} @-moz-keyframes imganimation{0%{Left: -198px} 100%{left:50%; }}*/@-webkit-keyframes imganimation{0%{Opacity:0}50%{Opacity:0.5}100%{Opacity:1}} @-moz-keyframes imganimation{0%{Opacity:0}50%{Opacity:0.5}100%{Opacity:1} }
CSS block that part of the code is the picture flew into the CSS, simple and practical, more convenient than the handwriting JS, gradually fell in love with CSS3, the DA