网页设计与制作实验七CSS3 基础应用

小孙同学1024

已于 2023-11-21 15:47:13 修改

阅读量1.3k

点赞数 2

分类专栏：网页设计与制作实验报告文章标签： css3 css 前端 html

于 2023-06-21 00:05:35 首次发布

本文链接：https://blog.csdn.net/Annzz123/article/details/131317255

版权

网页设计与制作实验报告专栏收录该内容

10 篇文章 5 订阅

订阅专栏

一、实验目的

1．掌握 CSS3 新增功能。

2．掌握 CSS3 布局样式。

3．掌握 CSS3 页面美化。

4．熟悉 CSS3 变形、过渡及动画效果。

二、实验环境

1．硬件：计算机。操作系统： Windows；

2．软件：HBuilder；

三、实验内容

1、CSS3 页面布局

实验步骤

1）新建html文档

2）设置网页标题

3）设置四个div，其中三个嵌套到第一个里，添加css3样式使里面三个高度一致并且第二个和第四个div互换位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS3 页面布局</title>
		<style>
			#con{
				display: -moz-box;/* 私有前缀 */
				display: -webkit-box;/* 私有前缀 */
				display: box;/* 盒布局 */
				-moz-box-direction: reverse;
				-webkit-box-direction: reverse;
			}
			#left{
				float: left;
				width: 200px;
				padding: 10px;
				background-color: orange;
			}
			#cons{
				float: left;
				width: 650px;
				padding: 10px;
				background-color: yellow;
			}
			#right{
				float: left;
				width: 200px;
				padding: 10px;
				background-color: limegreen;
			}
			img{
				width: 200px;
			}
		</style>
	</head>
	<body>
		<div id="con">
			<div id="left">
				<h2>左边边栏</h2>
				<ul>
					<li>
						<a href="#">超链接</a>
					</li>
					<li>
						<a href="#">超链接</a>
					</li>
					<li>
						<a href="#">超链接</a>
					</li>
					<li>
						<a href="#">超链接</a>
					</li>
					<li>
						<a href="#">超链接</a>
					</li>
					<li>
						<a href="#">超链接</a>
					</li>
					<li>
						<a href="#">超链接</a>
					</li>
				</ul>
			</div>
			<div id="cons">
				<h2>中间栏目</h2>
				<p>
					<img src="img/微信图片.jpg" align="left">
						1、我一路走来的世界，是有许多生活中的挫折所滋润。
					　　2、寂静在喧嚣里低头不语，沉默在黑夜里与目光结交，于是，我们看错了世界，却说世界欺骗了我们。
					　　3、我是一只旷野的鸟，在你的眼里找到了天空。
					　　4、我将一次又一次的死去，以此证明，生命将是无穷无尽的。
					　　5、生命从世界得到资产，爱情使它得到价值。
					　　6、纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。
					　　7、只有经历过地狱般的磨砺，才能练就创造天堂的力量；只有流过血的手指，才能弹出世间的绝响；没有暴风雨中的拼搏，就没有豪迈的飞翔。
					　　8、道路虽然拥挤，却是寂寞的，因为它没有品尝到爱。
					　　9、我们在热爱世界时，便生活在这世界上。
					　　10、他是有福的，因为他的名望并没有比他的真实更光亮。
					　　11、我将等待着黎明，而当我醒来的时候，就会看到在光明里的你的城池。
					　　12、爱的痛苦，像澎湃的大海，在我的生命里放歌，而爱的快乐，像鸟儿在花丛中吟唱。
					　　13、创造的神秘，有如夜间的黑暗——是伟大的。而知识的幻影却不过如晨间之雾。
					　　14、神对于那些大帝国会感到厌恶，却绝不会厌恶那小小的花朵。
					　　15、明明是我们看错了世界，却还要说世界欺骗了我们。
					　　16、我将一次又一次的死去，来证明生命是无穷无尽的。
					　　17、那想做好人的，在门外敲着门：那爱人的，看见门敞开着。
					　　18、当我想到我的时间的终点，时间的隔栏便破裂了。
					　　19、忧思在我的心里平静下去，正如暮色降临在寂静的山林中。
					　　20、不是槌的打击，乃是水的载歌载舞，使鹅卵石臻于完美。
					　　21、当人是兽时，他比兽还坏。
				</p>
			</div>
			<div id="right">
				<h2>右边边栏</h2>
				<ul>
					<li>
						<a href="#">超链接</a>
					</li>
					<li>
						<a href="#">超链接</a>
					</li>
					<li>
						<a href="#">超链接</a>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>

2、CSS3 多列布局

实验步骤

1）新建html文档

2）设置网页标题

3）使用css3样式设置分栏，分成三栏，并设置分割线。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS3 多列布局</title>
		<style>
			body{
				-webkit-columns:320px 3;/* 设置分栏 */
				columns:320px 3;/* 设置分栏 */
				-webkit-column-rule: dashed 2px red;/* 设置分割线 虚线,2px 红色 */
			}*
			h1{
				background-color: #32CD32;
				text-align: center;
				-webkit-column-span: all;
			}
			h2{
				text-align: center;
				-webkit-column-span: all;
			}
			img{
				width: 150px;
				float: left;
			}
		</style>
	</head>
	<body>
		<h1>飞鸟集</h1>
		<h2>泰戈尔</h2>
		<p>1、我一路走来的世界，是有许多生活中的挫折所滋润。
　　2、寂静在喧嚣里低头不语，沉默在黑夜里与目光结交，于是，我们看错了世界，却说世界欺骗了我们。
　　3、我是一只旷野的鸟，在你的眼里找到了天空。
　　4、我将一次又一次的死去，以此证明，生命将是无穷无尽的。
　　5、生命从世界得到资产，爱情使它得到价值。
　　6、纵然伤心，也不要愁眉不展，因为你不知是谁会爱上你的笑容。
　　7、只有经历过地狱般的磨砺，才能练就创造天堂的力量；只有流过血的手指，才能弹出世间的绝响；没有暴风雨中的拼搏，就没有豪迈的飞翔。
　　8、道路虽然拥挤，却是寂寞的，因为它没有品尝到爱。
　　9、我们在热爱世界时，便生活在这世界上。
　　10、他是有福的，因为他的名望并没有比他的真实更光亮。
　　11、我将等待着黎明，而当我醒来的时候，就会看到在光明里的你的城池。
　　12、爱的痛苦，像澎湃的大海，在我的生命里放歌，而爱的快乐，像鸟儿在花丛中吟唱。
　　13、创造的神秘，有如夜间的黑暗——是伟大的。而知识的幻影却不过如晨间之雾。
　　14、神对于那些大帝国会感到厌恶，却绝不会厌恶那小小的花朵。
　　15、明明是我们看错了世界，却还要说世界欺骗了我们。
　　16、我将一次又一次的死去，来证明生命是无穷无尽的。
　　17、那想做好人的，在门外敲着门：那爱人的，看见门敞开着。
　　18、当我想到我的时间的终点，时间的隔栏便破裂了。
　　19、忧思在我的心里平静下去，正如暮色降临在寂静的山林中。
　　20、不是槌的打击，乃是水的载歌载舞，使鹅卵石臻于完美。</p>
    <img src="img/微信图片.jpg">
	<p>
			21、当人是兽时，他比兽还坏。
		　　22、日子的尽头，我站在你面前，你将会看见我的伤疤。你就会知晓，我曾受伤，也曾痊愈。
		　　23、我今晨坐在窗前，世界如一个路人似的，停留了一会，向我点点头又走过去了。
		　　24、有些看不见的手，如懒懒的微风吹过，正在我的心上奏着潺潺的乐声。
		　　25、权势以它的恶行自夸，落下的黄叶与浮游的云片却在笑它。
		　　26、有一次，我们梦见大家都是不相识的。我们醒了，却知道我们原是相亲相爱的。有一天，我们梦见我们相亲相爱了，我醒了，才知道我们早已经是陌路。
		　　27、碰一碰，你也许会毁了它；远着点儿，你也许会占有它。
		　　28、太阳在西方落下时，他的早晨的东方已静悄悄的站在他面前。
		　　29、谢谢火焰给你光明，但是不要忘了那执灯的人，他是坚忍地站在黑暗当中呢。
		　　30、生如夏花，死如秋叶。
		　　31、我无法选择最好的，是最好的选择了我。
		　　32、小草在大地寻找群聚，树木向天空寻找孤寂。
		　　33、你看不见你自己，你所看见的只是你的影子。
		　　34、生命注满了爱，就如酒杯斟满了酒。
		　　35、使卵石臻于完美的，并非锤的打击，而是水的且歌且舞。
		　　36、接触着，你也许会伤害；远离着，你也许会占有。
		　　37、尘土受到损辱，却以她的.花朵来报答。
		　　38、不要因为峭壁是高的，便让你的爱情坐在峭壁上。
		　　39、尽管走下去，不必逗留着去采着花儿来保存，因为一路上花朵自会开放的。
		　　40、信念是鸟，它在黎明仍然黑暗之际，感觉到了光明，唱出了歌。
	</p>
	</body>
</html>

3、CSS3 页面美化

实验步骤

1）新建html文档

2）设置网页标题

3）使用@font-face引用外部字体，并使用字体，使用text-shadow属性设置字体阴影，最后用word-wrap 属性设置换行方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS3 页面美化</title>
		<style>
			@font-face {
				font-family:myfont;
				src: url(img/sy5.ttf);
			}
			h1,p,footer{
				color: crimson;
				width: 15px;
				font-family: myfont;/* 使用引入的字体*/
				float: right;
				padding: 20px;
				margin: 20px;
				font-size: 3.4375rem;
				word-wrap:break-word;
				text-shadow:2px 2px #ff0000;
			}
		</style>
	</head>
	<body>
		<h1>醉花阴</h1>
		<p>薄雾浓云愁永昼</p>
		<p>瑞脑消金兽</p>
		<p>佳节又重阳</p>
		<p>玉枕纱厨，半夜凉初透</p>
		<p>东篱把酒黄昏后</p>
		<p>有暗香盈袖</p>
		<p>莫道不销魂</p>
		<p>帘卷西风，人比黄花瘦</p>
		<footer>李清照</footer>
	</body>
</html>