(1)以实验一创建的Pacific Trails网站为基础。创建网站的一个新版本,使用外部样式表配置颜色; (2)继续开发Pacific Trails网站,在其中集成图片;
时间: 2024-05-31 22:08:36 浏览: 10
(1) 创建新版本的Pacific Trails网站:
步骤1:创建外部样式表
创建一个新的CSS文件,将其保存在您想要放置样式表的目录中。在此示例中,我们将其命名为styles.css。在文件中,您可以添加以下代码:
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
color: #333;
}
h1, h2, h3 {
font-weight: bold;
margin-top: 20px;
}
a {
color: #0072c6;
text-decoration: none;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
font-weight: bold;
}
.container {
width: 960px;
margin: 0 auto;
}
header {
background-color: #0072c6;
color: #fff;
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.hero {
background-image: url(images/hero.jpg);
height: 400px;
background-size: cover;
background-position: center;
}
其中,我们定义了body的背景颜色,字体,以及默认文本颜色。我们还定义了标题和链接的颜色和字体,导航菜单的样式,页面容器的宽度和居中对齐,以及头部和尾部的背景颜色和样式。
步骤2:链接外部样式表到网站
现在,我们需要将样式表链接到我们的Pacific Trails网站上。在网站的<head>标签中添加以下代码:
<link rel="stylesheet" href="styles.css">
步骤3:更新HTML代码
现在,我们需要将我们的HTML代码更新为使用新的样式表。在网站的HTML代码中,将内联样式和样式标签删除,并将类添加到需要样式的元素中。例如:
<header class="hero">
<h1>Pacific Trails Resort</h1>
<p>Experience Nature in Luxury</p>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tours</a></li>
<li><a href="#">Reservations</a></li>
<li><a href="#">Specials</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="container">
<section>
<h2>Welcome to Pacific Trails</h2>
<p>...</p>
</section>
<section>
<h2>Experience Nature in Luxury</h2>
<p>...</p>
</section>
<section>
<h2>Upcoming Tours</h2>
<p>...</p>
</section>
</div>
<footer>
<p>© 2021 Pacific Trails Resort</p>
</footer>
现在,我们已经创建了一个新版本的Pacific Trails网站,它使用外部样式表来配置颜色和样式。
(2) 集成图片到Pacific Trails网站:
步骤1:添加图片到网站
首先,您需要在网站的目录中创建一个名为images的文件夹。将您想要添加到网站的图片复制到此文件夹中。在此示例中,我们将使用名为hero.jpg的图像。在您想要添加图像的位置,例如标题下面,添加以下代码:
<header class="hero">
<h1>Pacific Trails Resort</h1>
<p>Experience Nature in Luxury</p>
</header>
步骤2:更新样式表
现在,我们需要更新样式表以包含图像。在样式表中,将.hero类的背景图像更改为:
.hero {
background-image: url(images/hero.jpg);
height: 400px;
background-size: cover;
background-position: center;
}
步骤3:查看更新后的网站
现在,您已经成功将图像添加到Pacific Trails网站中。在您的浏览器中查看更新后的网站,您应该可以看到标题下面的图像。如果您想添加更多的图像,只需将它们复制到images文件夹中,并在HTML代码中添加它们的位置和样式。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)