時間：2023-09-23 09:36:01 | 來源：網(wǎng)站運營
時間：2023-09-23 09:36:01 來源：網(wǎng)站運營
html網(wǎng)頁制作代碼大全——大學(xué)生影視主題網(wǎng)頁制作——圖圖影視影院5頁HTML+CSS+JavaScript：HTML實例網(wǎng)頁代碼, 本實例適合于初學(xué)HTML的同學(xué)。該實例里面有設(shè)置了css的樣式設(shè)置，有div的樣式格局，這個實例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計個人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實踐設(shè)計。
在線咨詢
<!doctype html><html><head><meta charset="utf-8"><link rel="stylesheet" href="../css/bangdan.css"><title>榜單</title></head><body> <div class="box"> <div class="box1"> <a href="tutu1.html"><span class="name"><span class="mingzi">------圖圖影視影院</span></span></a> <div class="city1">城市:滄州</div> <div class="city2"><div class="city3"><a href="#"><span class="mingzi">定位城市:定位失敗</span></a></div> <div class="city4">定位失敗</div></div> <div class="login"><a href="login.html"><span class="mingzi">登錄/</span></a></div> <div class="exit"><a href="tutu1.html"><span class="mingzi">退出</span></a></div> <div class="search1"> <input type="text" class="input" placeholder="找影視劇、影人、影院"> </div> <div class="search2"> <input class="submit" type="submit" value="搜索"> </div> </div> <div class="one"> <ul> <li><a href="tutu1.html" class="three"><span class="mingzi">首頁</span></a></li> <li><a href="movie.html" class="three"><span class="mingzi">電影</span></a></li> <li><a href="yingyuan.html" class="three "><span class="mingzi">影院</span></a></li> <li><a href="bangdan.html" class="three active"><span class="mingzi">榜單</span></a></li> <li><a href="#" class="three"><span class="mingzi">熱點</span></a></li> </ul> </div> <div class="box2"> <span><a href="#" class="two active"><span class="mingzi">熱映口碑榜</span></a></span> <a href="#"><span class="sort4"><span class="mingzi">最受期待榜</span></a><a href="#"> <span class="sort4"><span class="mingzi">國內(nèi)票房榜</span></a></div> <div class="box3"> <div class="bg"> <div class="sheet"> <span class="top">TOP</span> <p class="tp"></p> <p><a href="https://v.qq.com/x/cover/jqq4vlwrxzfdxi4/p0020vf6862.html"><span class="mingzi">長津湖</span></a></p> <p><a href="https://v.qq.com/x/cover/mzc00200kbornzq/c3304913l9d.html"><span class="mingzi">梅蘭芳</span></a></p> <p><a href="https://v.qq.com/x/cover/mzc00200v3x7zg9/t3308lhnf7i.html"><span class="mingzi">揚名立萬</span></a></p> <p><a href="https://v.qq.com/x/cover/mzc00200wh6nz2g/o3219tg84hr.html"><span class="mingzi">天書奇譚</span></a></p> </div> </div> </div> <div class="bottom"> <p> <a href="#"><span class="mingzi">商務(wù)合作郵箱：xxx@qq.com</span></a> <a href="#"><span class="mingzi">客服電話：xxx</span></a > <a href="#"><span class="mingzi">違法和不良信息舉報電話：xxx</span></a> </p> <p><a href="#"><span class="mingzi">xxx</span></a></p> <p> <a href="#"><span class="mingzi">圖圖影視影院</span></a> </p> </div> </div></body></html>body{ margin: 0 100px; padding: 0;}.box{ width: 1200px; position: relative; background: #FFF;}.box1{ width: 100%; height: 125px; background:url(../image/log.png) #FFF no-repeat; background-size: 250px 125px;}a{ text-decoration: none; color:#000;}.name{ width: 300px; height: 125px; position: absolute; left: 270px; top: 0px; line-height: 125px; text-align: center; font-size:30px; color:#00F;}.city1{ width: 87px; height: 25px; position: absolute; left: 980px; top: 30px; line-height: 25px; text-align: center;}.city2{ width: 146px; height: 25px; position: absolute; left: 1056px; top: 30px; line-height: 25px; text-align: center;}.city4 { width:146px; height:30px; display: none; position: absolute; background-color:#CCC;}.city2:hover .city4 { display: block;}.city2:hover{ border-bottom: 30px solid #666;}.login{ width: 70px; height: 25px; position: absolute; left: 1107px; top: 0px; line-height: 25px; text-align: center;}.exit{ width: 60px; height: 25px; position: absolute; left: 1150px; top: 0px; line-height: 25px; text-align: center;}.search1{ width: 100px; height: 25px; position: absolute; left: 977px; top: 101px;}.search2{ width: 50px; height: 25px; position: absolute; left: 1156px; top: 102px;}ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid #F66; background-color:#F66; width:1200px;}li { float: left;}li a { display: block; color: #000; text-align: center; padding: 10px 100px;} li .active { background-color: #FC0;}.mingzi{ display:inline-block;}.mingzi:hover{ color:#F00;}span .active{ color:#30F;}.box2{ width:1100px; text-align:center; position:absolute; top:175px;}.box3{ width:1100px; position:absolute; top:190px;}.bg{ width:600px; height:550px; background-image:repeating-radial-gradient(circle at 50% 50%,#333,#000 1%); margin:50px auto; padding:40px; border-radius:50%; padding-top:50px; border:10px solid #ccc;}.sheet{ width:372px; height:530px; background:#fff; border-radius:30px; box-shadow:15px 15px 12px #000; margin:0 auto;}.sheet p{ width:372px; height:55px; background:#ccc no-repeat 70px 20px; margin-bottom:2px; font-size:10px; color:#d6d6d6; line-height:55px; text-align:center; font-family:"微軟雅黑";}.sheet .tp{ width:372px; height:247px; background:#fff; background-image:url(../image/yingyuantubiao.png); background-size:50% 50%; background-repeat:no-repeat; background-position:87px 16px,99px 192px; border-radius:30px 30px 0 0;}.top{ width:372px; height:60px; position:absolute; top:270px; left:360px; font-size:50px; line-height:60px; text-align:center;}.sheet .yj{ border-radius:0 0 30px 30px;}.bottom{ width:1200px; position:absolute; top:985px; text-align:center; background:#06F;}【點贊收藏博文】 三連支持下吧，你的支持是我創(chuàng)作的動力, 【觀注作者 |獲取更多源碼| 優(yōu)質(zhì)文章】。關(guān)鍵詞：影院,主題,大學(xué)生
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
