html页面设计浅谈

其实做了一段的前端页面开发你就会发现，开始的时候无论是css类名或者div的id的命名，多不知道叫什么好？当然如果有点创新的同学应该会找寻各大顶级门户网站去扒别人的代码看看。所以这篇文章只是写给初学者或者这方面有需求的同学。

 

1.从头开始

  ------header （内容）

  ------logo（网站标志）

  ------loginbar（登录条）

  ------regsiter（注册）

  ------toolbar（工具条相关的）

2.导航菜单  

  -----nav（导航）

  -----subnav（子导航）

  -----search（搜索）

  -----hot（热门）

3.肉体（主体灵魂部分）

  ------content或者container（主体内容）

  ------banner（广告图）

  ------sidebar （左边栏目）

  ------module-bd（某个模块的头部分）

  ------module-hd（某个模块的主体内容部分）

  ------左中右（一般我多少喜欢父容器名_l,父容器名_c,父容器名_r）

  ------download（下载部分，也可以加上前缀的父容器名）

 

 

4.尾巴

  -----footer

  -----copyright（版权）

  -----friendlink（友情链接）

  -----partner（合作伙伴）

 

 

这边我还有一个小小推荐，当然也是自己的用法

 

比如我的模块是美容小模块部分 我的文档树结构

 

 

 

<div id="category">
   <div class="category-hd">
      <h2>商品分类</h2>
   </div>
   <div class="category-bd">
      <div id="module1" class="module">
           <div class="module-hd">
                <h3 class="meirong">美容</h3>
           </div>
           <div class="module-bd">
                <dl>
                   <dt>
			 <a title="粉底液" href="###">粉底液</a>
                   </dt>
                   <dt>
			 <a title="护肤水" href="###">护肤水</a>
                   </dt>
                   .............
                </dl>             
           </div>
      </div>
   </div>
</div>