上海上业前端技术规范文档

PC

一、文档树

  1. 普通页面

根目录

Module [ 视图 ]

Index [ 图层 ]

css [ index.css ]
fonts [ 字体图标文件 ]
img [ icon-img ]
image [ 临时图片 ]
js [index.js]
index.html
首页.txt [ 文档说明 ]

  1. 公共文件夹

Common
公共模块说明.txt

Header

img
css
js
Header.html

  1. 所有公共组件 / 插件 / 框架

WebUI

fonts [ 通用字体图标 ]
css [ 通用样式 ]
js [ 公共JS ]
img [ 公共图片 ]
plugins [ 通用组件 ]

二、须知

  1. 显示安全区域
width: 1200px; height: auto;
<!-- 还需提供兼容 1366 × 768 设备的显示方法 -->
  1. 可选的优化方案 [ CDN ]
<!-- CDN引入 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- CDN加载失败处理方法 -->
<script type="text/javascript">
  window.jQuery || document.write('<script src="js/jquery-3.4.1.js"><\/script>');
</script>

链接：BootCDN

  1. 可选的优化方案 [ LAZYLOAD IMG ]
<img class="lazy" src="img/loading.gif" data-original="" alt="图片加载失败,请刷新后重试" />
<!-- data-original=" XXX " XXX为图片真实路径 -->

链接：Jquery.lazyload

  1. 可选的优化方案 [ CSS解析 ]
/* css解析方式是从后向前解析的 */
/* EXP */
.container .container-fall .header-logo{
    
}
.container div img{
    
}
/* 前者解析速度大于后者解析速度 */

WARNNING：禁止为了提高解析速度而为所有类都添加类名

  1. 图片的处理 [ 16 : 9 ]
<div style="position: relative;width:100%;padding-top:56.2%;background: #c3e6c2;">
  <img
  style=" max-width:100%;
  max-height:100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;" 
  src="" alt="图片加载失败,请刷新后重试"
/>
</div>
  1. 图片自适应
<style type="text/css">
  .img-box{
    width: 200px;
    height: 200px;
  }
  .img-box img{
    max-width: 100%;
    max-height: 100%;
  }
</style>
<div class="img-box">
  <img>
</div>
  1. 页面载入动画
<link rel="stylesheet" type="text/css" href="css/pageloader.css"/>
<div class="page-loader" id="page-loader">
  <div>
    <i class="ion ion-loading-d"></i>
    <p></p>
  </div>
</div>

三、正式开始

  1. 初始化
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  </body>
</html>
  1. <head></head>标签中应包含如下标签
<meta charset="utf-8" />
<!-- 本站语言 -->
<meta http-equiv="Content-Language" content="zh-CN" />
<!-- 安全 -->
<!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none';  child-src https:"> -->
<!-- 优先使用 IE 和 CHROME 最新版渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 设置谷歌内核 -->
<meta name="renderer" content="webkit">
<!-- 360浏览器兼容 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<!-- 网页关键词 -->
<meta name="keywords" content="文化云,NAME文化云,文化NAME云,公共文化,公共文化服务,互联网+,文化+,活动,文化活动,NAME文化活动,活动预约,免费活动,NAME免费活动">
<!-- 站点主要内容 -->
<meta name="description" content="文化云-一款聚焦文化领域，提供公共文化生活服务和文化消费的文化互联网平台，展示NAME地区公共服务建设的一个公益性平台，展示了包括NAME的公共文化活动，各类文化场馆门户子平台，文化相关资讯，志愿活动和志愿者风采，网上数字资源等信息，包含市民互动，线上报名等交互性功能，包含大量的非遗资源，是NAME公共文化服务领域的一张名片。">
<!-- 网页作者 -->
<meta name="author" content="name, email@gmail.com"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- iOS 设备 BEGIN -->
<meta name="apple-mobile-web-app-title" content="网站名称"> 
<!-- IOS中Safari允许全屏浏览 -->
<meta content="yes" name="apple-mobile-web-app-capable"/>
<!-- IOS中Safari顶端状态条样式 -->
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<!-- 忽略将数字变为电话号码 -->
<meta content="telephone=no" name="format-detection"/>
<!-- 先发送请求与服务器确认该资源是否被更改，如果未被更改则使用缓存 -->
<meta http-equiv="cache-control" content="no-cache">
<!-- 禁止百度自动转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 控制显示区域各种属性 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<!-- 网站名称 -->
<title>网站名称</title>
<!-- 载入动画 -->
<link rel="stylesheet" type="text/css" href="/Cloud/WebUI/css/pageloader.css">
<!-- 样式 -->
<link rel="stylesheet" type="text/css" href="">
<!-- HTML5标签解析的简单兼容 -->
<script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.js"></script>
  1. <script></script>标签应放入<body></body>标签中并按顺序引入
<body>
  <script src="" type="text/javascript"></script>
</body>

四、更加规范的 HTML5 标签使用

  1. 头部
    <header></header>
  2. 底部
    <footer></footer>
  3. 侧边导航栏
    <aside></aside>
  4. 导航栏
    <nav></nav>
  5. 视屏 / 音频 / 路径引入
    <video></video>
    <audio></audio>
    <source/>

链接：更多标签

五、命名规范 及 书写规范

请将 BEGIN && END 的注释一定存在代码段中

  1. 头部
        <!-- 头部 -->
        <header class="head-container">
            <div class="head-content">
                <!-- 网站LOGO BEGIN -->
                <div class="head-logo"></div>
                <!-- 网站LOGO END -->
                <!-- 搜索框 BEGIN -->
                <div class="head-search">
                    <input class="head-search-text" type="" name="" id="" value="" />
                    <button class="head-search-button"></button>
                </div>
                <!-- 搜索框 END -->
                <!-- 地址栏 BEGIN -->
                <div class="head-address">
                    <div class="head-address-show"></div>
                    <ul class="head-address-list">
                        <li class="address-active"></li>
                        <li></li>
                    </ul>
                </div>
                <!-- 地址栏 END -->
                <!-- 导航栏 BEGIN -->
                <div class="head-nav">
                    <nav>
                        <!-- 一级导航 -->
                        <ul class="nav-level-one">
                            <li class="nav-active">
                                <!-- 二级导航 -->
                                <ul class="nav-level-two">
                                    <li>
                                        <!-- 三级导航 -->
                                        <ul class="nav-level-thr"></ul>
                                    </li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </li>
                            <li></li>
                            <li></li>
                        </ul>
                    </nav>
                    <!-- 导航栏 END -->
                </div>
            </div>
        </header>
        <!-- 头部结束 -->
  1. 主体 [ 独立布局 ]
        <!-- 内容主体 -->
        <!-- 文化资讯 BEGIN -->
        <main class="main-container">
            <div class="main-info">
                <h3 class="main-title"></h3>
                <div class="main-info-content"></div>
                <a class="more-button" href="javascript:void(0);">查看更多</a>
            </div>
        </main>
        <!-- 文化资讯 END -->
        <!-- 文化活动 BEGIN -->
        <main class="main-container">
            <div class="main-activity">
                <h3 class="main-title"></h3>
                <div class="main-activity-content"></div>
                <a class="more-button" href="javascript:void(0);">查看更多</a>
            </div>
        </main>
        <!-- 文化活动 END -->
  1. 主体 [ 切屏 ]
        <!-- 内容主体 -->
        <main class="main-fullpage">
            <div class="main-container">
                <!-- ———————————— 一楼 文化资讯 ———————————— -->
                <div class="fl-first">
                    <div class="main-info">
                        <h3 class="main-title"></h3>
                        <div class="main-info-content"></div>
                        <a class="more-button" href="javascript:void(0);">查看更多</a>
                    </div>
                </div>
                <!-- ———————————— 二楼 文化活动 ———————————— -->
                <div class="fl-second">
                    <div class="main-activity">
                        <h3 class="main-title"></h3>
                        <div class="main-activity-content"></div>
                        <a class="more-button" href="javascript:void(0);">查看更多</a>
                    </div>
                </div>
                <!-- ———————————— 三楼 文化场馆 ———————————— -->
                <div class="fl-third"></div>
                <!-- ———————————— 四楼 文化地图 ———————————— -->
                <div class="fl-fouth"></div>
                <!-- ———————————— 五楼 非遗特色 ———————————— -->
                <div class="fl-fivth"></div>
            </div>
        </main>
  1. 足部
        <!-- 足部开始 -->
        <footer class="foot-container">
            <div class="foot-content">
                <!-- 事业单位图标 -->
                <div class="foot-government"></div>
                <!-- 网站信息 BEGIN -->
                <ul class="foot-website-info">
                    <li>今日到访<var class="foot-visitor">9786</var></li>
                    <li>
                        <!-- 公安部备案编号 BEGIN -->
                        <div class="foot-polic">
                            <!-- 公安图标 -->
                            <img src="" alt="">
                        </div>
                        <!-- 公安部备案编号 结束 -->
                    </li>
                    <li></li>
                    <li>Copyright&copy;2020-2021</li>
                </ul>
                <!-- 网站信息 END -->
                <!-- 多媒体 BEGIN -->
                <div class="foot-multi-media">
                    <!-- 如果分享 -->
                    <!-- <div class="foot-share"></div> -->
                    <div class="wechat"></div>
                    <div class="weibo"></div>
                    <div class="qq"></div>
                    <div class="app-download"></div>
                </div>
                <!-- 多媒体 END -->
            </div>
        </footer>
        <!-- 足部结束 -->
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 218,386评论 6赞 506
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,142评论 3赞 394
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,704评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,702评论 1赞 294
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,716评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,573评论 1赞 305
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,314评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,230评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,680评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,873评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,991评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,706评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,329评论 3赞 330
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,910评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,038评论 1赞 270
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,158评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,941评论 2赞 355

推荐阅读更多精彩内容