HTML5 第五章CSS3美化网页课后作业

制作北大青鸟课程介绍页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>北大青鸟课程介绍</title>
    <style>
        div{
            background:-moz-linear-gradient(#ECECEC,#FFFFED);
            width: 598px;
            line-height: 30px;
        }
        .one{
            color: #5C9815;
        }
        .two{
            color: #F26522;
        }
        p span:nth-of-type(1){background: darkslategray;color: #FFFFFD}
        p span:nth-of-type(2){background: #5C9815;color: #FFFFFD}
        p span:nth-of-type(3){background: chartreuse;color: #FFFFFD}
        p span:nth-of-type(4){background: cyan;color: #FFFFFD}
        p span:nth-of-type(5){background: fuchsia;color: #FFFFFD}
        p span:nth-of-type(6){background: lightgreen;color: #FFFFFD}
    </style>
</head>
<body>
<div>
    <p><img src="图片素材/title.gif"></p>

    <p><img src="图片素材/img_01.png"></p>

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

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


</body>
</html>

制作席慕容的诗《初相遇》
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初相遇</title>
    <style>
        div{
            background:-moz-linear-gradient(#CAEFFE,#FFFFED);
            width: 400px;
        }
        h1 .one{
          font-size: 30px;
            color: #1F87CC;
        }
        h1{font-size: 18px;
            text-align: center;
            text-shadow: black 2px 2px 2px;
        }
        p{
            font-size: 12px;
            text-indent: 2em;
            line-height: 22px;
        }
       p .two{
           color: darkorchid;
           font-size: 18px;
           font-weight: bold;
           text-shadow:  black 2px 2px 2px ;
       }
        p .thr{
            font-style: italic;
            color: blue;
            font-size: 16px;
        }
        div p:last-child{
            text-decoration: underline;
        }

    </style>
</head>
<body>
<div>
    <h1><span class="one">初相遇</span>      文/席慕容</h1>
    <p><span class="two">美</span>丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到的时刻里出现。</p>
    <p>我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解释，心里甚至还能感觉到，所有被浪费的时光竟然都能重回
        时的狂喜与感激。<span class="thr" >胸怀中满溢着幸福，只因你就在我眼前，对我微笑，</span>一如当年。</p>
    <p>我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落落英缤纷，好像你我才初相遇。</p>
</div>
</body>
</html>

制作淘宝女装分类
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝女装分类页面</title>
    <style>
        #a{

        background-image: url("图片素材/dress01.png");
            background-repeat: no-repeat;

        }
        #b{
            background-image: url("图片素材/dress02.png");
            background-repeat: no-repeat;
        }
        #c{
            background-image: url("图片素材/dress03.png");
            background-repeat: no-repeat;
        }
        #d{
            background-image: url("图片素材/dress04.png");
            background-repeat: no-repeat;
        }
        #e{
            background-image: url("图片素材/dress05.png");
            background-repeat: no-repeat;
        }
        h1{text-indent: 2.3em;
            font-weight: bold;

        font-size: 18px}
        h1 a{
            color: black;
            text-decoration: none;
        }
        h1 a:hover{
            text-decoration: underline;
        }
       li a{
            font-size: 12px;
            color: black;
           text-decoration: none;

        }
        li{
            list-style: none;
            text-indent: -2.3em;

        }
        li a:hover{
            text-decoration: underline;
        }


    </style>
</head>
<body>
<div id="a"><h1><a href="#">夏季流行</a></h1></div>

<hr>
<ul>
    <li><a href="#">夏季新品</a>  <a href="#">雪纺裙</a><a href="#">短袖T</a>  <a href="#"铅笔裤></a><a href="#">短裤</a>
        <a href="#">短袖衬衫</a> <a href="#">小脚牛仔裤</a> </li>
    <li><a href="#">开衫</a><a href="#">蕾丝/雪纺衫</a> <a href="#">韩版外套</a>  <a href="#">小西装</a> <a href="#">中长款裙</a> </li>
</ul>
<h1 id="b"><a href="#">上装</a></h1>
<hr>
<ul>
    <li><a href="#">T恤</a><a href="#">衬衫 </a> <a href="#">针织衫</a> <a href="#">长袖T</a> <a href="#">韩版T</a>
        <a href="#">情侣衫</a><a href="#">雪纺衬衫</a> </li>
    <li><a href="#">韩版衬衫</a><a href="#">防晒衣 </a> <a href="#">休闲套装</a><a href="#">卫衣</a> <a href="#">背心/吊带</a>  </li>
</ul>
<h1 id="c"><a href="#">裙子</a></h1>
<hr>
<ul>
    <li><a href="#">连衣裙</a> <a href="#">半身裙 </a><a href="#">长裙</a><a href="#">短袖裙</a>  <a href="#">蕾丝连衣裙</a><a href="#">长袖裙</a> </li>
    <li><a href="#">无袖/背心裙 </a><a href="#">A字裙 </a><a href="#">牛仔裙</a> <a href="#">半身中长裙</a> <a href="#">半身短裙</a> <a href="#">包臀裙 </a></li>
</ul>
<h1 id="d"><a href="#">裤子</a></h1>
<hr>
<ul>
    <li><a href="#">裤子</a><a href="#">休闲裤</a>  <a href="#">牛仔裤 </a><a href="#">打底裤</a><a href="#">长裤</a>
        <a href="#">哈伦裤</a><a href="#">阔腿裤</a> </li>
    <li><a href="#">短裤/热裤</a><a href="#">连体裤</a> <a href="#">七/九分裤 </a> <a href="#">牛仔短裤</a> <a href="#">西装裤</a></li>
</ul>
<h1 id="e"><a href="#">其他女装</a></h1>
<hr>
<ul>
    <li><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> </li>
    <li><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>
HTML5 第五章CSS3美化网页课后作业

猜你喜欢
