web前端开发技术储久良第三版第8章练习与实验答案

web前端开发技术储久良第三版答案整理(1-9章)

练习8
1.选择题
(1)C (2)A (3)B (4)C (5)A
2.填空题
(1)<div></div>;id、class、style。
(2)top、height。
(3)z-index,position。
3.简答题

实验8
1、源代码:

实验8-1演示

<!-- exp_8_1.html -->
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>新闻</title>
        <link href="exp_8_1.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="d1">
            <img src="exp_8_1.jpg">
            <div id="d2">
                <ul>
                <li>2017<span class="b" >央视</span>综艺节目发力 彰显公益大爱</li>
                <li>继北京、上海后,2017年<span class="b">腾讯</span>视频推介会昨又在广州隆重举行</li>
                <li>“<span class="b">跨界融合 开放共赢</span>”移动互联网营销峰会</li>
                <li>首届<span class="it">“联建杯”</span>户外LED显示屏媒体大赛评审圆满落幕</li>
                </ul>
            </div>
        </div>
    </body>
</html>
/* exp_8_1.css */
#d1{
    width:600px;
    height:380px;
    background-color:Lime;
}
#d2{
    font-family:"幼圆";
    font-size:20px;
}
.b{
    font-weight:bold;
    text-decoration:underline;
    color:red;
}
.it{font-style:italic;font-size:24px;font-weight:bold;}源代码:

实验8-2演示

<!-- exp_8_2.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">  
<title>匾牌设计</title>
<style type="text/css">
body{text-align:center;}
#div0{width:800px;height:100px;
border:20px outset #ff0000;
padding:20px;
margin:100px;
}
p{font:italic bolder 70px/1.5em 隶书;
text-align:center;                  
background:#efedee;
}
</style>
</head>
<body>
<div id="div0" class="">
<p>海纳百川,有容乃大</p>
</div>
</body>
</html>
版权声明

弈心博客


首发 弈心博客,转载请附链接!

赞赏支持

感谢支持!


建站不易,感谢支持!

推荐阅读