【学习笔记+实践】网页简单布局之结构与表现分离

【边学边记】

1、html——结构；css——表现；javascript——行为。

分析一个页面的结构：重点在于HTML的结构和语义化！其次才是表现和行为。

2、先按结构和语义编写html代码，然后进行CSS样式设置，减少html和CSS的契合度。

3、可以用“文本缩进text-indent”改变文字的位置，从而减少<span>等标签的使用。

4、网页换肤：相同的html结构，切换不同的css样式文件进行网页换肤。

【实践】微博用户发言信息列表

代码：

    
    





    
    

    
    

	
     
     

		
      
      
	
     
     
	
     
     

	
      
      
禾小桔
	
      
      
先按结构和语义编写html代码，然后进行CSS样式设置，减少html和CSS的契合度。！！！先从结构上考虑，在现有的结构基础上，只通过样式去改变页面布局。
	
      
      10分钟之前
	
     
     

    
    



    
    

    
    

	
     
     
	
     
     

	
      
      
禾小桔
	
      
      
先按结构和语义编写html代码，然后进行CSS样式设置，减少html和CSS的契合度。！！！先从结构上考虑，在现有的结构基础上，只通过样式去改变页面布局。
	
      
      10分钟之前
	
     
     

    
    



    
    

    
    

	
     
     
	
     
     
禾小桔
	
     
     
先按结构和语义编写html代码，然后进行CSS样式设置，减少html和CSS的契合度。！！！先从结构上考虑，在现有的结构基础上，只通过样式去改变页面布局。
	
     
     10分钟之前

    
    

运行效果：

【总结】

拿到一个网页设计图的时候，首先关注网页的文字内容以及内容模块间的关系，

把重点放在编写语义化的html代码上，而不要过多考虑设计图上的样式；

等到html按内容编写完成之后，再考虑样式的实现，

在不改变现有结构的基础上，只通过样式去改变页面布局，完成设计图要求的视觉效果。

课程网址：http://www.imooc.com/learn/20