学生个人单页面网页作业学生网页设计成品静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业

作者：羊村懒王 | 2024-05-23 08:52:04

踩

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

文章目录

网页介绍
网页效果
代码展示
- 1.HTML代码
精彩推荐

网页介绍

1 网页简介：此作品为学生个人主页网页设计题材，学生个人单页面网页作业学生网页设计成品静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业

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

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

网页效果

在这里插入图片描述

代码展示

1.HTML代码

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


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HERO</title>
    <link rel="icon" href="./font/marvel.png" type="image/x-icon" />
    <link rel="stylesheet" href="./assets/reset.css">
    <link rel="stylesheet" href="./assets/animate.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/hero.css">
</head>

<body>
    <div class="box">
        <ul class="animated lightSpeedIn nav">
            <li>
                <a href="hero.html">
                    <img src="./font/marvel.png" alt="logo">
                </a>
            </li>
            <li id="li_btn">
                <a href="hero.html">
                    HERO
                </a>
                <ul id="nav_two" class=" nav_two">
                    <li class="animated zoomIn " id="thor">Thor</li>
                    <li class="animated zoomIn " id="hulk">Hulk</li>
                    <li class="animated zoomIn " id="widow">Widow</li>
                </ul>
            </li>
            <li>
                <a href="film.html">
                    FILM
                </a>
            </li>
        </ul>
        <div class="con">
            <div id="section" class="ironman animated rollIn">
                <img src="./img/one.png" alt="钢铁侠" />
            </div>
            <div class="thor animated bounceInRight">
                <img src="./img/two.png" alt="雷神" />
            </div>
            <div class="hulk animated bounceInLeft">
                <img src="./img/three.png" alt="浩克" />
            </div>
            <div class="widow animated zoomIn">
                <img src="./img/four.png" alt="黑寡妇" />
            </div>
        </div>
        <div class="back_top animated jackInTheBox" id="back_top">
            <i class="iconfont icon-fanhuidingbu3"></i>
        </div>

    </div>
</body>

<script src="./js/hero.js"></script>


</html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

精彩推荐

看到这里了就 【点赞，好评，收藏】 三连支持下吧，你的支持是我创作的动力。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/612159

学生个人单页面网页作业 学生网页设计成品 静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业

文章目录

网页介绍

网页效果

代码展示

1.HTML代码

精彩推荐

学生个人单页面网页作业学生网页设计成品静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业