分享总结10天来学习HTML DIV+CSS标准网页布局一些技巧

2013年03月23号开始了我们第一个项目，用DIV+CSS标准网页布局仿制Discuz论坛页面（首页、帖子列表页，帖子详情页以及注册页），这是检验我们10天以来对我们掌握HTML标签，CSS属性，一次小小的自我检验吧。对于零基础的兄弟多多少少有点吃力，闷骚的捷哥带着我们写了一遍，大体我们有了本的思路，以及大体的结构。开始写项目时从我们组反映的情况来看，还是存在一些问题。不啰嗦了。






首先几个新建文件夹，images主要存放图style主要存放我们CSS样式，JS主要存放我们编写的javascript，这个文件夹，没有什么硬性要求，按自己命名就好。






我们主要看style这个文件css样式。有五个样式文件，其中一个basic.css 这个文件主要存放我们公共的CSS样式，什么叫公共的CSS样式呢，比如我们做网页有几个或者多个页面，这些页面中头部和尾部基本是一样的，所有我们把头部和尾部的样式写在同一个CSS文件中，这样在其他页面方便调用，其次就是写一些我们要经常写样式，我们称之为全局样式，可能有点不太理解这句是什么意思，好吧，我截下图。






分析下。认真看下写出来的全局样式，可能没有写全，这不是主要的。我们就拿 a 标签来说吧，我们在页面肯定少不了超链接，超链接有下划线，我们就可以定义全局的 a(text-decoration:none;) 这样在写这个a标签样式时，我们就可以略过了，这样可以减少我们工作量，对于CSS不太熟悉的兄弟，建议写写，加深记忆。看看样式，还定义了.z{float:left;}  .y{float:right;}  .clear{ clear:both;} ，懂CSS的人都直到一个左浮动，右浮动，一个清除浮动，我们写页面样式时，会大量用到，当我们要浮动的时候就是在class中空格加入

  

class="header_right y">

，这样就浮动起来了，我们也无需在CSS中给他写上float:left;   float:right; 可以提高我们一些效率。对于CSS不太熟悉的兄弟，不建议这样写，还是写在CSS文件中，多练习一下，还有一个是清除浮动的，这个挺好理解的，我们需要清除浮动的地方 在class中加入就行，比如

class="123   clear">

还有就是每页页面的css样式分开写到文件中，这样也利于我们修改。






还有就是我们不是学了PHP常量了么，我们就可以定义个常量指定本页，define("NAME","index"); 这样写有什么好处呢，比如，我把首页的CSS都写到index.css中，注册的样式写到register.css中。我们调用CSS样式的时候可以type="text/css" href="style/.css" />前提是定义了一个常量，常量值跟你CSS文件名一直就行，其实常量的用处还有很多。好了，就写到这了，希望大家都可以分享一些技巧。

原文地址：