一个网站分为前后端和中间件，如果我们想要实现一个网站，前端部分肯定是不可缺少的。简单的功能可以去网上找一些模板来解决需求，但是如果想要做到完全自己得心应手不去修改别人的，最好还是自己实现前端。这里就进行简要介绍一下。
常规的情况下，我们一般把首页分为三部分，分别为 header，content，和footer。 其中header中又包含logo，banner和toolbar，content中包含不同的box，footer中一般是页脚部分。又因为现在普遍要自适应的缘故，所以一般我们不会把left和right写成整个body的100%，常规的情况下是让它auto，以便后期在css中根据不同的窗口大小展示不同的样式。auto是以中心为基点进行的，不能让它左右差距过大，所以在之前一般是要让他居中。又因为我们看内容一般是从左到右进行的，所以这里给予内容部分还要让他偏左开始。因为一些元素本身是带有样式的，所以我们在实现之前一般也要对它们进行样式清0，比如img边框、字体绝对从左到右显示，a的下划线等等。所以开始的时候我们一般需要这样处理。
body{
margin:0;
padding:0;
text-align:center;
}
#container{
width:960px; //子层继承该宽度
height:650px; //临时高度，后期可删除
text-align:left;
}
ul,li,a,img{
margin:0;
padding:0；
border:0;
list-style:none;
text-decoration:none;
}
处理了父层元素下面就要考虑到内层，内层有哪些块之前已经说了，下面就是分别定义宽高，为了方便区分，除了临时高度外，还可以给一个临时颜色加以区分。块中又包含了不同的元素部分，不同的元素又存在不同的处理方式。比如文章li的底部我们要给它dashed，content box要给它border。在有的浏览器上，border就等于在原div的基础之上增，所以这里我们一般是正常的浏览器不用处理，不正常的一般是width给99.8%然后!important; 又因为有的浏览器对height的识别不同，所以当我们应用到margin-top如果出现了层不正常下移，一般还要给一个减去margin top的高度。又因为在有的浏览器中高度不足会补全的原因，所以还得需要对overflow进行hidden。 不同的块之间为了方便可以定义一个专门的10px的div。完整的简单示例代码是这样的。
body{
margin:0px;
padding:0px;
text-align:center;
}
#container{
width:950px;
height:580px;
margin:0 auto;
text-align:left;
}
#header{
width:100%;
background:blue;
}
#logo{
float:left;
width:200px;
height:100px
height:69px !important;
padding-top:31px;
}
img{
border:0px;
margin:0px;
padding:0px;
}
#header #banner{
float:left;
width:660px;
height:100px;
background:green;
margin-left:10px;
}
#header #bartools{
float:right;
width:70px;
height:100px;
background:red;
}
#bar{
float:left;
width:100%;
height:30px;
background:silver;
}
ul{
margin:0px;
padding:0px;
list-style:none;
}
#bar li{
float:left;
width:100px;
height:30px;
line-height:30px;
text-align:center;
}
a{
font-size:12px;
text-decoration:none;
}
#bar a{
color:green;
}
#content{
float:left;
width:100%;
}
.cmain{
float:left;
width:600px;
}
.cmain .left{
float:left;
width:300px;
height:190px;
}
.tit{
width:100%;
height:30px;
background:blue;
border-radius:11px;
}
.tit h3{
margin:0px;
padding:0px;
text-align:center;
width:100px;
line-height:30px;
font-size:13px;
}
.conn{
width:100%;
height:160px;
border: 1px red solid;
}
.conn ul{
padding:0 5px;
}
.conn ul li{
border-bottom:1px dashed #ccc;
}
.conn li a{
background:url(../image/li.png) no-repeat left center;
padding-left:25px;
}
.cow_1{
width:299px !important;
width:300px;
}
.cmain .right{
float:right;
width:290px;
height:190px;
background:silver;
}
.cbar{
float:right;
width:340px;
height:390px;
background:red;
}
.cw_h1{
height:190px;
}
.cw_h2{
height:390px;
}
#footer{
float:left;
width:100%;
height:40px;
background:green;
}
.nav{
height:10px;
clear:both;
overflow:hidden;
}
#bar .t{
float:left;
width:1px;
height:12px;
overflow:hidden;
margin-top:9px;
background:black;
}
其实css只要功能实现正常是没有对错的。 后期加上对不同窗口做不同处理的css就可以实现自适应。透彻理解本篇日志需要掌握HTML 类，id，属性，元素，选择器的基础知识。