第五章

最新推荐文章于 2022-05-12 05:55:54 发布

weixin_43024784

最新推荐文章于 2022-05-12 05:55:54 发布

阅读量361

点赞数

分类专栏：作业文章标签： r

本文链接：https://blog.csdn.net/weixin_43024784/article/details/83859369

版权

作业专栏收录该内容

47 篇文章 0 订阅

订阅专栏

1.使用font——family属性，同时设置英文字体和中文字体时需要注意什么问题？
英文字体写在前面，中文的写在后面

2.在css中，常用的背景属性有几个？作用是什么？
背景颜色 background-color
背景图像 background-img:url
背景尺寸 background-szie

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>北大青鸟课程介绍</title>
<link href="CUU.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div ID="nav"><img src="title.gif" height="67" width="598"/>
  <img src="img_01.png" height="60" width="288"/>
  <p><a>逆向课程设计：</a> <span>以企业需求决定课程设计内容，确保训练内容及深度和企业需求一致</span><br/>
    <br/>
  <a>模拟学员学习路线：</a> <span>强调难点和复杂技能点的反复训练，力求学习效果和学习体验</span><br/><br/>
  <a>互联网作为教学环境：</a> <span>学员的日常教学和训练均在互联网线上进行</span><br/><br/>
  <a>学习挡板监控网上学习效果：</a><span> 每个学习阶段设置线上线下测试，严密监控学习效果</span><br/><br/>
  <a>真实开发项目经验积累：</a> <span>采用专业互联网企业提供的真实项目作为模拟开发</span>
  <img src="img_02.png" height="65" width="329"/><br/><br/>
          <a>【实用性】——</a><co>以就业岗位需求为导向，重点讲解企业80％的时间在使用的20％的技术</co><br/><br/>
          <a>【权威性】——</a><co>与来自百度等知名企业的专家联合开发</co><br/><br/>
          <a>【专业性】——</a><co>引进业内资深人才和典型行业开发项目</co><br/><br/>
          <a>【真实性】——</a><co>在互联网真实环境下进行教学和训练</co><br/><br/>
          <a>【易学性】——</a><co>在线培训模式，24小时专家在线解答疑难问题</co><br/><br/>
          <a>【完整性】——</a><co>利用SNS虚拟社区：学习、人脉双丰收</co>
  </p>
</div>
</body>
</html>

样式

#nav{
  width: 600px;
  background-color: #b3d4fc;
  background: linear-gradient(to top,#ECECEC,#FFFFED);
}
div a:nth-of-type(1){
  background-color: #005952;
  font-weight: bold;
  color:white;
}
div a:nth-of-type(2){
  background-color: #007236;
  font-weight: bold;
  color:white;
}
div a:nth-of-type(3){
  background-color: #008bbf;
  font-weight: bold;
  color:white;
}
div a:nth-of-type(4){
  background-color: #0066b3;
  font-weight: bold;
  color:white;
}
div a:nth-of-type(5){
  background-color: #002561;
  font-weight: bold;
  color:white;
}
div a:nth-of-type(6){
  background-color: #F36F21;
  font-weight: bold;
  color:white;
}
div a:nth-of-type(7){
  background-color:#BB131A;
  font-weight: bold;
  color:white;
}
div a:nth-of-type(8){
  background-color: rgba(215,55,101,0.88);
  font-weight: bold;
  color:white;
}
div a:nth-of-type(9){
  background-color: #A70532;
  font-weight: bold;
  color:white;
}
div a:nth-of-type(10){
  background-color: #002561;
  font-weight: bold;
  color:white;}
div a:nth-of-type(11){
  background-color:#4F1268;
  font-weight: bold;
  color:white;}

span{
  color: #578F14;
  font-weight: bold;
}
co{
  color: #D73765;
  font-weight: bold;
}

4.制作席慕蓉的诗《初相遇》。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>《初相遇》--席慕蓉</title>
  <link href="CUU.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="nav" >
  <h1><a>初相遇</a>         <a>文/席慕容</a></h1>
  <p><a>美</a>丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到的时刻里出现。<br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解释，心里甚至还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感激。<a>胸怀中满溢着幸福，只因你就在我眼前</a>，对我微笑，一如当年。<br/>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落落英缤纷，好像你我才初相遇。</span>
  </p>
</div>
</body>
</html>

样式

#nav {
  width: 400px;
  height: 100%;
  background-color: #b3d4fc;
  background: linear-gradient(to top, #CAEFFE, #FFFFED);
}
h1{
  text-shadow:black 2px 2px 2px;
  text-align: center;
}
h1 a:nth-of-type(1){
  color: #437AAC;
  font-size: 28px;
}
h1 a:nth-of-type(2){
  color: #555555;
  font-size: 18px;
}
p{
  font-size: 12px;
  text-indent: 2em;
  line-height: 22px;
}
p a:nth-of-type(1){
  color: blue;
  font-size: 18px;
  font-weight: bold;
  text-shadow: black 2px 2px 2px;
}
p a:nth-of-type(2){
  color: blue;
  font-style: oblique;
  font-size: 16px;
}
span{
  text-decoration: underline;
  color: green;
}

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

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

样式

h3{
  font-size: 18px;
  font-weight: bold;

}
li{
  list-style: none;
}
div{
  line-height:40px;
}
.dress01 {
  background: url(../../HTML/HTML/dress01.png) 0px 0px no-repeat;
}
.dress02{
  background: url(../../HTML/HTML/dress02.png) 0px 0px no-repeat;
}
.dress03{
  background: url(../../HTML/HTML/dress03.png) 0px 0px no-repeat;
}
.dress04{
  background: url(../../HTML/HTML/dress04.png) 0px 0px no-repeat;
}
.dress05{
  background: url(../../HTML/HTML/dress05.png) 0px 0px no-repeat;
}
a{
  text-decoration: none;
}
a:hover{
  color: #F60;
  text-decoration: underline;
}

weixin_43024784

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
第五章

1.使用font——family属性，同时设置英文字体和中文字体时需要注意什么问题？英文字体写在前面，中文的写在后面2.在css中，常用的背景属性有几个？作用是什么？背景颜色 background-color背景图像 background-img:url背景尺寸 background-szie3.制作北大青鸟课程介绍页面...
复制链接

扫一扫

专栏目录