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

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

    文章目录

    一、网页介绍

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

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

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

    一、网页效果

    在这里插入图片描述
    在这里插入图片描述

    二、代码展示

    1.HTML代码

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

    DOCTYPE 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>HEROtitle>
    <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">Thorli>
                    <li class="animated zoomIn " id="hulk">Hulkli>
                    <li class="animated zoomIn " id="widow">Widowli>
                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/jquery.min.js">script>
<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

    2.CSS代码

    
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background-color: #0e100f;
}
body a {
  color: #fff;
  text-decoration: none;
}
body::-webkit-scrollbar {
  display: none;
}
body .nav {
  z-index: 999;
  width: 50%;
  display: flex;
  justify-content: space-evenly;
  position: absolute;
  top: 1.5%;
  font-weight: bolder;
}
body .nav > li {
  display: inline-block;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
body .nav > li img {
  width: 50%;
}
body .nav > li:nth-child(1) {
  font-size: 25px;
}
body .nav > li:hover {
  cursor: pointer;
  font-size: 25px;
}
body .nav .nav_two {
  display: none;
  color: lightgray;
  font-size: 15px;
}
body .nav .nav_two li {
  height: 50px;
}
body .nav .nav_two li:hover {
  font-size: 20px;
}
body img {
  width: 100%;
}
body .box {
  width: 100%;
  color: #fff;
  position: relative;
}
body .box .back_top {
  display: none;
  cursor: pointer;
  position: fixed;
  right: 20px;
  top: 300px;
}
body .box .back_top .icon-fanhuidingbu3 {
  font-size: 50px;
}
body .box .con .hulk,
body .box .con .thor,
body .box .con .widow {
  display: none;
}



    • 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
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76

    三、个人总结

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

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

    四、精彩推荐

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

  • 相关阅读:
    如何快速将txt类型的日志文件转换为excel表格并进行数据分析报表统计图（如：饼图、折线图、柱状图）？
    面试求职-简历编写技巧
    Tomcat概述和基础优化
    在Java中使用Apache Kafka进行消息队列处理
    Redis强化（缓存原则，缓存淘汰，缓存穿透，缓存击穿，缓存雪崩，Redis持久化）
    【Web-CSS基础】CSS的三大特性、定位方式、静态定位、相对定位、绝对定位、浮动定位、固定定位、设置缩放动画
    C++之map的介绍
    最小生成树之Kruskal、Prim
    Alibaba Canal 使用记录
    爬虫之requests-html爬取国外网站大全
  • 原文地址：https://blog.csdn.net/qq_38514421/article/details/128073908