利用HbuilderX制作简单网页： HTML5期末大作业——html5漫画风格个人主页

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

@[TOC](文章目录🌰)

网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,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">
    <title>黑夜主权(Night)title>

    
head>

<body>
    <header class="head">
        <div class="head_logo_div">
            <img class="logo_img" src="images/upload/head.jpg">a>
        div>
        <div class="head_nav_div">
            <nav class="head_nav">
                <ul id="nav_ul">
                    <li class="nav_li_on nav_ul_li">Homeli>
                    <li class="nav_ul_li">Skillli>
                    <li class="nav_ul_li">Experienceli>
                    <li class="nav_ul_li">Hobbyli>
                    <li class="nav_ul_li">Contactli>
                ul>
            nav>
        div>
        <div class="clear">div>
    header>

    <ul class="float_btn" id="float_btn">
        <li class="btn_on">li>
        <li>li>
        <li>li>
        <li>li>
    ul>

    <div class="wrapBox" id="wrapBox">
        <div class="box">
            <img class="box_bg" src="images/upload/pic_1.jpg">
            <div class="box01_content">
                <div class="head_div">
                    <div class="cycle_item">
                        <a href="https://yoomeili.cn" class="github_a" id="github_a" target="_blank">
                            <span class="github_icon">span>
                            <span class="github_text"><p class="item_name">GitHubp>span>
                        a>
                        <a href="http://blog.yoomeili.cn" class="weibo_a" id="weibo_a" target="_blank">
                            <span class="weibo_icon">span>
                            <span class="weibo_text"><p class="item_name">微博p> span>
                        a>
                        <a href="http://blog.yoomeili.cn" class="blog_a" id="blog_a" target="_blank">
                            <span class="blog_icon">span>
                            <span class="blog_text"><p class="item_name"> 博客p>spa
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

相关阅读:
时间在情绪周期视角来看也是不存在的
Tuxera NTFS2024破解版本下载
“文心一言”的使用
网络安全之ARP欺骗防护
JavaSE之List中ArrayList底层和LinkedList底层
一些优雅的算法（c++）
基于无人机的物联网空基中继鲁棒优化
宝塔面板安装部署Vue项目，Vue项目从打包到上线
Python实现Stacking回归模型(随机森林回归、极端随机树回归、AdaBoost回归、GBDT回归、决策树回归)项目实战
vue单页面怎么做SEO优化

原文地址：https://blog.csdn.net/p305114466/article/details/126685663