HTML5和CSS3开发第五章课后作业

1.制作图5.38所示的北大青鸟课程介绍页面。页面要求如下，
>使用

.

.等标签编辑页面，页面整体背景颜色使用线性渐变
（#ECECEC，#FFFFED）.
课程特色字体颜色为绿色（#5C9815），设计理念字体颜色为橙色（#F26522）.
>课程特色和设计理念每行开头带背景颜色的字体为白色，背景颜色从提供作业素材的页面
效果图中获取、使用结构伪类选择器元素。

>使用外部样式表创建页面样式。

body{
    background: -webkit-linear-gradient(#ECECEC,#FFFFED);
    width: 575px;
}
body div div:first-of-type{
    color: #5C9815;
}
body div div:last-of-type{
    color: #F26522;
}
span{
    color: white;
}
body div div:first-of-type p:nth-of-type(1) span{
    /*第一个div下的第一个span标签*/
    background: #226600;
}
body div div:first-of-type p:nth-of-type(2) span{
    /*第一个div下的第二个span标签*/
    background: #7FFF82;
}
body div div:first-of-type p:nth-of-type(3) span{
    /*第一个div下的第三个span标签*/
    background: #58B6FF;
}
body div div:first-of-type p:nth-of-type(4) span{
     /*第一个div下的第四个span标签*/
     background: #2E65FF;
 }
body div div:first-of-type p:nth-of-type(5) span{
    /*第一个div下的第五个span标签*/
    background: #000873;
}

body div div:nth-of-type(2) p:nth-of-type(1) span{
    /*第二个div下的第一个span标签*/
    background: #FF6E06;
}
body div div:nth-of-type(2) p:nth-of-type(2) span{
    /*第二个div下的第二个span标签*/
    background: #B60C01;
}
body div div:nth-of-type(2) p:nth-of-type(3) span{
     /*第二个div下的第三个span标签*/
     background: #B6008D;
 }
body div div:nth-of-type(2) p:nth-of-type(4) span{
    /*第二个div下的第四个span标签*/
    background: #B60C01;
}
body div div:nth-of-type(2) p:nth-of-type(5) span{
    /*第二个div下的第五个span标签*/
    background: #7C00B8;
}
body div div:nth-of-type(2) p:nth-of-type(6) span{
    /*第二个div下的第六个span标签*/
    background: #7C00B8;
}





    
    
    


    

        
        
 
        

            
逆向课程设计：以企业需求决定课程设计内容，确保训练内容及深度和企业需求一致
            
模拟学员学习路线：强调难点和复杂技能点的反复训练，力求学习效果和学习体验
            
互联网作为教学环境：学员的日常教学和训练均在互联网线上进行
            
学习挡板监控网上学习效果：每个学习阶段设置线上线下测试，严密监控学习效果
            
真实开发项目经验积累：采用专业互联网企业提供的真实项目作为模拟开发/p>
        
        

        

            
【实用性】—— 以就业岗位需求为导向，重点讲解企业80％的时间在使用的20％的技术
            
【权威性】—— 与来自百度等知名企业的专家联合开发
            
【专业性】—— 引进业内资深人才和典型行业开发项目
            
【真实性】—— 在互联网真实环境下进行教学和训练
            
【易学性】——在线培训模式，24小时专家在线解答疑难问题
            
【完整性】—— 利用SNS虚拟社区：学习、人脉双丰收
        
    

2.制作席慕蓉的《初相遇》

页面总宽度为400px，整体背录颜色线性渐变（#CAEFFE#FFFED)
使用

标签排版文本标题，字体大小为18px，黑色文字阴影。
使用

标签排版文本正文，首行缩进为2em.行高为22px，
首段第一个“美”字，字体大小为180x，加相显示。黑色和白色文字阴影具体方向参考
素材效果图。第二段中的“胸怀中满溢…在我眼前”字体风格为倾斜。颜色为蓝色，字
体大小为16px，正文其余文字大小为12px.
最后一段文字带下划线。
使用外部样式表创建页面样式。
>页面中的字体颜色从提供作业素材的页面效果图中获取。

div{
    width: 400px;
    background: -webkit-linear-gradient(#CAEFFE,#FFFFED);
}
h1{font-size: 18px;text-align: center;color: blue}
h1 span{
    font-size: 14px;
    color: gray;
    text-shadow: black 1px -1px;
}
p{font-size: 12px;text-indent: 2em;}
div p:first-of-type span{
    font-size: 18px;
    color: #7C00B8;
    font-weight: bolder;
}
div p:nth-of-type(2) span{
    font-size: 16px;
    color: #2E65FF;
    font-style: italic;
}
a{
    color: green;
}





    
    
    


    

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

3.制作图5.40所示的淘宝女装分类页面、页面要求如下。
>使用无序列表等HTML标签有语义化的编辑页面。
>女装各分类名称前的图片使用背景图片的方式实现，标题字体大小为18px，加相显示。
分类内容字体大小为12px，超链接文本字体颜色为黑色，无下划线。当鼠标移至超链接文
本上时字体颜色为橙色（#F60），并且显示下划线。
>使用外部样式表创建页面样式。

>页面中其他的效果样式见提供的作业素材中的页面效果图。

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




    
    
    


    

        

            

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

                
上装

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

             

                 
裙子

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

                
裤子

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

                
其他女装

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