時(shí)間：2023-09-16 16:24:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-09-16 16:24:01 來源：網(wǎng)站運(yùn)營
動(dòng)漫主題dreamweaver作業(yè)靜態(tài)HTML網(wǎng)頁設(shè)計(jì)——仿京東(海賊王)版本：HTML實(shí)例網(wǎng)頁代碼, 本實(shí)例適合于初學(xué)HTML的同學(xué)。該實(shí)例里面有設(shè)置了css的樣式設(shè)置，有div的樣式格局，這個(gè)實(shí)例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計(jì)個(gè)人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實(shí)踐設(shè)計(jì)。
在線咨詢
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>新世界</title> <link rel="stylesheet" href="./css/base.css"> <link rel="stylesheet" href="./css/index.css"> <link rel="shootcut icon" href="./favicon .ico"></head><body> <!-- 快捷導(dǎo)航欄shortcut --> <div class="shortcut"> <div class="cut"> <ul class="left"> <li>新世界歡迎您！ </li> <li><a href="#">請(qǐng)登錄 </a><a href="#" class="red">免費(fèi)注冊(cè)</a></li> </ul> <ul class="right"> <li>我的關(guān)注</li> <li>|</li> <li class="add">我的新世界</li> <li>|</li> <li>新世界會(huì)員</li> <li>|</li> <li>歷史記錄</li> <li>|</li> <li class="add">關(guān)注新世界</li> <li>|</li> <li class="add">售后服務(wù)</li> <li>|</li> <li class="add">網(wǎng)站導(dǎo)航</li> </ul> </div> </div> <!-- deader頭部 --> <div class="header"> <div class="logo"> <img src="./img/onepiece.png" alt="" width="286px" height="106px"> </div> <p>歡迎來到新世界,一起航海吧!</p> </div> <!-- nav導(dǎo)航欄 --> <div class="nav"> <div class="both"> <div class="dropdown"> <div class="dt"> <dt>導(dǎo)航</dt> </div> <div class="dd"> <dd><a href="#">原創(chuàng)服裝</a></dd> <dd><a href="#">海報(bào)、壁紙</a></dd> <dd><a href="#">美妝、洗護(hù)</a></dd> <dd><a href="#">訂制、家具、家裝</a></dd> <dd><a href="#">男裝、女裝、童裝</a></dd> <dd><a href="#">化妝、寵物</a></dd> <dd><a href="#">飾品、手表</a></dd> <dd><a href="#">戶外運(yùn)動(dòng)</a></dd> <dd><a href="#">手辦、玩具</a></dd> <dd><a href="#">鞋靴、T恤</a></dd> <dd><a href="#">醫(yī)療保健</a></dd> <dd><a href="#">明信片、通緝令</a></dd> <dd><a href="#">會(huì)員、漫畫</a></dd> <dd><a href="#">充值、票務(wù)</a></dd> <dd><a href="#">眾籌、應(yīng)援</a></dd> </div> </div> <div class="navitems"> <li><a href="#">簡(jiǎn)介</a></li> <li><a href="#">服飾美妝</a></li> <li><a href="#">海報(bào)壁紙</a></li> <li><a href="#">手辦</a></li> <li><a href="#">應(yīng)援物</a></li> <li><a href="#">拍賣</a></li> <li><a href="#">漫畫</a></li> </div> </div> </div> <!-- 首頁焦點(diǎn)圖與快報(bào)模塊focus&newsflash --> <div class="w"> <div class="main"> <div class="focus"> <ul> <li><img src="./img/大圖.png" alt=""></li> </ul> <div class="dotted"> <li></li> <li></li> <li></li> <li></li> </div> </div> <div class="newsflash"> <li> <h3>今日致敬</h3> </li> <p>再見了，</p> <p>火拳艾斯。</p> <img src="./img/艾斯致敬.png" alt=""> </div> </div> </div> <div class="sec2"> <img src="./img/艾斯2.png" alt=""> <p>印花T恤+破洞牛仔褲休閑套裝</p> <span class="now">￥2449</span> <span class="pass">￥2999</span> <div></div> <span class="one">已售</span> <span class="red"><strong>75%</strong></span> <div class="line"> <li></li> </div> <span class="one">剩余</span> <span class="red"><strong>37%</strong></span> <span class="one">件</span> <div class="box">立即搶購</div> </div> <div class="sec3"> <img src="./img/艾斯3.png" alt=""> <p>印花T恤+拖地褲休閑套裝</p> <span class="now">￥2599</span> <span class="pass">￥2999</span> <div></div> <span class="one">已售</span> <span class="red"><strong>90%</strong></span> <div class="line"> <li></li> </div> <span class="one">剩余</span> <span class="red"><strong>19</strong></span> <span class="one">件</span> <div class="box">立即搶購</div> </div> <div class="sec4"> <img src="./img/艾斯4.png" alt=""> <p>運(yùn)動(dòng)風(fēng)休閑套裝</p> <span class="now">￥2999</span> <span class="pass">￥3499</span> <div></div> <span class="one">已售</span> <span class="red"><strong>95%</strong></span> <div class="line"> <li></li> </div> <span class="one">剩余</span> <span class="red"><strong>5</strong></span> <span class="one">件</span> <div class="box">立即搶購</div> </div> </div> </div> <!-- 情懷墻模塊 --> <div class="w mosion"> <div class="hd"> <div class="left">情懷墻</div> <div class="right"><a>我要投稿</a></div> </div> <div class="bd"> <img class="img2" src="./img/舉手.png"></img> <p> 有一部動(dòng)漫，讓我熱血沸騰；有一部動(dòng)漫，讓我悄然淚下；有一部動(dòng)漫，讓我義憤填膺……是的，那是海賊王的旗幟在飛揚(yáng)；看吧，那是大海的怒狂；聽吧，大海的戰(zhàn)歌在回蕩；咆哮吧！無畏的海賊王！</p> <img src="./img/海賊王.png" alt=""> </div> </div> <!-- 側(cè)邊欄 --> <div class="aside"> <img src="./img/探頭.png" alt=""> </div> <!-- footer底部制作 --> <div class="footer"> <div class="top w"> <div class="mod_service"> <div class="out1"> <div class="slogan">?</div> <div class="text"> <dt class="dt">正品保障</dt> <dd class="dd">正品保障，提供發(fā)票</dd> </div> </div> <div class="out2"> <div class="slogan">?</div> <div class="text"> <dt class="dt">極速物流</dt> <dd class="dd">極速物流，極速發(fā)貨</dd> </div> </div> <div class="out3"> <div class="slogan">?</div> <div class="text"> <dt class="dt">無憂售后</dt> <dd class="dd">7天無理由退換貨</dd> </div> </div> <div class="out4"> <div class="slogan">?</div> <div class="text"> <dt class="dt">特色服務(wù)</dt> <dd class="dd">私人訂制家電套餐</dd> </div> </div> <div class="out5"> <div class="slogan">?</div> <div class="text"> <dt class="dt">幫助中心</dt> <dd class="dd">您的購物指南</dd> </div> </div> </div> <div class="mod_help w"> <div class="sec1"> <dt class="dt">購物指南</dt> <dd class="dd">購物流程</dd> <dd class="dd">會(huì)員介紹 </dd> <dd class="dd"> 生活旅行/團(tuán)購</dd> <dd class="dd"> 常見問題 </dd> <dd class="dd"> 大家電 </dd> <dd class="dd"> 聯(lián)系客服</dd> </div> <div class="sec2"> <dt class="dt">配送方式</dt> <dd class="dd">上門自提</dd> <dd class="dd">211限時(shí)達(dá) </dd> <dd class="dd"> 配送服務(wù)咨詢</dd> <dd class="dd"> 配送費(fèi)收取標(biāo)準(zhǔn)</dd> <dd class="dd"> 海外配送 </dd> </div> <div class="sec3"> <dt class="dt">支付方式</dt> <dd class="dd">貨到付款</dd> <dd class="dd">在線支付 </dd> <dd class="dd"> 分期付款</dd> <dd class="dd"> 郵局匯款 </dd> <dd class="dd"> 公司轉(zhuǎn)賬</dd> </div> <div class="sec4"> <dt class="dt">售后服務(wù)</dt> <dd class="dd">售后政策</dd> <dd class="dd">價(jià)格保護(hù) </dd> <dd class="dd"> 退款說明</dd> <dd class="dd"> 返修/退換貨 </dd> <dd class="dd"> 取消訂單</dd> </div> <div class="sec5"> <dt class="dt">特色服務(wù)</dt> <dd class="dd">奪寶島</dd> <dd class="dd">DIY裝機(jī) </dd> <dd class="dd"> 延保服務(wù)</dd> <dd class="dd"> 品優(yōu)購E卡 </dd> <dd class="dd"> 品優(yōu)購?fù)ㄐ?span ></dd> </div> <div class="sec6"> <dt class="dt">幫助中心</dt> <dd class="dd"><img src="./img/二維碼.png" alt="" width="100px" height="100px"></dd> </div> </div> <div class="mod_copyright"> <div class="part1"> <li>關(guān)于我們</li> <li>|</li> <li>聯(lián)系我們</li> <li>|</li> <li>聯(lián)系客服</li> <li>|</li> <li>商家入駐</li> <li>|</li> <li>營銷中心</li> <li>|</li> <li>手機(jī)品優(yōu)購</li> <li>|</li> <li>友情鏈接</li> <li>|</li> <li>銷售聯(lián)盟</li> <li>|</li> <li>品優(yōu)購社區(qū)</li> <li>|</li> <li>品優(yōu)購公益</li> <li>|</li> <li>English Site</li> <li>|</li> <li>Contact U</li> </div> <div class="part2">地址：杭州市昌平區(qū)建材城西路金燕龍辦公樓一層 郵編：100096 電話：400-618-4000 傳真：010-82935100 郵箱: zhanghj+itcast.cn</div> <div class="part3">京ICP備08001421號(hào)京公網(wǎng)安備110108007702</div> </div> </div> </div></body></html>/* 聲明字體圖標(biāo) 注意更改路徑 *//* 快捷導(dǎo)航欄 */.shortcut { height: 31px; line-height: 31px; background-color: #f1f1f1;}.cut { width: 1200px; margin: 0 auto;}.cut .left { float: left;}.cut .right { float: right;}.cut li { float: left; font-size: 12px;}.red { color: #c81623;}.cut ul li:nth-of-type(even) { padding: 0 10px;}.cut .right .add::after { content: '/e900'; font-family: 'icomoon'; margin-left: 5px;}/* 頭部header */.header { height: 106px; width: 1200px; margin: 0 auto;}.header .logo img { float: left;}.header p { float: right; font-family: '方正舒體'; font-size: 72px; color: #c9021e;}/* nav導(dǎo)航欄 */.nav { height: 45px; border-bottom: 2px solid #b1191a;}.nav .both { height: 47px; line-height: 47px; width: 1200px; margin: 0 auto;}.dropdown { float: left; width: 208px; height: 512px; background-color: #078ffc;}.dropdown .dt { text-align: center; font-size: 18px; color: #fff;}.dropdown dd { /* display: none; */ position: relative; padding-left: 10px; margin-left: 1px; text-align: left; line-height: 31px; height: 31px; background-color: #58affc;}.dropdown dd a { color: #f1f1f1; font-size: 14px;}.dropdown dd:hover { background-color: #f1f1f1;}.dropdown dd:hover a { color: #c81623;}.like .hd { height: 40px;}.like .hd .left { float: left; font-size: 18px; line-height: 40px;}.like .hd .right { float: right; line-height: 40px; margin-right: 20px;}.like .hd .right img { widows: 12px; height: 12px;}.like .bd { height: 240px; border: 1px solid #ededed;}.like .bd li { height: 240px; width: 199px; float: left;}.like .bd li .img { width: 170px; height: 140px; text-align: center; line-height: 140px; margin-bottom: 5px;}.like .bd li .text { position: relative; width: 170px; margin-left: 30px;}.like .bd li i { color: #df3033; font-size: 18px;}.like .text:nth-child(-n+5)::after { content: ''; position: absolute; bottom: 10px; right: 5px; width: 1px; height: 45px; background-color: #ddd;}/* 角色簡(jiǎn)介 */.actor-help { height: 1100px;}.actor { height: 1100px;}.actor .hd { height: 40px; border-bottom: 1px solid #ededed;}.actor .hd .left { float: left; font-size: 18px; line-height: 40px;}.actor .hd .right { float: right; line-height: 40px; margin-right: 20px;}.actor .hd .right img { widows: 12px; height: 12px;}.actor .bd>div { position: relative; float: left; width: 366px; height: 328px; margin-top: 1px; margin-left: 25.5px; margin-bottom: 30px; border: 5px solid #000;}.actor .bd .sec1 .background { position: absolute; left: 50px; bottom: 2px; z-index: -1;}.actor .bd .sec3 .background { position: absolute; left: 200px; top: 225px; z-index: -2;.mod_help .dd { line-height: 22px;}.mod_copyright { height: 135px; text-align: center;}.mod_copyright .part1 { height: 16px; margin-top: 36px; margin-bottom: 16px;}.mod_copyright .part1 li { float: left; padding-left: 20px;}.mod_copyright .part2 { margin-bottom: 10px;}【點(diǎn)贊收藏博文】 三連支持下吧，你的支持是我創(chuàng)作的動(dòng)力, 【觀注作者 |獲取更多源碼| 優(yōu)質(zhì)文章】。關(guān)鍵詞：版本,設(shè)計(jì),主題,作業(yè),靜態(tài)
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
