05DIV+CSS布局规划

作业一

编写效果如下图所示，网页中由左、右两个图层构成，左边div设置背
景图像，图像居中显示，右边div设置背景图像填充效果，添加有效果文字内容。设计要
求如下:
 

木兰花令.拟古决绝词
纳兰性德



	
		
		
		
		
		
	

	
		

			

			

				

					木兰花令.拟古决绝词
				
				

					纳兰性德
				
				

					
人生若只如初见
					
何事秋风悲画扇
					
等闲变却故人心
					
却道故人人易变
					
骊山雨罢清宵半
					
泪雨霖铃终不怨
					
何如薄幸锦衣郎
					
比翼连枝当日愿
				
			
		
	

作业二

设计如图9-16所示的图文并茂的页面。设计要求:
（1）插入图像为cupjpg，图像向左浮动、边框为“1pX虚线、颜色为gay、边界为
“10px10px 10px 0"、填充为Spx。
（2)Mobile首字母样式为“大小3em、向左浮动”
（3)b1样式为“文字居中、白色、背景为#678”

	
		
		
		
	
	
		

				Head Line
			
		

			
			

				Moble Widget使用的标准的Web技术，如HTML,CSS,JavaScript等。这些经典的Web技术规范是由W3C（万维网联盟） 的下属各个工作组指定并推进的。作为开发Widget之前的只是准备，在本章中我们将逐一介绍这些技术。
			
		
	

作业三

	
		
		
		
	
	
		

			

			
			

				
        首页      |      博客      |      设计      |     论坛      |      关于
	
	
			
		
		

			

				

					
首页
					
博客
					
设计
					
论坛
					
关于
				
			
		
		

			
欢度春节
			

		
		
		

			
********************************
			
		
	

作业四

	
		
		
		
	
	
	
		

			
logo
			
nav
			

				
Content-Left
				
Content-center-left
				
Content-center-right
				
Content-right
			
			
Footer
	
	
	

作业五

采用 DIV+CSS 设计页面布局，效果如下所示。要求：

1） 定义全局样式为字体标粗，大小 16px,填充和边距上下都是 0，左右为自动。

2） #container 样式宽度 100%，填充上下 0，左右自动，边界上下 0，左右自动；

3） #header 样式为宽度 100%，高度 70px,背景颜色#99ff66，背景图像为 w3c.png，不重复，

居左上角

4） #nav 样式为宽度 100%，高度 32px,背景颜色#fbfbfb，导航中无序列表无符号，水平居中

显示，列表项为行内元素，填充上下 5px,左右 15px

5） #mainbody 样式为宽度 100%，高度 300px,填充上下 0，左右浮动，边界上下为 0，左右

浮动

6） #left 样式为图层向左浮动，背景色#efefef,宽度 15%，高度 300px。其中无序列表为无符

号的列表，边界 20px

7） #middile 样式表为边界上下为 0，左右 15%，高度 300px，首行缩进 2 个字符；

8） #right 样式表为图层向右浮动，背景色#efefef,宽度 15%，高度 300px

9） #footer 样式表为清除图层左右浮动，宽度 100%，高度 50px,背景颜色#b6b6b6，内容水

平居中显示，填充为 10px

	
		
		
		
	
	
		

			

			

				HTML/CSS
				    
				JavaScript
				    
				Server Side
				    
				ASP.NET
				    
				XML
				    
				Web Services
				    
				Web
			
			

				

					

						
HTML
						
XHTML
						
HTML 5
						
CSS
						
CSS3
						
TCP/IP
					
				
				

					
参考手册
					

						
HTML/HTML5标签
						
CSS1.2.3
						
HTML 颜色
						
HTML ASCLL
						
HTML Latin-1
						
HTML 符号

					
					
				
				

					

						
						
HTML 系列教程
						
从左侧的菜单选择你需要的教程！
					
					
					

						
HTML
						
HTML 指超文本标签语言。
						
HTML  是指通向WEB技术世界的钥匙。
						
在W3School的HTML教程中，您将学习如何使用HTML来创建站点。
						
HTML非常容易学习！你会喜欢他的！现在开始学习HTML！
					
					
					

						
HTML5
						
HTML5是下一代的HTML
						
HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5支持
						
在W3School的HTML5教程中，您将了解HTML5中的新特性
						
现在就开始学习HTML5!
					
				
			
			

				
当使用本站时，代表您已经接受了本站的使用条款和隐私条款。版权所有，保留一切权力。
				
赞助商：上海高科投资有限公司。
			
		
	

作业六

按如下要求设计 Web 页面,要求：

1） 页面标题为：HTML5 简介

2） 页面内容标题：

h2 号标题字显示“HTML5 是如何起步的？“，“为 HTML5 建立一些规则：”，

h2 标记样式为”字体加粗，颜色白色，背景#006633，填充 10px“.

3） 第一个标题字下，每行一个段落，默认大小和字体，但“编者注：”的样式为加粗、斜体

“；所有段落向右缩进 2 个字符，行高 1.5 倍。

4） 第二个标题字下，是一个无序列表，采用默认格式显示，但无序列表也向右缩进 2 个字

符，行高 1.5 倍。

5） 所有放在图层中，图层 div 样式为上下填充 20px,左右填充为 10px.

	
		
		
		
	
	
		

			
HTML5 是如何起步的？
			
HTML是W3C与WHATWG合作的结果。
			
编者注：W3C指World Web Consortium，万维网联盟。
			
编者注：WHATWG指Web Hypertext Application Technology Working Group。
			
WHATWF致力于web表单位和应用程序，而W3C专注于XHTML 2.0，在2006年，双方决定进行合作，来创建一个新版本的HTML
			
为 HTML5 建立一些规则：
			

				
新特性应该基于HTML,CSS,DOM以及javasc
				
减少对外部插件的需求（比如 flash）
				
更优秀的错误处理
				
更多取代脚本的标记
				
HTML5应该独立于设备
				
开发进程应该对公众透明