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

作者: Lisburn | 来源:发表于2020-07-24 18:21 被阅读0次

PC

一、文档树

普通页面

根目录

Module [ 视图 ]

Index [ 图层 ]

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

公共文件夹

Common
公共模块说明.txt

Header

img
css
js
Header.html

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

WebUI

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

二、须知

显示安全区域

width: 1200px; height: auto;
<!-- 还需提供兼容 1366 × 768 设备的显示方法 -->

可选的优化方案 [ 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

可选的优化方案 [ LAZYLOAD IMG ]

<img class="lazy" src="img/loading.gif" data-original="" alt="图片加载失败,请刷新后重试" />
<!-- data-original=" XXX " XXX为图片真实路径 -->

链接：Jquery.lazyload

可选的优化方案 [ CSS解析 ]

/* css解析方式是从后向前解析的 */
/* EXP */
.container .container-fall .header-logo{
    
}
.container div img{
    
}
/* 前者解析速度大于后者解析速度 */

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

图片的处理 [ 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>

图片自适应

<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>

页面载入动画

<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>

三、正式开始

初始化

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  </body>
</html>

<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>

<script></script>标签应放入<body></body>标签中并按顺序引入

<body>
  <script src="" type="text/javascript"></script>
</body>

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

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

链接：更多标签

五、命名规范及书写规范

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

头部

        <!-- 头部 -->
        <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>
        <!-- 头部结束 -->

主体 [ 独立布局 ]

        <!-- 内容主体 -->
        <!-- 文化资讯 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 -->

主体 [ 切屏 ]

        <!-- 内容主体 -->
        <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>

足部

        <!-- 足部开始 -->
        <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>
        <!-- 足部结束 -->

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

PC

一、文档树

二、须知

三、正式开始

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

五、命名规范及书写规范

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

初学前端

前端

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

PC

一、文档树

二、须知

三、正式开始

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

五、命名规范 及 书写规范

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

初学前端

前端

五、命名规范及书写规范