HTML5 小练习1—仿MPG游戏商城

实现网页界面的全部搭建，已经部分突出显示功能，当鼠标移动到指定区域时，突出显示当前部分，有放大显示，突出显示，高亮显示以及添加阴影等效果。

项目源文件
链接：https://pan.baidu.com/s/1GZYfhMrORrcxCySIwgFhdA?pwd=MGPP
提取码：MGPP

一、界面展示

1.首页

2.商品界面

商品界面的进入入口

3.新闻界面

新闻界面的进入入口

二、突出显示效果

三、文件目录

四、CSS代码

1.layout.css(整体框架布局设计)

* {padding: 0px;margin: 0px;
}.grid {display: flex;flex-wrap: nowrap;justify-content: space-around;
}.grid-cell-1,
.grid-cell-2,
.grid-cell-3,
.grid-cell-4,
.grid-cell-5,
.grid-cell-6 {flex-shrink: 1;padding: 10px;
}.grid-cell-1 {flex-grow: 1;
}.grid-cell-2 {flex-grow: 2;
}.grid-cell-3 {flex-grow: 3;
}.grid-cell-4 {flex-grow: 4;
}.grid-cell-5 {flex-grow: 5;
}.grid-cell-6 {flex-grow: 6;
}/*.box-red {background-color: #ffb6c1;min-height: 50px;text-align: center;width: 100%;line-height: 50px;
} */.box-green {background-color: #333333;min-height: 50px;width: 100%;line-height: 50px;
}#header {width: 100%;height: 60px;
}.header__content {position: fixed;top: 0px;left: 0px;box-shadow: 0px 2px 10px 3px #000000;z-index: 100;opacity: 0.9;background-color: #333333;text-align: center;width: 100%;height: 65px;color: #FFFFFF;
}.header-logo {height: 65px;
}.header-logo__img {width: 48px;height: 48px;
}.header-logo__link {font-size: 1.5em;color: #FFFFFF;text-decoration: none;
}.header-nav {height: 60px;
}.header-nav__item {width: 100%;list-style-type: none;
}.header-nav__item:hover {background-color: #026873;transition: all 600ms linear 0s;
}.header-nav__link {color: #FFFFFF;text-decoration: none;
}.header-nav__link--hidden {font-size: 1.2em;
}
.header-toolbar {width: 250px;height: 32px;line-height: 32px;background-color: #000000;border-bottom-left-radius: 35px;border-bottom-right-radius: 35px;overflow: hidden;
}.header-toolbar__item {display: inline;margin: 0px auto;color: #808080;font-size: .8em;text-decoration: none;
}.header-toolbar__item:hover {color: #FFFFFF;
}.icon {display: inline-block;-webkit-font-smoothing: antialiased;position: relative;top: 1px;line-height: 1;font-weight: normal;font-style: normal;
}#footer {width: 100%;height: 65px;
}.footer__content {position: fixed;bottom:0px;box-shadow: 0px 2px 10px 3px #000000;opacity: 0.9;background-color: #333333;text-align: center;width: 100%;height: 65px;color: #FFFFFF;
}
.footer-nav__item {width:100%;height: 100%;list-style-type: none;
}.footer-nav__item:hover {background-color: #026873;transition: all 600ms linear 0s;
}.footer-nav__link {color: #FFFFFF;text-decoration: none;
}.footer-nav__link--hidden {font-size: 1.2em;
}#footer__text{line-height: 45px;color: #FFFFFF;
}#section{position: relative;
}#d1{width: 100%;height: 65px;
}

2.list.css

body{background: linear-gradient(#899678,#ffffff);background-repeat: no-repeat;
}
#content{width: 85%;margin: 0px auto;
}
.content-top{margin: 10px 0px;
}
.banner{width: 100%;
}
.banner__title{text-align: left;margin: 0px 0px 10px 10px;
}
.banner__content{box-shadow: 0px 0px 10px #000000;border-radius: 5px;overflow: hidden;position: relative;margin: 10px;height: 370px;
}
.banner__link{color: #FFFFFF;text-decoration: none;
}
.banner__image{display: block;width: 100%;height: 100%;
}
.banner__text{display: block;position: absolute;left: 10px;bottom: 15px;font-size: 1.1em;width: 100%;
}
.banner__text__title{display: block;font-size: 0.8em;
}
.banner__text--button{display: block;position: absolute;right: 25px;bottom: 5px;color: #FFFFFF;text-align: center;border: 1px solid #808080;width: 100px;height: 30px;line-height: 30px;border-radius: 5px;box-shadow: 0px 0px 10px #777777;text-decoration: none;
}
.banner__text--button:hover{background-color: #ffd700;
}
.selling{width: 25%;
}
.selling__title{text-align: left;margin: 0px 0px 10px 10px;
}
.selling__content{box-shadow: 0px 0px 10px #000000;border-radius: 5px;overflow: hidden;position: relative;margin: 10px;height: 370px;
}
.selling__link{color: #FFFFFF;
}
.selling__image{display: block;width: 100%;height: 100%;
}
.selling__text{display: block;position: absolute;left: 10px;bottom: 15px;font-size: 1.1em;width: 100%;
}
.selling__text__title{display: block;font-size: 0.8em;
}
.hot{margin: 5px;flex-wrap: wrap;
}
.hot-item{box-shadow: 0px 0px 10px #000000;border-radius: 5px;overflow: hidden;background-color: #e1e1e1;margin: 5px;
}
.hot-item:hover{box-shadow: 5px 5px 10px 5px #000000;transition: all 600ms linear 0s;
}
.hot-item__image{width: 100%;height: auto;
}
.hot-item_title{font-size: 1.1em;font-weight: bold;padding-left: 5px;
}
.hot-item_text{height: 30px;line-height: 30px;text-align: right;padding: 5px;
}
.hot-item_text--discount{background-color: #444444;color: #E1E1E1;padding: 5px;font-size: 0.8em;border-radius: 5px;
}
.hot-item_text--button{border-radius: 5px;background-color: #282d41;color: #FFFFFF;padding: 5px;font-size: 0.8em;text-decoration: none;
}
.hot-item_text--button:hover{background-color: #FFD700;
}
.content-nav{margin: 10px;
}
.content-nav ul li{list-style-type: none;height: 30px;line-height: 30px;padding: 5px;text-align: center;color: #808080;
}
.content-nav__item a{text-decoration: none;font-size: 1.2em;color: #808080;
}
.content-nav__item:hover {background-color: #474644;border-radius: 15px;box-shadow: -3px 5px 10px #808080;transition: all 600ms linear 0s;
}
.content-nav__item:hover a {color: #FFFFFF;
}
.content-nav__item--active{background-color: #474644;border-radius: 15px;border-bottom: 5px solid #33322f;border-left: 3px solid #000000;box-shadow: -3px 5px 10px #808080;
}
.content-nav__item--active a{font-size: 1.2em;color: #FFFFFF;text-decoration: none;
}
.game-list{margin-top: 20px;box-shadow: 0px 0px 10px 2px #262626;border-radius: 10px;overflow: hidden;
}
.game-link{display: block;height: 60px;line-height: 60px;border-bottom: 1px dashed #333333;background-color: #E1E1E1;text-decoration: none;
}
.item-image{height: 60px;
}
.item-image__opacity{width: 100%;height: 100%;opacity: 0.5;
}
.game-link:hover .item-image__opacity{opacity: 1;
}
.item-price{width: 120px;padding: 0px 10px;text-align: center;
}
.item-price__button{display: inline-block;width: 80px;height: 30px;line-height: 30px;background-color: #282D41;color: #CCCCCC;border-radius: 10px;text-align: center;
}
.game-link:hover .game-item{background-color: #444444;color: #FFFFFF;
}
.item-price__button:hover{color: #FFFFFF;background-color: #ff4400;
}
.game-link--more{height: 30px;line-height: 30px;background-color: #A0A0A0;color: #000000;padding: 10px;
}
.item-star{text-align: right;color: #000000;
}
.item-kind{text-align: right;color: #000000;
}
.news{box-shadow: 0px 0px 10px #262626;border-radius: 5px;margin: 10px;overflow: hidden;
}
.news-link{display: block;border-bottom: 1px solid #bcb5b2;text-align: left;color: #262626;text-decoration: none;
}
.news-item{background-color: #E1E1E1;height: 120px;overflow: hidden;
}
.news-item__title{font-size: 1.1em;
}
.news-item__image{float: left;width: 200px;height: 120px;margin-right: 10px;
}
.news-item__image--opacity{opacity: 0.5;filter: alpha(opacity=50);
}
.news-item__text{padding: 6px;
}
.news-item__time{color: #aba8a7;
}
.news-link:hover .news-item__image--opacity{opacity: 1;transition: all 600ms;
}
.news-link:hover .news-item{background-color: #444444;color: #FFFFFF;transition: all 600ms;
}
.news-item--more{padding: 10px;background-color: #d9d9d9;
}

3.phone.css

.header-nav__link--hidden {display: inline-block;padding-left: 1rem;
}.header-toolbar__item--hidden {display: none;
}.icon-justify:before {font-family: Glyphicons;content: "\e114";
}@media all and (max-width:800px) {.header-nav__link--hidden {display: none;}.header-toolbar {display: inline-block;width: 32px;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;margin: 0px 5px;}.header-toolbar:hover {height: 160px;}.header-toolbar__item {display: inline-block;width: 32px;height: 32px;line-height: 32px;overflow: hidden;}.header-toolbar__item--hidden {display: block;}.header-logo__img {width: 35px;height: 35px;}.header-logo__link{font-size: 0.8em;}
}@keyframes img_anim {from {transform: scale(1, 1);}to {transform: scale(1.5, 1.5);}
}.banner__image:hover {animation: img_anim 600ms linear 10ms alternate infinite;
}.selling__image:hover {animation: img_anim 600ms linear 10ms alternate infinite;
}@media screen and (max-width:800px) {#content {width: 95%;}.banner__content {height: auto;}.banner__text--button {display: none;}.banner__text__title {font-size: 0.4em;}.banner__text__text--bigtitle {font-size: 0.4em;}.selling{display: none;}
}
@media screen and (max-width:800px) {.hot{display: none;}
}
@media screen and (max-width:800px) {.content-nav{background-color: #111111;border-radius: 5px;overflow: hidden;}.content-nav__item--active{border: 0px;border-radius: 0px;}.content-nav__item:hover{border-radius: 0px;}.content-nav ul li:nth-of-type(even){display: none;}
}
@keyframes news_anim{0%{opacity: 0.1;}50%{opacity: 0.5;}100%{opacity: 0.8;}
}
.news-item:hover .news-item__image--opacity{animation: news_anim 600ms ease 10ms alternate infinite;
}
@media all and (max-width:800px) {#content{width: 95%;}.news-item__image{float: none;width: 100%;}.news-item__image--opacity{width: 100%;}
}
@media all and (max-width:800px) {.news-item{height: auto;}.news-item dd:nth-last-child(1){height: 180px;}
}
@keyframes img_anim1 {from {transform: scale(1, 1);}to {transform: scale(1.5, 1.5);}
}
.game-item:hover .item-image__opacity{animation: img_anim1 600ms linear 10ms alternate infinite;
}
@media all and (max-width:800px) {#content{width: 95%;}.item-image{width: 95px;}.img{margin-left: -22px;}.item-title{overflow: hidden;font-size: 0.1em;white-space: nowrap;}.item-star{display: none;}.item-kind{display: none;}
}@media all and (max-width:800px) {#footer__text{font-size: 0.3em;}.footer-nav__item{font-size: 0.5em;}
}

五、页面代码

1.index.html（首页代码及部分CSS样式）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,inital-scale=1.0" /><title>首页</title><link rel="stylesheet" href="css/layout.css" /><link rel="stylesheet" href="css/list.css" /><link rel="stylesheet" href="css/phone.css" /><style type="text/css">@font-face {/* 定义个性字体名字 */font-family: 'Glyphicons';/* 定义个性字体来源文件 */src: url('fonts/glyphicons-regular.eot');src: url('fonts/glyphicons-regular.eot?#iefix') format('embedded-opentype'),url('fonts/glyphicons-regular.woff') format('woff'),url('fonts/glyphicons-regular.ttf') format('truetype'),url('fonts/glyphicons-regular.svg#glyphicons_halflingsregular') format('svg');}/* 当前元素上插入图标,显示商店图标 */.icon-home:before {/* 使用个性字体Glyphicons */font-family: Glyphicons;/* 当前元素插入图标 */content: "\e021";}/* 插入关于图标 */.icon-vcard:before {font-family: Glyphicons;content: "\e265";}/* 显示社区图标 */.icon-conversation:before {font-family: Glyphicons;content: "\e245";}/* 显示支持图标 */.icon-settings:before {font-family: Glyphicons;content: "\e281";}/* *************** *//* 页眉区域使用的个性化字体样式 *//* *************** */.icon-user:before {font-family: Glyphicons;content: "\e004";}.icon-shopping-cart:before {font-family: Glyphicons;content: "\e203";}.icon-search:before {font-family: Glyphicons;content: "\e028";}</style></head><body><header id="header"><div class="grid header__content"><div class="grid-cell-1 header-logo"><a class="header-logo__link" href="index.html"><img src="images/logo.png" class="header-logo__img" />游戏商城</a></div><nav class="grid-cell-3 header-nav"><ul class="grid"><li class="grid-cell-1 header-nav__item"><a class="header-nav__link" href="list.html"><span class="icon icon-home" title="商品"></span><span class="header-nav__link--hidden">商品</span></a></li><li class="grid-cell-1 header-nav__item"><a class="header-nav__link" href="#"><span class="icon icon-vcard" title="关于"></span><span class="header-nav__link--hidden">关于</span></a></li><li class="grid-cell-1 header-nav__item"><a class="header-nav__link" href="#"><span class="icon icon-conversation" title="社区"></span><span class="header-nav__link--hidden">社区</span></a></li><li class="grid-cell-1 header-nav__item"><a class="header-nav__link" href="#"><span class="icon icon-settings" title="支持"></span><span class="header-nav__link--hidden">支持</span></a></li></ul></nav><div class="header-toolbar"><a href="#" class="header-toolbar__item header-toolbar__item--hidden"><span class="icon-justify" title="导航"></span>导航</a><a href="#" class="header-toolbar__item"><span class="icon icon-user" title="登录"></span>登录</a><a href="#" class="header-toolbar__item"><span class="icon icon-shopping-cart" title="购物车"></span>购物车</a><a href="#" class="header-toolbar__item"><span class="icon icon-search" title="搜索"></span>搜索</a></div></div></header><section id="section"><section id="content"><div class="grid content-top"><div class="grid-cell-1 banner"><h4 class="banner__title">新鲜事</h4><div class="banner__content"><a class="banner__link" href="#"><img class="banner__image" src="images/ad1.jpg" /><h3 class="banner__text"><span class="banner__text__title">Windows+Mac+Linux</span><strong class="banner__text__text--bigtitle">现正发售 Tangledeep(正在开发中)</strong><a href="#" class="banner__text--button">￥47.00</a></h3></a></div></div><div class="grid-cell-1 selling"><h4>最新优惠</h4><div class="selling__content"><a class="selling__link" href="#"><img class="selling__image" src="images/adhot1.jpg" /><h3 class="selling__text"><strong class="selling__text__text--bigtitle">FREESPACE 2,STAR TREK,<br />STONEKEEP,MDK,<br />MESSIAH AND MORE -60%</strong><span class="selling__text__title">剩余6天，06:11:32</span></h3></a></div></div></div></section><section id="content"><div class="grid hot"><dl class="grid-cell-1 hot-item"><dt><img src="images/game1.jpg" class="hot-item__image" /></dt><dd class="hot-item_title">Freedom Force</dd><dd class="hot-item_text"><span class="hot-item_text--discount">-50%</span><a class="hot-item_text--button" href="#">￥47.00</a></dd></dl><dl class="grid-cell-1 hot-item"><dt><img src="images/game2.jpg" class="hot-item__image" /></dt><dd class="hot-item_title">Dreamfall Chapters</dd><dd class="hot-item_text"><span class="hot-item_text--discount">-80%</span><a class="hot-item_text--button" href="#">￥50.00</a></dd></dl><dl class="grid-cell-1 hot-item"><dt><img src="images/game3.jpg" class="hot-item__image" /></dt><dd class="hot-item_title">Sundered</dd><dd class="hot-item_text"><span class="hot-item_text--discount">-20%</span><a class="hot-item_text--button" href="#">￥56.00</a></dd></dl><dl class="grid-cell-1 hot-item"><dt><img src="images/game4.jpg" class="hot-item__image" /></dt><dd class="hot-item_title">Tooth Tail</dd><dd class="hot-item_text"><span class="hot-item_text--discount">-10%</span><a class="hot-item_text--button" href="#">￥128.00</a></dd></dl><dl class="grid-cell-1 hot-item"><dt><img src="images/game5.jpg" class="hot-item__image" /></dt><dd class="hot-item_title">Children of Zodiarcs</dd><dd class="hot-item_text"><span class="hot-item_text--discount">-40%</span><a class="hot-item_text--button" href="#">￥47.00</a></dd></dl></div></section><section id="content"><nav class="content-nav"><ul class="grid"><li class="grid-cell-1 content-nav__item--active"><a href="#">头条</a></li><li class="grid-cell-1">&bull;</li><li class="grid-cell-1 content-nav__item"><a href="#">畅销</a></li><li class="grid-cell-1">&bull;</li><li class="grid-cell-1 content-nav__item"><a href="#">新品</a></li><li class="grid-cell-1">&bull;</li><li class="grid-cell-1 content-nav__item"><a href="#">预览</a></li><li class="grid-cell-1">&bull;</li><li class="grid-cell-1 content-nav__item"><a href="#">促销</a></li></ul></nav></section><div class="news"><a class="news-link" href="#" title="一个充满了冒险, 战略，动作的世界, 夹杂着一股浓重的重金属味。你是不是喜欢用鼠标选择单位，然后部署他们？看来这次你是如愿以偿了? 因为周促销第24期 有那么多你的菜。这里包含着很多的冒险，一点点动作，还有一大堆等着你去部署的战略。我们凑近来看下到底有些什么l:每个年轻的男孩都有一个成为一个魔法师的梦想的经历吧。Harr--Jerry将会在Night of the Rabbit 的世界中抓住这么一次机会，他的才能，热情，以及充沛的精力也许可以拯救Mousewood 的每一个居民。    来自上层社会的压迫正在痛苦的折磨着人们。不在沉默中爆发就在沉默中灭亡。 Amy必须发现 Shardlight 的阴谋并且给这个浩劫后的世界带来新的希望。"><dl class="news-item"><dt class="news-item__image"><img class="news-item__image--opacity" src="images/game_news1.jpg" /></dt><dd class="news-item__text"><h3 class="news-item__title">周促销24期：<b>多至90%减价优惠，包括Candle,Shadow,Tactics:Blades of the Shogun,Slain Back<br />form Hell,Technobabylon,以及更多</b></h3></dd><dd class="news-item__text"><time class="news-item__time" datetime="2017-07-24T13:00">1小时前|20小时前</time></dd><dd>一个充满了冒险, 战略，动作的世界, 夹杂着一股浓重的重金属味。 你是不是喜欢用鼠标选择单位，然后部署他们？看来这次你是如愿以偿了? 因为周促销第24期 有那么多你的菜。这里包含着很多的冒险，一点点动作，还有一大堆等着你去部署的战略。我们凑近来看下到底有些什么l:每个年轻的男孩都有一个成为一个魔法师的梦想的经历吧。Harr--Jerry将会在Night of the Rabbit 的世界中抓住这么一次机会，他的才能，热情，以及充沛的精力也许可以拯救Mousewood的每一个居民。来自上层社会的压迫正在痛苦的折磨着人们。不在沉默中爆发就在沉默中灭亡。 Amy必须发现 Shardlight的阴谋并且给这个浩劫后的世界带来新的希望。一如既往，我们还有很多别的: Shadow Tactics:</dd></dl></a><a class="news-link" href="#" title="所有Interplay游戏降价60% | 价格调整即将到来 夏日炎炎，各地高温破表，只要出门哪里都是人山人海。Interplay Staycation将是你避暑的好伴侣。设想一下宅在家里，锁上房门，打开空调，喝着冰镇的可乐并慢慢品味Interplay 的经典是多么惬意的一件事情啊。而且官方升价在即，要买就要趁现在啦！所有游戏Interplay Staycation都享受60%的折扣！如果你喜欢慢节奏，注重气氛，故事情节和一点点战斗来保证趣味性：Stonekeep, Lionheart 或 Lost Eden 是不错的预热选择。如果你喜欢动作类游戏，平台类有Earthworm Jim，火爆的动作经典必选MDK，紧张的枪战有Shogo, 科幻飞船大战可以试试Freespace 2。还有两款你一定"><dl class="news-item"><dt class="news-item__image"><img class="news-item__image--opacity" src="images/game_news2.jpg" /></dt><dd class="news-item__text"><h3 class="news-item__title">特别优惠：<b>Interplay Staycation</b></h3></dd><dd class="news-item__text"><time class="news-item__time" datetime="2017-07-24T13:00">1小时前|20小时前</time></dd><dd class="news-item__text">所有Interplay游戏降价60% | 价格调整即将到来 夏日炎炎，各地高温破表，只要出门哪里都是人山人海。Interplay Staycation将是你避暑的好伴侣。设想一下宅在家里，锁上房门，打开空调，喝着冰镇的可乐并慢慢品味Interplay 的经典是多么惬意的一件事情啊。而且官方升价在即，要买就要趁现在啦！所有游戏Interplay Staycation都享受60%的折扣！如果你喜欢慢节奏，注重气氛，故事情节和一点点战斗来保证趣味性：Stonekeep, Lionheart 或 Lost Eden 是不错的预热选择。如果你喜欢动作类游戏，平台类有Earthworm Jim，火爆的动作经典必选MDK，紧张的枪战有Shogo, 科幻飞船大战可以试试Freespace 2。还有两款你一定</dd></dl></a><a class="news-link" href="#" title="从一个年轻的魔法师开始。Mages of Mystralia，一场为奥法学徒准备的精彩动作冒险，DRM-Free无数字版权保护版已登陆GOG.com，首发享受10%折扣优惠。 无论是魔法本身，还是魔法的学习者，都对法律嗤之以鼻，Zia可不会因此而放弃自己与生俱来的法力，绝不。她将掌握和完善自己新发现的法力，收集符文，施展强大而多样的法术，寻找流亡的盟友，并解决棘手的场景谜题。你的法术书是你的终极武器，请务必正确书写每一条魔法。如果你想完全沉浸在这个魔法的世界中，你还可以去这里购买那些非常可爱动听的原声音乐 可爱的原声音乐 10%折扣优惠将持续至北京时间7月28日早上8点为止。 "><dl class="news-item"><dt class="news-item__image"><img class="news-item__image--opacity" src="images/game_news3.jpg" /></dt><dd class="news-item__text"><h3 class="news-item__title">发售: <b>Mages of Mystralia</b></h3></dd><dd class="news-item__text"><time class="news-item__time" datetime="2017-07-24T13:00">1小时前|20小时前</time></dd><dd class="news-item__text">从一个年轻的魔法师开始。Mages of Mystralia，一场为奥法学徒准备的精彩动作冒险，DRM-Free无数字版权保护版已登陆GOG.com，首发享受10%折扣优惠。 无论是魔法本身，还是魔法的学习者，都对法律嗤之以鼻，Zia可不会因此而放弃自己与生俱来的法力，绝不。她将掌握和完善自己新发现的法力，收集符文，施展强大而多样的法术，寻找流亡的盟友，并解决棘手的场景谜题。你的法术书是你的终极武器，请务必正确书写每一条魔法。如果你想完全沉浸在这个魔法的世界中，你还可以去这里购买那些非常可爱动听的原声音乐 可爱的原声音乐 10%折扣优惠将持续至北京时间7月28日早上8点为止。</dd></dl></a><a href="news.html" class="news-link news-item--more">更多头条新闻...</a></div></section><div id="d1"></div><footer id="footer" class="grid footer__content"><div class="grid-cell-2"><ul class="grid"><li class="grid-cell-1 footer-nav__item"><a class="footer-nav__link" href="list.html"><span class="footer-nav__link--hidden">关于我们</span></a></li><li class="grid-cell-1 footer-nav__item"><a class="footer-nav__link" href="#"><span class="footer-nav__link--hidden">平台协议</span></a></li><li class="grid-cell-1 footer-nav__item"><a class="footer-nav__link" href="#"><span class="footer-nav__link--hidden">联系方式</span></a></li><li class="grid-cell-1 footer-nav__item"><a class="footer-nav__link" href="#"><span class="footer-nav__link--hidden">工作机会</span></a></li><li class="grid-cell-1 footer-nav__item"><a class="footer-nav__link" href="#"><span class="footer-nav__link--hidden">客户服务</span></a></li><li class="grid-cell-1 footer-nav__item"><a class="footer-nav__link" href="#"><span class="footer-nav__link--hidden">家长监护</span></a></li></ul></div><div class="grid-cell-1"><a id="footer__text">mgp.ford.com.cn &copy; 2017</a></div></footer></body>
</html>

2.news.html（新闻界面代码及部分CSS样式）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,inital-scale=1.0" /><title>新闻</title><link rel="stylesheet" href="css/layout.css" /><link rel="stylesheet" href="css/list.css" /><link rel="stylesheet" href="css/phone.css" /><style type="text/css">@font-face {/* 定义个性字体名字 */font-family: 'Glyphicons';/* 定义个性字体来源文件 */src: url('fonts/glyphicons-regular.eot');src: url('fonts/glyphicons-regular.eot?#iefix') format('embedded-opentype'),url('fonts/glyphicons-regular.woff') format('woff'),url('fonts/glyphicons-regular.ttf') format('truetype'),url('fonts/glyphicons-regular.svg#glyphicons_halflingsregular') format('svg');}/* 当前元素上插入图标,显示商店图标 */.icon-home:before {/* 使用个性字体Glyphicons */font-family: Glyphicons;/* 当前元素插入图标 */content: "\e021";}/* 插入关于图标 */.icon-vcard:before {font-family: Glyphicons;content: "\e265";}/* 显示社区图标 */.icon-conversation:before {font-family: Glyphicons;content: "\e245";}/* 显示支持图标 */.icon-settings:before {font-family: Glyphicons;content: "\e281";}/* *************** *//* 页眉区域使用的个性化字体样式 *//* *************** */.icon-user:before {font-family: Glyphicons;content: "\e004";}.icon-shopping-cart:before {font-family: Glyphicons;content: "\e203";}.icon-search:before {font-family: Glyphicons;content: "\e028";}</style></head><body><header id="header"><div class="grid header__content"><div class="grid-cell-1 header-logo"><a class="header-logo__link" href="index.html"><img src="images/logo.png" class="header-logo__img"/>游戏商城</a></div><nav class="grid-cell-3 header-nav"><ul class="grid"><li class="grid-cell-1 header-nav__item"><a class="header-nav__link" href="list.html"><span class="icon icon-home" title="商品"></span><span class="header-nav__link--hidden">商品</span></a></li><li class="grid-cell-1 header-nav__item"><a class="header-nav__link" href="#"><span class="icon icon-vcard" title="关于"></span><span class="header-nav__link--hidden">关于</span></a></li><li class="grid-cell-1 header-nav__item"><a class="header-nav__link" href="#"><span class="icon icon-conversation" title="社区"></span><span class="header-nav__link--hidden">社区</span></a></li><li class="grid-cell-1 header-nav__item"><a class="header-nav__link" href="#"><span class="icon icon-settings" title="支持"></span><span class="header-nav__link--hidden">支持</span></a></li></ul></nav><div class="header-toolbar"><a href="#" class="header-toolbar__item header-toolbar__item--hidden"><span class="icon-justify" title="导航"></span>导航</a><a href="#" class="header-toolbar__item"><span class="icon icon-user" title="登录"></span>登录</a><a href="#" class="header-toolbar__item"><span class="icon icon-shopping-cart" title="购物车"></span>购物车</a><a href="#" class="header-toolbar__item"><span class="icon icon-search" title="搜索"></span>搜索</a></div></div></header><div class="news"><a class="news-link" href="#" title="一个充满了冒险, 战略，动作的世界, 夹杂着一股浓重的重金属味。你是不是喜欢用鼠标选择单位，然后部署他们？看来这次你是如愿以偿了? 因为周促销第24期 有那么多你的菜。这里包含着很多的冒险，一点点动作，还有一大堆等着你去部署的战略。我们凑近来看下到底有些什么l:每个年轻的男孩都有一个成为一个魔法师的梦想的经历吧。Harr--Jerry将会在Night of the Rabbit 的世界中抓住这么一次机会，他的才能，热情，以及充沛的精力也许可以拯救Mousewood 的每一个居民。    来自上层社会的压迫正在痛苦的折磨着人们。不在沉默中爆发就在沉默中灭亡。 Amy必须发现 Shardlight 的阴谋并且给这个浩劫后的世界带来新的希望。"><dl class="news-item"><dt class="news-item__image"><img class="news-item__image--opacity" src="images/game_news1.jpg"/></dt><dd class="news-item__text"><h3 class="news-item__title">周促销24期：<b>多至90%减价优惠，包括Candle,Shadow,Tactics:Blades of the Shogun,Slain Back<br />form Hell,Technobabylon,以及更多</b></h3></dd><dd class="news-item__text"><time class="news-item__time" datetime="2017-07-24T13:00">1小时前|20小时前</time></dd><dd>一个充满了冒险, 战略，动作的世界, 夹杂着一股浓重的重金属味。 你是不是喜欢用鼠标选择单位，然后部署他们？看来这次你是如愿以偿了? 因为周促销第24期 有那么多你的菜。这里包含着很多的冒险，一点点动作，还有一大堆等着你去部署的战略。我们凑近来看下到底有些什么l:每个年轻的男孩都有一个成为一个魔法师的梦想的经历吧。Harr--Jerry将会在Night of the Rabbit 的世界中抓住这么一次机会，他的才能，热情，以及充沛的精力也许可以拯救Mousewood的每一个居民。来自上层社会的压迫正在痛苦的折磨着人们。不在沉默中爆发就在沉默中灭亡。 Amy必须发现 Shardlight的阴谋并且给这个浩劫后的世界带来新的希望。一如既往，我们还有很多别的: Shadow Tactics: </dd></dl></a><a class="news-link" href="#" title="所有Interplay游戏降价60% | 价格调整即将到来 夏日炎炎，各地高温破表，只要出门哪里都是人山人海。Interplay Staycation将是你避暑的好伴侣。设想一下宅在家里，锁上房门，打开空调，喝着冰镇的可乐并慢慢品味Interplay 的经典是多么惬意的一件事情啊。而且官方升价在即，要买就要趁现在啦！所有游戏Interplay Staycation都享受60%的折扣！如果你喜欢慢节奏，注重气氛，故事情节和一点点战斗来保证趣味性：Stonekeep, Lionheart 或 Lost Eden 是不错的预热选择。如果你喜欢动作类游戏，平台类有Earthworm Jim，火爆的动作经典必选MDK，紧张的枪战有Shogo, 科幻飞船大战可以试试Freespace 2。还有两款你一定"><dl class="news-item"><dt class="news-item__image"><img class="news-item__image--opacity" src="images/game_news2.jpg"/></dt><dd class="news-item__text"><h3 class="news-item__title">特别优惠：<b>Interplay Staycation</b></h3></dd><dd class="news-item__text"><time class="news-item__time" datetime="2017-07-24T13:00">1小时前|20小时前</time></dd><dd class="news-item__text">所有Interplay游戏降价60% | 价格调整即将到来 夏日炎炎，各地高温破表，只要出门哪里都是人山人海。Interplay Staycation将是你避暑的好伴侣。设想一下宅在家里，锁上房门，打开空调，喝着冰镇的可乐并慢慢品味Interplay 的经典是多么惬意的一件事情啊。而且官方升价在即，要买就要趁现在啦！所有游戏Interplay Staycation都享受60%的折扣！如果你喜欢慢节奏，注重气氛，故事情节和一点点战斗来保证趣味性：Stonekeep, Lionheart 或 Lost Eden 是不错的预热选择。如果你喜欢动作类游戏，平台类有Earthworm Jim，火爆的动作经典必选MDK，紧张的枪战有Shogo, 科幻飞船大战可以试试Freespace 2。还有两款你一定</dd></dl></a><a class="news-link" href="#" title="从一个年轻的魔法师开始。Mages of Mystralia，一场为奥法学徒准备的精彩动作冒险，DRM-Free无数字版权保护版已登陆GOG.com，首发享受10%折扣优惠。 无论是魔法本身，还是魔法的学习者，都对法律嗤之以鼻，Zia可不会因此而放弃自己与生俱来的法力，绝不。她将掌握和完善自己新发现的法力，收集符文，施展强大而多样的法术，寻找流亡的盟友，并解决棘手的场景谜题。你的法术书是你的终极武器，请务必正确书写每一条魔法。如果你想完全沉浸在这个魔法的世界中，你还可以去这里购买那些非常可爱动听的原声音乐 可爱的原声音乐 10%折扣优惠将持续至北京时间7月28日早上8点为止。 "><dl class="news-item"><dt class="news-item__image"><img class="news-item__image--opacity" src="images/game_news3.jpg"/></dt><dd class="news-item__text"><h3 class="news-item__title">发售: <b>Mages of Mystralia</b></h3></dd><dd class="news-item__text"><time class="news-item__time" datetime="2017-07-24T13:00">1小时前|20小时前</time></dd><dd class="news-item__text">从一个年轻的魔法师开始。Mages of Mystralia，一场为奥法学徒准备的精彩动作冒险，DRM-Free无数字版权保护版已登陆GOG.com，首发享受10%折扣优惠。 无论是魔法本身，还是魔法的学习者，都对法律嗤之以鼻，Zia可不会因此而放弃自己与生俱来的法力，绝不。她将掌握和完善自己新发现的法力，收集符文，施展强大而多样的法术，寻找流亡的盟友，并解决棘手的场景谜题。你的法术书是你的终极武器，请务必正确书写每一条魔法。如果你想完全沉浸在这个魔法的世界中，你还可以去这里购买那些非常可爱动听的原声音乐 可爱的原声音乐 10%折扣优惠将持续至北京时间7月28日早上8点为止。</dd></dl></a><a class="news-link" href="#" title="由Jesse挑选的优惠精选，至多减价90%。CoxCon是一场直播网红和网友见面的大会。近年来不断的成长以及其对于游戏直播方面的关注日渐引人注目。而今年，更是第一次把这个大会本身做成了直播形式。在众多网红中，今天我们的主角是这位著名的喜剧演员，游戏爱好者，以及直播网红Jesse Cox。 Jesse是爱， Jesse是生命，Jesse是你一生挚爱的海量游戏优惠。为了庆祝正在进行的CoxCon展 CoxCon convention ， Jesse Cox为我们精心选择了一份GOG游戏清单，都是他在直播中爱玩的。历久弥新的经典作品、时下受宠的独立游戏、令人狂喜的佳作——这儿绝对有你想要的。来看看它们吧： 在众多花样年纪的女大学生中，《Kathy Rain》显然缺少了点开朗阳光的性格，但坚毅、机智"><dl class="news-item"><dt class="news-item__image"><img class="news-item__image--opacity" src="images/game_news4.jpg"/></dt><dd class="news-item__text"><h3 class="news-item__title">Jesse Cox的推荐促销: <b>CoxCon 正当时</b></h3></dd><dd class="news-item__text"><time class="news-item__time" datetime="2017-07-24T13:00">1小时前|20小时前</time></dd><dd>由Jesse挑选的优惠精选，至多减价90%。CoxCon是一场直播网红和网友见面的大会。近年来不断的成长以及其对于游戏直播方面的关注日渐引人注目。而今年，更是第一次把这个大会本身做成了直播形式。在众多网红中，今天我们的主角是这位著名的喜剧演员，游戏爱好者，以及直播网红Jesse Cox。 Jesse是爱， Jesse是生命，Jesse是你一生挚爱的海量游戏优惠。为了庆祝正在进行的CoxCon展 CoxCon convention ， Jesse Cox为我们精心选择了一份GOG游戏清单，都是他在直播中爱玩的。历久弥新的经典作品、时下受宠的独立游戏、令人狂喜的佳作——这儿绝对有你想要的。来看看它们吧： 在众多花样年纪的女大学生中，《Kathy Rain》显然缺少了点开朗阳光的性格，但坚毅、机智</dd></dl></a><a class="news-link" href="#" title="一段动人心弦的冒险旅程。 Dreamfall Chapters: The Final Cut 终于发布了，这个版本提升了各种内容是整个游戏的终极版本。已经拥有原版的用户可以马上免费升级，本周40%的折扣令你没有理由继续持币观望。天下无不散的宴席，但是漫长的等待是值得的。这个最终版本增加了游戏内置地图，角色库，可玩的曾删减版本，和概念画图集等等。还有一些无论新老玩家都会喜欢的特性升级：- 增强的影音表现：角色模型，增强的光影小姑，更多的音轨，配音以及音效- 各种游戏性能调整- 增强性能表现和优化- 增强德语和法语的本地化- 多存档文件支持 - 升级了游戏引擎- 诸多小的问题修复已经购买了特别版 Special Edition的用户将会免费得到 Final Cut OST本次优惠持续到北京时间"><dl class="news-item"><dt class="news-item__image"><img class="news-item__image--opacity" src="images/game_news5.jpg"/></dt><dd class="news-item__text"><h3 class="news-item__title">发售: <b>Dreamfall Chapters: The Final Cut</b></h3></dd><dd class="news-item__text"><time class="news-item__time" datetime="2017-07-24T13:00">1小时前|20小时前</time></dd><dd class="news-item__text">一段动人心弦的冒险旅程。 Dreamfall Chapters: The Final Cut 终于发布了，这个版本提升了各种内容是整个游戏的终极版本。已经拥有原版的用户可以马上免费升级，本周40%的折扣令你没有理由继续持币观望。天下无不散的宴席，但是漫长的等待是值得的。这个最终版本增加了游戏内置地图，角色库，可玩的曾删减版本，和概念画图集等等。还有一些无论新老玩家都会喜欢的特性升级：- 增强的影音表现：角色模型，增强的光影小姑，更多的音轨，配音以及音效- 各种游戏性能调整- 增强性能表现和优化- 增强德语和法语的本地化- 多存档文件支持 - 升级了游戏引擎- 诸多小的问题修复已经购买了特别版 Special Edition的用户将会免费得到 Final Cut OST本次优惠持续到北京时间</dd></dl></a><a class="news-link" href="#" title="从一个年轻的魔法师开始。Mages of Mystralia，一场为奥法学徒准备的精彩动作冒险，DRM-Free无数字版权保护版已登陆GOG.com，首发享受10%折扣优惠。 无论是魔法本身，还是魔法的学习者，都对法律嗤之以鼻，Zia可不会因此而放弃自己与生俱来的法力，绝不。她将掌握和完善自己新发现的法力，收集符文，施展强大而多样的法术，寻找流亡的盟友，并解决棘手的场景谜题。你的法术书是你的终极武器，请务必正确书写每一条魔法。如果你想完全沉浸在这个魔法的世界中，你还可以去这里购买那些非常可爱动听的原声音乐 可爱的原声音乐 10%折扣优惠将持续至北京时间7月28日早上8点为止。 "><dl class="news-item"><dt class="news-item__image"><img class="news-item__image--opacity" src="images/game_news6.jpg"/></dt><dd class="news-item__text"><h3 class="news-item__title">发售: <b>Mages of Mystralia</b></h3></dd><dd class="news-item__text"><time class="news-item__time" datetime="2017-07-24T13:00">1小时前|20小时前</time></dd><dd class="news-item__text">从一个年轻的魔法师开始。Mages of Mystralia，一场为奥法学徒准备的精彩动作冒险，DRM-Free无数字版权保护版已登陆GOG.com，首发享受10%折扣优惠。 无论是魔法本身，还是魔法的学习者，都对法律嗤之以鼻，Zia可不会因此而放弃自己与生俱来的法力，绝不。她将掌握和完善自己新发现的法力，收集符文，施展强大而多样的法术，寻找流亡的盟友，并解决棘手的场景谜题。你的法术书是你的终极武器，请务必正确书写每一条魔法。如果你想完全沉浸在这个魔法的世界中，你还可以去这里购买那些非常可爱动听的原声音乐 可爱的原声音乐 10%折扣优惠将持续至北京时间7月28日早上8点为止。</dd></dl></a><a class="news-link" href="#" title="预购: 蝙蝠侠: 内敌 - Telltale系列一位真正的骑士，不会轻易被人忘怀蝙蝠侠: 内敌, 是布鲁斯.韦恩为守护自身和高登市之魂而战斗的最新篇章，在GOG.Com上，正以DRM-Free(无数字版权管理)的形式预售，预售享受10%减价优惠。黑暗之中，阴魂尤存。谜语人带回给高登市的一系列新谜题，只是系列恐怖犯罪的插曲。当一位粗暴的联邦探员不请自至，以及小丑日渐丧心病狂之时，布鲁斯.韦恩需要慎重的选择自己可靠的盟友，才能在另一个罪恶黑夜中全身而退。10%的预售优惠将会持续到北京时间8月8日游戏正式发售为止。"><dl class="news-item"><dt class="news-item__image"><img class="news-item__image--opacity" src="images/game_news7.jpg"/></dt><dd class="news-item__text"><h3 class="news-item__title">预购: <b>蝙蝠侠: 内敌 - Telltale系列</b></h3></dd><dd class="news-item__text"><time class="news-item__time" datetime="2017-07-24T13:00">1小时前|20小时前</time></dd><dd>预购: 蝙蝠侠: 内敌 - Telltale系列一位真正的骑士，不会轻易被人忘怀蝙蝠侠: 内敌, 是布鲁斯.韦恩为守护自身和高登市之魂而战斗的最新篇章，在GOG.Com上，正以DRM-Free(无数字版权管理)的形式预售，预售享受10%减价优惠。黑暗之中，阴魂尤存。谜语人带回给高登市的一系列新谜题，只是系列恐怖犯罪的插曲。当一位粗暴的联邦探员不请自至，以及小丑日渐丧心病狂之时，布鲁斯.韦恩需要慎重的选择自己可靠的盟友，才能在另一个罪恶黑夜中全身而退。10%的预售优惠将会持续到北京时间8月8日游戏正式发售为止。</dd></dl></a><a class="news-link" href="#" title="美丽的村庄，华丽的火焰。 王国与城堡是一款建设、策略游戏。在游戏里你可以发展你的欧洲中世纪小村庄，将其打造成庞大的城市，并在其中建设恢弘的城堡。本游戏的DRM-Free无数字版权保护版现已在GOG.com上发售。 在中世纪的欧洲，任何城市都处于无尽的危机中。这里有恶龙、强盗、疾病、严苛的天气。这些恶劣条件都可以轻易的摧毁你的城市。不过如果你规划合理，帮助你的居民保持健康，有必要时还可以修建城墙，这样你的人民就有机会在这个充满变化、残酷无情的世界中生存下去。 若想要进一步了解游戏，请观看这个超有意思的视频。视频内容是几个月前博主Yogscast造访GOG时录下的一段测试版游戏过程。 "><dl class="news-item"><dt class="news-item__image"><img class="news-item__image--opacity" src="images/game_news8.jpg"/></dt><dd class="news-item__text"><h3 class="news-item__title">发售: <b>Kingdoms and Castles</b></h3></dd><dd class="news-item__text"><time class="news-item__time" datetime="2017-07-24T13:00">1小时前|20小时前</time></dd><dd class="news-item__text">美丽的村庄，华丽的火焰。 王国与城堡是一款建设、策略游戏。在游戏里你可以发展你的欧洲中世纪小村庄，将其打造成庞大的城市，并在其中建设恢弘的城堡。本游戏的DRM-Free无数字版权保护版现已在GOG.com上发售。 在中世纪的欧洲，任何城市都处于无尽的危机中。这里有恶龙、强盗、疾病、严苛的天气。这些恶劣条件都可以轻易的摧毁你的城市。不过如果你规划合理，帮助你的居民保持健康，有必要时还可以修建城墙，这样你的人民就有机会在这个充满变化、残酷无情的世界中生存下去。若想要进一步了解游戏，请观看这个超有意思的视频。视频内容是几个月前博主Yogscast造访GOG时录下的一段测试版游戏过程。 </dd></dl></a></div><div id="d1"></div><footer id="footer" class="grid footer__content"><div class="grid-cell-2"><ul class="grid"><li class="grid-cell-1 footer-nav__item"><a class="footer-nav__link" href="list.html"><span class="footer-nav__link--hidden">关于我们</span></a></li><li class="grid-cell-1 footer-nav__item"><a class="footer-nav__link" href="#"><span class="footer-nav__link--hidden">平台协议</span></a></li><li class="grid-cell-1 footer-nav__item"><a class="footer-nav__link" href="#"><span class="footer-nav__link--hidden">联系方式</span></a></li><li class="grid-cell-1 footer-nav__item"><a class="footer-nav__link" href="#"><span class="footer-nav__link--hidden">工作机会</span></a></li><li class="grid-cell-1 footer-nav__item"><a class="footer-nav__link" href="#"><span class="footer-nav__link--hidden">客户服务</span></a></li><li class="grid-cell-1 footer-nav__item"><a class="footer-nav__link" href="#"><span class="footer-nav__link--hidden">家长监护</span></a></li></ul></div><div class="grid-cell-1"><a id="footer__text">mgp.ford.com.cn &copy; 2017</a></div></footer></body>
</html>

3.list.html（商品界面代码及部分CSS样式）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,inital-scale=1.0" /><title></title><link rel="stylesheet" href="css/layout.css" /><link rel="stylesheet" href="css/list.css" /><link rel="stylesheet" href="css/phone.css" /><style type="text/css">@font-face {/* 定义个性字体名字 */font-family: 'Glyphicons';/* 定义个性字体来源文件 */src: url('fonts/glyphicons-regular.eot');src: url('fonts/glyphicons-regular.eot?#iefix') format('embedded-opentype'),url('fonts/glyphicons-regular.woff') format('woff'),url('fonts/glyphicons-regular.ttf') format('truetype'),url('fonts/glyphicons-regular.svg#glyphicons_halflingsregular') format('svg');}/* 当前元素上插入图标,显示商店图标 */.icon-home:before {/* 使用个性字体Glyphicons */font-family: Glyphicons;/* 当前元素插入图标 */content: "\e021";}/* 插入关于图标 */.icon-vcard:before {font-family: Glyphicons;content: "\e265";}/* 显示社区图标 */.icon-conversation:before {font-family: Glyphicons;content: "\e245";}/* 显示支持图标 */.icon-settings:before {font-family: Glyphicons;content: "\e281";}/* *************** *//* 页眉区域使用的个性化字体样式 *//* *************** */.icon-user:before {font-family: Glyphicons;content: "\e004";}.icon-shopping-cart:before {font-family: Glyphicons;content: "\e203";}.icon-search:before {font-family: Glyphicons;content: "\e028";}</style></head><body><header id="header"><div class="grid header__content"><div class="grid-cell-1 header-logo"><a class="header-logo__link" href="index.html"><img src="images/logo.png" class="header-logo__img"/>游戏商城</a></div><nav class="grid-cell-3 header-nav"><ul class="grid"><li class="grid-cell-1 header-nav__item"><a class="header-nav__link" href="list.html"><span class="icon icon-home" title="商品"></span><span class="header-nav__link--hidden">商品</span></a></li><li class="grid-cell-1 header-nav__item"><a class="header-nav__link" href="#"><span class="icon icon-vcard" title="关于"></span><span class="header-nav__link--hidden">关于</span></a></li><li class="grid-cell-1 header-nav__item"><a class="header-nav__link" href="#"><span class="icon icon-conversation" title="社区"></span><span class="header-nav__link--hidden">社区</span></a></li><li class="grid-cell-1 header-nav__item"><a class="header-nav__link" href="#"><span class="icon icon-settings" title="支持"></span><span class="header-nav__link--hidden">支持</span></a></li></ul></nav><div class="header-toolbar"><a href="#" class="header-toolbar__item header-toolbar__item--hidden"><span class="icon-justify" title="导航"></span>导航</a><a href="#" class="header-toolbar__item"><span class="icon icon-user" title="登录"></span>登录</a><a href="#" class="header-toolbar__item"><span class="icon icon-shopping-cart" title="购物车"></span>购物车</a><a href="#" class="header-toolbar__item"><span class="icon icon-search" title="搜索"></span>搜索</a></div></div></header><section id="content"><div class="game-list"><a href="#" class="game-link"><div class="grid game-item"><div class="item-image img"><img src="images/game_pic0.jpg" class="item-image__opacity"/></div><div class="item-title"><h3>Sundered</h3></div><div class="grid-cell-1 item-star">★★★☆☆</div><div class="grid-cell-1 item-kind">动作冒险</div><div class="item-price"><span class="item-price__button">¥30.00</span></div></div></a><a href="#" class="game-link"><div class="grid game-item"><div class="item-image img"><img src="images/game_pic1.jpg" class="item-image__opacity"/></div><div class="item-title"><h3>Taconma</h3></div><div class="grid-cell-1 item-star">★★☆☆☆</div><div class="grid-cell-1 item-kind">第一人称科幻</div><div class="item-price"><span class="item-price__button">¥60.00</span></div></div></a><a href="#" class="game-link"><div class="grid game-item"><div class="item-image img"><img src="images/game_pic2.jpg" class="item-image__opacity"/></div><div class="item-title"><h3>Batman</h3></div><div class="grid-cell-1 item-star">★★☆☆☆</div><div class="grid-cell-1 item-kind">动作冒险</div><div class="item-price"><span class="item-price__button">¥50.00</span></div></div></a><a href="#" class="game-link"><div class="grid game-item"><div class="item-image"><img src="images/game_pic3.jpg" class="item-image__opacity"/></div><div class="item-title"><h3>Hellblade:Senua'S Sacrifice</h3></div><div class="grid-cell-1 item-star">★★★★★</div><div class="grid-cell-1 item-kind">动作冒险</div><div class="item-price"><span class="item-price__button">¥80.00</span></div></div></a><a href="#" class="game-link game-link--more">更多游戏...</a></div></section><div id="d1"></div><footer id="footer" class="grid footer__content"><div class="grid-cell-2"><ul class="grid"><li class="grid-cell-1 footer-nav__item"><a class="footer-nav__link" href="list.html"><span class="footer-nav__link--hidden">关于我们</span></a></li><li class="grid-cell-1 footer-nav__item"><a class="footer-nav__link" href="#"><span class="footer-nav__link--hidden">平台协议</span></a></li><li class="grid-cell-1 footer-nav__item"><a class="footer-nav__link" href="#"><span class="footer-nav__link--hidden">联系方式</span></a></li><li class="grid-cell-1 footer-nav__item"><a class="footer-nav__link" href="#"><span class="footer-nav__link--hidden">工作机会</span></a></li><li class="grid-cell-1 footer-nav__item"><a class="footer-nav__link" href="#"><span class="footer-nav__link--hidden">客户服务</span></a></li><li class="grid-cell-1 footer-nav__item"><a class="footer-nav__link" href="#"><span class="footer-nav__link--hidden">家长监护</span></a></li></ul></div><div class="grid-cell-1"><a id="footer__text">mgp.ford.com.cn &copy; 2017</a></div></footer></body>
</html>

HTML5 小练习1—仿MPG游戏商城相关推荐

HTML5 小练习2—仿华为官网（实现随机雪花飘落效果）
文章目录一.界面展示二.突出显示效果(当鼠标指向时) 1.广告部分动画 2.商品价格突出显示 3.导航栏文字突出显示三.项目目录四.CSS样式代码 1.雪花部分实现五.页面代码 1.inde ...
分享21个丰富多彩的 HTML5 小游戏
作为下一代的网页语言,HTML5 拥有很多让人期待已久的新特性.HTML5 的优势之一在于能够实现跨平台游戏编码移植,现在已经有很多公司在移动设备上使用 HTML5 技术.随着 HTML5 跨平台支持 ...
基于原生小程序精仿的猫眼电影（可预览）
最近基于原生小程序精仿猫眼电影,数据API都是在网上抓取的(如何抓包) 由于没有获得猫眼城市ID的API,所有数据接口没有添加城市ID参数,仅靠IP定位,所以数据可能不准确 2019.12.14更新 ...
微信html5小游戏源码70种
2019独角兽企业重金招聘Python工程师标准>>> 微信html5小游戏源码70种 http://download.csdn.net/detail/csdddn/9419955游 ...
揭秘HTML5小游戏排名，究竟哪些游戏最受欢迎？
大家好!小编豆豆又回来啦,在之前的评测专辑中为大家介绍过本年度最受期待游戏排名,快随着我一起去TOM游戏平台,看看究竟哪些HTML5小游戏最受欢迎吧!揭秘HTML5小游戏排名TOP 5,也许你喜欢的微 ...
开发 HTML5 小游戏
Html5小游戏在介绍小游戏之前,先看一个框架 Phaser. Phaser 框架是一个快速.免费且开源的 HTML5 游戏开发框架,它提供了 Canvas 和 WebGL 两种渲染方式,兼容 P ...
微信小程序开发-仿今日头条（二）
该仿今日头条的文章系列如下: 微信小程序-仿今日头条客户端微信小程序开发-仿今日头条(二) 转载请标明:https://blog.csdn.net/yangjianbo456/article/det ...
漂流瓶php源码,微信小程序之仿微信漂流瓶
[实例简介] 微信小程序之仿微信漂流瓶 [实例截图] [核心代码] a4c6f919-add7-4dc7-bafa-9a884a00f2e3 └── wx_plp ├── app.js ├── app ...
HTML5+CSS大作业——仿新浪微博个人主(4页) html期末作业代码网页设计
HTML5+CSS大作业--仿新浪微博个人主(4页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体 ...

HTML5 小练习1—仿MPG游戏商城

一、界面展示

1.首页

2.商品界面

3.新闻界面

二、突出显示效果

三、文件目录

四、CSS代码

1.layout.css(整体框架布局设计)

2.list.css

3.phone.css

五、页面代码

1.index.html（首页代码及部分CSS样式）

2.news.html（新闻界面代码及部分CSS样式）

3.list.html（商品界面代码及部分CSS样式）

HTML5 小练习1—仿MPG游戏商城相关推荐

最新文章

热门文章