css
1 @font-face{ 2 font-family: myFirstFont; 3 src: url('奇剑王子体.ttf'); 4 } 5 @font-face{ 6 font-family: font1; 7 src: url('Sansation_Light.ttf'); 8 } 9 body { 10 background-color: #BDB76B; 11 } 12 .top{ 13 position:fixed; 14 width: 90%; 15 margin-left:5%; 16 margin-right: 5%; 17 height: 100px; 18 top:0; 19 left: 0; 20 float:left; 21 background-color: #778899; 22 box-shadow: 3px 3px 9px #000000; 23 z-index: 2; 24 } 25 .con{ 26 background-color: #5F9EA0; 27 position: relative; 28 top:107px; 29 margin: 0 auto; 30 padding-bottom: 5%; 31 height: 900px; 32 width: 1200px; 33 } 34 #left{ 35 position: relative; 36 margin-left: 5%; 37 margin-right: 5%; 38 margin-top: 5%; 39 height: 900px; 40 width: 170px; 41 float: left; 42 background-color:#8FBC8F; 43 } 44 #head{ 45 position: relative; 46 padding-top: 0px; 47 margin-top: 0px; 48 top:0px; 49 left: 0px; 50 } 51 #net h1{ 52 font-size: 40px; 53 font-family:myFirstFont; 54 font-family: 黑体; 55 text-decoration: none; 56 animation:myfirst 3s; 57 -moz-animation:myfirst 3s; /* Firefox */ 58 -webkit-animation:myfirst 3s; /* Safari and Chrome */ 59 -o-animation:myfirst 3s; /* Opera */ 60 } 61 #net{ 62 width: 170px; 63 height:50px; 64 margin-left: 15px; 65 margin-left: 2%; 66 float: left; 67 color: #DCDCDC; 68 text-shadow:5px 5px 5px blue; 69 } 70 #net h1:hover{ 71 color: white; 72 } 73 @keyframes myfirst 74 { 75 from {color:#778899; 76 text-shadow:0 0 0;} 77 to {color: #DCDCDC; 78 text-shadow:5px 5px 5px blue; 79 -ms-transform:rotate(720deg); /* Internet Explorer */ 80 -moz-transform:rotate(720deg); /* Firefox */ 81 -webkit-transform:rotate(720deg); /* Safari 和 Chrome */ 82 -o-transform:rotate(720deg); /* Opera */} 83 } 84 85 @-moz-keyframes myfirst /* Firefox */ 86 { 87 from {color:#778899; 88 text-shadow:0 0 0;} 89 to {color: #DCDCDC; 90 text-shadow:5px 5px 5px blue;-ms-transform:rotate(720deg); /* Internet Explorer */ 91 -moz-transform:rotate(720deg); /* Firefox */ 92 -webkit-transform:rotate(720deg); /* Safari 和 Chrome */ 93 -o-transform:rotate(720deg); /* Opera */} 94 } 95 96 @-webkit-keyframes myfirst /* Safari and Chrome */ 97 { 98 from {color:#778899; 99 text-shadow:0 0 0;} 100 to {color:#DCDCDC; 101 text-shadow:5px 5px 5px blue;-ms-transform:rotate(720deg); /* Internet Explorer */ 102 -moz-transform:rotate(720deg); /* Firefox */ 103 -webkit-transform:rotate(720deg); /* Safari 和 Chrome */ 104 -o-transform:rotate(720deg); /* Opera */} 105 } 106 107 @-o-keyframes myfirst /* Opera */ 108 { 109 from {color:#778899; 110 text-shadow:0 0 0;} 111 to {color: #DCDCDC; 112 text-shadow:5px 5px 5px blue;-ms-transform:rotate(720deg); /* Internet Explorer */ 113 -moz-transform:rotate(720deg); /* Firefox */ 114 -webkit-transform:rotate(720deg); /* Safari 和 Chrome */ 115 -o-transform:rotate(720deg); /* Opera */} 116 } 117 #bottom{ 118 position: relative; 119 margin:0 auto; 120 top:110px; 121 height: 20px; 122 width: 90%; 123 } 124 .menu{ 125 width: 570px; 126 height: 30px; 127 float: left; 128 margin-top: 2%; 129 margin-left: 2%; 130 font-family: font1; 131 font-family: 黑体； 132 } 133 .menu ul{ 134 list-style-type: none; 135 position: relative; 136 margin:0 auto; 137 left: -30px; 138 } 139 .menu ul li{ 140 float: left; 141 } 142 .menu a{ 143 display: block; 144 background-color: #808080; 145 width: 100px; 146 text-align: center; 147 line-height: 30px; 148 margin-left: 6px; 149 font-size: 20px; 150 } 151 .menu a:link,a:visited{ 152 background-color:#808080; 153 text-decoration: none; 154 } 155 .menu a:hover,a:active{ 156 color: black; 157 background-color: #8FBC8F; 158 text-decoration: none; 159 box-shadow: 2px 2px 5px; 160 } 161 .pic{ 162 position: relative; 163 padding:0px; 164 margin-top: 5%; 165 padding-top: 20px; 166 height: 850px; 167 width: 840px; 168 float: left; 169 background-color: #778899; 170 } 171 .pic li{ 172 position: relative; 173 float: left; 174 width: 250px; 175 background-color:#ADD8E6; 176 height: 250px; 177 margin-left: 10px; 178 margin-top: 10px; 179 padding-top: 10px; 180 border: 1px solid; 181 } 182 .pic ul{ 183 list-style-type: none; 184 margin-left: -15px; 185 } 186 .pic img{ 187 width: 230px; 188 height: 200px; 189 position: absolute; 190 filter:alpha(opacity=50); 191 -moz-opacity:0.8; 192 -khtml-opacity: 0.8; 193 opacity: 0.8; 194 } 195 .pic img:hover{ 196 filter:alpha(opacity=50); 197 -moz-opacity:1; 198 -khtml-opacity: 1; 199 opacity: 1; 200 } 201 .pic a{ 202 margin-left: 10px; 203 box-shadow: 0 0 0 0; 204 display: block; 205 width: 230px; 206 height: 200px; 207 } 208 .pic a:hover{ 209 box-shadow: 3px 3px 15px; 210 } 211 .pic h1{ 212 text-align: center; 213 font-size: 20px; 214 } 215 .pic h1{ 216 position: absolute; 217 left:110px; 218 bottom: -4px; 219 } 220 #next{ 221 position: relative; 222 height: 900px; 223 width: 1200px; 224 background-color: #008B8B; 225 top:150px; 226 margin: 0 auto; 227 }
html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" type="text/css" href="my.css" /> 6 <title>my_blogs</title> 7 </head> 8 <body> 9 <div class="top"> 10 <div id="net"><h1>互联网</h1></div> 11 <div class="menu"> 12 <ul> 13 <li><a href="">blog</a></li> 14 <li><a href="">With </a></li> 15 <li><a href="">W3school</a></li> 16 <li><a href="">链接</a></li> 17 <li><a href="">科普</a></li> 18 </ul> 19 </div> 20 </div> 21 <div class= "con"> 22 <div id="left"> 23 <span id="mao" name="mao"><h>互联网</h></span> 24 </div> 25 <div class="pic"> 26 <ul> 27 <li><a href="http://www.cpus.gov.cn/" target="blank"> 28 <image src="2764450_130035075_2.jpg"></image> 29 </a><h1>梅花</h1></li> 30 <li><a href=""> 31 <image src="2764450_130035075_2.jpg"></image> 32 </a></li> 33 <li><a href=""> 34 <image src="2764450_130035075_2.jpg"></image> 35 </a></li> 36 <li><a href=""> 37 <image src="2764450_130035075_2.jpg"></image> 38 </a></li> 39 <li><a href=""> 40 <image src="2764450_130035075_2.jpg"></image> 41 </a></li> 42 <li><a href=""> 43 <image src="2764450_130035075_2.jpg"></image> 44 </a></li> 45 <li><a href=""> 46 <image src="2764450_130035075_2.jpg"></image> 47 </a></li> 48 <li><a href=""> 49 <image src="2764450_130035075_2.jpg"></image> 50 </a></li> 51 <li><a href=""> 52 <image src="2764450_130035075_2.jpg"></image> 53 </a></li> 54 </ul> 55 </div> 56 </div> 57 <div id="next"> 58 </div> 59 <div id="bottom"> 60 </div> 61 <div id="n"> 62 <a href="#mao"></a> 63 </div> 64 </body> 65 </html>