HTML5和CSS3开发电子商务网站第五章习题

.g3{
   background: linear-gradient(#ececec,#ffffed);
    width: 600px;
}
#g1{
    color: #5c9815;
}

#g2{
    color: #f26522;
}
span{
    color: white;
}

#g1 p span:nth-of-type(1){
   background-color:#808080;
}
#g1 p:nth-of-type(2) span{
    background-color:#66FF00;
}
#g1 p:nth-of-type(3) span{
    background-color:#0099FF;
}
#g1 p:nth-of-type(4) span{
    background-color:#1A42E6;
}
#g1 p:nth-of-type(5) span{
    background-color:#0A1A5C;
}


#g2 p span:nth-of-type(1){
    background-color:#ffcc00;
}
#g2 p:nth-of-type(2) span{
    background-color:red;
}
#g2 p:nth-of-type(3) span{
    background-color:#F7B3C0;
}
#g2 p:nth-of-type(4) span{
    background-color:#D65C75;
}
#g2 p:nth-of-type(5) span{
    background-color:#D23AF9;
}

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

div{
      width: 400px;
    background: linear-gradient(#caeffe,#FFFFED);
}
#g1{
   color: #1a66b3;
    font-size: 24px;
    text-shadow:black 3px 3px 4px;
}
#g2{
    color:gainsboro;
    font-size: 18px;
    text-shadow: black 3px 3px 4px;
}
h1{
    text-align: center;
}

#g3{
    color: #1f87cc;
    font-size: 18px;
    font-weight: bold;
    text-shadow: #FFFFED 3px 3px 4px;
}

#g4{
    font-style: italic;
    color: blue;
    font-size: 16px;
}

div p:nth-of-type(2){
    font-size: 12px;
}

div p:nth-of-type(3){
    text-decoration: underline;
    color: green;
}

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

h2{
    font-size: 18px;
    font-weight: bold;
    text-indent: 2em;
}
a{
    color: black;
    font-size: 12px;
   list-style: none;

}
li{
    list-style-type: none;

}
li a{
    text-decoration:none;
}

li a:hover{
    text-decoration:underline;
    color: #f60;
}
h2:nth-of-type(1){
    background-image:url("dress01.png");
    background-repeat: no-repeat;
}
h2:nth-of-type(2){
    background-image:url("dress02.png");
    background-repeat: no-repeat;
}
h2:nth-of-type(3){
    background-image:url("dress03.png");
    background-repeat: no-repeat;
}
h2:nth-of-type(4){
    background-image:url("dress04.png");
    background-repeat: no-repeat;
}
h2:nth-of-type(5){
    background-image:url("dress05.png");
    background-repeat: no-repeat;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝女装分类页面</title>
    <link href="style3.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<h2>夏季流行</h2><hr/>
    <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> <a href="#">上装</a></li>
    <h2>上装</h2><hr/>
    <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><a href="#">韩版衬衫</a></li>
    <li><a href="#">防晒衣 </a><a href="#"> 休闲套装 </a><a href="#">卫衣 </a><a href="#">背心/吊带 </a></li>
    <h2>裙子</h2><hr/>
    <li><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></li>
    <li><a href="#">牛仔裙 </a><a href="#">半身中长裙 </a><a href="#">半身短裙 </a><a href="#">包臀裙 </a></li>
    <h2>裤子</h2><hr/>
    <li><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><a href="#">连体裤 </a><a href="#">七/九分裤 </a><a href="#">牛仔短裤 </a><a href="#">西装裤 </a></li>
    <h2>其他女装</h2><hr/>
    <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开发电子商务网站 第五章习题

猜你喜欢

HTML5和CSS3开发电子商务网站第五章习题