當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

映芬视觉网页练习

發布時間：2023/12/20 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了映芬视觉网页练习小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

參考:頭部<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\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  384 </body> 385 </html>

轉載于:https://www.cnblogs.com/zjm1999/p/10181604.html

總結

以上是生活随笔為你收集整理的映芬视觉网页练习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【计算神经科学冒险者们】2.3 神经编码
下一篇： MongoDB聚合