HTML与CSS布局练习：从基础到复杂,-CSDN博客

本文链接：https://blog.csdn.net/snowy_and_sunny/article/details/132880825

作业一

使用内联样式表及内部样式表，设计如下图所示的页面，要求如下：

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>综艺节目发力&nbsp;彰显公益大爱</li>
					<li>继北京、上海后，2017年<span id="s1">腾讯</span>视频推介会昨又在广州隆重举行</li>
					<li><span id="s1">“跨界融合&nbsp;开放共赢”</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 >
				海纳百川&nbsp;有容乃大
		</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>