zoukankan      html  css  js  c++  java
  • 前端开发规范小结

    规范目的

      为提高团队协作效率,便于后台人员查找及前端后期优化维护,对项目整体的文档进行规范总结。


    文件夹命名
     

    说明:如果对于PC端较少的页面可以*_html, images文件夹可去掉第3层;

     “*”代表的名称依项目的功能模块而定,只需符合文件名称统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字、空格和特殊字符


    关于*_public.css一部分css样式

    PC端

    基本样式
    /*重写浏览器默认样式*/

    body {

        font-size: 1.6rem;

        line-height:1.6;

        font-family:"Microsoft YaHei" arial,courier new,courier,"宋体",monospace;

    }

    *{ margin:0; padding:0; border:none; list-style:none;}

    input,textarea,a{ outline:none;}

    h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}

    address,cite,code,em,th {font-weight:normal; font-style:normal;}

    .fB{font-weight:bold;}

    .f12px{font-size:12px;}

    .f14px{font-size:14px;}

    .left{float:left;}

    .right{float:right;}

     

    /*自定义全局样式*/

    .img_wrap img {100%; display:block;}

    a:hover, a:focus{ text-decoration:none; border:none; }

    a{ text-decoration:none; }

    a,button,input{outline:none;}

     

    /*bootstrap框架样式重写*/

    .clear_padding{

           padding-left:0;

           padding-right:0;

             }

    .clear_padding_l{padding-left:0 !important;}

    .clear_padding_r{padding-right:0 !important;}


    移动端////////////////////////////////////////////////

    html {

       -ms-text-size-adjust: 100%;

       -webkit-text-size-adjust: 100%;

       font-size: 10px;

    }

    body {

        font-size: 1.6rem;

        line-height:1.6;

        font-family:"Microsoft YaHei" arial,courier new,courier,"宋体",monospace;

    }

     

    *{ margin:0; padding:0; border:none; list-style:none;}  

    a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0); outline:none;}    /*去除微信网站的a,button,input,点击出现的蓝色边框*/

    a:focus{ border:none; }

     

    /*amaze框架样式重写*/

    .side_padding{

       padding-left:1rem;

       padding-right:1rem;

       }

    .side_margin{

       margin-left:1rem;

       margin-right:1rem;

     }

    .clear_padding{

           padding-left:0;

           padding-right:0;

             }

    .clear_padding_l{padding-left:0 !important;}

    .clear_padding_r{padding-right:0 !important;}

     

    常用的命名规则:

    头:header

    内容:content/container

    尾:footer

    导航:nav

    侧栏:sidebar

    栏目:column

    页面外围控制整体布局宽度:wrapper

    左右中:left right center

    登录条:loginbar

    标志:logo

    广告:banner

    页面主体:main

    热点:hot

    新闻:news

    下载:download

    子导航:subnav

    菜单:menu

    子菜单:submenu

    搜索:search

    友情链接:friendlink

    页脚:footer

    版权:copyright

    滚动:scroll

    内容:content

    标签页:tab

    文章列表:list

    提示信息:msg

    小技巧:tips

    栏目标题:title

    加入:joinus

    指南:guild

    服务:service

    注册:regsiter

    状态:status

    投票:vote

    合作伙伴:partner

    (二)注释的写法:

    /* Footer */

    内容区

    /* End Footer */

    (三)id的命名:

    (1)页面结构

    容器: container

    页头:header

    内容:content/container

    页面主体:main

    页尾:footer

    导航:nav

    侧栏:sidebar

    栏目:column

    页面外围控制整体布局宽度:wrapper

    左右中:left right center

     

    (2)导航

    导航:nav

    主导航:mainbav

    子导航:subnav

    顶导航:topnav

    边导航:sidebar

    左导航:leftsidebar

    右导航:rightsidebar

    菜单:menu

    子菜单:submenu

    标题: title

    摘要: summary

     

    (3)功能

    标志:logo

    广告:banner

    登陆:login

    登录条:loginbar

    注册:regsiter

    搜索:search

    功能区:shop

    标题:title

    加入:joinus

    状态:status

    按钮:btn

    滚动:scroll

    标签页:tab

    文章列表:list

    提示信息:msg

    当前的: current

    小技巧:tips

    图标: icon

    注释:note

    指南:guild

    服务:service

    热点:hot

    新闻:news

    下载:download

    投票:vote

    合作伙伴:partner

    友情链接:link

    版权:copyright



  • 相关阅读:
    保留最大的数
    彩色宝石项链
    [leetcode] 403. Frog Jump
    [leetcode] 402. Remove K Digits
    Linux 更改时区、时间
    Linux系统时间同步方法
    mysql 5.7.28 地理位置计算详解
    springboot微服务项目集成为单体
    地理空间数据Geometry在MySQL中使用(一)
    mysql中geometry类型的简单使用
  • 原文地址:https://www.cnblogs.com/wjh0916/p/4873859.html
Copyright © 2011-2022 走看看