html和css静态网页制作
时间: 2023-07-06 22:02:45 浏览: 113
HTML和CSS是用于制作静态网页的两种核心技术。HTML(超文本标记语言)用于定义网页的结构和内容,而CSS(层叠样式表)用于定义网页的样式和布局。下面是一个简单的示例,展示如何使用HTML和CSS创建一个静态网页:
创建HTML文件:
首先,创建一个新的文本文件,并将其保存为.html文件扩展名。例如,可以将其命名为index.html。
编写HTML结构:
在HTML文件中,编写基本的HTML结构,包括<html>、<head>和<body>标签。在<head>标签内,可以设置页面的标题等元信息。
<!DOCTYPE html>
<html>
<head>
<title>My Static Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a static webpage created using HTML and CSS.</p>
</body>
</html>
添加CSS样式:
为了添加样式,可以在HTML文件中的<head>标签内添加<style>标签,并在其中编写CSS代码。可以使用选择器来选择要样式化的HTML元素,并设置相应的样式属性。
<!DOCTYPE html>
<html>
<head>
<title>My Static Webpage</title>
<style>
h1 {
color: blue;
font-family: Arial, sans-serif;
}
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a static webpage created using HTML and CSS.</p>
</body>
</html>
在上面的示例中,h1元素被设置为蓝色字体,并使用Arial字体家族,而p元素被设置为绿色字体,并具有18像素的字体大小。
保存并打开网页:
保存HTML文件并使用任何现代的Web浏览器(如Chrome、Firefox等)打开该文件。你应该能够看到带有所定义样式的静态网页。
这只是一个简单的示例,你可以根据需要使用更多HTML元素和CSS属性来创建更复杂和具有吸引力的静态网页。你还可以使用CSS布局技术来控制页面元素的位置和排列。
阅读全文