说到旅行,相信很多人都会想到携程旅行,这个为我们提供便捷出行服务的平台,你有没有想过自己动手制作一个携程旅行的HTML页面呢?我就来教大家如何制作一个简单的携程旅行HTML页面,一起感受编程的乐趣吧!
我们需要准备好制作HTML页面的相关软件,比如Dreamweaver、Sublime Text等,选择一款自己顺手的编辑器即可,我们就正式开始制作啦!
搭建基本结构
一个HTML页面通常由三个部分组成:头部(header)、主体(body)和底部(footer),我们先来搭建一下基本结构。
创建一个新的HTML文件,输入以下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>携程旅行</title>
</head>
<body>
</body>
</html>
这里,我们定义了文档类型、HTML语言、字符编码和页面标题。
添加头部内容
我们要在头部添加导航栏、Logo和搜索框等内容。
- 修改标签内的代码,添加样式表链接:
<link rel="stylesheet" type="text/css" href="css/style.css">
这里,我们需要创建一个名为“style.css”的CSS文件,用于存放样式代码。
- 在标签内添加以下代码:
<header>
<div class="logo">
<img src="images/logo.png" alt="携程旅行">
</div>
<nav>
<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>
</ul>
</nav>
<div class="search">
<input type="text" placeholder="请输入目的地或关键词">
<button>搜索</button>
</div>
</header>
这里,我们添加了Logo、导航栏和搜索框,需要注意的是,我们要为图片添加一个“alt”属性,以便在图片无法加载时显示文字描述。
添加主体内容
主体部分,我们可以添加一些热门推荐、旅行攻略等内容。
- 在标签内添加以下代码:
<main>
<section class="recommend">
<h2>热门推荐</h2>
<div class="item">
<img src="images/recommend1.jpg" alt="推荐1">
<p>推荐1描述</p>
</div>
<div class="item">
<img src="images/recommend2.jpg" alt="推荐2">
<p>推荐2描述</p>
</div>
<!-- 更多推荐 -->
</section>
<section class="strategy">
<h2>旅行攻略</h2>
<article>
<h3>攻略1标题</h3>
<p>攻略1内容</p>
</article>
<article>
<h3>攻略2标题</h3>
<p>攻略2内容</p>
</article>
<!-- 更多攻略 -->
</section>
</main>
这里,我们添加了两个部分:热门推荐和旅行攻略,可以根据实际需求添加更多内容。
添加底部内容
我们来添加底部内容,包括版权信息、联系方式等。
- 在标签内添加以下代码:
<footer>
<p>版权所有 © 2022 携程旅行</p>
<p>联系方式:xxx-xxxxxxx</p>
</footer>
添加CSS样式
我们需要为页面添加CSS样式,让页面看起来更美观,打开“style.css”文件,输入以下代码:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background-color: #333;
padding: 10px 0;
}
logo img {
width: 120px;
height: auto;
margin: 0 auto;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
margin: 0 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
search {
text-align: center;
margin-top: 10px;
}
search input {
padding: 5px 10px;
font-size: 14px;
}
search button {
padding: 5px 10px;
font-size: 14px;
background-color: #ff7f50;
color: #fff;
border: none;
cursor: pointer;
}
main {
padding: 20px;
}
recommend, .strategy {
margin-bottom: 20px;
}
recommend h2, .strategy h2 {
font-size: 24px;
color: #333;
}
item {
display: inline-block;
margin-right: 10px;
}
item img {
width: 300px;
height: auto;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
代码就是一个简单的携程旅行HTML页面的制作过程,这只是一个基础版本,你还可以根据自己的需求进行拓展和优化,在这个过程中,你会发现自己对HTML和CSS有了更深入的了解,也为以后制作更复杂的网页打下基础,赶紧行动起来,一起感受编程的乐趣吧!

