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

静态网页设计与制作

于 2023-03-26 12:06:17 发布

阅读量363

点赞数

分类专栏： web课程设计文章标签：课程设计 html5 html

本文链接：https://blog.csdn.net/qq_38514094/article/details/129777658

版权

本教程详细介绍了如何使用HbuilderX制作一个HTML5漫画风格的个人主页，包括HTML代码结构、CSS样式设计，适合初学者。网页设计包含了Div+CSS、鼠标特效、多媒体元素等知识点，同时提供了代码示例和作者的个人总结。

摘要由CSDN通过智能技术生成

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

一、网页介绍📖

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

    <script type="text/javascript">
        //设定rem值
        document.getElementsByTagName("html")[0].style.fontSize = document.documentElement.clientWidth / 20 + 'px';
    </script>
</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">Home</li>
                    <li class="nav_ul_li">Skill</li>
                    <li class="nav_ul_li">Experience</li>
                    <li class="nav_ul_li">Hobby</li>
                    <li class="nav_ul_li">Contact</li>
                </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">GitHub</p></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></span

最低0.47元/天解锁文章

静态网页设计与制作

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用HbuilderX制作简单网页： HTML5期末大作业——html5漫画风格个人主页

⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
复制链接

扫一扫