用CSS+JS+HTNL仿原神官网
CSS(Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS文件扩展名为 .css。JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript
·
简介
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言、命令式、声明式、函数式编程范式
HTML称为超文本语言，是一种创建网页的标准标记语言。下面我将展示仿原神代码
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>《原神》官网-踏入充满冒险的神奇世界</title> <link rel="icon" type="image/x-icon" href="image\原神logo.ico" /><!--网页图标--> <link rel="stylesheet" href="css\index.css" /> <link rel="stylesheet" href="css/font-index..css"> <link rel="stylesheet" href="css/swiper-bundle.min.css"> <link rel="stylesheet" href="css/city.css"> <link rel="stylesheet" href="css/footer.css"> <link rel="stylesheet" href="css/login.css"> <link rel="stylesheet" href="css/news.css"> </head> <body>这部分代码引入CSS设计，对头部进行的描述
<div class="header"> <div class="audio-controller" id="audiu_on"> <img src="image/播放开.png" style="width: 100%;" id="audio_headerimg"/> <audio id="bgMusic"> <source src="audio/原神官网视频 - 1.最终版(Av55055298,P1).mp3" type="audio/mp3"> </audio> </div> <div class="audio-controller" id="audio_off" style="display: none;"> <img src="image/播放关.png" style="width: 100%;" id="audio_headerimg"/> <audio id="bgMusic"> <source src="audio/原神官网视频 - 1.最终版(Av55055298,P1).mp3" type="audio/mp3"> </audio> </div>这一部分引入一个音乐播放的功能，音乐来自官方网站
<div class="header__logo--cut"> <img src="image/原神主页logo.png"> </div> <div class="header__navbar"> <div class="header_Cloud"></div> <div class="header_navitem"> <a class="header_hover" href="index.html">首 页</a> <a>新 闻</a> <a>角 色</a> <a>世 界</a> <a>漫 画</a> <a>社 区</a> </div>主页部分分为五个块，如下图：
<div class="ys-download-pc"> <div class="ys-download-pc__qr"> <img src="image/官方二维码.png" class="ys-download-pc__qr"> <img src="image/二维码中间.jpg" class="ys-download-pc__qr__icon"> </div> <div class="ys-download-pc__group"> <a href=""><img src="image/ps4.png"></a> <a href=""><img src="image/苹果下载.png"></a> </div> <div class="ys-download__group"> <a href="https://www.taptap.com/app/197826"><img border="0" src="image/TapTap下载.png"></a> <a href=""><img src="image/苹果下载.png"></a> </div> <div class="ys-download-pc__btn"> <a href=""><img src="image/pc.png" alt=""></a> </div> </div>下半部分代码，此处TapTap下载添加了超链接，点击后便可进入其官方网站进行选择性下载，由于其他三个没有官网没有做超链接，此处图片审核大大觉得违规了，就删掉了
<div class="ys-download__group"> <a href="https://www.taptap.com/app/197826"><img border="0" src="image/TapTap下载.png"></a> <a href=""><img src="image/苹果下载.png"></a> </div>使用CSS使得将图片作为连接
第二大模块
<div class="new_Boom"> <!-- Swiper --> <div class="swiper mySwiper" > <div class="swiper-wrapper"> <div class="swiper-slide"><li><a href="javascript:;"><img src="image/轮播.jpg"></a></li></div> <div class="swiper-slide"><li><a href="javascript:;"><img src="image/轮播1.jpg"></a></li></div> <div class="swiper-slide"><li><a href="javascript:;"><img src="image/轮播2.jpg"></a></li></div> <div class="swiper-slide"><li><a href="javascript:;"><img src="image/轮播3.jpg"></a></li></div> </div> <div class="swiper-pagination"> </div> </div> <div class="news__tab__list"> <ul class="news__tab__list__ul"> <li class="currenters">最新</li> <li>新闻</li> <li>公告</li> <li>活动</li> </ul> <div class="tab_con"> <div class="item" style="display: block;"> <li> <a> <p class="item_p">「我爱摩拉，摩拉爱我，啦啦啦」----「梦园藏金 」多莉</p> <p class="item_p2">2022/09/02</p> </a> </li> <li> <a> <p class="item_p">《原神》角色演示「多莉：多谢惠顾」</p> <p class="item_p2">2022/9/02</p> </a> </li> <li> <a> <p class="item_p">摩拉多多，快乐多多！</p> <p class="item_p2">2022/9/03</p> </a> </li> <li> <a> <p class="item_p">莫娜生日快乐|这是送我的典藏版占星书籍？</p> <p class="item_p2">2022/08/31</p> </a> </li> <li> <a> <p class="item_p">《原神》「秘宝迷踪」活动即将开启</p> <p class="item_p2">2022/08/31</p> </a> </li> </div> <div class="item" style="display: none;"> <!-- 新闻 --> <li> <a> <p class="item_p">「我爱摩拉，摩拉爱我，啦啦啦」----「梦园藏金 」多莉<</p> <p class="item_p2">2022/09/02</p> </a> </li> <li> <a> <p class="item_p">《原神》角色演示「多莉：多谢惠顾」</p> <p class="item_p2">2022/09/02</p> </a> </li> <li> <a> <p class="item_p">《摩拉多多，快乐多多！</p> <p class="item_p2">2022/09/03</p> </a> </li> <li> <a> <p class="item_p">莫娜生日快乐|这是送我的典藏版占星书籍？</p> <p class="item_p2">2022/08/31</p> </a> </li> <li> <a> <p class="item_p">《原神》秘宝迷踪」活动即将开启</p> <p class="item_p2">2022/08/31</p> </a> </li> </div> <div class="item" style="display: none;">
这部分选择轮播，将其分为左右两大块，左边图片，右边文字信息
第三部分
<div class="city__list-item"> <a> <img src="image/蒙德.jpg" class="city_img"> <img src="image/宝石.png" class="city_imgs"> <p>蒙德城</p> </a> <div class="city__list-char" style="background-image: url(image/西风骑士团琴.png);"></div> </div> </li> <li> <div class="city__list-item"> <a> <img src="image/璃月.jpg" class="city_img"> <img src="image/宝石.png" class="city_imgs"> <p>璃月城</p> </a> <div class="city__list-char" style="background-image: url(image/魈.png);"></div> </div> </li> <li> <div class="city__list-item"> <a> <img src="image/稻妻.jpg" class="city_img"> <img src="image/宝石.png" class="city_imgs"> <p>稻妻城</p> </a> <div class="city__list-char" style="background-image: url(image/神里.png);"></div> </div> </li>这部分主要对地区介绍
最后一部分
<li class="footer__socialitem"><a> <a href=" https://weibo.com/newlogin?tabtype=weibo&gid=102803&openLoginLayer=0&url=https%3A%2F%2Fweibo.com%2F "> <img src=image/新浪微博1..png alt="" id="socialitemImg1"> </a> </li> <li class="footer__socialitem"><a><img src="image/微信 (2).png" alt=""id="socialitemImg2"></a></li> <li class="footer__socialitem"> <a href="https://qzone.qq.com/"> <img border="0" src="image/qq.png" alt=""id="socialitemImg3"></a></li>分享图标都添加了相对应的超链接
这个网站主要实现了一个简单的静态页面，唯一的亮点就是加了一些超链接，用CSS将超链接美化，想要练手的小伙伴可以看看
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
13
1- 0
已为社区贡献1条内容
所有评论(0)