参考:头部<header></header>
HOME WORK CONTACT JOIN US <nav>导航区域
图片滚动区域测试边栏<aside>
映芬视觉介绍<article>
图片区域<figure>
火影等九张图片<section>
版权所属<footer>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div{ 8 width: 100%; 9 } 10 header{ 11 width: 100%; 12 height: 105px; 13 background:rgba(0,0,0,0.8); 14 position:relative ; 15 } 16 header>h1{ 17 color: white; 18 text-align: center; 19 } 20 nav>div{ 21 width: 760px; 22 height: 30px; 23 display:inline-block; 24 margin-left: 380px; 25 } 26 nav>div>a{ 27 text-decoration: none; 28 color: gray; 29 text-align: center; 30 margin-right: 120px; 31 } 32 nav>div>a:hover{ 33 color: rgba(255,255,255); 34 -webkit-text-stroke:1px; 35 } 36 aside{ 37 position: absolute; 38 } 39 aside>div:first-of-type{ 40 width: 1200px; 41 height: 520px; 42 background:white; 43 margin-left: 55px; 44 margin-top: 30px; 45 /*border: 1px solid red;*/ 46 } 47 .aside-marquee-div{ 48 display: inline-block; 49 } 50 article{ 51 position: absolute;/*绝对定位是相对于父元素,在本例中是最外层的div*/ 52 top: 700px; 53 } 54 article>div{ 55 width: 1200px; 56 height: 85px;/*原来是110px,内边距增加25px,盒子高度会增加25px;所以相应要减少25px;达到看上去居中的目的*/ 57 margin-left: 55px; 58 /*border: 1px solid purple;*/ 59 font-size: 20px; 60 line-height: 35px; 61 text-indent: 30px; 62 font-family: simhei; 63 padding-top: 25px; 64 } 65 figure{ 66 width: 1130px; 67 height: 90px; 68 margin-left: 55px; 69 /*border: 1px solid gray;*/ 70 position: absolute; 71 top: 800px; 72 padding-left: 70px; 73 padding-top: 30px; 74 } 75 figure>img{ 76 width: 65px; 77 height: 40px; 78 margin-right:30px; 79 } 80 .content-div{ 81 width: 1200px; 82 height: 840px; 83 margin-left: 55px; 84 /*border: 1px solid blue;*/ 85 position: absolute; 86 top: 940px; 87 } 88 div>section{ 89 width: 375px; 90 height: 245px; 91 display:inline-block; 92 margin-bottom: 45px; 93 /*border: 1px solid pink;*/ 94 position: relative; 95 } 96 div>section:nth-of-type(2n){/*2,4,6 97 区域section右间距17px*/ 98 margin-right: 17px; 99 } 100 div>section:nth-of-type(2n-1){/*1,3,5 101 区域section右间距17px*/ 102 margin-right: 17px; 103 } 104 div>section>a>img{ 105 position:absolute;/* 图片位置相对于section区域定位*/ 106 width:375px; 107 height:205px; 108 } 109 div>section>div>span:first-of-type{ 110 position:absolute;/* 图片位置相对于section区域定位*/ 111 /*display: inline;*/ 112 margin-top: 80px; 113 margin-left: 150px; 114 font-family: simhei; 115 font-size: 35px; 116 color: rgba(51,204,204,0); 117 -webkit-text-stroke:1px; 118 } 119 div>section>div>span:last-of-type{ 120 position:absolute;/* 图片位置相对于section区域定位*/ 121 display: inline-block; 122 margin-top: 120px; 123 margin-left: 120px; 124 font-family: simhei; 125 font-size: 15px; 126 color: rgba(51,204,204,0); 127 -webkit-text-stroke:1px; 128 } 129 div>section>div>span:nth-of-type(n):hover{ 130 color: rgba(51,204,204,0.9); 131 -webkit-text-stroke:1px; 132 } 133 section>span{ 134 position:absolute;/* 图片位置相对于section区域定位*/ 135 display: inline-block; 136 font-size: 15px; 137 margin-top: 220px; 138 margin-left: 120px; 139 font-family: simhei; 140 color: gray; 141 } 142 footer{ 143 position: absolute; 144 width: 1325px; 145 height: 215px; 146 margin-left: 0px; 147 background:rgba(204,204,204,0.6); 148 margin-top:1700px; 149 /*border: 1px solid black;*/ 150 } 151 footer>div:nth-of-type(1){ 152 width: 680px; 153 height: 215px; 154 border-right: 1px solid gray; 155 position: absolute; 156 } 157 footer>div:nth-of-type(1)>a>img{ 158 width: 45px; 159 height: 35px; 160 display: inline-block; 161 margin-top: 10px; 162 margin-right: 15px; 163 float: right; 164 } 165 footer>div:nth-of-type(2){ 166 width: 600px; 167 height: 215px; 168 display: inline-block; 169 position: absolute; 170 margin-left: 725px; 171 } 172 footer>div:nth-of-type(2)>img{ 173 width: 135px; 174 height: 55px; 175 display: inline-block; 176 margin-top: 10px; 177 }footer>div:nth-of-type(2)>span{ 178 display:block; 179 font-size: 15px; 180 font-family: simhei; 181 color:rgba(102,102,102); 182 line-height: 20px; 183 } 184 </style> 185 </head> 186 <body> 187 <div> 188 <header> 189 <h1>- INFINI-</h1> 190 <nav> 191 <div> 192 <a href="http://www.infinistudio.cn">HOME</a> 193 <a href="http://www.infinistudio.cn/#work">WORK</a> 194 <a href="http://www.infinistudio.cn/#contact">CONTACT</a> 195 <a href="http://www.infinistudio.cn/joinus.html">JOIN US</a> 196 </div> 197 </nav> 198 </header> 199 200 <aside> 201 <div> 202 <marquee behavior="scroll" direction="left" scrollamount="30"> 203 <img src="D:/编程视频笔记/HTML与css笔记/映芬视觉/img/top3.jpg"" alt="" width="1200px" height="450px"> 204 205 <img src="D:/编程视频笔记/HTML与css笔记/映芬视觉/img/top1.jpg" alt="" width="1200px" height="450px"> 206 207 <img src="D:/编程视频笔记/HTML与css笔记/映芬视觉/img/top4.jpg" alt="" width="1200px" height="450px"> 208 209 <img src="D:编程视频笔记HTML与css笔记映芬视觉img op12.jpg" alt="" width="1200px" height="450px"> 210 </marquee> 211 </div> 212 </aside> 213 214 <article> 215 <div> 216 Infini Studio （映纷创意）是一家以动画和设计为驱动的独立创意机构。我们运用多样化的创作形式，为品牌提供丰富多元的跨媒体整合创意营销。 217 </div> 218 </article> 219 <figure> 220 <img src="D:编程视频笔记HTML与css笔记映芬视觉img av1.jpg" alt=""> 221 <img src="D:编程视频笔记HTML与css笔记映芬视觉img av2.jpg" alt=""> 222 <img src="D:编程视频笔记HTML与css笔记映芬视觉img av3.jpg" alt=""> 223 <img src="D:编程视频笔记HTML与css笔记映芬视觉img av7.jpg" alt=""> 224 <img src="D:编程视频笔记HTML与css笔记映芬视觉img av8.jpg" alt=""> 225 <img src="D:编程视频笔记HTML与css笔记映芬视觉img av9.jpg" alt=""> 226 <img src="D:编程视频笔记HTML与css笔记映芬视觉img av10.jpg" alt=""> 227 <img src="D:编程视频笔记HTML与css笔记映芬视觉img av11.jpg" alt=""> 228 <img src="D:编程视频笔记HTML与css笔记映芬视觉img av12.jpg" alt=""> 229 <img src="D:编程视频笔记HTML与css笔记映芬视觉img av13.jpg" alt=""> 230 <img src="D:编程视频笔记HTML与css笔记映芬视觉img av14.jpg" alt=""> 231 </figure> 232 233 <div class="content-div"> 234 <section> 235 <a href="http://www.infinistudio.cn/work/84.html"> 236 <img src="D:编程视频笔记HTML与css笔记映芬视觉imgcontentcontent.jpg" alt="中国抖有味"> 237 </a> 238 <div> 239 <span>抖音</span> 240 <span>抖音x碧桂园公益</span> 241 </div> 242 <span>中国抖有味</span> 243 </section> 244 245 <section> 246 <a href="http://www.infinistudio.cn/work/83.html"> 247 <img src="D:编程视频笔记HTML与css笔记映芬视觉imgcontentcontent1.jpg" alt="火影忍者"> 248 </a> 249 <div> 250 <span>腾讯游戏</span> 251 <span>不火影,枉少年</span> 252 </div> 253 <span>火影忍者</span> 254 </section> 255 256 <section> 257 <a href="http://www.infinistudio.cn/work/82.html"> 258 <img src="D:编程视频笔记HTML与css笔记映芬视觉imgcontentcontent2.jpg" alt="腾讯WE大会"> 259 </a> 260 <div> 261 <span>腾讯</span> 262 <span>亚努斯之门</span> 263 </div> 264 <span>腾讯WE大会</span> 265 </section> 266 267 <section> 268 <a href="http://www.infinistudio.cn/work/81.html"> 269 <img src="D:编程视频笔记HTML与css笔记映芬视觉imgcontentcontent3.jpg" alt="OPPO RI7系列"> 270 </a> 271 <div> 272 <span>OPPO</span> 273 <span>带上它做一只耀眼的夜行动物</span> 274 </div> 275 <span>OPPO RI7系列</span> 276 </section> 277 278 <section> 279 <a href="http://www.infinistudio.cn/work/80.html"> 280 <img src="D:编程视频笔记HTML与css笔记映芬视觉imgcontentcontent4.jpg" alt="贝壳找房"> 281 </a> 282 <div> 283 <span>贝壳</span> 284 <span>VR看房系统</span> 285 </div> 286 <span>贝壳找房</span> 287 </section> 288 289 <section> 290 <a href="http://www.infinistudio.cn/work/78.html"> 291 <img src="D:编程视频笔记HTML与css笔记映芬视觉imgcontentcontent6.jpg" alt="青桔单车"> 292 </a> 293 <div> 294 <span>滴滴出行</span> 295 <span>你是骑行侠还是骑行杀</span> 296 </div> 297 <span>青桔单车</span> 298 </section> 299 300 <section> 301 <a href="http://www.infinistudio.cn/work/77.html"> 302 <img src="D:编程视频笔记HTML与css笔记映芬视觉imgcontentcontent7.jpg" alt="数字敦煌"> 303 </a> 304 <div> 305 <span>腾讯公益</span> 306 <span>数字敦煌</span> 307 </div> 308 <span>数字敦煌</span> 309 </section> 310 311 <section> 312 <a href="http://www.infinistudio.cn/work/76.html"> 313 <img src="D:编程视频笔记HTML与css笔记映芬视觉imgcontentcontent9.jpg" alt="抖音品牌升级卡"> 314 </a> 315 <div> 316 <span>抖音</span> 317 <span>抖音品牌升级卡</span> 318 </div> 319 <span>抖音品牌升级卡</span> 320 </section> 321 322 <section> 323 <a href="http://www.infinistudio.cn/work/75.html"> 324 <img src="D:编程视频笔记HTML与css笔记映芬视觉imgcontentcontent8.jpg" alt="2017我的家乡头条"> 325 </a> 326 <div> 327 <span>今日头条</span> 328 <span>2017我的家乡头条</span> 329 </div> 330 <span>2017我的家乡头条</span> 331 </section> 332 333 </div> 334 <footer> 335 <div> 336 <a href="https://weibo.com/InfiniVision"> 337 <img src="D:编程视频笔记HTML与css笔记映芬视觉imgfootercontact1.jpg" alt="微博认证"> 338 </a> 339 340 <a href="http://infini.zcool.com.cn"> 341 <img src="D:编程视频笔记HTML与css笔记映芬视觉imgfootercontact2.jpg" alt="ZCOOL站酷"> 342 </a> 343 344 <a href="http://i.youku.com/u/UMTMyODY0NzU2"> 345 <img src="D:编程视频笔记HTML与css笔记映芬视觉imgfootercontact3.jpg" alt="优酷"> 346 </a> 347 </div> 348 349 <div class="footer-div"> 350 <img src="D:编程视频笔记HTML与css笔记映芬视觉imglogofooter_logo.jpg" alt="-INFINI-studio"> 351 <span>Infini Studio | 映芬创意</span> 352 <span>北京市朝阳区常营</span> 353 <span>TEL:010-853943331</span> 354 <span>QQ:7585971</span> 355 <span>Email:infinistudio@foxmail.com</span> 356 <span>weibo:@InfiniStudio</span> 357 </div> 358 </footer> 359 </div> 360 <!-- 361 marquee(选取框)标签 362 1.direction(方向)移动方向属性 363 属性值: 364 left（左)、right(右)、up(上)、down(下) 365 2.behavior(行为)移动方式属性 366 属性值: 367 scroll(循环移动) 368 slide(滑动)只移动一个回合 369 alternate(交替的)来回移动 370 3.loop(圈) 371 若未指定则循环不止(infinite)，其值取数值。 372 例：<marquee loop=3>我只走三次哦</marquee> 373 4.scrollamount移动速度属性 374 属性值:值取正整数。数值越大，速度越快。 375 例：<marquee scrollamount=25>看，我走多快！ 376 </marquee> 377 5.scrolldelay(滚动延迟)延时。数值。例： 378 <marquee scrolldelay=1000>我走一走，停一停</marquee> 379 6.bgcolor底色。 380 例：<marquee bgcolor=pink>看到了吧？有底色！</marquee> 381 7.width和height就是移动的宽度与高度了。 382 例：<marquee width=200 height=200 bgcolor=pink direction=down>这个面积不够我移动！</marquee> 383 --> 384 </body> 385 </html>