参考:头部<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,5101 ????????区域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\top12.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\nav\1.jpg" alt="">221 ????????????????<img src="D:\编程视频笔记\HTML与css笔记\映芬视觉\img\nav\2.jpg" alt="">222 ????????????????<img src="D:\编程视频笔记\HTML与css笔记\映芬视觉\img\nav\3.jpg" alt="">223 ????????????????<img src="D:\编程视频笔记\HTML与css笔记\映芬视觉\img\nav\7.jpg" alt="">224 ????????????????<img src="D:\编程视频笔记\HTML与css笔记\映芬视觉\img\nav\8.jpg" alt="">225 ????????????????<img src="D:\编程视频笔记\HTML与css笔记\映芬视觉\img\nav\9.jpg" alt="">226 ????????????????<img src="D:\编程视频笔记\HTML与css笔记\映芬视觉\img\nav\10.jpg" alt="">227 ????????????????<img src="D:\编程视频笔记\HTML与css笔记\映芬视觉\img\nav\11.jpg" alt="">228 ????????????????<img src="D:\编程视频笔记\HTML与css笔记\映芬视觉\img\nav\12.jpg" alt="">229 ????????????????<img src="D:\编程视频笔记\HTML与css笔记\映芬视觉\img\nav\13.jpg" alt="">230 ????????????????<img src="D:\编程视频笔记\HTML与css笔记\映芬视觉\img\nav\14.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笔记\映芬视觉\img\content\content.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笔记\映芬视觉\img\content\content1.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笔记\映芬视觉\img\content\content2.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笔记\映芬视觉\img\content\content3.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笔记\映芬视觉\img\content\content4.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笔记\映芬视觉\img\content\content6.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笔记\映芬视觉\img\content\content7.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笔记\映芬视觉\img\content\content9.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笔记\映芬视觉\img\content\content8.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笔记\映芬视觉\img\footer\contact1.jpg" alt="微博认证">338 ?????????????????????</a>339 340 ?????????????????????<a href="http://infini.zcool.com.cn">341 ?????????????????????<img src="D:\编程视频笔记\HTML与css笔记\映芬视觉\img\footer\contact2.jpg" alt="ZCOOL站酷">342 ?????????????????????</a>343 344 ?????????????????????<a href="http://i.youku.com/u/UMTMyODY0NzU2">345 ?????????????????????<img src="D:\编程视频笔记\HTML与css笔记\映芬视觉\img\footer\contact3.jpg" alt="优酷">346 ?????????????????????</a> ???????????????????347 ?????????????????</div>348 349 ?????????????????<div class="footer-div">350 ?????????????????????<img src="D:\编程视频笔记\HTML与css笔记\映芬视觉\img\logo\footer_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>映芬视觉网页练习
原文地址：https://www.cnblogs.com/zjm1999/p/10181604.html