HTML网页设计

HTML网页设计

关注
发信
关注(28)粉丝(399)

动漫主题dreamweaver作业静态HTML网页设计——仿京东(海贼王)版本

精彩专栏推荐👇🏻👇🏻👇🏻👇🏻

❤ 【作者主页——获取更多优质源码】
❤ 【web前端期末大作业——毕设项目精品实战案例(1000套)】

一、网页介绍

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果

动漫主题dreamweaver作业静态HTML网页设计——仿京东(海贼王)版本-LMLPHP

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~


<!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>新世界欢迎您！&nbsp;</li>
                <li><a href="#">请登录 &nbsp;</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>&nbsp;&nbsp;&nbsp;有一部动漫，让我热血沸腾；有一部动漫，让我悄然泪下；有一部动漫，让我义愤填膺……是的，那是海贼王的旗帜在飞扬；看吧，那是大海的怒狂；听吧，大海的战歌在回荡；咆哮吧！无畏的海贼王！</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>

2.CSS代码


/* 声明字体图标 注意更改路径 */

/* 快捷导航栏 */

.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;
}

三、个人总结

一套合格的网页应该包含(具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
  2. 所有页面相互超链接，可到三级页面，有5-10个页面组成；
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转；
  5. 要有JS特效，如定时切换和手动切换图片新闻；
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
  7. 页面清爽、美观、大方，不雷同。
  8. 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货

1.看到这里了就 【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】 。

2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.以上内容技术相关问题可以相互学习交流

动漫主题dreamweaver作业静态HTML网页设计——仿京东(海贼王)版本-LMLPHP

12-06 05:41
Powered by LMLPHP ©2024 HTML网页设计 0.003635