一处样式说明到总结

  <!--这种布局采用标题图片加边框的 
  说明 
  1.先给这个区域命名，一般一个区域是唯一的,所以用ID的方式定义,另一方面也为了维护方便
  并定义大小，这里因为大小是嵌入首页的，所以定义为100%
  其他区域大小可以自己控制
  #div_quicknews{
  width: 99% !important; //这个是为了浏览器的兼容性控制而写的。IE读取的是第二个，FF是读这个
  width:100%;   //一般要按这个顺序写。
  height:100%;
  border:1px #C0DFF6 solid;
  margin:0px;
  padding:0px; 
  background:white; 
  }
	2.定义标题背景 用区域部分的名称加背景的名称来处理
	这里有个命名空间的概念  这样别的模块使用的时候,
	只要改下总体区域的名称就可以了要修改自己颜色图片都比较方便
	因为首页比较追求色彩所以采用图片,其他部分可以使用颜色就可以了
	#div_quicknews .title-bg{
	background:url(../images/title-b.gif) repeat-x;
	height:23px;
	}
	3.定义标题用的小图标
	#div_quicknews img{
	  margin: 0px;
	  padding: 0px;
	  width:  15px;
	  height: 15px;
	  border: 0px;
	  
	}
	4.定义标题用容器字体等
	#div_quicknews h1{
	    margin:0px !important;
	    margin:3 0 0px;
	    padding:0px;
	    color:#004DFD;
	    font-size:14px;
	    text-align:center;
	}
	5.如果用列表方式展示信息可以有这部分容器
	#div_quicknews .content_list{
	   text-align: left;
	}
	6.定义列表样式
	#div_quicknews .content_list ul{
	  list-style: none;
	  margin:0px;
	  padding:0px;
	}
	7.定义列表项的文字前的小图标
	#div_quicknews .content_list li{
	    list-style-image:url(../images/index-rmicon.gif);
	    list-style-position:inside;
	    margin:5 7 0 0px;
	    padding:0px;
	    color: #FB457A;
	}
	8.定义连接前的字体颜色
	#div_quicknews .content_list li a{
	    color:#000000;
	}
	9.定义连接后鼠标移动后的颜色
	#div_quicknews .content_list li a:hover{
	   color:#7DC012;
	} 

首页商城快讯部分的样式写法以及说明．

因为在首页上，已经定义了这一块区域的大小，并且是采用jsp:include进来的，所以这里不再定义区域大小．想总结下做这些东西留给自己的思路．

1．可能一个区域的同样的内容，有很多种实现方式．就像标题背景加小图标．可以用div+ul+li直接完成．也可以用div+img+h1或者+span完成．而且实现的效果基本如出一辙．但是一些规范说，最好不采用img．

2.列表默认的小ico是实心的圆点，可以根据需要改变这个小ico.

3.超链接的样式．这里可以做很大的文章．连接前，连接后，甚至更多。很多tab效果的标签页，都是这么来的．

 

4.不能不说的居中问题．

  /*主页所有内容的容器*/
   
  #main_all{
   　width:1008px !important;
　　width:1000px;
　　margin: 0 auto;
　　overflow: hidden;
  }

 

现在解决居中问题的办法，是层嵌套层．在最外面定义一个层包容所有的布局容器．然后，在第二层的布局容器里头写上text-align: center;基本上可以解决问题．就是内层容器的定义的时候要注意，要包容外层容器然后再定义自己．

5.浏览器兼容，一般用!important　就可以解决问题了．不过这一句一定要放在上面，不然ie也是可以认到的．还有一些人推荐用注释的方式来．好像有的时候，做了注释，ie认不到．但是有的时候又可以，不知道为什么．

6.一个版面布局下来，我一般一行一行地划分块来布局．像我们的电子商务网站，先是第一行全局区域，然后是第二行导航．行的高度，可以很灵活地变化．导航紧挨的第三行是搜索条．这三个区域一般不留什么行间间隔，一般都是一行不要分列．接下来，就是首页最主要的展示区域，我把它定义为第四区域，因为这一行块区域比较重要，要分割成几列来显示信息．因为层只有左右浮动，所以定义列区域的时候，也是左右，划分开的．下面第五，第六．．．．．甚至更多区域的布局也是这么铺展开的．

7.另外在li标签里头的内容大小，最好不用百分比．因为在li里头放了个图片，结果大小用百分比，点击图片属性的时候，浏览器会刷新这一块区域，结果布局乱了．后来，把li的图片大小固定了大小，才解决了问题．

8.还有其他方面的总结待续．