魔兽世界首页静态界面
2024-05-07 20:52:46
魔兽世界首页静态界面
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./CSS/reset.css"><link rel="stylesheet" href="./CSS/index.css"><title>魔兽</title>
</head><body><!-- 主体图片区域 --><main><!-- 头部导航 --><header><ul><li><a href="#">进入官网</a></li><li><a href="#">账号注册</a></li><li><a href="#">充值管理</a></li></ul><ul><li><a href="#">游戏下载</a></li><li><a href="#">客服中心</a></li><li><a href="#">官方论坛</a></li></ul><img src="./IMG/logo.png" alt="魔兽世界"></header><!-- 按钮 --><div><div><p>了解详情</p></div><div><p>客户端下载</p></div></div><!-- 图片区域 --><div><figure><p>"暗影国度"前瞻</p><img src="./IMG/new1.png" alt=""></figure><figure><p>前夕信息汇总</p><img src="./IMG/new2.png" alt=""></figure><figure><p>"彼岸之地"动画短片</p><img src="./IMG/new3.png" alt=""></figure><figure><p>购买游戏时间</p><img src="./IMG/new4.png" alt=""></figure></div></main><!-- 底部区域 --><footer><div><!-- 第一行 --><div><!-- 左边 --><div><p><i></i>在线客服</p><p><i></i>反馈</p><p><i></i>加入我们</p></div><!-- 右边 --><div><p>合作品牌：<i></i><em>+</em></p></div></div><!-- 第二行 --><div><!-- 左边 --><div><img src="./IMG/logo_blizzard.png" alt="blizzard"><img src="./IMG/logo_ne.png" alt="网易"></div><!-- 右边 --><div><p>隐私 | 法律条款 | API</p><p>©2020 暴雪娱乐有限公司版权所有 由上海网之易网络科技发展有限公司运营 著作权侵权 | 新出审字[2014]1451号</p><p>文网进字[2014]0116号 | 沪网文号〔2017〕9633-727号 | 增值电信业务经营许可证编号：沪B2－20080012 | 沪ICP备：沪B2－20080012</p><p>互联网违法和不良信息举报电话：0571-28090163 沪公网安备 31011502022167号 | 上海市网络游戏行业自律公约</p><p><i></i><i></i><i></i><i></i><i></i> | 适龄提示：适合13岁及以上使用 家长监护工程 | 网上有害信息专区</p></div></div><p>积极健康的游戏心态是健康游戏的开端，本游戏故事情节设置紧凑，请您合理控制游戏时间，避免沉溺游戏影响生活，注意自我保护，防范网络陷阱。健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。</p></div></footer>
</body></html>
::selection {color: white;background-color: #fe57a1;
}
main {width: 100%;background-image: url(../IMG/wowloading.jpg);background-position: center top;background-size: cover;overflow: hidden;font-size: 0px;padding: 45px 0 120px;
}
main>header {width: 1200px;border-top: 2px solid #412e23;border-bottom: 2px solid #412e23;margin: 0 auto;margin-top: 45px;display: flex;justify-content: space-between;background-color: #251711;position: relative;
}
main>header>ul{display: flex;
}
main>header>ul a{display: inline-block;color: #f9b801;font-size: 16px;text-decoration: none;padding: 28px 48px;border-left: 2px solid #412e23;
}
main>header>ul a:hover {font-weight: bold;color: white;
}
main>header ul>li:nth-last-child(1)>a {border-right: 2px solid #412e23;
}
main>header>img {height: 125px;position: absolute;top: -30px;left: 443px;
}
main>div:nth-of-type(1) {width: 690px;height: 85px;margin: 0 auto;margin-top: 495px;display: flex;justify-content: space-between;
}
main>div:nth-of-type(1)>div {height: 100px;width: 100%;background-image: url(../IMG/btn.png);
}
main>div:nth-of-type(1)>div>p {color: black;font-weight: bold;font-size: 28px;text-align: center;margin-top: 34px;
}
main>div:nth-of-type(1)>div:hover {transform: scale(1.05);
}
main>div:nth-of-type(2) {width: 1200px;margin: 0 auto;margin-top: 65px;display: flex;justify-content: space-between;
}
main>div:nth-of-type(2)>figure {border: 2px solid #3e2b22;box-sizing: border-box;
}
main>div:nth-of-type(2)>figure:hover {transform: scale(1.05);
}
main>div:nth-of-type(2) p {height: 50px;line-height: 50px;text-align: center;color: #f9b801;font-size: 20px;font-weight: bold;background-color: black;border-bottom: 2px solid #3e2b22;
}
footer {background-color: black;color: #4b4e4d;font-size: 14px;padding: 55px 0 30px;border-top: 2px solid #3e2b22;
}
footer>div {width: 1000px;height: auto;margin: 0 auto;
}
footer>div>div:nth-child(1) {color: white;display: flex;justify-content: space-between;
}
footer>div>div:nth-child(1)>div:nth-child(1) {width: 295px;display: flex;justify-content: space-between;
}
footer>div>div:nth-child(1)>div:nth-child(1)>p i{display: inline-block;height: 18px;width: 18px;background-image: url(../IMG/f-business.png);margin-right: 10px;vertical-align: -4px;
}
footer>div>div:nth-child(1)>div:nth-child(1)>p:nth-child(1)>i {background-position: -6px -7px;
}
footer>div>div:nth-child(1)>div:nth-child(1)>p:nth-child(2)>i {background-position: -36px -7px;
}
footer>div>div:nth-child(1)>div:nth-child(1)>p:nth-child(3)>i {background-position: -64px -7px;
}
footer>div>div:nth-child(1)>div:nth-child(2)>p i {margin: 0 10px;display: inline-block;width: 92px;height: 18px;background-image: url(../IMG/business-logo.png);background-position: -352px -2px;vertical-align: -2px;
}
footer>div>div:nth-child(1)>div:nth-child(2)>p>em {font-style: normal;color: #f9b801;font-size: 18px;
}
footer>div>div:nth-child(1)>div:nth-child(2) {width: 200px;display: flex;justify-content: space-between;
}
footer>div>div:nth-child(2) {padding: 75px 0 35px;display: flex;justify-content: space-between;border-bottom: 1px solid #4b4e4d;
}
footer>div>div:nth-child(2)>div:nth-child(1) {width: 365px;display: flex;justify-content: space-between;
}
footer>div>div:nth-child(2)>div:nth-child(1)>img:nth-child(1) {width: 150px;
}
footer>div>div:nth-child(2)>div:nth-child(1)>img:nth-child(2) {width: 190px;height: 40px;margin-top: 53px;
}
footer>div>div:nth-child(2)>div:nth-child(2) {width: 570px;
}
footer>div>div:nth-child(2)>div:nth-child(2)>p:not(:nth-child(1)) {font-size: 12px;line-height: 1.7;
}
footer>div>div:nth-child(2)>div:nth-child(2)>p:nth-child(1) {color: white;margin-bottom: 10px;
}
footer>div>div:nth-child(2)>div:nth-child(2)>p:nth-last-child(1) {margin-top: 10px;
}
footer>div>div:nth-child(2)>div:nth-child(2)>p:nth-last-child(1) i {height: 30px;width: 27px;display: inline-block;background-size: cover;margin-right: 2px;
}
footer>div>div:nth-child(2)>div:nth-child(2)>p:nth-last-child(1)>i:nth-child(1) {background-image: url(../IMG/1.png);
}
footer>div>div:nth-child(2)>div:nth-child(2)>p:nth-last-child(1)>i:nth-child(2) {background-image: url(../IMG/2.png);
}
footer>div>div:nth-child(2)>div:nth-child(2)>p:nth-last-child(1)>i:nth-child(3) {background-image: url(../IMG/3.png);
}
footer>div>div:nth-child(2)>div:nth-child(2)>p:nth-last-child(1)>i:nth-child(4) {background-image: url(../IMG/4.png);
}
footer>div>div:nth-child(2)>div:nth-child(2)>p:nth-last-child(1)>i:nth-child(5) {background-image: url(../IMG/5.png);
}
footer>div>p {width: 810px;margin: 0 auto;font-size: 12px;text-align: center;margin-top: 15px;line-height: 2;
}
魔兽世界首页静态界面相关推荐
- 开源 java CMS - FreeCMS2.7 移动端首页静态化
2019独角兽企业重金招聘Python工程师标准>>> 项目地址:http://www.freeteam.cn/ 移动端首页静态化 从左侧管理菜单点击首页静态化进入. 系统会直接提示 ...
- Django项目--首页静态化
0前言 1.使用Celery生成静态页面 task.py中新增任务函数generate_static_index_html(),任务函数生成静态页面. @app.task def generate_s ...
- 首页静态生成 错误：客户端发现响应内容类型为“text/html”，但应该是“text/xml”...
首页静态生成 错误:客户端发现响应内容类型为"text/html",但应该是"text/xml"解决方法: 最近在做首页静态生成,一直遇到这样的问题 客户端发 ...
- js中将html文档写入静态界面当中
1.静态界面当中: <div id="test"></div> 2.在js当中写入 $("#test").append(html文档内容 ...
- web开发中首页静态化处理
首先为什么我们要将页面静态化呢? 首先我们来讲讲页面静态化的优点: 1:加快网站的运行速度,提升客户体验 2:减少对后端服务器的压力 其次我们再来讲讲页面静态化处理的一些要求? 跟客户信息相关的内容, ...
- M-03-01.[紫猫·界面]静态界面
[静态界面]01. 绘制文字框(VIP) 小知识:动态ui和静态ui的区别 静态ui就是脚本默认的那几个界面 5个常用组建构成 动态ui是脚本运行后 出现的弹出窗口 并且通过这个窗口实时的调整参数和信 ...
- Setting学习（一）-静态界面
Setting学习(一)-静态界面 设置是整个android系统的重要应用,涉及的都是系统功能 Setting模块的主要路径 :/packages/apps/Settings/ Setting模块里的 ...
- 微信小程序如何实现（收货地址静态界面）
扫一扫以上小程序[许愿灯池]可以查看具体收货地址静态界面 效果图: 核心:直接上代码!! index.wxml <view class="container"> < ...
- 【Web】HTML+CSS（No.55）实现小米官网首页静态效果
模仿实现小米官网首页静态布局 需要素材点击图片联系我或私信.评论 效果图 HTML代码 <!DOCTYPE html> <html lang="en"> & ...
最新文章
- 最小割 ---- 集合冲突模型
- 【青岛】12月16日.NETCore与AI技术交流会-等你来哦！！
- Google 为什么把几十亿行代码放在一个库
- 逼自己玩命学了3个多月，整理出了这份549个分支的技术脑图，分享给你
- 二叉树遍历（信息学奥赛一本通-T1364）
- HandAI开源项目，拉近人和摄影的距离：基于手势识别完成不同的拍摄行为
- kuboard使用mysql_Kuboard Kubernetes安装
- 冒泡排序的一次自我救赎
- C#TcpClien网络通信之内存泄漏
- mysql %3cforeach_RCTF 2020 Writeup
- 链路聚合的介绍以及配置
- 如何把视频文件转换成图片
- Exp5 CAL_MSF基础运用 20154328 常城
- 解决电脑软件可以上网，但是浏览器无法上网的问题
- 所有人都能看懂的华为交换机vlan配置
- 【零基础跑项目】20代码教你基于opencv的人脸检测
- linux自制硬件防火墙,自制linux系统——打造属于自己的linux系统
- 按钮按下时立体感效果
- 照片变漫画的方法有哪些？推荐两个方法给你
- dell服务器510系统,dellr510服务器上安系统.docx