时间：2023-09-16 16:24:01 | 来源：网站运营
时间：2023-09-16 16:24:01 来源：网站运营
动漫主题dreamweaver作业静态HTML网页设计——仿京东(海贼王)版本：HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
在线咨询
<!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> <!-- 快捷导航栏shortcut --> <div class="shortcut"> <div class="cut"> <ul class="left"> <li>新世界欢迎您！ </li> <li><a href="#">请登录 </a><a href="#" class="red">免费注册</a></li> </ul> <ul class="right"> <li>我的关注</li> <li>|</li> <li class="add">我的新世界</li> <li>|</li> <li>新世界会员</li> <li>|</li> <li>历史记录</li> <li>|</li> <li class="add">关注新世界</li> <li>|</li> <li class="add">售后服务</li> <li>|</li> <li class="add">网站导航</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导航栏 --> <div class="nav"> <div class="both"> <div class="dropdown"> <div class="dt"> <dt>导航</dt> </div> <div class="dd"> <dd><a href="#">原创服装</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="#">化妆、宠物</a></dd> <dd><a href="#">饰品、手表</a></dd> <dd><a href="#">户外运动</a></dd> <dd><a href="#">手办、玩具</a></dd> <dd><a href="#">鞋靴、T恤</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="#">众筹、应援</a></dd> </div> </div> <div class="navitems"> <li><a href="#">简介</a></li> <li><a href="#">服饰美妆</a></li> <li><a href="#">海报壁纸</a></li> <li><a href="#">手办</a></li> <li><a href="#">应援物</a></li> <li><a href="#">拍卖</a></li> <li><a href="#">漫画</a></li> </div> </div> </div> <!-- 首页焦点图与快报模块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>运动风休闲套装</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> 有一部动漫，让我热血沸腾；有一部动漫，让我悄然泪下；有一部动漫，让我义愤填膺……是的，那是海贼王的旗帜在飞扬；看吧，那是大海的怒狂；听吧，大海的战歌在回荡；咆哮吧！无畏的海贼王！</p> <img src="./img/海贼王.png" alt=""> </div> </div> <!-- 侧边栏 --> <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">正品保障，提供发票</dd> </div> </div> <div class="out2"> <div class="slogan"></div> <div class="text"> <dt class="dt">极速物流</dt> <dd class="dd">极速物流，极速发货</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">特色服务</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">会员介绍 </dd> <dd class="dd"> 生活旅行/团购</dd> <dd class="dd"> 常见问题 </dd> <dd class="dd"> 大家电 </dd> <dd class="dd"> 联系客服</dd> </div> <div class="sec2"> <dt class="dt">配送方式</dt> <dd class="dd">上门自提</dd> <dd class="dd">211限时达 </dd> <dd class="dd"> 配送服务咨询</dd> <dd class="dd"> 配送费收取标准</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"> 公司转账</dd> </div> <div class="sec4"> <dt class="dt">售后服务</dt> <dd class="dd">售后政策</dd> <dd class="dd">价格保护 </dd> <dd class="dd"> 退款说明</dd> <dd class="dd"> 返修/退换货 </dd> <dd class="dd"> 取消订单</dd> </div> <div class="sec5"> <dt class="dt">特色服务</dt> <dd class="dd">夺宝岛</dd> <dd class="dd">DIY装机 </dd> <dd class="dd"> 延保服务</dd> <dd class="dd"> 品优购E卡 </dd> <dd class="dd"> 品优购通信</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>关于我们</li> <li>|</li> <li>联系我们</li> <li>|</li> <li>联系客服</li> <li>|</li> <li>商家入驻</li> <li>|</li> <li>营销中心</li> <li>|</li> <li>手机品优购</li> <li>|</li> <li>友情链接</li> <li>|</li> <li>销售联盟</li> <li>|</li> <li>品优购社区</li> <li>|</li> <li>品优购公益</li> <li>|</li> <li>English Site</li> <li>|</li> <li>Contact U</li> </div> <div class="part2">地址：杭州市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn</div> <div class="part3">京ICP备08001421号京公网安备110108007702</div> </div> </div> </div></body></html>/* 声明字体图标 注意更改路径 *//* 快捷导航栏 */.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导航栏 */.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;}/* 角色简介 */.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;}【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】。关键词：版本,设计,主题,作业,静态
