不懂程序的前端不是好厨师

曹え 5811 发布于：2018-12-03 10:41:09

做前端为什么考虑程序？

前端代码不是给自己看的而是给程序员看的
对程序员更好套，模块化，语义化

程序CMS后台介绍？

栏目分类、列表目录、内容调取
导航条如何套
新闻产品列表如何套
详情页如何套

常见的问题

连续性循环（循环体是有规律的）
图片变形（上传的图片可能是不确定大小的）
文字太长（文字的长度也可能不确定）
内容页详情页

如何解决这些问题

循环标签一定要统一和连续
图片一定要限制一个最大宽度阻止变形
文字一定要限制长度阻止超出错位

列表页

错误写法

正确写法

<!--3列产品列表-->
<ul class="ul-pro">
    <li>...</li>
    <li>...</li>
    <li class="r0">...</li>
    <li>...</li>
    <li>...</li>
    <li class="r0">...</li>
    <li>...</li>
    <li>...</li>
    <li class="r0">...</li>
    </ul>
    
    <!-- 两列 -->
    <ul class="ul-pro">
    <li class="l">...</li>
    <li class="r">...</li>
    <li class="l">...</li>
    <li class="r">...</li>
    <li class="l">...</li>
    <li class="r">...</li>
    <li class="l">...</li>
    <li class="r">...</li>
    <li class="l">...</li>
    <li class="r">...</li>
    </ul>

<!--3列产品列表，用css去写-->
 <style>
 .ul-pro {margin-right:-10px;} 
</style>
<ul class="ul-pro">
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
 </ul>


 <!--3列产品列表，定义-->
 <style>
 .ul-pro .s3,.ul-pro .s6,.ul-pro .s9{margin-right:0;} 
</style>
<ul class="ul-pro">
    <li class="s1">...</li>
    <li class="s2">...</li>
    <li class="s3">...</li>
    <li class="s4">...</li>
    <li class="s5">...</li>
    <li class="s6">...</li>
    <li class="s7">...</li>
    <li class="s8">...</li>
    <li class="s9">...</li>
 </ul>

列表模块

错误写法

正确写法

<div class="mo-mem">
     <ul class="ul-mem">
          <li>
               <a href="">医院</a>
               <a href="">医院</a>
               <a href="">医院</a>
               <a href="">医院</a>
          </li>
          <li>
               <a href="">医院</a>
               <a href="">医院</a>
               <a href="">医院</a>
               <a href="">医院</a>
          </li>
          <li>
               <a href="">医院</a>
               <a href="">医院</a>
               <a href="">医院</a>
               <a href="">医院</a>
          </li>
          <li>
               <a href="">医院</a>
               <a href="">医院</a>
               <a href="">医院</a>
               <a href="">医院</a>
          </li>
          <li>
               <a href="">医院</a>
               <a href="">医院</a>
               <a href="">医院</a>
               <a href="">医院</a>
          </li>
     </ul>
</div>

<div class="mo-mem">
     <ul class="ul-mem">
          <li><a href="">医院</a></li>
          <li><a href="">医院</a></li>
          <li><a href="">医院</a></li>
          <li><a href="">医院</a></li>
          <li><a href="">医院</a></li>
          <li><a href="">医院</a></li>
          <li><a href="">医院</a></li>
          <li><a href="">医院</a></li>
          <li><a href="">医院</a></li>
          <li><a href="">医院</a></li>
          <li><a href="">医院</a></li>
          <li><a href="">医院</a></li>
          <li><a href="">医院</a></li>
          <li><a href="">医院</a></li>
          <li><a href="">医院</a></li>
          <li><a href="">医院</a></li>
          <li><a href="">医院</a></li>
          <li><a href="">医院</a></li>
          <li><a href="">医院</a></li>
          <li><a href="">医院</a></li>
     </ul>
</div>

觉得有用请点个赞吧！

1 545

99元开通年度会员！
1000+模块代码随便下载！

不懂程序的前端不是好厨师

列表页

列表模块

最新