web前端开发技术课堂笔记04

一.新建项目，项目名称mySite，路径D盘根目录下

​ 1.在“文件”中选择“新建”，选择“web项目”，在弹窗"项目名称"中输入“mySite”，位置选择D盘，点击“完成”。

二.新建样式文件，名称为style.css，并通过外部引入到主页中

​ 1.在“mySite”的web项目中，css文件夹右击，选择“新建”中的“css文件”。

​ 2.在弹窗中的，名称中输入“style”，点击“完成”按钮。

三.主页中，插入标题一、标题二和一个段落，内容自拟

1.标题一共6个，1~6；

2.段落用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
			<h1>标题一</h1>
			<h2>标题二</h2>
			<p>段落</p>
	</body>
</html>

四.设置页面背景色为淡蓝色，标题一和标题二文本颜色为橙色，段落文本颜色为红色

1.设置页面背景色为淡蓝色:在style.css文件中输入

/*设置背景颜色为蓝色*/
body{
	background-color:lightskyblue;
}

在文件中链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style02.css"/>
	</head>
	<body>
			<h1>标题一</h1>
			<h2>标题二</h2>
			<p>段落</p>
	</body>
</html>

2.标题一和标题二文本颜色为橙色，段落文本颜色为红色

<body>
			<h1 style="color: orange;">标题一</h1>
			<h2 style="color: orange;">标题二</h2>
			<p style="color: red;">段落</p>
			<a target="_blank">超链接</a>
</body>

五.新建子页，子页背景色和主页背景色一致

1.右击“mySite”，新建一个名为“sub”的HTML文件.

2.链接css文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>子文件</title>
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
	</body>
</html>

六.在主页中插入一个超级链接并设置颜色为红色

1.回到主页（index.html），输入

<a >超级链接</a>

在style.css在其后输入

a{	
	color: red;
}

按ctrl+R运行

2。假设有两个

的标题，但不同属性，只改其中一个，可以在css文件中单独修改。

<h1 hidden="hidden">hello</h1>
<h1 align="center">你好</h1>

如果只修改

的颜色，可以在css文件中输入

h1[align="center"]{
	color:red;
}

保存后，在主页也保存后，按ctrl+R运行就只有属性为align="center"]的

的标题改变颜色。

posted @ 2026-03-21 18:23  柒月份  阅读(25)  评论(1)    收藏  举报