作业一
使用内联样式表及内部样式表，设计如下图所示的页面，要求如下：
1） 使用标题字和段落标记进行文字显示，在内部样式表中定义 body 标记内的信息‘居中显
示“，定义 p 标记字体为”隶书“
2） 通过 p 标记的 style 属性定义字体大小属性的值分别为 150%、200%、250%。‘朝辞白帝彩
云间“，不定义任何样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>古诗排版</title>
<style type="text/css">
body{
text-align: center;
}
p{
font-family: "LiSu";
}
</style>
</head>
<body>
<h4>早发白帝城</h4>
<h5> 李白</h5>
<p>朝辞白帝彩云间，</p>
<p style="font-size: 150%;">千里江陵一日还。</p>
<p style="font-size: 200%;">两岸猿声啼不住，</p>
<p style="font-size: 250%;">轻舟已过万重山。</p>
</body>
</html>
作业二
按如下要求设计 Web 页面，实现下图所示的页面效果。
1）页面标题为：web 前端开发工程师工作内容；
2）页面题目：1 号标题字显示“web 前端开发工程师工作内容”；3 号标题字显示“web 前端
开发工程师在不同的公司，会有不同的职能，但称呼都是类似的。”
3）采用无序列表显示工作内容，分四个方面，分别是“做网站设计、网页界面开发”“做网页
界面开发”“做网页界面开发、前台数据绑定和前台逻辑的处理”“设计、开发、数据处理”；每
个列表项目显示一种不同风格的工作内容，其中第一个列表项 ID 的样式为“斜体、加粗、
24px、黑体”；第二个列表项样式为“背景色 blue，字符间距 1px”;第三个列表项 ID 样式为“字
体大小 18px、颜色红色”；第四个列表项行内样式“颜色#0000cc，背景色#c0c0c0、隶书”;
4)定义全局样式为“楷体、蓝色”。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web前端开发工程师工作内容</title>
<style type="text/css">
body{
font-family: "楷体";
color: blue;
}
#li1{
font-style:italic;
font-family:"黑体" ;
font-size: 24px;
font-weight: bold;
}
#li2{
background-color:#9999cc;
letter-spacing: 1px;
}
#li3{
font-size: 18px;
color: red;
}
#li4{
color:#0000cc ;
background-color:#c0c0c0 ;
font-family: "LiSu";
}
</style>
</head>
<body>
<h1>Web前端开发工程师工作内容</h1>
<h3>web 前端开发工程师在不同的公司，会有不同的职能，但称呼都是类似的。</h3>
<ul>
<li id="li1"><b>做网站设计、网页界面开发</b></li>
<li id="li2">做网页界面开发</li>
<li id="li3">做网页界面开发、前台数据绑定和前台逻辑的处理</li>
<li id="li4">设计、开发、数据处理</li>
</ul>
</body>
</html>
作业三
利用 div 和 span 标记设计如下页面，要求使用链接外部样式表，要求：
1） 编写外部样式表，命名：job_8_3.css，采用链接外部样式表的方法。
2） 加载图像文件名为：job_8_3.jpg
3） 定义两个图层，外面图层包含一个图像和一个子图层，在子图层内用无序列表显示四行
文字。
4） 对“央视“、”腾讯“、”跨界融合、开放共赢“三个词采用 span 标记定义加粗样式
5） 对“联建杯“定义斜体，加租，大小 24px.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻</title>
<link type="text/css" rel="stylesheet" href="css/job_8_3.css" />
</head>
<body>
<div>
<img src="img/job_8_3.webp"/>
<div>
<ul>
<li>2017<span id="s1">央视</span>综艺节目发力 彰显公益大爱</li>
<li>继北京、上海后，2017年<span id="s1">腾讯</span>视频推介会昨又在广州隆重举行</li>
<li><span id="s1">“跨界融合 开放共赢”</span>移动互联网营销峰会</li>
<li>首届<span id="s2">“联建杯”</span>户外LED显示屏媒体大赛评审圆满落幕</li>
</ul>
</div>
</div>
</body>
</html>
#s1{
font-weight: bold;
color: red;
text-decoration: underline;
}
#s2{
font-style: italic;
font-size: 24px;
font-weight: bold;
}
div{
background-color: skyblue;
}
作业四
按如下要求设计 Web 页面,要求：
1） 页面标题为：牌匾样式
2） 页面内容为一个图层嵌入一个段落，段落内容为“海纳百川 有容乃大“；段落样式为”斜
体特粗 70px 行高 1.5 倍 隶书“；图层 div 的#div0 样式为”宽度 1000px、高度 100px，边框
宽度 20px，线型 outset，颜色#ff0000，填充 20px, 边距 1000px“;页面中所有内容居中
显示（body 标记样式）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>匾牌设计</title>
<style type="text/css">
body{
text-align: center;
}
#div0{
width: 1000px;
height: 100px;
border-width: 20px;
border-style: outset;
border-color: #ff0000;
margin: 20px;
padding: 100px;
}
#div2{
background-color: #8078786e;
width: 900px;
height: 100px;
margin-top: -120px;
margin-left: 150px;
}
p{
font-style: italic;
font-weight: bolder;
font-size: 70px;
line-height: 1.5px;
font-family: "LiSu";
}
</style>
</head>
<body>
<div id="div0" >
<p >
海纳百川 有容乃大
</p>
<div id="div2">
</div>
</div>
</body>
</html>
作业五
按如下要求设计 Web 页面,要求：
1） 页面标题为：文轩图书榜
2） 页面内容为：一个标题，3 个图层，其中 1 个图层中包含 2 个并列的子图层。第一个子
图层插入一幅图像 image4-3.jpg，第二个子图层中插入一个无序列表。
外图层#div3 的样式为“宽度 900px、高度 150px、边框宽度 1px、实线、边框颜色为#F0F0F0、
向左浮动”
第 1 个子图层#div1 的样式为：边距 5px,宽度 160px,高度 150px,边框宽度 1px,实线、边
框颜色#E0E0E0，向左浮动。
第 2 个子图层#div2 的样式为：宽度 700px,高度 150px,第二个子图层内嵌入无序列表 ul
标记样式为“去除列表项前的符号”；列表项的行高为 1.5 倍；第一个列表项中“9”的 span
标记 sp1 样式为“背景色#FF0033,颜色白色，宽度 10px,高度 10px,”;”古汉语常用字字典
“的 span 标记的 sp2 样式为”字体特粗，大小 16px,黑体；第 3 个列表项中的“商务印书馆
span 标记 sp3 样式为”颜色#FF0033，字体特粗，字大小 16px，黑体”；第 4 个列表项内
段落首行缩进 2 个字符；第 5 个列表项中的 25.6 元的 span 标记的 sp4 类样式为“颜色
#c0c0c0，字体特粗，大小 16px,黑体，有删除线效果“。
3） 3 号标题字显示“文轩图书榜“
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文轩图书榜</title>
<style type="text/css">
img{
height:150px ;
}
#div1 {
width: 160px;
height: 150px;
border: 1px solid #e0e0e0;
float: left;
margin: 5px;
}
#div3 {
width: 900px;
height: 152px;
border: 1px solid #f0f0f0;
float: left;
}
#div2 {
width: 700px;
height: 150px;
}
li {
list-style: none;
line-height: 1.5em;
}
.span1 {
background-color: #ff0033;
color: #FFF;
width: 10px;
height: 10px;
}
.span2 {
font-size: 16px;
font-family: 黑体;
font-weight: bolder;
}
.span3 {
font-size: 16px;
font-family: 黑体;
font-weight: bolder;
color: #ff0033;
}
.sapn4 {
color: #c0c0c0;
font-weight: bolder;
text-indent: 2em;
font-family: 黑体;
font-size: 16px;
text-decoration: line-through;
}
</style>
</head>
<body>
<h3>文轩图书榜</h3>
<div id="div3">
<div id="div1"><img src="img/image4-3.jpg">
</div>
<div class="div1">
<ul style="list-style:none">
<li><span class="span1">9</span> <span class="span2">古汉语常用字字典(第 4 版)</span></li>
<li>(13 条评论)</li>
<br>
<li>王力 等 原著者 2005 年 07 月 <span class="span3">商务印书馆</span></li>
<li style="text-indent:2em">本书由著名语言学家王力、岑麟祥、林焘、戴澧、唐作藩、蒋绍愚等十余位专家学者编写，是学习古 汉语的必备工具书。
</li>
</ul>
</div>
<p>
购买 收藏 <span class="span3">25.60 元</span> （8.0 折） 定价：￥<span class="sapn4">32.00</span> 元
</p>
</div>
</body>
</html>作业六
按如下要求设计 Web 页面,要求：
1） 页面标题为：巴城老街风景
2） 页面内容标题：3 号标题字显示内容“巴城老街风景“，标记样式为”字体大小 48px,1.5 倍
行距，右对齐，颜色白色，背景色#009966“.
3） 段落内容为“巴城老街位于江苏的阳澄湖。在江南，人们都喜欢吃又香又肥的阳澄湖大闸
蟹，大闸蟹的产地就在巴城。相传第一个吃螃蟹的人就是巴城老街的人。“段落样式为”
首行缩进 2 个字符，大小 28px,行距 1.5 倍，字符间距 2px,下划线“。
4） 4 张图片分别为 image42.jpg---image45.jpg，分别插入到 1 个图层 div 中.img 标记样式
为“宽度 20%、高度 200px,边框宽度 20px，样式 inset,边框颜色#006633;“
5） 图层 div 的样式为“宽度 100%，高度 160px,向左浮动“
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>巴城老街风景</title>
<style type="text/css">
h3 {
font-size: 48px;
line-height: 1.5em;
text-align: right;
color: white;
background-color: #009966;
}
p {
text-indent: 2em;
font-size: 28px;
line-height: 1.5em;
letter-spacing: 2px;
text-decoration: underline;
}
img {
width: 20%;
height: 200px;
border: 20px inset #006633;
}
div {
width: 100%;
height: 160px;
float: left;
}
</style>
</head>
<body>
<h3>巴城老街风景</h3>
<p>巴城老街位于江苏的阳澄湖。在江南，人们都喜欢吃又香又肥的阳澄湖大闸 蟹，大闸蟹的产地就在巴城。相传第一个吃螃蟹的人就是巴城老街的人。
</p>
<div>
<img src="img/1.webp" />
<img src="img/2.webp" />
<img src="img/3.webp" />
<img src="img/4.webp" />
</div>
</body>
</html>