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

最新推荐文章于 2021-06-17 07:41:53 发布

原创最新推荐文章于 2021-06-17 07:41:53 发布 · 902 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#结构 #布局

web前端同时被 2 个专栏收录

4 篇文章

订阅专栏

学习笔记+实践

3 篇文章

订阅专栏

本博客详细解析了网页设计中HTML的结构、CSS的表现以及JavaScript的行为，并提供了从初学到高级的不同阶段思路和实践案例，如微博用户发言信息列表的实现方式，包括结构、样式和布局的优化。此外，还强调了网页换肤技术，即通过更改CSS样式实现不同外观设计，同时保持代码结构的清晰性和简洁性。

【边学边记】

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分钟之前