HTML第5章：CSS3美化网页元素：课后作业

最新推荐文章于 2023-02-14 23:21:13 发布

gz98411

最新推荐文章于 2023-02-14 23:21:13 发布

阅读量6.4k

点赞数 2

分类专栏： HTML5 基础

本文链接：https://blog.csdn.net/gz98411/article/details/80719767

版权

本篇博客通过两个实例展示了如何使用CSS3来美化网页。首先是一个北大青鸟课程介绍页面，通过结构伪类选择器实现了不同颜色背景的字体，并使用线性渐变背景。接着是席慕蓉《初相遇》的页面，设置了标题和正文的样式，包括字体大小、颜色、阴影和下划线。所有样式均使用外部样式表创建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.制作图5.38所示的北大青鸟课程介绍页面。页面要求如下，
>使用<div>.<p>.<span>等标签编辑页面，页面整体背景颜色使用线性渐变
（#ECECEC，#FFFFED）.
课程特色字体颜色为绿色（#5C9815），设计理念字体颜色为橙色（#F26522）.
>课程特色和设计理念每行开头带背景颜色的字体为白色，背景颜色从提供作业素材的页面
效果图中获取、使用结构伪类选择器元素。
>使用外部样式表创建页面样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>北大青鸟课程介绍页面</title>
  /*内部样式*/
    <style>
        /*渐变线*/
        #Bj{ width:600px;background: linear-gradient(to bottom,#ECECEC,#FFFFED);}
        /*字体颜色*/
        .yss{color: #5C9815;}   .yss1{color: #F26522}
            /*结构仿类选择器*/
        p span:nth-of-type(1){background: chartreuse;}
        p span:nth-of-type(2){background: #2ecd7b;}
        p span:nth-of-type(3){background:cadetblue;}
        p span:nth-of-type(4){background:darkcyan;}
        p span:nth-of-type(5){background: blue;}

        p a:nth-of-type(1){background:brown;}
        p a:nth-of-type(2){background:royalblue;}
        p a:nth-of-type(3){background:red;}
        p a:nth-of-type(4){background:fuchsia;}
        p a:nth-of-type(5){background:darkorchid;}
        /*图片大小*/
        .dx{height: 50px}
    </style>
</head>
<body>
   <div id="Bj">
    <img src="title.gif"/>
       <h3><img src="img_01.png" class="dx"/></h3>
       <p class="yss"><span>逆向课程设计：</span> 以企业需求决定课程设计内容，确保训练内容及深度和企业需求一致
           <span>模拟学员学习路线：</span>模强调难点和复杂技能点的反复训练，力求学习效果和学习体验<br/>
           <span>互联网作为教学环境：</span>学员的日常教学和训练均在互联网线上进行<br/>
           <span>学习挡板监控网上学习效果：</span>每个学习阶段设置线上线下测试，严密监控学习效果<br/>
           <span>真实开发项目经验积累：</span>采用专业互联网企业提供的真实项目作为模拟开发</p>
       <h3><img src="img_02.png" class="dx"/> </h3>
       <p class="yss1">【实用性】—— 以就业岗位需求为导向，重点讲解企业80％的时间在使用的20％的技术<br/>

最低0.47元/天解锁文章