学生作业

最新推荐文章于 2023-05-03 22:09:31 发布

雪无地

最新推荐文章于 2023-05-03 22:09:31 发布

阅读量400

点赞数 1

本文链接：https://blog.csdn.net/haodemingzdbgzl/article/details/84836174

版权

第五章
1.使用font-family属性，同时设置英文字体和中文字体需要注意什么问题？
首先设置英文字体再设置中文字体
2.在css中，常用的背景属性有哪几个？他们的作用是什么？
color image 背景颜色和背景图像
3.制作所示课程介绍页面，要求如下：
使用div，p，span等标签编辑页面，页面整体背景颜色使用线性渐变（#ECECEC，#FFFFED）。
课程特色字体颜色为绿色（#5C9815）,设计理念字体颜色为橙色（#F26522）。
课程特色和课程理念每行开头带背景颜色的字体为白色，使用结构伪类选择器元素。
使用外部样式表创建页面样式。

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>北大青鸟课程介绍页面</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
<div id="android">

    <h2><img src="test/title.gif" height="67" width="598"/></h2>

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

    <h3><img src="test/img_02.png" height="65" width="329"/></h3>
    <div class="design">
        <a>【实用性】――</a> 以就业岗位需求为导向，重点讲解企业80％的时间在使用的20％的技术<br/>
        <a>【权威性】――</a> 与来自百度等知名企业的专家联合开发<br/>
        <a>【专业性】――</a> 引进业内资深人才和典型行业开发项目<br/>
        <a>【真实性】――</a> 在互联网真实环境下进行教学和训练<br/>
        <a>【易学性】――</a> 在线培训模式，24小时专家在线解答疑难问题<br/>
        <a>【完整性】――</a> 利用SNS虚拟社区：学习、人脉双丰收
    </div>
</div>
</body>
</html>

《css》


#android {
    width:600px;
    background: linear-gradient(to bottom, #ececec,#FFFFED);
}
#android a {
    color:#ffffff;
}
.course {
    line-height:30px;
    color:#5c9815;
}
.course a:nth-of-type(1) {
    background-color: #005959;
}
.course a:nth-of-type(2) {
    background-color:#007230;
}
.course a:nth-of-type(3) {
    background-color:#008bbf;
}
.course a:nth-of-type(4) {
    background-color:#0066b9;
}
.course a:nth-of-type(5){
    background-color:#002569;
}
.design {
    line-height:30px;
    color:#f26522;
}
.design a:nth-of-type(1) {
    background-color:#f36f29;
}
.design a:nth-of-type(2) {
    background-color:#bb131a;
}
.design a:nth-of-type(3){
    background-color:#d73760;
}
.design a:nth-of-type(4) {
    background-color:#a70539;
}
.design a:nth-of-type(5) {
    background-color:#553179;
}
.design a:nth-of-type(6){
    background-color:#4f1260;
}

4.制作图所示的席慕蓉的诗《初相遇》要求如下：
页面总宽度400px，整体背景颜色线性渐变（#CAEFFE，#FFFFED）
使用h1标签排版文本标题，字体大小为18px，黑色文字阴影。
使用p标签排版文本正文，首行缩进2em，行高为22px。
首行第一个“美”字，字体大小为18px，加粗显示，黑色和白色文字阴影，第二段中的“胸怀中……在我眼前”字体风格为倾斜，颜色为蓝色，字体大小为16px。正文其他文字大小为12px。
最后一段文字带下划线。
使用外部样式表创建页面样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="test2.css">

</head>
<body>
<div id="android">
    <h1>初相遇 <a> 文/席慕容</a></h1>

    <p><b>美</b> 丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到
    的时刻里出现。</p>

    <p> 我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解
    释，心里甚至还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感
    激。<c>胸怀中满溢着幸福，只因你就在我眼前</c> ，  对我微笑，一
    如当年。</p>

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

</div>
</body>
</html>

《css》

h1{
    font-size: 18px;
    color: #0d7dac;
    text-align: center;
    text-shadow: #000 1px 1px 1px;
}
a{
    font-size: 12px;
    color: #a1a4a9;
}
b{
    font-size: 16px;
    font-weight: bold;
    color: #6e17f0;
    text-shadow: #fafafa 1px 1px 1px;
}
c{
    font-size: 16px;
    font-weight: bold;
    color: #4c67f4;
    font-style:italic;
}
.d{
    color: #339900;
    text-decoration: underline;
}

p{
    text-indent: 2em;
    font-size: 12px;
    line-height: 22px;
}
#android {
    width: 400px;
    background: linear-gradient(to bottom, #aee4ec, #e7ffcc);
}

5.制作图所示的淘宝女装分类页面，要求如下：
使用无序列表等HTML标签有语义化的编辑页面
女装内容字体大小为12px，超链接文本字体颜色为黑色，无下划线，当鼠标移到超链接文本上时字体颜色变为橙色(#F60),并且显示下划线。
使用外部样式表创建页面样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="test3.css">
</head>
<body id="dress">
<ul>
    <li>
        <h3 class="a01"> 夏季流行</h3>
        <hr>
        <a href="#">夏季新品</a>
        <a href="#">雪纺裙</a>
        <a href="#">铅笔裤</a>
        <a href="#">短裤</a>
        <a href="#">短袖衬衫</a>
        <a href="#">小脚牛仔裤</a>
        <a href="#">开衫</a>
        <a href="#">蕾丝/雪纺衫</a>
        <a href="#">韩版外套</a>
        <a href="#">小西装</a>
        <a href="#">中长款裙</a>
    </li>
    <li>
        <h3 class="a02">上装</h3>
        <hr>
        <a href="#">衬衫</a>
        <a href="#">针织衫</a>
        <a href="#">长袖T</a>
        <a href="#">韩版T</a>
        <a href="#">情侣衫</a>
        <a href="#">雪纺衬衫</a>
        <a href="#">韩版衬衫</a>
        <a href="#">防晒衣</a>
        <a href="#">休闲套装</a>
        <a href="#">卫衣 </a>
        <a href="#">背心/吊带</a>
    </li>
    <li>
        <h3 class="a03"> 裙子</h3>
            <hr>
        <a href="#">半身裙</a>
        <a href="#">长裙</a>
        <a href="#">短袖裙</a>
        <a href="#">蕾丝连衣裙</a>
        <a href="#">长袖裙</a>
        <a href="#">无袖/背心裙</a>
        <a href="#">A字裙</a>
        <a href="#">牛仔裙</a>
        <a href="#">半身中长裙</a>
        <a href="#">半身短裙</a>
        <a href="#">包臀裙</a>
    </li>
    <li>
        <h3 class="a04">裤子</h3>
            <hr>
        <a href="#">休闲裤</a>
        <a href="#">牛仔裤</a>
        <a href="#">打底裤</a>
        <a href="#">长裤</a>
        <a href="#">哈伦裤</a>
        <a href="#">阔腿裤</a>
        <a href="#">短裤/热裤</a>
        <a href="#">连体裤</a>
        <a href="#">七/九分裤</a>
        <a href="#">牛仔短裤</a>
        <a href="#">西装裤</a>
    </li>
    <li>
        <h3 class="a05">其他女装</h3>
        <hr>
        <a href="#">胖M装</a>
        <a href="#">中老年</a>
        <a href="#">婚纱</a>
        <a href="#">礼服</a>
        <a href="#">旗袍</a>
        <a href="#">夜店</a>
        <a href="#">舞台装</a>
        <a href="#">唐装</a>
        <a href="#">职业装</a>
        <a href="#">全球购</a>
        <a href="#">羊绒衫</a>
        <a href="#">毛衣</a>
        <a href="#">呢大衣</a>
        <a href="#">羽绒服</a>
        <a href="#">真皮皮衣</a>
    </li>

</ul>
</body>
</html>

《css》

.a01{
     background: url(test3/dress01.png) 0px 0px no-repeat;
 }
.a02{
    background: url(test3/dress02.png) 0px 0px no-repeat;
}
.a03{
    background: url(test3/dress03.png) 0px 0px no-repeat;
}
.a04{
    background: url(test3/dress04.png) 0px 0px no-repeat;
}
.a05{
     background: url(test3/dress05.png) 0px 0px no-repeat;
 }
#dress {
    width: 320px;
    line-height: 25px;
    font-size: 12px;
}

h3 {
    font-size: 16px;
    text-indent: 40px;
    height: 40px;
    line-height: 40px;
}
li{
    list-style: none;
}

a {
    color: #000;
    text-decoration: none;
}

雪无地

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
学生作业

第五章1.使用font-family属性，同时设置英文字体和中文字体需要注意什么问题？首先设置英文字体再设置中文字体2.在css中，常用的背景属性有哪几个？他们的作用是什么？color image 背景颜色和背景图像3.制作所示课程介绍页面，要求如下：使用div，p，span等标签编辑页面，页面整体背景颜色使用线性渐变（#ECECEC，#FFFFED）。课程特色字体颜色为绿色（#5...
复制链接

扫一扫