HTML 第五章 作业

课后作业
1.使用font-family属性,同时设置英文字体和中文字体时需要注意什么问题？
英文字体写前面，中文字体写后面
2.在CSS中，常见的背景属性有哪些？他们的作用是什么？

background:#fff url('sss.jpg') no-rerepeat;
颜色，背景图片路径，不循环
background-color:#fff;
背景颜色
background-size:背景图片大小;

3.制作北大青鸟课程介绍页面
HTML代码:

	
		
		
		
	
	
		

			

			
			

				逆向课程设计：
				以企业需求决定课程设计内容，确保训练内容及深度和企业需求一致
			
			

				模拟学员学习路线：
				强调难点和复杂技能点的反复训练，力求学习效果和学习体验
			
			

				互联网作为教学环境： 学员的日常教学和训练均在互联网线上进行
			
			

				学习挡板监控网上学习效果：
				每个学习阶段设置线上线下测试，严密监控学习效果
			
			

				真实开发项目经验积累：
				采用专业互联网企业提供的真实项目作为模拟开发
			
			
			

				【实用性】—— 
				以就业岗位需求为导向，重点讲解企业80％的时间在使用的20％的技术
			
			

				【权威性】—— 
				与来自百度等知名企业的专家联合开发
			
			

				【专业性】—— 
				引进业内资深人才和典型行业开发项目
			
			

				【真实性】—— 
				在互联网真实环境下进行教学和训练
			
			

				【易学性】—— `在这里插入代码片`
				在线培训模式，24小时专家在线解答疑难问题
			
			

				【完整性】—— 
				利用SNS虚拟社区：学习、人脉双丰收
			
	

CSS样式:

div {
	width: 600px;
	background: linear-gradient(to bottom, #ECECEC, #FFFFED);
}

.color1 {
	color: #5C9818
}

.color2 {
	color: #F26522;
}

.a1 {
	color: white;
	background: #005952;
}

.a2 {
	color: white;
	background: #007236;
}

.a3 {
	color: white;
	background: #008BBF;
}

.a4 {
	color: white;
	background: #0066B3;
}

.a5 {
	color: white;
	background: #1d0987;
}

.a6 {
	color: white;
	background: #F36F21;
}

.a7 {
	color: white;
	background: #BB131A;
}

.a8 {
	color: white;
	background: #D73765;
}

.a9 {
	color: white;
	background: #A70532;
}

.a10 {
	color: white;
	background: #553171;
}

.a11 {
	color: white;
	background: #4F1268;
}

4.制作席慕容的诗《初相遇》
HTML代码:

	
		
		
		
	

	
		

			
初相遇    文/席慕容
			
美丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到的时刻里出现。
			
我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解释，心里甚至还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感
				激。胸怀中满溢着幸福，只因你就在我眼前，对我微笑，一如当年。
			

				我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落落英缤纷，好像你我才初相遇。
			
		
	

CSS样式:

div {
	width: 400px;
	background:-webkit-linear-gradient(#CAEFFE,#FFFFED);
}

h1{
	text-align: center;
	text-shadow: 0.8px 0.8px 0.8px #000000;
	font-size: 18PX ;
	color: #0D7DAC;
}
h1 span{
	font-size: 12px;
	color: #929798;
	text-shadow: black 1px -1px;
}
div p:first-of-type span{

    font-size: 18px;

    color: #7C00B8;

    font-weight: bolder;

}
em{
	font-size: 16px;
	color: #2E65FF;
 
} 
p{
	font-size: 12px;
	text-indent: 2em;
}
a{
	color: green;
	text-decoration: underline;
}

5.制作淘宝女装分类页面
HTML代码:

	
		
		
		
	

	
		

			

				

					
夏季流行
					

					夏季新品
					雪纺裙
					短袖T
					铅笔裤
					短裤
					短袖衬衫
					小脚牛仔裤
					开衫
					蕾丝/雪纺衫
					韩版外套
					小西装
					中长款裙
				
				

					
上装
					

					T恤
					衬衫
					针织衫
					长袖T
					韩版T
					情侣衫
					雪纺衬衫
					韩版衬衫
					防晒衣
					休闲套装
					卫衣
					背心/吊带
				
				

					
裙子
					

					连衣裙
					半身裙
					长裙
					短袖裙
					蕾丝连衣裙
					长袖裙
					无袖/背心裙
					A字裙
					牛仔裙
					半身中长裙
					半身短裙
					包臀裙
				
				

					
裤子
					

					裤子
					休闲裤
					牛仔裤
					打底裤
					长裤
					哈伦裤
					阔腿裤
					短裤/热裤
					连体裤
					七/九分裤
					牛仔短裤
					西装裤
				
				

					
其他女装
					

					胖M装
					中老年
					婚纱
					礼服
					旗袍
					夜店
					舞台装
					唐装
					职业装
					全球购
					羊绒衫
					毛衣
					呢大衣
					羽绒服
					真皮皮衣
				
			
		
	

CSS样式:

div {
	font-size:14px ;
}
ul li {
	width: 448px;
	list-style-type: none;
}

h1 {
	font-size: 18px;
	font-weight: bolder;
	vertical-align: middle;
	text-indent: 1.5em
}
a{
	color: black;
	text-decoration: none;
}
a:hover{
	color: #F60;
	text-decoration: underline;
}
ul li:first-of-type h1 {
	background: url(../img/dress01.png)no-repeat;
	background-size: contain;
}
ul li:nth-of-type(2) h1{
	background: url(../img/dress02.png)no-repeat;
	background-size:contain;
}
ul li:nth-of-type(3) h1{
	background: url(../img/dress03.png)no-repeat;
	background-size: contain;
}
ul li:nth-of-type(4) h1{
	background: url(../img/dress04.png)no-repeat;
	background-size: contain;
}
ul li:nth-of-type(5) h1{
	background: url(../img/dress05.png)no-repeat;
	background-size: contain;
}