124-移动端游乐园项目

设计师给的index.html排版一般都是2x，要把他调到标准像素再测量
FC是网站的分目录
lib文件夹放的字体图标
js/flexible.js是移动适配文件
新建一个index.html ,
新建一个index.less，保存，弹出保存css文件。
引入favicon.ico，引入./lib/iconfont/iconfont.css,引入./css/index.css
引入./js/flexible.js

在less里引入base.less和normalize.less

量距离时把px换算成日rem
重复区域不需要改，后端链接会自动改

// 缩放至图片完全显示出来 background-size: contain;

移动端不需要做hover
效果图

html

<!DOCTYPE html>
<html lang="en">
<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>FC游乐园</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><link rel="stylesheet" href="./lib/iconfont/iconfont.css"><link rel="stylesheet" href="./css/index copy.css">
</head>
<body><!-- 主题内容 --><div class="main"><div class="banner"><ul><li><a href="#"><img src="../FC/uploads/banner_1.png" alt=""></a></li></ul></div><!-- 活动标题 --><div class="title"><h4>乐园活动</h4></div><!-- 活动 --><section class="item"><div class="pic"><a href="#"><img src="../FC/uploads/item_2.png" alt=""></a><!-- 收藏的图标 --><a href="#"><i class="iconfont icon-shoucang1"></i></a><!-- 活动状态 --><div class="active off">进行中</div></div><div class="txt"><div class="top"><a href="#"><h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5></a><p>免费</p></div><div class="bottom"><p><i class="iconfont icon-qizhi"></i><span>200</span>人已报名</p><p><i class="iconfont icon-shizhong"></i><span>本周六</span>开始</p></div></div></section><section class="item"><div class="pic"><a href="#"><img src="../FC/uploads/item_2.png" alt=""></a><!-- 收藏的图标 --><a href="#"><i class="iconfont icon-shoucang1"></i></a><!-- 活动状态 --><div class="active off">进行中</div></div><div class="txt"><div class="top"><a href="#"><h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5></a><p>免费</p></div><div class="bottom"><p><i class="iconfont icon-qizhi"></i><span>200</span>人已报名</p><p><i class="iconfont icon-shizhong"></i><span>本周六</span>开始</p></div></div></section><section class="item"><div class="pic"><a href="#"><img src="../FC/uploads/item_2.png" alt=""></a><!-- 收藏的图标 --><a href="#"><i class="iconfont icon-shoucang1"></i></a><!-- 活动状态 --><div class="active off">进行中</div></div><div class="txt"><div class="top"><a href="#"><h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5></a><p>免费</p></div><div class="bottom"><p><i class="iconfont icon-qizhi"></i><span>200</span>人已报名</p><p><i class="iconfont icon-shizhong"></i><span>本周六</span>开始</p></div></div></section></div><!-- 主题内容 --><!-- 底部工具栏 --><footer><a href="#" class="current"><i class="iconfont icon-index-copy"></i><p>首页</p></a><a href="#"><i class="iconfont icon-youhuiquan"></i><p>优惠券</p></a><a href="#"><i class="iconfont icon-iconfront-"></i><p>我的</p></a></footer><!-- 底部工具栏 --><script src="./js/flexible.js"></script>
</body>
</html>

css

@charset 'UTF-8';
body,
ul,
p,
h3,
h4,
h5,
h6 {padding: 0;margin: 0;
}
body {font-family: Arial, Helvetica, sans-serif;-webkit-text-size-adjust: none;text-size-adjust: none;-webkit-user-select: none;user-select: none;
}
img {display: block;max-width: 100%;
}
ul {list-style-type: none;
}
a {text-decoration: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/*** 1. Change the default font family in all browsers (opinionated).* 2. Correct the line height in all browsers.* 3. Prevent adjustments of font size after orientation changes in*    IE on Windows Phone and in iOS.*/
/* Document========================================================================== */
html {font-family: sans-serif;/* 1 */line-height: 1.15;/* 2 */-ms-text-size-adjust: 100%;/* 3 */-webkit-text-size-adjust: 100%;/* 3 */
}
/* Sections========================================================================== */
/*** Remove the margin in all browsers (opinionated).*/
body {margin: 0;
}
/*** Add the correct display in IE 9-.*/
article,
aside,
footer,
header,
nav,
section {display: block;
}
/*** Correct the font size and margin on `h1` elements within `section` and* `article` contexts in Chrome, Firefox, and Safari.*/
h1 {font-size: 2em;margin: 0.67em 0;
}
/* Grouping content========================================================================== */
/*** Add the correct display in IE 9-.* 1. Add the correct display in IE.*/
figcaption,
figure,
main {/* 1 */display: block;
}
/*** Add the correct margin in IE 8.*/
figure {margin: 1em 40px;
}
/*** 1. Add the correct box sizing in Firefox.* 2. Show the overflow in Edge and IE.*/
hr {box-sizing: content-box;/* 1 */height: 0;/* 1 */overflow: visible;/* 2 */
}
/*** 1. Correct the inheritance and scaling of font size in all browsers.* 2. Correct the odd `em` font sizing in all browsers.*/
pre {font-family: monospace, monospace;/* 1 */font-size: 1em;/* 2 */
}
/* Text-level semantics========================================================================== */
/*** 1. Remove the gray background on active links in IE 10.* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.*/
a {background-color: transparent;/* 1 */-webkit-text-decoration-skip: objects;/* 2 */
}
/*** Remove the outline on focused links when they are also active or hovered* in all browsers (opinionated).*/
a:active,
a:hover {outline-width: 0;
}
/*** 1. Remove the bottom border in Firefox 39-.* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.*/
abbr[title] {border-bottom: none;/* 1 */text-decoration: underline;/* 2 */text-decoration: underline dotted;/* 2 */
}
/*** Prevent the duplicate application of `bolder` by the next rule in Safari 6.*/
b,
strong {font-weight: inherit;
}
/*** Add the correct font weight in Chrome, Edge, and Safari.*/
b,
strong {font-weight: bolder;
}
/*** 1. Correct the inheritance and scaling of font size in all browsers.* 2. Correct the odd `em` font sizing in all browsers.*/
code,
kbd,
samp {font-family: monospace, monospace;/* 1 */font-size: 1em;/* 2 */
}
/*** Add the correct font style in Android 4.3-.*/
dfn {font-style: italic;
}
/*** Add the correct background and color in IE 9-.*/
mark {background-color: #ff0;color: #000;
}
/*** Add the correct font size in all browsers.*/
small {font-size: 80%;
}
/*** Prevent `sub` and `sup` elements from affecting the line height in* all browsers.*/
sub,
sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;
}
sub {bottom: -0.25em;
}
sup {top: -0.5em;
}
/* Embedded content========================================================================== */
/*** Add the correct display in IE 9-.*/
audio,
video {display: inline-block;
}
/*** Add the correct display in iOS 4-7.*/
audio:not([controls]) {display: none;height: 0;
}
/*** Remove the border on images inside links in IE 10-.*/
img {border-style: none;
}
/*** Hide the overflow in IE.*/
svg:not(:root) {overflow: hidden;
}
/* Forms========================================================================== */
/*** 1. Change the font styles in all browsers (opinionated).* 2. Remove the margin in Firefox and Safari.*/
button,
input,
optgroup,
select,
textarea {font-family: sans-serif;/* 1 */font-size: 100%;/* 1 */line-height: 1.15;/* 1 */margin: 0;/* 2 */
}
/*** Show the overflow in IE.* 1. Show the overflow in Edge.*/
button,
input {/* 1 */overflow: visible;
}
/*** Remove the inheritance of text transform in Edge, Firefox, and IE.* 1. Remove the inheritance of text transform in Firefox.*/
button,
select {/* 1 */text-transform: none;
}
/*** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`*    controls in Android 4.* 2. Correct the inability to style clickable types in iOS and Safari.*/
button,
html [type="button"],
[type="reset"],
[type="submit"] {-webkit-appearance: button;/* 2 */
}
/*** Remove the inner border and padding in Firefox.*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {border-style: none;padding: 0;
}
/*** Restore the focus styles unset by the previous rule.*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;
}
/*** Change the border, margin, and padding in all browsers (opinionated).*/
fieldset {border: 1px solid #c0c0c0;margin: 0 2px;padding: 0.35em 0.625em 0.75em;
}
/*** 1. Correct the text wrapping in Edge and IE.* 2. Correct the color inheritance from `fieldset` elements in IE.* 3. Remove the padding so developers are not caught out when they zero out*    `fieldset` elements in all browsers.*/
legend {box-sizing: border-box;/* 1 */color: inherit;/* 2 */display: table;/* 1 */max-width: 100%;/* 1 */padding: 0;/* 3 */white-space: normal;/* 1 */
}
/*** 1. Add the correct display in IE 9-.* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.*/
progress {display: inline-block;/* 1 */vertical-align: baseline;/* 2 */
}
/*** Remove the default vertical scrollbar in IE.*/
textarea {overflow: auto;
}
/*** 1. Add the correct box sizing in IE 10-.* 2. Remove the padding in IE 10-.*/
[type="checkbox"],
[type="radio"] {box-sizing: border-box;/* 1 */padding: 0;/* 2 */
}
/*** Correct the cursor style of increment and decrement buttons in Chrome.*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {height: auto;
}
/*** 1. Correct the odd appearance in Chrome and Safari.* 2. Correct the outline style in Safari.*/
[type="search"] {-webkit-appearance: textfield;/* 1 */outline-offset: -2px;/* 2 */
}
/*** Remove the inner padding and cancel buttons in Chrome and Safari on macOS.*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {-webkit-appearance: none;
}
/*** 1. Correct the inability to style clickable types in iOS and Safari.* 2. Change font properties to `inherit` in Safari.*/
::-webkit-file-upload-button {-webkit-appearance: button;/* 1 */font: inherit;/* 2 */
}
/* Interactive========================================================================== */
/** Add the correct display in IE 9-.* 1. Add the correct display in Edge, IE, and Firefox.*/
details,
menu {display: block;
}
/** Add the correct display in all browsers.*/
summary {display: list-item;
}
/* Scripting========================================================================== */
/*** Add the correct display in IE 9-.*/
canvas {display: inline-block;
}
/*** Add the correct display in IE.*/
template {display: none;
}
/* Hidden========================================================================== */
/*** Add the correct display in IE 10-.*/
[hidden] {display: none;
}
body {background-color: #F0F0F0;
}
.main {padding-bottom: 1.33333333rem;
}
.main .banner {height: 4.26666667rem;
}
.main .title {height: 1.06666667rem;line-height: 1.06666667rem;padding-left: 0.4rem;
}
.main .title h4 {font-size: 0.37333333rem;color: #3C3C3C;
}
.main .item {margin-bottom: 0.26666667rem;
}
.main .item .pic {position: relative;height: 4.26666667rem;
}
.main .item .pic i {position: absolute;right: 0.48rem;top: 0.4rem;font-size: 0.64rem;color: #FFF;
}
.main .item .pic .active {position: absolute;top: -0.10666667rem;left: 0.4rem;width: 1.81333333rem;height: 0.77333333rem;background-image: url(../images/status_active.png);background-size: contain;font-size: 0.32rem;color: #FFF;text-align: center;line-height: 0.66666667rem;
}
.main .item .pic .active.off {background-image: url(../images/status_default.png);
}
.main .item .txt {padding: 0.26666667rem 0.4rem;background-color: #fff;
}
.main .item .txt .top {display: flex;justify-content: space-between;
}
.main .item .txt .top h5 {width: 7.73333333rem;font-size: 0.4rem;font-weight: normal;color: #3C3C3C;letter-spacing: 0.0056rem;line-height: 0.56rem;
}
.main .item .txt .top p {font-size: 0.4rem;color: #FE6249;line-height: 0.56rem;
}
.main .item .txt .bottom {display: flex;margin-top: 0.21333333rem;
}
.main .item .txt .bottom p {margin-right: 0.4rem;font-size: 0.29333333rem;color: #B4B4B4;
}
.main .item .txt .bottom p i {font-size: 0.29333333rem;
}
.main .item .txt .bottom p span {margin-left: 0.05333333rem;
}
footer {position: fixed;left: 0;bottom: 0;display: flex;justify-content: space-around;align-items: center;width: 100%;height: 1.33333333rem;background-color: #FECA49;text-align: center;
}
footer a {color: #D78B09;font-size: 0.29333333rem;
}
footer a .icofont {font-size: 0.8rem;
}
footer a.current {color: #FFF;
}

less

@import "./base.less";
@import "./normalize.less";// 变量：存储37.5，根字号
@rootSize: 37.5rem;
body {background-color: #F0F0F0;
}// 主体内容
.main {// padding-bottom: (50 / 37.5rem);padding-bottom: (50 / @rootSize);// banner.banner {height: (160 / @rootSize);}// 活动标题.title {height: (40 / @rootSize);line-height: (40 / @rootSize);padding-left: (15 / @rootSize);h4 {font-size: (14 / @rootSize);color: #3C3C3C;}}.item {margin-bottom: (10 / @rootSize);// 图.pic {position: relative;height: (160 / @rootSize);// 收藏的图标i {position: absolute;right: (18 / @rootSize);top: (15 / @rootSize);font-size: (24 / @rootSize);color: #FFF;}   // 活动状态.active {position: absolute;top: (-4 / @rootSize);left: (15 / @rootSize);// 图片宽高width: (68 / @rootSize);height: (29 / @rootSize);background-image: url(../images/status_active.png);// 缩放至图片完全显示出来background-size: contain;font-size: (12 / @rootSize);color: #FFF;text-align: center;line-height: (25 / @rootSize);// 设置灰色图片的样式// .active .off {} 必须是active类同时应用了off类// .div .off {} 叫交集选择器&.off {background-image: url(../images/status_default.png);}}// .off {//     // 灰色图片// }}// 文字.txt {padding: (10 / @rootSize) (15 / @rootSize);background-color: #fff;.top {display: flex;// 文字各占两边justify-content: space-between;h5 {// 定义一个宽，自动换行width: (290 / @rootSize);font-size: (15 / @rootSize);font-weight: normal;color: #3C3C3C;letter-spacing: (0.21 / @rootSize);line-height: (21 / @rootSize);}p {font-size: (15 / @rootSize);color: #FE6249;line-height: (21 / @rootSize);}}.bottom {display: flex;margin-top: (8 / @rootSize);p {margin-right: (15 / @rootSize);font-size: (11 / @rootSize);color: #B4B4B4;i {font-size: (11 / @rootSize);}span {margin-left: (2 / @rootSize);}}}}}
}// 底部工具栏
footer {// 固定定位，在页面不占位置，已脱标position: fixed;left: 0;bottom: 0;display: flex;justify-content: space-around;align-items: center;width: 100%;// height: (50 / 37.5rem);height: (50 / @rootSize);background-color: #FECA49;text-align: center;a {color: #D78B09;font-size: (11 / @rootSize);.icofont {font-size: (30 / @rootSize);}// a.current {}// 注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用&.current {color: #FFF;}}}

124-移动端游乐园项目相关推荐

flask部署机器学习_如何开发端到端机器学习项目并使用Flask将其部署到Heroku
flask部署机器学习 There's one question I always get asked regarding Data Science: 关于数据科学,我经常被问到一个问题: What ...
《iVX 高仿美团APP制作移动端完整项目》03 推介信息及推荐商家分析及制作
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.推荐信息制作推荐信息与之前的标题下推荐信息制作类似: 此时依旧创建一 ...
《iVX 高仿美团APP制作移动端完整项目》02 搜索、搜索提示及类别需求分析思路及制作流程
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.搜索制作在上一节中我们完成了标题头的制作,接下来我们查看如何制作搜索 ...
《iVX 高仿美团APP制作移动端完整项目》01 标题需求分析思路及制作流程
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.创建项目首先打开在线编辑器地址:https://editor.ivx ...
分享一份完整内容高端企业项目成本管理培训PPT模板
项目成本管理是指为保障项目实际发生的成本不超过项目预算而开展的项目资源计划.成本估算.成本预算和成本控制等方面的管理活动.项目成本管理也是为确保项目在批准的预算内按时.按质.经济.高效地完成项目的既定 ...
P72-前端基础项目开发-首页main部分开发Banner
P72-前端基础项目开发-首页main部分开发Banner 1.概述这篇文章开发首页Banner图,实现banner图上左右两个箭头点击效果和图片右下角5个小点切换效果 2.Banner图 2.1. ...
自动化测试---移动端自动化测试项目搭建（Appium+IDEA）
自动化测试---移动端自动化测试项目搭建(Appium+IDEA) 模拟器+Appium操作 IDEA项目搭建模拟器+Appium操作首先打开黑窗口输入命令注:具体命令可看上一篇博客第一步从 ...
移动端Vue项目a标签点击事件无效
移动端Vue项目a标签点击事件无效近期项目出现了部分机型点击无效的现象,后来定位到原来是a标签的问题,将a标签更换为div标签,加宽加高点击范围,就可以解决这个问题. // a标签点击事件不生效 & ...
欧美软件/IT高端外包项目的竞争和管理高管研修班
若您无法阅,请点击http://www.msup.com.cn/event/bpo/index.html 尊敬的阁下: 目前,服务外包的市场潜力巨大,但中国的服务外包产业尚处于起步阶段.我 ...

124-移动端游乐园项目

124-移动端游乐园项目相关推荐

最新文章

热门文章