web前端开发技术（第3版）储九良著课后实验
实验7
1.使⽤内联样式表及内部样式表，设计7-9所⽰的页⾯。设计要求如下：
（1）使⽤标题字和段落标记进⾏⽂字显⽰，在内部样式表中定义body标记内信息“居中显⽰”，定义p标记字体为“⾪书”。
（2）通过怕标记style属性定义字体⼤⼩属性（font-size）的值为150%，200%，250%,"朝辞⽩帝彩云间，"不定义任何任何样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>shi yan 7-1</title>
<style type="text/css">
body{text-align:center;font-family:"⾪书"}
</style>
</head>
<body>
<h4>早发⽩帝城</h4>
<p>李⽩</p>
<p>朝辞⽩帝彩云间，</p>
<p >千⾥江陵⼀⽇还。</p>
<p >两岸猿⼭啼不住，</p>
<p >轻⾈已过万重⼭。</p>
</body>
</html>
2.按如下要求设计“Web前端开发⼯程师⼯作内容”页⾯，设计如图7-10所⽰的页⾯。要求如下：
（1）页⾯要求为：Web前端开发⼯程师⼯作内容；
（2）页⾯标题：1 号标题字显⽰“Web前端开发⼯程师⼯作内容”；3号标题字显⽰“Web前端⼯程师在不同的公司，会有不同的职能，但称呼都是类似的。”；
（3）采⽤⽆序列表显⽰⼯作内容，分四个⽅⾯，分别是“做⽹站设计、⽹页界⾯开发”“做⽹页界⾯开发”“做⽹页界⾯开发、前台数据绑定和前台逻辑的处理”“设计、开发、数据处理”；每⼀列表显⽰⼀种不同风格的⼯作内容，其中第⼀列表项ID（li1）样式为“斜体、加粗、24px、⿊体”；第⼆个列表项类（li2）样式为“背景⾊#9999cc、字符间距1px”；第三个列表项ID（li3）样式为“字体⼤⼩
18px、颜⾊红⾊”；第四列表项⾏内样式“颜⾊#0000cc、背景⾊#c0c0c0、⾪书”；
（4）定义全局样式为“楷体。蓝⾊”。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web前端开发⼯程师⼯作内容</title>
<style type="text/css">
#li1{font-style:italic;font-weight:bold;font-size:24px;font-family:⿊体;}
#li2{background-color:#9999cc;letter-spacing:1px;}
#li3{font-size:18px;color:red;}
#li4{background-color:#c0c0c0;font-family:⾪书;}
body{font-family：楷体;color:blue;}
</style>
</head>
<body>
<h1>Web前端开发⼯程师⼯作内容</h1>
<h3>web前端⼯程师在不同的公司，会有不同的职能，但称呼都是类似的</h3> <ul>
<li id="li1">做⽹站设计、⽹页界⾯开发</li>
<li id="li2">做⽹页界⾯开发</li>
<li id="li3">做⽹页界⾯开发、前台数据绑定和前台逻辑处理</li>
<li id="li4" >设计、开发、数据处理</li>
</ul>
</body>
数字前端工程师和web前端
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。