标签：ott 过渡 http idt har 响应式 开始 org 颜色
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <link href="css/demo.css" rel="stylesheet" /> 7 </head> 8 <body> 9 <!--<div id="d1"></div>--> 10 <div id="header">头部</div> 11 <div id="main"> 12 <div id="main-left">主题-左边</div> 13 <div id="main-center">主题-中间</div> 14 <div id="main-right">主题-右边</div> 15 </div> 16 <div id="footer"></div> 17 </body> 18 </html>
1 /*#d1{ 2 height:200px; 3 width:400px; 4 border:solid 1px red; 5 线性渐变，开始位置，结束位置，开始颜色，结束颜色，色标（色标位置，色标颜色，可以有多个色标，色标即使颜色过渡点） 6 background:-webkit-gradient(linear,left top,left bottom,from(blue),to(red),color-stop(0.4,#fff),color-stop(0.6,#fff)); 7 径向渐变 8 background:-webkit-gradient(radial,center center,0,center center,460,from(blue),to(red),color-stop(0.6,#fff)); 9 }*/ 10 *{ 11 padding:0px; 12 margin:0px; 13 font-family:"微软雅黑"; 14 } 15 #header{ 16 height:100px; 17 border:solid 1px red; 18 margin:0px auto; 19 } 20 #main{ 21 margin:10px auto; 22 height:400px; 23 } 24 #footer{ 25 margin:0px auto; 26 height:100px; 27 border:solid 1px red; 28 } 29 @media screen and (min-width:900px) 30 { 31 #header,#footer{ 32 width:800px; 33 } 34 #main{ 35 width:800px; 36 height:400px; 37 } 38 #main-left{ 39 width:200px; 40 height:400px; 41 border:solid 1px red; 42 float:left; 43 } 44 #main-center 45 { 46 width:394px; 47 height:400px; 48 border:solid 1px red; 49 float:left; 50 } 51 #main-right 52 { 53 width:200px; 54 height:400px; 55 border:solid 1px red; 56 float:left; 57 } 58 } 59 @media screen and (min-width:600px) and (max-width:900px) 60 { 61 #header,#footer 62 { 63 width:600px; 64 } 65 #main 66 { 67 width:600px; 68 height:400px;; 69 } 70 #main-left 71 { 72 width:200px; 73 height:400px; 74 border:solid 1px red; 75 float:left; 76 } 77 #main-center 78 { 79 width:396px; 80 height:400px; 81 border:solid 1px red; 82 float:left; 83 } 84 #main-right 85 { 86 display:none; 87 } 88 } 89 @media screen and (max-width:600px) 90 { 91 #header,#footer 92 { 93 width:300px; 94 } 95 #main 96 { 97 width:300px; 98 height:400px;; 99 } 100 #main-left 101 { 102 display:none; 103 } 104 #main-center 105 { 106 width:300px; 107 height:400px; 108 border:solid 1px red; 109 } 110 #main-right 111 { 112 display:none; 113 } 114 }
标签：ott 过渡 http idt har 响应式 开始 org 颜色
原文地址：http://www.cnblogs.com/snow52132/p/7196677.html
