日本动画片

这是前端挑战赛 – 12 月版的提交,glam up my markup:冬至

我建造了什么

CSS

*{
边距:0;
填充:0;
框大小:边框框;
字体系列:“Trebuchet MS”、“Lucida Sans Unicode”、“Lucida Grande”、“Lucida Sans”、Arial、sans-serif;
}

身体{
溢出-x:隐藏;
}
.main-width{
宽度:1400px;
最大宽度:95%;
边距:0 自动;
}
.英雄{
高度:100%;
宽度:100%;
最小高度:100vh;
背景图片:url(Tanjiro1.png);
背景大小:100%;
背景重复:不重复;
}

.hero header .logo h2 a{
显示:块;
字体大小:30px;
字体粗细:600;
文本装饰:无;
颜色:白色;
font-family:’Noto Sans JP’, sans-serif;
}

.hero 标头{
显示:flex;
对齐项目:居中;
对齐内容:空间之间;
内边距:40px 0 30px;

}

nav ul li{
列表样式:无;
显示:内联块;

}

nav ul li a{
文本装饰:无;
颜色: 爱丽丝蓝;
左边距:80px;
字体大小:20px;
字体粗细:600;
底部边框:2px 纯白色;
过渡:4s;

}

nav ul li:not(:last-child) a:hover
nav ul li:not(:last-child) a:focus{
底部边框:2px 纯白色;

}

nav ul li.active a{
底部边框:2px 纯白色;
}

nav ul li.btn a{
背景:透明;
颜色:白色;
边框:1px实线#f5dca8;
内边距:9px 20px;
边框半径:80px;
行高:1.4;
字体大小:18px;
字体粗细:600;
左边距:150px;

}

nav ul li.btn:悬停在{
边框:1px 纯白色;
颜色:黑色;
背景:白色;
过渡:.4s;

}

.内容{
顶部填充:140px;
}

.content .main-text{
位置:相对;
z 索引:2;
下边距:50px;

}

.content .main-text h6{
字体大小:14px;
字体粗细:400;
颜色:白色;
下边距:40px;

}

.content .main-text h1{
字体大小:60px;
行高:1;
颜色:白色;
边距:0px 0px 45px;
font-family: ‘永久标记’,草​​书;

}

.content .main-text p{
最大宽度:100%;
宽度:480px;
颜色:白色;
行高:1.8;
字体大小:15px;
下边距:50px
}

.content .main-text a{
显示:内联块;
文本装饰:无;
颜色:黑色;
背景:白色;
边框:1px 纯白色;
内边距:9px 25px;
行高:1.4;
边框半径:30px;
字体大小:14px;
字体粗细:500;

}

.content .main-text a:hover{
变换:缩放(1.2);
边框:1px实线#f5dca8;
背景:透明;
颜色:白色;
过渡:.4s;

}

超文本标记语言

动漫

鬼灭の刃

季节 剧集 漫画 立即播放

最佳动漫第一名
这是由后藤晃阳春创作和绘制的日本漫画系列,

恶魔杀手

一个家庭遭到恶魔袭击,只有两名成员幸存——炭治郎和他的妹妹祢豆子,祢豆子正在慢慢变成恶魔。炭治郎为了给家人报仇、治愈妹妹,立志成为一名斩妖除魔……

立即观看

这是我专属的动漫网站,它有最好的动画按钮和平滑的过渡

Swally的所有权利都属于我

以上就是日本动画片的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2845622.html

(0)
上一篇 2025年3月10日 12:39:52
下一篇 2025年2月27日 00:41:14

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 魔法冬境——冬至之旅

    这是前端挑战赛 – 12 月版的提交,glam up my markup:冬至 注: 在这个项目的开发过程中,我注意到冬至的主题也启发了其他挑战者。这突显了这个季节的自然和魔力是多么鼓舞人心。我的灵感来自于我个人对冬天的憧憬,注…

    2025年3月10日
    200
  • 采用 margin-inline-start 在网页设计中提供更好的 RTL 支持

    在设计网站时,迎合从左到右 (ltr) 和从右到左 (rtl) 语言对于全球受众至关重要。虽然大多数开发人员熟悉使用 margin-left 和 margin-right 进行布局调整,但这些属性在文本方向发生变化的环境中存在不足。输入 m…

    2025年3月10日
    200
  • CSS 视口单位:CSS *vh(dvh、lvh、svh)和 *vw 单位

    CSS视口单位是构建响应式网页设计的基石,它们根据浏览器视口(可见区域)的尺寸动态调整元素大小,让网站在各种屏幕尺寸下都能保持最佳显示效果。本文将深入探讨常用的vh、vw以及更高级的dvh、lvh、svh单位,并讲解如何利用它们创建更灵活、…

    2025年3月10日
    200
  • 冬至庆祝活动 – 节日登陆页面

    这是前端挑战赛 – 12 月版的提交,glam up my markup:冬至 我建造了什么 这个项目是一个视觉上迷人的登陆页面,致力于庆祝冬至。该设计具有发光动画、粒子效果和平滑的滚动过渡。它旨在提供身临其境的用户体验,同时突…

    2025年3月10日
    200
  • Tailwind CSS 备忘单

    页面布局 实用类名 描述 container居中内容。block / inline-block 块级或内联块级元素。flex / grid Flexbox 或 Grid 布局。flex-col / flex-row Flex 布局方向:列/…

    2025年3月10日
    200
  • CSS如何去除a标签的下划线?

    如何去除 a 标签下划线?1.使用 text-decoration: none; 移除所有文本装饰;2.使用选择器(如类名)精准定位特定 a 标签;3.使用伪类(如 :hover)在不同状态下修改样式;4.检查是否被浏览器默认样式或其他 C…

    2025年3月10日
    200
  • 如何去除超链接默认的下划线样式?

    去除超链接下划线的方法:使用 CSS 的 text-decoration: none; 覆盖浏览器默认样式。使用 CSS 选择器,如 nav a { text-decoration: none; },针对特定区域或类型去除下划线。结合 ho…

    2025年3月10日
    200
  • Frontend Challenge – December Edition

    前端挑战赛 – 12月:冬至主题网页设计 我参与了12月前端挑战赛,主题为“glam up my markup:冬至”。我的作品旨在通过全球庆祝活动和节日传统,展现冬至的独特魅力,打造一个充满节日气氛的圣诞仙境。 项目概述: 我…

    2025年3月10日
    200
  • 现代 CSS 的顶级功能改变了网页设计

    概述 CSS 技术日新月异,2024 年涌现的诸多新特性显著提升了现代 Web 应用的构建效率。这些进步使 CSS 更加强大、灵活且易于访问,为开发者提供了构建美观高效的 Web 体验的利器。本文将重点介绍十项值得每位开发者关注的关键 CS…

    2025年3月10日
    200
  • 前端挑战 – 12 月版,魅力我的标记:冬至

    冬至主题交互式登陆页面设计与开发 本文介绍一个为冬至节日设计的交互式登陆页面项目,旨在通过现代化的设计元素提升用户体验。项目重点关注流畅的动画效果、交互式按钮、动态视觉效果,并兼顾可访问性和跨设备响应式设计。 主要功能: 沉浸式视觉体验: …

    2025年3月10日
    200

发表回复

登录后才能评论