如何编写代码主题森林质量标准？答案

【问题标题】：How to write code themeforest quality standards?如何编写代码主题森林质量标准？
【发布时间】：2017-02-02 21:20:07
【问题描述】：

我打算在主题森林市场上出售引导模板。我的第一个模板已经被拒绝了。我认为问题在于代码结构和组织。

您能否分享一些有助于根据 Themeforest 质量标准编写代码的书籍或视频课程？

我的编码风格示例

body {
  width: 100%;
  height: 100%;
  font-family: "Agency FB", sans-serif;
}

html {
  width: 100%;
  height: 100%;
}

span {
  color: red;
}

blockquote {
  font-family: Georgia, serif;   
  font-style: italic;
  margin: 0.25em 0;
  padding: 0.25em 40px;
  line-height: 1.45;
  position: relative;
  color: #777;
  text-align: left;
}

blockquote:after {
  display: block;
  font-size: 80px;
  position: absolute;
  left: -20px;
  top: -20px;
  color: #7a7a7a;
}

blockquote cite {
  color: #999;
  border-bottom: 1px solid red;
  font-size: 14px;
  text-align: center;
  display: block;
  margin: 5px 0 5px 0;
}

::selection {
  background: #ffb7b7; /* Safari */
  color: white;
}

::-moz-selection {
  background: #ffb7b7; /* Firefox */
  color: white;
}

::-webkit-selection {
  background: #ffb7b7;
  color: white;
}

@media(min-width:767px) {
  .navbar {
    padding: 20px 0;
    -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
    -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
    transition: background .5s ease-in-out,padding .5s ease-in-out;
  }

  .top-nav-collapse {
    padding: 0;
  }
}

/* override bootstrap default navbar
=======================================================*/
.navbar-fixed-top {
  background-color: #333;
  border: none;
}

.navbar .nav > li a:hover{
  color: white;
}

.navbar .nav .active > a, .navbar .nav .active > a:hover, .navbar .nav .active > a:active {
  background-color: #333;
  color: red;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
}

.navbar .nav li ul li a:hover {
  background: #333;
  color: white;
}

.navbar .nav li ul li a:active {
  background: #333;
  color: red;
}

/* btn-default 
=======================================================*/
.btn-default {
  background-color: transparent;
  border-color: #ccc;
  color: red;
  -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
  transition: width 2s, height 2s, background-color 2s, transform 2s;
}

/* start intro-section
=======================================================*/
.intro-section {
  height: 100%;
  padding-top: 150px;
  text-align: center;
  background: #fff;
  overflow: hidden;
}

.parallax-header-layers li{
  list-style-type: none;
}


/* start about-section
=======================================================*/
.about-section {
  color: white;
  background: #000;
  text-align: center;
  min-height: 100%;
  padding-top: 50px;
}

.team-profile {
  color: white;
  border: 1px solid red;
  padding: 15px;
  text-align: left;
}

.team-profile img {
  float: left;
  margin-right: 10px;
  border-radius: 50%;
  border: 3px solid white;
}

.team-profile i {
  color: grey;
  width: 15px;
}

.team-profile i:hover {
  color: red;
}

<!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">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Bootstrap Template</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/scrolling-nav.css" rel="stylesheet">

    <!-- font-awesome css -->
    <link href="css/font-awesome.min.css" rel="stylesheet">



    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

  </head>

  <!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->

  <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header page-scroll">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand page-scroll" href="#page-top">Start Template</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-collapse pull-right">
          <ul class="nav navbar-nav">
            <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
            <li class="hidden">
              <a class="page-scroll" href="#page-top"></a>
            </li>
            <li>
              <a class="page-scroll" href="#about">About</a>
            </li>
            <li>
              <a class="page-scroll" href="#services">Services</a>
            </li>
            <li>
              <a class="page-scroll" href="#clients">Clients</a>
            </li>
            <li>
              <a class="page-scroll" href="#contact">Contact</a>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container -->
    </nav>

    <!-- Intro Section -->
    <section id="intro" class="intro-section">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">

            <ul id="port" class="parallax-header-layers">
              <li class="parallax-layer"><img src="../img/header/parallax/pen.png" alt="" /></li>
              <li class="parallax-layer"><img src="../img/header/parallax/phone.png" alt=""/></li>
              <li class="parallax-layer"><img src="../img/header/parallax/mac.png" alt="" /></li>

            </ul>

            <a class="btn btn-default page-scroll" href="#about">Click Me to Scroll Down!</a>
          </div>
        </div>
      </div>
    </section>

    <!-- About Section -->
    <section id="about" class="about-section">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">
            <h1>Our <span>team</span></h1>
            <div class="row">
              <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 team-profile">
                <img src="../img/team-section/photo-1.jpg">
                <h4>Anton Vetrov <span>Developer</span></h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
                <a href="#"><i class="fa fa-facebook"></i></a>
                <a href="#"><i class="fa fa-instagram"></i></a>
                <a href="#"><i class="fa fa-twitter"></i></a>
              </div>

              <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 team-profile">
                <img src="../img/team-section/photo-3.jpg">
                <h4>Anton Vetrov <span>Developer</span></h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
                <a href="#"><i class="fa fa-facebook"></i></a>
                <a href="#"><i class="fa fa-instagram"></i></a>
                <a href="#"><i class="fa fa-twitter"></i></a>
              </div>
            </div>

            <div class="row">
              <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 team-profile">
                <img src="../img/team-section/photo-1.jpg">
                <h4>Anton Vetrov <span>Developer</span></h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
                <a href="#"><i class="fa fa-facebook"></i></a>
                <a href="#"><i class="fa fa-instagram"></i></a>
                <a href="#"><i class="fa fa-twitter"></i></a>
              </div>

              <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 team-profile">
                <img src="../img/team-section/photo-3.jpg">
                <h4>Anton Vetrov <span>Developer</span></h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
                <a href="#"><i class="fa fa-facebook"></i></a>
                <a href="#"><i class="fa fa-instagram"></i></a>
                <a href="#"><i class="fa fa-twitter"></i></a>
              </div>
            </div>

          </div>
        </div>
      </div>
    </section>

    <!-- Services Section -->
    <section id="services" class="services-section">
      <div class="container">
        <div class="col-lg-12">
          <div class="col-lg-6 col-md-6 col-sm-6 development-section row pull-right">
            <h1>Developer <span>Section</span></h1>
            <p>
              A brand is only as successfulas its implementation. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
              quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    
            </p>
          </div>



          <div class="col-lg-6 col-md-6 col-sm-6 design-section row pull-left">
            <h1>Services <span>Section</span></h1>
            <p>
              A brand is only as successfulas its implementation. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
              quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    
            </p>
          </div>
        </div>
      </div>
    </section>

【问题讨论】：

你问过 Themeforest 吗？
它们没有提供编码示例。这就是为什么我在这里请专业人士帮助我
如果一个模板市场没有提供指导，那么我强烈建议选择另一个

标签： html css twitter-bootstrap-3

【解决方案1】：

从您提供的代码来看，我会说它不完全符合 BS 标准。

一些注意事项：

BS 类没有像应该那样使用，即。在服务中部分你在 col-lg-12 div 中有一个 col-lg-6 div，没有行 div。始终尝试使用 order container > row > col-XX-Y。
当有 col-lg-X div 时，关于节的 div 有点乱在另一个 col-lg-Y 里面。您可以将部分标题放在它自己的 div 中，并为团队成员开始一个新行。
此外，使用内容 div 也是一种很好的做法，例如在关于部分的团队成员，可能有像team-member-img这样的div，团队成员名称等。它可以更好地控制给定的内容。

我不确定这些是拒绝的原因，但它们为代码提供了更多的结构，使其易于理解，并且更易于用户/买家管理。

原帖重新格式化：

ThemeForest 有模板指南。一般指南：

https://help.market.envato.com/hc/en-us/articles/202500774-ThemeForest-General-File-Preparation-Guidelines

指定的（包括“引导皮肤类别提交要求”）：

https://help.market.envato.com/hc/en-us/sections/200615794-ThemeForest-Requirements

我建议检查您的代码并按照 BS 标准对其进行修复。了解良好实践的好方法是调试一些最畅销的高级模板。并且永远记得确保 HTML 和 CSS 是有效的。

【讨论】：

我知道需求，但是如果您阅读它们，您将看不到代码的和平。只有需求专业的风格和干净的代码
好吧，我认为没有人可以在这里为您提供帮助，而无需看到您的任何代码行，因此获得任何提示的最佳方法是给我们看一下。如果您不熟悉这些内容，也可以尝试搜索“最佳编码实践”之类的内容。
请avoid link only answers。答案“仅是指向外部网站的链接”may be deleted。
我的原始帖子中现在有一些代码。