HTML第四章:初识CSS3 课后作业:

1.制作图4.35所示的北大青鸟总裁致辞页面,页面要求如下。
>标题使用标题标签实现,字体大小为18px。
>致辞正文字体大小为12px,页面中的数字均为加粗、红色字体。
>页面中的年份斜体显示,字体大小为16px.字体颜色为蓝色。
>使用外部样式表创建页面样式,页面样式体现高级选择器的应用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>总裁致辞页面</title>
    <link rel="stylesheet" href="CSS/Css3.css" type="text/css"/>
</head>
<body>
<h2>总裁致辞</h2>
     <h3>来源:北大青鸟</h3>
           <hr/>
       <p><img src="images/icon.jpg" alt=""/></p>
       <p>目前北大青鸟IT教育全体系员工<strong>10000</strong>余名、授权培训中心<strong >180</strong>余家、合作院校<strong>500</strong>余所、覆盖全国<strong>90</strong>余座城市,市场占有率达到<strong>39.8%</strong>。</p>
       <p>作为IT职业教育的先行者,北大青鸟IT教育创新的职业教育理念和业务经营模式得到了社
           会的广泛认可:国家人力资源和社会保障部与北大青鸟IT教育实施课程联合认证制度;公
           司两度入选中华人民共和国商务部评选的“中国连锁经营百强企业”,是迄今为止教育培
           训领域唯一上榜品牌。公司连续两年荣获 “中国服务业十大优秀特许品牌”称号,并获得
           中国特许经营协会颁发的中国连锁经营百强和中国特许经营年度大奖;获得新浪颁发的“中
           国教育杰出贡献奖”和“中国十大品牌教育集团”称号;并赢得 “中国IT公众认知企业金奖”
           、“本土最具知名度认证奖”、“最佳就业认同奖”、“质量放心用户满意双优品牌”、“最佳实
           用课程奖”等数十个奖项。人民日报、光明日报、经济日报、解放日报、中国青年报、中国计算机报
           等几十家权威媒体对公司进行了多方面的报道。

          <p> <em>2000年</em>,北大青鸟IT教育创造性地将特许经营模式引入到IT职业教育领域,在全国建立“北大青鸟APTECH
           计算机授权培训中心”。所有中心实行统一经营管理、严格保证教学质量,受到社会和业界的高度认可。
           发展速度之快、经营规模之大、学员人数之多,在全国众多IT职业培训机构中一枝独秀。成立至今,北大青
           鸟IT教育先后培养45万名学员进入IT行业。
     </p>
</body>
</html>

/*标签选择器*/
h2{
    font-size: 18px;
}
    p{
    font-size: 12px;
}
/*后代选择器*/
p strong{
    color: red;
}
/*结构仿类选择器*/
 p:nth-of-type(4){
    font-size: 16px;
    color: blue;
}

2.制作图436所示的员工团队风采页面页面要求如下。
>标题使用标题标签实现字体大小为18px第一个标题的字体颜色为红色第二个标题:字体颜色为绿色。
>页面字体大小为14px.>第一个标题下面的两张图片宽度为300px高度为200px。
>最后一段文字的颜色为蓝色。
>"联系我们"等内容字体大小为14px颜色为#640000.
>cSS 样式体现标签选择器。类选择器、ID选择器、层次选择器结构伪类选择器属性选择器。
>使用外部样式表创是页面样式。完整页面显示效果请参考素材文件里的效果图。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工团队风采页面</title>
        <link rel="stylesheet" href="CSS/Css.css" type="text/css"/>
</head>
<body>
      <P><img src="images/recruit-01.jpg" alt=""/>
      <img src="images/recruit-02.jpg" alt=""/></P>
    <p>北大青鸟始终以人才作为企业的核心资本。为了吸引、激励和保留优秀人才, 公司为员工提供完善的培训与发展体系,
        关注员工成长,同时在兼顾市场竞 争力和内部公平的基础上为员工提供全面、富有竞争力的薪酬福利体系。良好
        的企业发展前景、 广阔的个人发展平台、快乐向上的工作环境,是青鸟人一直秉承的核心要素</p>
        <h4>我们的管理团队</h4>
          <p><img src="images/recruit-03.jpg" alt=""/>
              <img src="images/recruit-04.jpg" alt=""/></p>
       <p>北大青鸟始终以人才作为企业的核心资本。为了吸引、激励和保留优秀人才,公司为员工提供完善的培训与发展体系,
           关注员工成长,同时在兼顾市场竞争力和内部公平的基础上为员工提供全面、富有竞争力的薪酬福利体系。良好的企
           业发展前景、 广阔的个人发展平台、快乐向上的</p>
        <h4 id="zt1">我们部门的风采</h4>
        <p class="active"><img src="images/recruit-05.jpg" alt=""/> </p>
          <p>北大青鸟始终以人才作为企业的核心资本。为了吸引、激励和保留优秀人才,公司为员工提供完善的培训与发展体系,
              关注员工成长,同时在兼顾市场竞争力和内部公平的基础上为员工提供全面、富有竞争力的薪酬福利体系。良好的企业
              发展前景、 广阔的个人发展空间。</p>
      <ul>
        <li><a href="">联系我们</a></li>
        <li><a href="">关于我们</a></li>
        <li><a href="">版权声明</a></li>
        <li><a href="">招商加盟</a></li>
      </ul>
</body>
</html>

<!--Css3样式 -->
  /*标签选择器*/
        h4{
            font-size: 18px;
            color: red;
        }
        /*id选择器*/
        #zt1{
            font-size: 18px;
            color: green;
        }

        /*标签选择器*/
        p{
            font-size: 14px;
        }

        /*类选择器*/
        /*.xs{*/
        /*width: 300px;*/
        /*height: 200px;*/
        /*}*/

         /*属性选择器*/
        img[src$=jpg]{
            width: 300px;
            height: 200px;
        }

        /*结构伪类选择器*/
          /*body p:last-of-type{*/
            /*color: blue;*/
        /*}*/

          /*后代选择器*/
            .active~p{
              color: blue;
          }

        /*属性选择器*/
         a[href]{
            font-size: 14px;
            color: #640000;
        }





展开阅读全文

没有更多推荐了,返回首页