大学生HTML+CSS动漫主题网页制作——刀剑神域(6页) dreamweaver作业静态HTML网页设计

前端工作室

已于 2023-12-07 18:27:18 修改

阅读量782

点赞数

分类专栏：网页设计与实现文章标签： css html 前端

于 2022-08-12 23:09:26 首次发布

本文链接：https://blog.csdn.net/qq3200628753/article/details/126207045

版权

这篇博客详细介绍了如何使用HTML和CSS制作一个以刀剑神域为主题的静态网页，适合初学者。内容涵盖网页介绍、网页效果展示、HTML和CSS代码结构解析，并提供了个人学习心得和更多前端资源推荐。

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

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

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

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

一、网页介绍📖

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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <!-- jQuery -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
</head>


<body>
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu-nav">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    <a class="navbar-brand" href="#">
                <img src="images/小电视.jpg" id="xiao" alt="" style="width:100px;height:50px;" />
              </a>
                </div>
                    
                  <div class="collapse navbar-collapse navbar-ex1-collapse">
                    <ul class="nav navbar-nav">
                        <!-- 首页标题 -->

                      <li><a class="active" href="index.html"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>首页<span class="sr-only">(current)</span></a></li>
                      <li><a href="xingpanbiao.html"><span class="glyphicon glyphicon-time" aria-hidden="true"></span>新番时间表</a></li>
                      <li><a href="jiesao.html"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>动漫介绍</a></li>

                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                          <span class="glyphicon glyphicon-expand" aria-hidden="true"></span>番剧<span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                          <li><a href="#">番剧分类</a></li>
                          <li><a href="#">连载动画</a></li>
                          <li><a href="#">完结动画</a></li>
                          <li><a href="#">番剧索引</a></li>
                          <li><a

最低0.47元/天解锁文章

前端工作室

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
大学生HTML+CSS动漫主题网页制作——刀剑神域(6页) dreamweaver作业静态HTML网页设计

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

扫一扫