一、gulp开发环境搭建
gulp环境搭建,之前已整理过,这就不细讲,地址:前端自动化构建基础,以及相关插件使用(gulp篇)_觉醒法师的博客-CSDN博客
二、编辑工具
这里使用EditPlus超文本编辑器,如果想锻炼语法和熟记单词,可以手敲。想快速开发,可以在EditPlus中安装zen coding,使用Emmet语法,也可以媲美其他高级IDE工具。
Emmet语法地址:前端开发中,使用Emmet语法提升开发效率_觉醒法师的博客-CSDN博客
三、基本架构
3.1 Gulp项目目录
这部分,前端自动化构建基础中已讲过,不明白同学可以先看看这篇文章。
3.2 项目资源目录
assets资源目录,创建对应的css,图片,js和html文件。
template目录中,创建公共模板,这里创建是公共头部header.html,公共尾部footer.html和公共侧边栏aside.html,首页公共盒子模块indexBox.html。
3.3 页面结构分析
公共头部文件,每个页面都是一样的,这部分将放到header.html模块中。
公共尾部文件,这部分将放到footer.html模块中。
列表页和文章详情页,左侧和右侧上面部分是相同的,这部分将放到aside.html模块中。
如上图,首页中五个区域有共同部分组件,盒子标题,更多,以及内容三块,这三部分将放到indexBox.html模块中。
四、首页代码编写
4.1 header.html模块
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>{{title}} - 网站名称</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<dataList>
{
"navList": [
{"name": "首页", "enName": "home", "url": "index.html"},
{"name": "新闻动态", "enName": "news", "url": "news.html"},
{"name": "旅游项目", "enName": "project", "url": "javascript:;"},
{"name": "服务项目", "enName": "services", "url": "javascript:;"},
{"name": "公司产业", "enName": "entertainment", "url": "javascript:;"},
{"name": "联系我们", "enName": "contact us", "url": "javascript:;"},
]
}
</dataList>
<div class="navigation" id="navBox">
<div class="container">
<ul class="list">
{{each navList as item i}}
<li {{if nIndex==i }}class="act"{{/if}}>
<a href="{{item.url}}">{{item.name}}<span class="en">{{item.enName}}</span></a>
</li>
{{/each}}
</ul>
</div>
</div>
{{if banner}}
<div class="banner-box">
<div class="container">
<img src="{{banner}}" alt="">
</div>
</div>
{{/if}}
4.2 footer.html模块
<div class="footer">
<div class="container">
<p>Copyright @ 2011-2012 XXXX度假村有限公司 版权所有 All Right Reserved. 苏ICP备XXX号</p>
<p>地址:XXXX 邮编:211300 电话:025-XXXXXXXX</p>
</div>
</div>
</body>
</html>
4.3 indexBox.html模块
<div class="index-box">
<div class="title">
<a href="javascript:;">更多</a>
<h3>{{title}}</h3>
</div>
<div class="content">
{{# content}}
</div>
</div>
4.4 index.html页面及模块引入
<template src="header.html"
title="首页"
nIndex="0"
banner="images/index_banner.jpg"
></template>
<div class="main-box">
<div class="container">
<div class="first-row-box">
<template src="indexBox.html" title="最新活动">
<fragment id="content">
内容
</fragment>
</template>
<template src="indexBox.html" title="旅游项目">
<fragment id="content">
内容
</fragment>
</template>
</div>
<div class="second-row-box">
<template src="indexBox.html" title="旅游咨询">
<fragment id="content">
内容
</fragment>
</template>
<template src="indexBox.html" title="贵宾服务">
<fragment id="content">
内容
</fragment>
</template>
<template src="indexBox.html" title="招聘信息">
<fragment id="content">
内容
</fragment>
</template>
</div>
</div>
</div>
<template src="footer.html"></template>
这样首页基础架构就出现了,是不是看上去so easy,代码简洁,各模块清晰。现在首页是这样的,如下所示:
4.5 页面优化,添加CSS样式
现在咱们在css目录,添加style.scss样式文件(现在主流预编译工具有sass,less,styuls,可去了解自己熟悉的编译工具),在header.html模块中title标签后面,引入样式文件。
<link rel="stylesheet" href="css/style.css" />
头部、盒子、尾部样式代码
/*样式文件*/
*{ margin: 0; padding: 0; font-size: 12px; font-family: 'Microsoft YaHei', sans-serif; }
.container{ width: 980px; margin: 0 auto; }
.clearfix{ clear: both; }
.navigation{ background: #017E3A;
ul.list{ width: 100%; display: table; height: 54px;
li{ width: 16%; display: table-cell; vertical-align: middle; text-align: center;
a{ font-size: 16px; color: #FFFFFF; text-decoration: none;
span.en{ display: block; }
}
&.act{
background: linear-gradient(top, #D6FF69, #6EB101);
background: -webkit-linear-gradient(top, #D6FF69, #6EB101);
border-radius: 3px;
text-shadow: 0 0 blur #000
}
}
}
}
.banner-box{ padding: 10px 0;
img{ width: 100%; }
}
.footer{
background: #017E3A;
font-size: 12px;
color: #FFFFFF;
line-height: 2;
text-align: center;
padding: 20px 0;
}
.index-box{ width: 100%;
.title{
padding: 10px 15px;
background: linear-gradient(top, #96EA01, #7BC500);
background: -webkit-linear-gradient(top, #96EA01, #7BC500);
border-radius: 3px;
h3{ font-size: 14px; color: #FFFFFF; }
a{ font-size: 12px; color: #FFFFFF; text-decoration: none; float: right; }
}
.content{ padding: 10px 0; }
}
.main-box{
.first-row-box, .second-row-box{
.index-box{ margin-left: 2%; margin-bottom: 10px; float: left;
&:first-child{ margin-left: 0; }
}
}
.first-row-box{
.index-box{ width: 49%; }
}
.second-row-box{
.index-box{ width: 32%; }
}
}
添加完样式后,如下图所示:
4.6 首页其他部分代码及样式
略..... 这部分比较简单,大家自行补充即可。
五、新闻列表页
5.1 aside.html模块
<dataList>
{
"menuList": [
{"name": "园区新闻", "url": "javascript:;"},
{"name": "旅游咨询", "url": "javascript:;"},
{"name": "供求信息", "url": "javascript:;"},
]
}
</dataList>
<div class="aside-container">
<div class="container">
<div class="aside-menu">
<h2>{{title}}</h2>
<ul class="list">
{{each menuList as item}}
<li><a href="{{item.url}}">>> {{item.name}}</a></li>
{{/each}}
</ul>
</div>
<div class="aside-content">
<div class="position">
<h3>{{title}}</h3>
<p class="right">
<span>当前位置</span> >
<a href="javascript:;">首页</a> >
<span>{{title}}</span>
</p>
<div class="clearfix"></div>
</div>
<div class="content">
{{# content}}
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
5.2 列表页
<template src="header.html" title="新闻" nIndex="1" banner="images/inner_banner.jpg"></template>
<template src="aside.html" title="新闻中心">
<fragment id="content">
内容
</fragment>
</template>
<template src="footer.html"></template>
5.3 aside部分样式
.aside-container{ padding-bottom: 20px;
.aside-menu{
width: 20%;
border: 1px solid #cfff9f;
background: -webkit-linear-gradient(top, #ffffff, #d8ffae);
float: left;
h2{
font-size: 20px;
color: #a48d66;
font-weight: normal;
padding: 12px 0;
text-align: center;
border-bottom: 2px solid #017e3a;
}
ul.list{ padding: 10px 0;
li{ list-style: none; text-align: center; padding: 10px 0;
a{ font-size: 14px; color: #54594f; text-decoration: none; }
}
}
}
.aside-content{ width: 78%; float: right;
.position{ padding: 12px 0; border-bottom: 2px solid #017e3a; color: #429361;
h3{ font-size: 20px; font-weight: normal; float: left; }
p.right{ float: right;
a{ color: #429361; text-decoration: none; }
}
}
.content{ padding: 15px 0; }
}
}
列表页样式如下:
5.4 添加列表内容和样式
<template src="header.html" title="新闻" nIndex="1" banner="images/inner_banner.jpg"></template>
<dataList>
{
"newsList": [
{
"title": "望玉岛一日游方案",
"thumb": "images/img_01.jpg",
"content": "活动主题:放飞心情,走进自然 活动地点:望玉岛度假村 行程特点:领略望玉"
+"岛谷激情,感受大山文化品农家菜。行程安排; 第一日 : 12:00 —————— "
+"13:00 前往望玉岛安排午餐及住宿事宜13:30 ———— 17:30 宾客就近观赏景……。",
"url": ""
},
{
"title": "望玉岛一日游方案",
"thumb": "images/img_02.jpg",
"content": "活动主题:放飞心情,走进自然 活动地点:望玉岛度假村 行程特点:领略望玉"
+"岛谷激情,感受大山文化品农家菜。行程安排; 第一日 : 12:00 —————— "
+"13:00 前往望玉岛安排午餐及住宿事宜13:30 ———— 17:30 宾客就近观赏景……。",
"url": ""
},
{
"title": "望玉岛一日游方案",
"thumb": "images/img_03.jpg",
"content": "活动主题:放飞心情,走进自然 活动地点:望玉岛度假村 行程特点:领略望玉"
+"岛谷激情,感受大山文化品农家菜。行程安排; 第一日 : 12:00 —————— "
+"13:00 前往望玉岛安排午餐及住宿事宜13:30 ———— 17:30 宾客就近观赏景……。",
"url": ""
}
]
}
</dataList>
<template src="aside.html" title="新闻中心">
<fragment id="content">
<div class="news-list-box">
{{each newsList as item}}
<dl class="item">
<dd class="tit">{{item.title}}</dd>
<dt><img src="{{item.thumb}}" alt=""></dt>
<dd>
{{item.content}} <a href="article.html">[详情情况]</a>
</dd>
</dl>
{{/each}}
</div>
</fragment>
</template>
<template src="footer.html"></template>
.news-list-box{
dl.item{ border: 1px solid #017e3a; margin-bottom: 20px;
&:after{ display: block; content: ''; clear: both; }
dt, dd{ padding: 10px; box-sizing: border-box; }
dt{ width: 20%; float: left;
img{ width: 100%; }
}
dd{ width: 80%; font-size: 12px; color: #999999; float: right;
a{ color: #89c524; text-decoration: none; }
}
dd.tit{
width: 100%;
font-size: 14px;
color: #429361;
border-bottom: 1px solid #017e3a;
padding: 6px 10px;
float: none;
}
}
}
现在列表页是这样的,如下图:
六、详情页
在列表页中,已将公共部分完成,只需添加内容部分即可。
<template src="header.html" title="新闻-详情" nIndex="1" banner="images/inner_banner.jpg"></template>
<template src="aside.html" title="新闻中心">
<fragment id="content">
<div class="article-box">
<div class="title">
<h3>望玉岛度假村一日游活动方案</h3>
<p class="intro">
<span class="read">阅读数:180</span>
<span class="date">加入时间:2015-03</span>
</p>
</div>
<div class="content">
<p>活动主题:放飞心情,走进自然</p>
<p>活动地点:望玉岛度假村</p>
<p>行程特点:领略望玉岛谷激情,感受大山文化,品农家菜</p>
<p>行程安排:</p>
<p>第一日:12:00 —— 13:00 前往望玉岛安排午餐及住宿事宜。</p>
<p>13:30 —— 17:30宾客就近观赏景观拍照,可进行采摘或放风筝(酒店提供)</p>
<p>17:30 —— 20:30 晚宴开始</p>
</div>
</div>
</fragment>
</template>
<template src="footer.html"></template>
.article-box{
.title{ color: #a48d66;
h3{ font-size: 18px; text-align: center; border-bottom: 1px dashed #95c83d; padding: 10px 0px; }
p.intro{ text-align: center; padding: 10px 0 20px; font-size: 12px;
span{ display: inline-block; padding: 0 5px; }
}
}
.content{ color: #a48d66; font-size: 12px; line-height: 1.8; }
}
现在详情页是这样的,如下图:
七、实现响应式布局
以上简单介绍了首页、新闻列表页、详情页的开发过程,现在对每个部分的样式,通过媒体查询进行修饰下,即可实现在不同屏幕上的响应式布局了。
7.1 header.html模块样式
html部分修改:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>{{title}} - 网站名称</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<dataList>
{
"navList": [
{"name": "首页", "enName": "home", "url": "index.html"},
{"name": "新闻动态", "enName": "news", "url": "news.html"},
{"name": "旅游项目", "enName": "project", "url": "javascript:;"},
{"name": "服务项目", "enName": "services", "url": "javascript:;"},
{"name": "公司产业", "enName": "entertainment", "url": "javascript:;"},
{"name": "联系我们", "enName": "contact us", "url": "javascript:;"},
]
}
</dataList>
<div class="navigation" id="navBox">
<div class="container">
<div class="mobile-menu">
<span></span>
<span></span>
<span></span>
</div>
<ul class="list">
{{each navList as item i}}
<li {{if nIndex==i}}class="act"{{/if}}>
<a href="{{item.url}}">{{item.name}}<span class="en">{{item.enName}}</span></a>
</li>
{{/each}}
</ul>
</div>
</div>
{{if banner}}
<div class="banner-box">
<div class="container">
<img src="{{banner}}" alt="">
</div>
</div>
{{/if}}
css部分修改:
@media screen and (max-width: 980px){
body{ padding-top: 60px; }
}
.container{ width: 980px; margin: 0 auto;
@media screen and (max-width: 980px){
&{ width: 100%; box-sizing: border-box; padding: 0 15px; }
}
}
.clearfix{ clear: both; }
.navigation{ background: #017E3A;
ul.list{ width: 100%; display: table; height: 54px;
li{ width: 16%; display: table-cell; vertical-align: middle; text-align: center;
a{ font-size: 16px; color: #FFFFFF; text-decoration: none;
span.en{ display: block; }
}
&.act{
background: linear-gradient(top, #D6FF69, #6EB101);
background: -webkit-linear-gradient(top, #D6FF69, #6EB101);
border-radius: 3px;
text-shadow: 0 0 blur #000
}
}
}
.mobile-menu{ display: none; width: 30px; position: absolute; top: 50%; right: 15px; margin-top: -10px;
span{ display: block; width: 100%; height: 4px; background: #FFFFFF; margin-bottom: 4px; }
}
@media screen and (max-width: 980px){
&{ width: 100%; height: 60px; position: fixed; top: 0; left: 0; z-index: 99;
&:before{
display: block;
content: '';
width: 210px;
height: 60px;
background: #017E3A;
position: fixed;
top: 0;
left: 0;
z-index: 97;
}
ul.list{
display: block;
width: 200px;
height: 100%;
background: #FFFFFF;
border: 0;
box-sizing: border-box;
padding-top: 60px;
position: fixed;
left: 0;
right: 0;
z-index: 95;
li{ display: block; width: 100%; padding: 10px 0; border-bottom: 1px solid #6EB101;
a{ color: #89c524; }
&.act{ border-bottom-color: #FFFFFF;
a{ color: #FFFFFF; }
}
}
}
.mobile-menu{ display: block; }
}
}
}
现在页面如下图所示:
7.2 footer.html模块样式
这里底部模块比较简单,屏幕大小变化后,影响并不大,这里不作优化。
7.3 首页样式
css部分修改:
.main-box{
.first-row-box, .second-row-box{
.index-box{ margin-left: 2%; margin-bottom: 10px; float: left;
&:first-child{ margin-left: 0; }
}
}
.first-row-box{
.index-box{ width: 49%; }
}
.second-row-box{
.index-box{ width: 32%; }
}
@media screen and (max-width: 980px){
.second-row-box{
.index-box{ width: 49%;
&:nth-child(2n+1){ margin-left: 0; }
}
}
}
@media screen and (max-width: 640px){
.first-row-box, .second-row-box{
.index-box{ width: 100%; margin: 0 0 10px;}
}
}
}
现在样式在980px以下,以及640px以下样式如下图:
一般要求不高的项目,只提供PC端页面,这时前端可以自由发挥,在较小屏幕上显示时,调整比较美观即可,一般有美术功底的前端会比较占优势。要求较高的项目,提供PC和移动端设计稿时,也可以通过媒体查询,在不同尺寸范围内,显示不同布局。
7.4 aside.html模块样式
CSS部分修改:
.aside-container{ padding-bottom: 20px;
.aside-menu{
width: 20%;
border: 1px solid #cfff9f;
background: -webkit-linear-gradient(top, #ffffff, #d8ffae);
float: left;
h2{
font-size: 20px;
color: #a48d66;
font-weight: normal;
padding: 12px 0;
text-align: center;
border-bottom: 2px solid #017e3a;
}
ul.list{ padding: 10px 0;
li{ list-style: none; text-align: center; padding: 10px 0;
a{ font-size: 14px; color: #54594f; text-decoration: none; }
}
}
}
.aside-content{ width: 78%; float: right;
.position{ padding: 12px 0; border-bottom: 2px solid #017e3a; color: #429361;
h3{ font-size: 20px; font-weight: normal; float: left; }
p.right{ float: right;
a{ color: #429361; text-decoration: none; }
}
}
.content{ padding: 15px 0; }
}
@media screen and (max-width: 980px){
.aside-menu, .aside-content{ width: 100%; }
.aside-menu{
ul.list{ width: 100%; overflow-x: scroll; white-space: nowrap;
li{ display: inline-block; vertical-align: middle; padding: 0 10px; }
}
}
.aside-content{
.position{ display: none; }
}
}
}
现在页面如下图:
这部分,是将二级菜单横向处理了,如果二级菜单过多,横向显示,超出部分会自动出现滚动条,可左右滑动查看。仁者见仁智者见智,大家有更好方式可自行修改。
7.5 新闻列表页样式
CSS样式修改:
.news-list-box{
dl.item{ border: 1px solid #017e3a; margin-bottom: 20px;
&:after{ display: block; content: ''; clear: both; }
dt, dd{ padding: 10px; box-sizing: border-box; }
dt{ width: 20%; float: left;
img{ width: 100%; }
}
dd{ width: 80%; font-size: 12px; color: #999999; line-height: 1.8; float: right;
a{ color: #89c524; text-decoration: none; }
}
dd.tit{
width: 100%;
font-size: 14px;
color: #429361;
border-bottom: 1px solid #017e3a;
padding: 6px 10px;
float: none;
}
}
@media screen and (max-width: 980px){
dl.item{
dd, dt{ float: none; width: 100%; }
dt{ text-align: center;
img{ width: auto; max-width: 100%; }
}
}
}
}
页面如下图所示:
PC端图文是左右显示,小屏上左右显示不满足情况下,可以改为竖向显示。
7.6 详情页样式
详情页内容不多,这就不作说明。
八、JS实现移动端导航显示与隐藏
这里可以在js目录里,创建一个公共的common.js,common.js之前要引入jquery,到header.html模块中。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
html代码修改,添加对应ID选择器:
<div class="navigation" id="navBox">
<div class="container">
<div class="mobile-menu" id="mobileMenu">
<span></span>
<span></span>
<span></span>
</div>
<ul class="list" id="navList">
{{each navList as item i}}
<li {{if nIndex==i}}class="act"{{/if}}>
<a href="{{item.url}}">{{item.name}}<span class="en">{{item.enName}}</span></a>
</li>
{{/each}}
</ul>
</div>
</div>
JS代码:
$(function(){
$(document).on('click', '#mobileMenu', function(){
var _navList = $('#navList');
if(_navList.is(":hidden")){
_navList.show();
}else{
_navList.hide();
}
});
});
这里所介绍页面还是比较简单的,复杂的页面处理起来,需要更多优化和处理。这里就先介绍这么多,希望这些能帮助到初学者。