网页设计与制作实验三CSS高级应用

小孙同学1024

已于 2023-11-21 15:48:12 修改

阅读量972

点赞数 1

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

于 2023-06-20 22:39:06 首次发布

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

版权

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

10 篇文章 5 订阅

订阅专栏

一、实验目的

1．掌握 CSS 网页美化的方法。

2．掌握图文混排设计。

3．掌握导航菜单及超链接。

二、实验环境

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

2．软件：HBuilder；

三、实验内容

1、图文混排

实验步骤

1）新建html文档

2）设置网页标题

3）用p标签设置标题，设置文字为橙色。将图片向右浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图文混排</title>
		<style>
			span{
				color:orange;/* 文字颜色橘色 */
			}
			p{
				float: left;/* 文字向左浮动 */
			}
			img{
				float: right;/* 图片向左浮动 */
				width: 300px;
			}
		</style>
	</head>
	<body>
		<p><span>统一存储，大道智简</span><br>
		华为执行副总裁徐直军：华为致力于通过提升管道容量、增加管道使能、优化管道管理，使管道更宽</p>
		<img src="./img/Zhuoku275.jpg">
	</body>
</html>

2、小图标修饰列表

实验步骤

1）新建html文档

2）设置网页标题

3）编写无序列表，在ul上设置列表图片，设置li对应属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小图标修饰列表标题</title>
		<style>
			ul{
				list-style: url(./img/fh.jpg);/* 设置列表项为图片 */
			}
			li{
				
				list-style-position: inside;/* 设置环绕文本根据标记对齐 */
				height: 30px;
				line-height: 30px;
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>张鹏老师带你一周hold住html+css视频教程</li>
			<li>轻松学习网页设计系列视频教程</li>
			<li>张鹏_带你轻松学习Flash动画制作</li>
			<li>韩奇峰带你JQ快速入门到掌握核心技术</li>
			<li>韩奇峰_JavaScript网页特效精华制作</li>
		</ul>
	</body>
</html>

3、鼠标经过图标切换效果

实验步骤

1）新建html文档

2）设置网页标题

3）编写a标签，将a标签设置为块级元素，设置鼠标未悬浮时和悬浮时链接的背景

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标经过图标切换效果</title>
		<style>
			a{
				display: block;/* 将标签设置为块级 */
				height: 150px;
				width: 150px;
			}
			a:link{
				
				background-image: url(img/173533.jpg);/* 鼠标为单击时链接背景样式 */
			}
			a:hover{
				background-image: url(img/175114.jpg);/* 鼠标悬浮链接时背景样式 */
			}
		</style>
	</head>
	<body>
		<a href="#"></a>
	</body>
</html>

4.easy导航栏

实验步骤

1）新建html文档

2）设置网页标题

3）设置无序列表，删除列表项，设置左浮动，设置链接背景颜色和悬浮时背景颜色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>easy导航栏</title>
		<style>
			ul{
				list-style: none;/* 列表项设置为无 */
			}
			li{
				width: auto;/* 宽度自适应 */
				height: 50px;/* 高度50px */
				float: left;/* 向左浮动 */
			}
			a{
				color: #000000;/* 设置a标签里文字为黑色 */
				height: 40px;
				line-height: 40px;
				padding: 20px;
			}
			a:link{
				color: black;
				background-color: white;/* 设置背景为白色 */
				text-decoration: none;/* 设置链接下划线无 */
			}
			a:hover{
				color: black;
				background-color: red;/* 设置背景为红色 */
				text-decoration: none;/* 设置链接下划线无 */
			}
		</style>
	</head>
	<body>
		<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>
		</ul>
	</body>
</html>

5.CSS字体样式属性

实验步骤

1）新建html文档

2）设置网页标题

3）使用p标签用id选择器对各行进行样式设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简单的光影资讯页面</title>
		<style>
			div{
				width: 600px;
				background-color: #FFA500;
				margin: 0 auto;
				
			}
			h2{
				width: 600px;
				height: 50px;
				text-align: center;
				background-image: url(img/Zhuoku275.jpg);
			}
			 li{
				list-style: none;/*去除li样式*/
				list-style-position:inside;
				background-image: url(img/fh.jpg);
				background-repeat: no-repeat; 
				line-height: 30px;
				text-indent: 50px;/*调整图标与文字间距离*/
			}
			a{
				text-decoration: none;
				color:yellow;
			}
		</style>
	</head>
	<body>
		<div>
			<h2>movies</h2>
			<ul>
				<li>
					<a href="#">《变形金刚4--绝境逢生》--（2014）</a><br>
					芝加哥一战后，汽车人、霸天虎销声匿迹。一群天才科学家欲研发难以驾驶的新技术。而一个古老强大的变形金刚出现并威胁着人类，决战一触即发。
				</li>
				<li>
					<a href="#">《罪恶之城2》--（2014）</a><br>
					芝加哥一战后，汽车人、霸天虎销声匿迹。一群天才科学家欲研发难以驾驶的新技术。而一个古老强大的变形金刚出现并威胁着人类，决战一触即发。
				</li>
				<li>
					<a href="#">《加勒比海盗5》--（2014）</a><br>
					芝加哥一战后，汽车人、霸天虎销声匿迹。一群天才科学家欲研发难以驾驶的新技术。而一个古老强大的变形金刚出现并威胁着人类，决战一触即发。
				</li>
			</ul>
		</div>
	</body>
</html>