【免费】19年王者荣耀网页练习资源-CSDN文库

共16个文件

jpeg：5个

png：4个

jpg：4个

需积分: 0 120 浏览量 2024-03-04 10:36:41 上传评论收藏 1.34MB RAR 举报

"19年王者荣耀网页练习"是一个关于利用CSS技术设计王者荣耀主题的网页实践项目。这个项目旨在帮助开发者提升CSS布局、样式设计以及页面美化的能力，尤其关注于静态页面的构建，没有涉及到JavaScript的交互功能。提到"页面代码，使用CSS，无js。与文章关联"，意味着这个项目主要关注的是CSS在网页布局和样式控制上的应用，而没有涉及JavaScript编程。"与文章关联"可能指的是这个网页设计与某个特定的文章内容相配合，可能是为了展示文章，或者作为文章的辅助阅读界面。设计师通过CSS来呈现王者荣耀的主题元素，如英雄、皮肤或游戏场景，以此吸引玩家和读者的注意力。 **CSS知识点详解：** 1. **选择器**：CSS选择器用于选取HTML元素，例如类选择器（`.class`）、ID选择器（`#id`）和标签选择器（`element`）。在这个项目中，选择器被用来为王者荣耀相关的元素设置样式。 2. **盒模型**：理解CSS盒模型是关键，它包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。通过调整这些属性，可以精确控制网页元素的尺寸和间距。 3. **布局技术**：CSS提供了多种布局模式，如流体布局、网格布局(`display: grid`)和Flexbox布局(`display: flex`)。在这个项目中，可能运用了其中一种或多种布局方式来创建适应不同屏幕大小的王者荣耀页面。 4. **颜色与背景**：CSS允许设置元素的颜色、背景色、渐变、图像等，以此来实现王者荣耀的视觉效果。可能包括英雄的代表色、游戏地图的背景等。 5. **字体与文本样式**：通过调整字体家族、大小、颜色、行高、对齐方式等属性，可以改变文本的外观，使其更符合王者荣耀的主题风格。 6. **边框与边距**：通过定义边框样式、宽度和颜色，可以创建出具有王者荣耀元素的边框。外边距和内边距的设置有助于调整元素间的空间关系。 7. **响应式设计**：虽然项目没有提及JavaScript，但可能使用媒体查询(`@media query`)来实现响应式设计，确保网页在不同设备上都能良好显示。 8. **伪类与伪元素**：CSS的伪类如`:hover`、`:active`和`:focus`可以为元素添加动态效果，而伪元素如`::before`和`::after`可以插入额外的非DOM内容。 9. **动画与过渡**：虽然项目未涉及JavaScript，但CSS3的动画(`animation`)和过渡(`transition`)特性可以创建简单的动态效果，例如元素的淡入淡出或平滑变换。 10. **CSS预处理器**：考虑到项目可能包含复杂的样式，开发者可能使用了Sass、Less或Stylus等CSS预处理器，以提高代码的可维护性和组织性。通过对这些CSS知识点的掌握和运用，"19年王者荣耀网页练习"项目不仅展示了CSS在实际项目中的应用，也为学习者提供了一个实践和提升技能的机会。

资源推荐

资源详情

资源评论

收起资源包目录

Web页面.rar （16个子文件）

Web页面

img

wzry

jnfkjzt.jpeg 172KB

lxszdc.jpeg 83KB

bottom.png 74KB

rymsnjj.jpeg 201KB

logo.png 13KB

p4.jpg 30KB

bigImg.jpg 535KB

hxlbsmd.jpeg 115KB

sqnxphfc.jpeg 88KB

wzry_logo.png 6KB

p2.jpg 20KB

p3.png 21KB

p1.jpg 19KB

css

index.css 2KB

html

王者荣耀.html 3KB

.project 1KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>王者荣耀首页</title>  <link rel="shortcut icon" type="image/x-icon" href="../img/wzry/wzry_logo.png" /> </head> <style> @import url("../css/index.css"); /*清除内外边距*/ *{ margin: 0px; padding: 0px; } </style> <body>  <div class="top_niv"> <img src="../img/wzry/logo.png" title="王者荣耀" class="img_logo"/> <div class="niv"> <ul> <li> <span>官方网页</span><br />HOME </li> </ul> <div class="niv_color"></div> </div> <div class="niv"> <ul> <li> <span>游戏资料</span><br />DATA </li> </ul> <div class="niv_color"></div> </div> <div class="niv"> <ul> <li> <span>内容中心</span><br />CONTENTS </li> </ul> <div class="niv_color"></div> </div> <div class="niv"> <ul> <li> <span>赛事中心</span><br />MATCH </li> </ul> <div class="niv_color"></div> </div> <div class="niv"> <ul> <li> <span>百态王者</span><br />CULTURE </li> </ul> <div class="niv_color"></div> </div> <div class="niv"> <ul> <li> <span>社区互动</span><br />COMMUNITY </li> </ul> <div class="niv_color"></div> </div> <div class="niv"> <ul> <li> <span>玩家支持</span><br />PLAYER </li> </ul> <div class="niv_color"></div> </div> </div>  <div class="bg">  <div class="space_l"> <ul class="ul_animal"></ul> </div>  <div class="space_r"> <p class="title">重大赛事</p> <p>【世冠今日预报】EDG.M vs Hero,“晋级” or “回家” 四分之一决赛开战</p> <p>虎牙明星大腿杯S2赛季全新升级，争锋相对谁能脱颖而出成为最强大腿</p> <p>版本风向标！快来看看世冠职业选手在玩什么？</p> <p>第七届城市赛省赛本周末正式打响，离全国总决赛更进一步！</p> <p>第七届王者荣耀城市赛海选金牛黄忠站即将开战！</p> <p>成功都是留给有准备的人，王者荣耀传奇选手Cat的崛起之路</p> <p>世冠首周战果出炉，eStarPro率先挺进八强</p> </div> </div>  <div class="space_bottom"> <img src="../img/wzry/p1.jpg" /> <img src="../img/wzry/p2.jpg" /> <img src="../img/wzry/p3.png" /> <img src="../img/wzry/p4.jpg" /> </div>  <div class="bottom"> <img src="../img/wzry/bottom.png"/> </div> </body> </html>

评论收藏

内容反馈