咒术回战，HTML&CSS，简单，介绍页面

最新推荐文章于 2025-05-14 16:04:16 发布

unsafe-no

最新推荐文章于 2025-05-14 16:04:16 发布

阅读量1.1k

点赞数 1

分类专栏：前端笔记

本文链接：https://blog.csdn.net/mr_aswl/article/details/112255064

版权

本文创建了一个以[咒术回战]为主题的简单介绍页面，通过HTML构建基本结构，结合CSS进行样式设计，包括布局和图片展示，为初学者提供了一个直观的学习示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个超级简单的[咒术回战]介绍页面。

CSS一个简单的介绍页面

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jujutsu Kaisen</title>
    <link rel="stylesheet" href="JujutsuKaisen.css">
</head>
<body>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

unsafe-no

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Python爬取漫画之咒术回战

肉猫子打包のBlog

10-26

1703

爬取漫画一次性加载的网站：使用requests + bs4就足够了带加载的网站：使用requests + selenium无界面操作 import requests, os, pprint, time, re from selenium import webdriver from selenium.webdriver.chrome.options import Options from bs4 import BeautifulSoup # 无界面初始化 chrome_opt = Options()

个人简介 - HTML/CSS简单页面实例

梦里回忆-专栏

07-26

3万+

用 div + css 控制页面 1.position属性： absolute（绝对定位）：参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT（下面简称TRBL）进行定位。在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。 r

参与评论您还未登录，请先登录后发表或查看评论

阿里云盘 PC端网页版，可直接登录，地址如下：https://www.aliyundrive.com/sign/in

热门推荐

qq_40800950的博客

04-17

24万+

阿里云盘网页版地址如下https://www.aliyundrive.com/sign/in

怎样用HTML做一份精美的简历（html5+css）

IT_zxl001的博客

04-04

5万+

先来看一下效果图：代码：index.html<!DOCTYPE html> <html> <head> <title>简历二</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css"

HTML和CSS做一个无脚本的手风琴页面（保姆级）

m0_74556076的博客

09-22

1878

使用HTML和CSS做一个无脚本的手风琴页面，适用于很多场景。

简单的动漫网站（HTML+SprintBoot网页项目）

weixin_65685799的博客

07-20

9198

登录注册界面，查询功能2、分类筛选功能，实现动漫的分类筛选，更加有目的性的查看动漫类型。3、动漫详情功能，对点击的动漫进行后台搜索，展现动漫的详细信息。1、通过数据库中动漫的播放量数据进行动漫推荐。4、搜索功能，可以实现模糊搜索。

新闻页制作

Emma_Black的博客

04-04

271

仅仅只是个人，你杠你对。内容手打，图源网络截屏。下面是页面.html。

butterfly主题魔改13：关于页面美化（手搓）

weixin_74811095的博客

05-14

本文介绍了如何通过手写代码美化博客的“关于”页面。首先，在博客根目录的source文件夹下创建about文件夹，并在其中创建index.md文件。接着，通过自定义CSS样式，实现了页面的视觉美化，包括渐变背景、字体样式、阴影效果、头像旋转等。文章详细展示了如何设置页面标题、段落、头像、引用等元素的样式，并提供了完整的代码示例。通过这些步骤，用户可以轻松打造一个个性化的“关于”页面，提升博客的视觉吸引力。

Vue.js+axios+案例+组件

qq_72004660的博客

09-04

352

Vue（读音 /vjuː/）是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。渐进式框架的优点是灵活、易用和高效。Vue.js颠覆了传统前端开发模式，提供了现代Web开发中常见的高级功能。根据表达值的真假，切换元素的显示和隐藏

咒术回战（保存就能看）(2).uucc2

08-06

咒术回战（保存就能看）(2).uucc2

咒术同Ren动画-夏油杰和五条悟-我们可是挚友啊.rar

03-21

咒术同Ren动画-夏油杰和五条悟-我们可是挚友啊.rar

Vue 下拉框获取数据

Mr_aswl的博客

09-09

6655

Vue 使用数据网上很多方法都需要使用到路由器但是我不太会，于是自己写了一个小组件也可以起到获取数据库数据并返回到 Vue 下拉框的作用 <template> <div class="demo"> <el-select v-model="queryParams" @change="selectPlatform($event)"> <el-option v-for="(item,index) in timeList" :key="ind

江西外语外贸官网仿写

Mr_aswl的博客

12-12

391

…早上爬起来写到现在，感觉作用这种… 也不知道有没有用，前段时间觉得写的没有用，但是写完这个感觉，努力还是有一点用的，虽然不多某大专魂，有一说一我真的感觉这个官网不好看… 咳咳，就这样我抄的都挺麻烦了就只抄成这个样子，轮播图是没有轮播图的，只能糊弄一下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

Vue_插槽语法基础

Mr_aswl的博客

07-28

255

Vue: P 70——>插槽语法及前端模块化 70_插槽的基本使用在子组件内添加插槽增加组件的可拓展性 <template id="cpn"> <div> <h2>组件</h2> <p>定义组件模板</p> <slot><button>默认值</button></slot>

Vue_父组件和子组件的基本使用

Mr_aswl的博客

07-23

245

Vue 53 >> 61（父子组件） [^使用 Vue 父子组件]: Vue 父子组件 P53 组件的基本使用创建组件构造对象 const cpnC = Vue.extend({ template: ` <div> <h2>Vue组件化的基本使用</h2> </div> ` }) 注册组件 Vue.component('my-cpn',cpnC) 组件的使用 <div id="app"...

v-model的基本使用例子

Mr_aswl的博客

07-22

214

v-model的使用: <body> <div id="app"> <label for="male"> <input type="radio" id="male" value="男" v-model="sex">男 </label> <label for="male"> <input type="radio" id="female" value="女"

js高级函数：fliter,map,reduce

Mr_aswl的博客

07-22

151

const nums = [10,20,111,222,444,40,50] //要求：使小于 100 的数全部乘与 2 并相加 for遍历: let newNums = [] for(let n of nums){ if(n<100){ newNums.push(n) } } // 将所有小于100的数字进行转化:全部 let new2Nums=[] for(let n of newNums){ new2Nums.push(n*2) } // 将所有new2Nums数字相加，得到最终的记过 let

EPLAN电气设计中最全电气元件库：涵盖多种品牌PLC与低压电器，支持EDZ格式导入 PLC

最新发布

05-18

内容概要：本文介绍了EPLAN史上最全部件库的特点及其对电气设计的重要意义。该部件库涵盖了广泛的电气元件，包括西门子全系列PLC（如s7-1200、s7-1500等）、三菱FX系列及其他知名品牌元器件。部件库支持EDZ格式导入，确保1:1实物对应，提高设计效率和准确性。文中详细描述了部件宏和图片宏的应用，以及EDZ格式的便利性，强调了其在实际项目中的高效性和灵活性。适合人群：电气工程师、电气设计师及相关从业人员。使用场景及目标：适用于需要进行电气元件布局和复杂项目电气设计的场合，旨在提升设计质量和效率，降低设计成本和时间。其他说明：文章鼓励读者亲自体验EPLAN的最全部件库，以感受其带来的便捷和高效。

html五条悟代码

05-14

<think>好的，用户想要查找与HTML相关的代码示例或教程，特别是涉及“五条悟”这个关键词的用法。首先，我需要确认“五条悟”是什么。根据记忆，五条悟是动漫《咒术回战》中的角色，可能用户想在自己的网页中添加相关的元素，比如角色介绍、图片展示或者特效。接下来，用户的需求可能包括如何在HTML中嵌入五条悟的图片、创建角色卡片、添加动画效果，或者设计相关的布局。考虑到用户提到的示例代码或教程，我需要提供具体的HTML和CSS代码片段，帮助用户实现这些效果。然后，检查用户提供的引用内容。引用[2]提到将Word文档转换为HTML，并处理注释引用，可能用户对注释或弹窗显示内容有兴趣。不过当前问题更偏向于展示五条悟的内容，可能需要结合CSS和JavaScript来实现交互效果，比如悬停显示信息或点击弹窗。需要确保回答结构清晰，分步骤说明每个示例的实现方法，并解释代码的关键部分。同时，生成相关问题，帮助用户进一步学习，比如如何添加动画、响应式设计或交互功能。最后，验证提供的代码是否符合HTML标准，语法是否正确，并确保使用中文回答，符合用户的要求。可能还需要提醒用户替换图片路径或调整样式以适应他们的项目需求。</think>以下是为您整理的HTML结合"五条悟"角色元素的实现示例及教程： ### 一、基础角色卡片实现 ```html <div class="character-card"> <img src="gojo-satoru.jpg" alt="五条悟角色立绘"> <h2>五条悟</h2> <p class="ability">术式：无下限咒术</p> <p class="quote">「会赢的」</p> </div> <style> .character-card { width: 300px; border: 3px solid #0d47a1; border-radius: 15px; padding: 20px; background: linear-gradient(150deg, #e3f2fd, #bbdefb); } .ability::before { content: "✧ "; color: #d50000; } .quote { font-style: italic; color: #1a237e; } </style> ``` ### 二、咒术特效动画 ```html <div class="cursed-energy"></div> <style> @keyframes domain-expansion { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } .cursed-energy { width: 200px; height: 200px; background: radial-gradient(#6a1b9a, #0d47a1); border-radius: 50%; animation: domain-expansion 1s infinite alternate; box-shadow: 0 0 30px #7c4dff; } </style> ``` ### 三、交互式角色面板 ```html <div class="skill-panel"> <button onclick="toggleSkill('blue')">苍</button> <button onclick="toggleSkill('red')">赫</button> <div id="skill-desc"></div> </div> <script> function toggleSkill(type) { const desc = { blue: "吸引目标的复数追加效果", red: "排斥目标的冲击波效果" }; document.getElementById("skill-desc").innerHTML = desc[type]; } </script> ```