idea制作HTML和CSS
时间: 2023-12-30 11:51:48 浏览: 80
首先,打开 IDEA 编辑器并创建一个新项目。然后,创建一个名为 index.html 的新文件,并在其中编写 HTML 代码。例如:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
```
然后,创建一个名为 style.css 的新文件,并在其中编写 CSS 代码。例如:
```css
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
font-size: 36px;
}
p {
color: #666;
font-size: 18px;
}
ul {
list-style-type: none;
}
li {
margin-bottom: 10px;
}
```
最后,将 style.css 文件链接到 index.html 文件中。这可以通过在 index.html 文件的头部中添加以下代码来完成:
```html
<link rel="stylesheet" type="text/css" href="style.css">
```
保存文件并在浏览器中打开 index.html 文件,您将看到一个简单的网页,其中包含一个标题,一些文本和一个项目列表,其样式由 CSS 文件定义。
阅读全文
相关推荐















