第二本第五章_2.在css中,常用的背景属性有哪几个它们的作用是什么?-CSDN博客

本文链接：https://blog.csdn.net/k123liu/article/details/83826020

1.使用font—family属性，同时设置英文字体和中文字体时需要注意什么问题？
答：先写英文字体，再写中文字体，尽可能设置计算机中常用的字体。

2.在CSS中，常用的背景属性用哪几个？它们的作用是什么？
答：（1）background-color设置背景颜色。
（2）background-image设置背景图像。
（3）background-repeat和background-position通常和背景图像一起使用，分别设置背景图像的重复方式和定位。

3.制作北大青鸟课程介绍页面。
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虚拟社区：学习、人脉双丰收

4.制作北大青鸟课程介绍页面。

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;
}

初相遇--席慕蓉

初相遇文/席慕容

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

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

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

5.制作淘宝女装分类页面。

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 情侣衫雪纺衬衫韩版衬衫防晒衣休闲套装卫衣背心/吊带

         <li>
             <h1>裙子</h1><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>
             <a href="#">牛仔裙</a>
             <a href="#">半身中长裙</a>
             <a href="#">半身短裙</a>
             <a href="#">包臀裙</a>
         </li>
        <li>
            <h1>裤子</h1><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>
            <a href="#">西装裤</a>
        </li>
        <li>
            <h1>其他女装</h1><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>
</div>